Due: 2016-04-11 01:45p
In class, we took a look at the baby name voyager. The Name Voyager supports two activities, comparing names that start with the same prefix, and looking at how the popularity of a name has waxed and waned over time. It does not, however, allow us to compare the popularity of a couple of names together. Since the scale changes to fit the available information, an unpopular name and a very popular name looks the same when we filter down to them. You are going to write a new version that is primarily concerned with popularity comparisons. There will be a number of components that you will need to build and the styling will be left up to you.
The main view will be a line chart that shows the popularity of the current selection of names over time. The chart should be scaled to just fit the most popular name. The lines should support tooltips, which report the name associated with the line, the gender, and any other data you think useful. Each line should have a unique color (hopefully you found the d3.scale.category# scales – use those or color brewer).
You will need a text box to enter in names and a button to add the name. In addition, you will need to have radio buttons to chose Male, Female, or Both. Our dataset comes from baby name registrations when they are issued Social Security numbers. Not only do we have names like Dana or Kerry where we might expect to find a gender mix, you will find that even names like Christopher and Mary have been applied to both male and female babies (nothing to do with gender identies – these are babies we are talking about…).
You should only support adding up to ten different names. After ten, reject any attempts to add new names until some names have been removed. You are welcome to do this via error messages (e.g., alert() or a message in the HTML when the attempt is made), or by just disabling the control.
Rather than using d3.legend, you are going to create a separate widget for the key. This should just be a list of names and the associated colors. You should include the gender with the name. This is probably best done in HTML, but as we have seen you can manipulate HTML with D3 just like SVG. The key should also have a control to remove the name from the set of names being visualized.
To give you practice with the brush, I would like you to create an additional view that gives us control over the time scale of the main view. This should essentially be a freestanding axis with no associated visualization that lists the years for which we have data. The user should be able to select a region of the time line and have the main view update its x-axis to display just the selected period of time.
For your data, you will be using my local copy of the baby name data.
This has many 1.7 million records. You will want to nest this so that all records of a particular name are grouped. As a hint, you can provide multiple calls to key() and your data will be nested hierarchically. I suggest nesting on Name and then Gender. I also suggest using map() (with d3.map as the type) instead of entries() as it will yield a map data structure that can be queried (e.g., nestedData.get('Mary').get('M') will get you the list of men called Mary through the years if you set the keys up the way I suggested).
Rather than trying to visualize the entire set of names, you should maintain a second array containing just the data you are visualizing . When you extract a set of records matching a name and gender, you can dump it in your second array and rerun your visualization code to redraw the lines. To make your life easier, you might wrap the array of records you get with the above query in an object and give it name and gender properties before putting it in your second array.
| Points | Feature |
|---|---|
| 15 | Drawing of the main view (lines, scale, enter/exit sets working) |
| 5 | Tooltips |
| 5 | Names can be added, gender seperation is supported |
| 5 | Key properly displays names |
| 5 | Names can be removed |
| 10 | Timeline with selection brush |
We will return to working in pairs for this assignment. Again, you should be working pair programming style, not splitting up the work. Let me know if you are having trouble with your partner assignment.
Please call your HTML file hw6.html and submit it file on Moodle.