Week 5 Follow-up: Data Import and Parse

Here is an optional assignment in case you’d like to familiarize yourself with data import and parse using d3. Before you start, please review the API reference for d3.csv here:

d3/d3-request

Then clone the repo for this assignment here:

viztech/2016-fall-week-6-assignment

The end goal is to draw a simple bar graph comparing the Olympic medal counts of various countries. This assignment is “optional” in the sense that you will complete the whole assignment in Week 6. Anything you do here will give you a head start.

Data Import and Parse

When you open script.js, you’ll notice the following line:

d3.csv('../data/olympic_medal_count.csv',parse,dataLoaded);

This will not work, for the simple reason that the two function arguments haven’t been defined. Your job is to import and parse the data so that it logs out in console as something like this:

[
 {
   country:'Australia',
   count1900:5,
   count1960:22,
   count2012:35
 },
 {
   ...
 }
...]

Hint

You’ll see that the object property names we’ve chosen for the post-parse data is a little different from the column names in the pre-parse data (for example, ‘count1900’ vs. ‘1900’). That is because JavaScript property names (as well as variable names) cannot begin with numbers.

For the same reason, something like this

function parse(d){
  return {
    count1900:d.1900 //WRONG!!
  }
}

will not work either. Instead, use this alternate notation

function parse(d){
return {
    count1900:d['1900']
  }
}