I’m doing some form of data visualization learning for 180 days because I need to #JFDI. See post explaining how and why I’m doing this.
*need to start doing this first thing in the morning on weekends to get it out the way and keep up
- “One flat array of data is fine if we have just one series of data. But what if we have several series? Indeed, most visualizations have a structure and a hierarchy.
So let’s proceed with our data but now let’s assume that we want to show values for different continents as different little scatterplots (“small multiples”).
- we’ll want to add 5 “g” groups to our svg container, one for each continent,
- and then add one dots per country in each continent to those groups.
- The d3 answer to this problem is the d3.nest() set of methods.
d3.nest() turns a flat array of objects, which thanks to d3.csv() is a very easily available format, in an array of arrays with the hierarchy you need.
- This is exactly what d3.nest() does. d3.nest(), go!
With the .key() method, we are indicating what we will be using to create the hierarchy. We want to group those data by continent, so we use this syntax.
.sortKeys is used to sort the keys in alphabetical order, so our panels appear in the alphabetical order of the continents. If we omit that, the panels will show up in the order of the data (ie Oceania first as Australia is the first country). We could have avoided that by sorting the data by continent first before nesting it, but it’s easier like this.”
Reading and Learning Data Visualization Theoretically/Critically:
The Best American Infographics 2014 “Us” Section p. 64-83
- Providing a story/narrative behind every data point and annotation goes a long way p. 66
- Using lollipop charges and colors to show time p. 70
- Generally – getting too clever creates confusion -> constraints are what spurs creativity in this area