D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. As a trivial example, you can use D3 to generate a basic HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.The creators of d3.js provide examples for creating a wide variety of static and interactive charts. In this note, I'll recreate a few basic charts using d3, and in the process provide a few more examples that might help you learn this elegant but relatively new package. I intend to update this document whenever I come across a chart that I think would be interesting to see in d3.
D3 is not a traditional visualization framework. Rather than provide a monolithic system with all the features anyone may ever need, D3 solves only the crux of the problem: efficient manipulation of documents based on data. This gives D3 extraordinary flexibility, exposing the full capabilities of underlying technologies such as CSS3, HTML5 and SVG. It avoids learning a new intermediate proprietary representation. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. And, for those common needs, D3's functional style allows code reuse through a diverse collection of optional modules.
July/2011 blog post on stalled budget negotiations in the US, came with a bar chart that placed Obama's proposed tax increases and spending cuts, alongside those recent presidents. In the chart below, maroon bars represent budget cuts (% share of total budget deal), while blue bars represent tax increases. I didn't have access to the raw data, so the chart below is based on eyeballing the values in the original bar chart. Since the chart relies on very few data points, I just hard-coded the data. (For a similar example, see my Decision 2012 page.)
From 1980-present, there is a clear upward trend in the share of income belonging to both the Top 1% and Top 5% wealthiest households.
Horizontal Axis => Murders per 100,000 population Vertical Axis => Burglaries per 100,000 population Bubble Size => State Population Bubble color ("Red states, Blue states") => Political classification of each state into Red / Blue / Purple.
Below is an example of such a chart. Data is from the Dow Jones / Credit Suisse Hedge Fund Indices, and are the statistics for the monthly (percentage) returns from Jan/2006 to Aug/2011. As you can see, it's very easy to pick out highly-volatile trading styles -- simply look at the width of the bars! For another example, see the following chart from my page on Decision 2012.
Over the most recent quarter, combined revenue from iPhones and iPads exceeded $19 Billion! iPod revenues are relatively smaller, although there is a noticeable spike during the Christmas Holidays (Q1 of Apple's fiscal year).
... under Mr. Bush, tax cuts and war spending were the biggest policy drivers of the swing from projected surpluses to deficits from 2002 to 2009. Budget estimates that didn't foresee the recessions in 2001 and in 2008 and 2009 also contributed to deficits. Mr. Obama's policies, taken out to 2017, add to deficits, but not by nearly as much.In my d3 rendition of the graphic, I didn't quite capture all the subtle features: for example I didn't actually format font elements in different sections, as the NY Times did. But I was surprised how quickly one can create "magazine-style" graphics like this in d3. (I have a similar graphic -- on the Buffett Tax Rule -- on my Decision 2012 page.)
infographic from the Economist. I don't usually use this type of chart to represent inequality or concentration. But seeing the markers displayed along with the Gini Coefficients of the corresponding counties, piqued my interest. The smaller the distance between the markers (which usually corresponds to a lower share of the top 20%), the lower the Gini Coefficient.
In my d3 rendition, I didn't use the blue background used by the Economist, and I also didn't stylize the font elements. (For another example of a Dot Plot, see my Decision 2012 page.)
Below is what histograms of a variable look like for three distinct values of the country variable (these conditional distributions use fake data). For "special effects", I added a transition element, which you see in action if you reload the page by clicking on the reload button below:
You'll notice that relative to their population size, smaller states have a larger share of electoral votes. (Use the buttons below to toggle back and forth between the two "views".)
Electoral Votes: Size (number of electoral college votes), Color (year-over-year change in unemployment rate from Jun/2010 to Jun/2011; green corresponds to an improvement/decrease, red corresponds to a worsening/increase)
Population: Size (state population), Color (current classification as a Red / Blue / Purple state)
In the chart below, I tried to do both. The data set was big enough, that in order to get a bar chart "effect" for the bottom graph, I only drew bars twice a year (otherwise the bars would be too thin or appear as an area chart).
I highlighted the two terms of Reagan and Clinton, as well as the 4-month period prior to November of their re-election years. Notice that under Reagan unemployment surged close to 11%, but by the time he ran for re-election, unemployment was falling and hovered around 7.5%. Under Clinton unemployment trended down, and during his re-election campaign it was around 5.2%. I also higlighted the period during the re-election campaigns of Bush I & II. Clinton's predecessor (Bush I) ran at a time when unemployment had just peaked. In contrast Bush II ran for re-election when unemployment was around 5.5%.
If recent trends continue, Obama's re-election prospects look good.
NOTE: Reproduction & reuse allowed under Creative Commons Attribution.