Due: 2016-03-21 01:45p
[2 points] Take a look at the visualization in this article from the Wall Street Journal. While it is a simple histogram, it is not entirely honest. What is the problem?
[5 points] Here is a visualization from boxofficequant.com. Critique it. [Note that I said critique, not criticize. I am not saying if this is good, bad or somewhere in between. I want you to look at it with a critical eye and point out what works, what doesn’t, and, where relevant, how you would address any issues.]
[5 points] Repeat for the visualizations here: http://elections.nytimes.com/2010/results/house/exit-polls.
[5 points] And again for http://www.nytimes.com/interactive/2016/03/02/us/super-tuesday-results-delegates.html
Create a line chart of the Orange dataset that maps age to circumference. The graph should have a line per tree, each measured data point should be marked with a dot, the axes should be labeled and you must have a legend showing which tree corresponds to each color.
We have not talked about line charts, but they aren’t terribly more complex than bar charts and scatterplots. Lines in SVG are created using paths. Conceptually, we think of multi-segment lines as being a list of points, but paths are more involved than that. They actually contain a list of commands that can be as simple as “draw a line from A to B”, but can also jump to other locations without leaving a mark, or draw complex curves (think of it a bit like the turtle in Python). All of these commands get stuffed into the d attribute of the path object (this has nothing to to with the d we use as an argument to all of our anonymous functions in D3).
To help us out, D3 provides a line() function that generates a path for us given an array of data. We supply the function for determining where our points of interest are, and it handles the creation of the path commands. There are even different interpolation functions to create smoother lines, making use of various spline functions (however, I urge you to stick with linear interpolation for our small scale visualizations so you don’t imply knowing more data points than you really do).
Here is a very simple example:
var dataset = [5,7,15,2,4,1,22,25,28,21];
var xScale = d3.scale.linear().range([0,width],.1).nice().domain([0,dataset.length]);
var yScale = d3.scale.linear().range([height, 0]).nice().domain([0,d3.max(dataset)]);
// create the line function
var line = d3.svg.line()
.x(function(d,i) { return xScale(i); })
.y(function(d) { return yScale(d); });
// create the SVG path object and pass it the line for calculating the commands
chart.append("path")
.datum(dataset)
.attr("class", "line")
.attr("d", line);
Note that we treat the line as a single entity. We append it to the chart and throw our whole list at it in one chunk (.datum() works like .data(), but doesn’t do the join operation to create the enter and exit selections – it is a pure binding). We then set the d attribute using the line function. Note that we are passing a function, just as we have been before, it just isn’t anonymous this time.
Of course, the orange dataset has data about multiple trees, so we will want multiple lines. You will want to take some time learning about d3.nest(). I also want to see a legend. Unfortunately, D3 rather lets us down here. You can build one yourself (it isn’t terribly hard), or you can use an auxiliary library like d3-legend or d3.legend.
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.
I would like your work handed in as two files. The evaluations should be turned in as a PDF file. The second should be an HTML file called hw5_lines.html.
Please submit the two files on Moodle.