Ugh, I clicked a few of the earthquake examples (did a similar viz in the past) and saw that none of them was working.<p>Then looking at the curl responses one gets, "Due to the Federal government shutdown, usgs.gov and most associated web sites are unavailable. Only web sites necessary to protect lives and property will be maintained."<p>One can only wish they saw these and similar APIs as important infrastructure that needs to remain functional.<p>Otherwise -- this is very helpful! Thanks so much for assembling the collection.
When I need to make graphics for research talks, I usually turn to TikZ [1] since I currently make talks using latex-beamer. But I'm always impressed when I look at D3.js and I think it would be great to have a more reliable way to add animations, as well as putting interactive content on my website.<p>Given that LaTeX math is important to me, should I make a serious effort to learn D3.js (and one of the HTML slide deck packages) or stick with LaTeX? Note that figures usually can't be directly reused between talks and papers anyway, but a modest amount of tweaking is usually enough. Using HTML/D3.js instead of latex-beamer for talks would probably make reuse in talks more difficult.<p>[1] <a href="http://texample.net/tikz/" rel="nofollow">http://texample.net/tikz/</a>
It's interesting that some of the NYT visualizations are static graphics that normally, back in the print-only days, been done in Illustrator. Here's a map of Chicago killings done by Mike Bostock et al:<p><a href="http://www.nytimes.com/interactive/2013/01/02/us/chicago-killings.html" rel="nofollow">http://www.nytimes.com/interactive/2013/01/02/us/chicago-kil...</a><p>I wonder if making static charts via D3js has some time-savings/production advantages when the dataset is large enough? Before you say "maybe they just wanted vector graphics that worked for high-res"...that's obviously a benefit, but not enough on its own to give the web devs a graphic that could've been done via the traditional means (many of the Times stories include static graphics as PNGs in the sidebar)
very cool, christophe, thanks for taking the time to compile this list.<p>The one thing that always astounds me about people who generate dataviz with d3 is that they almost never do anything interactive with it (filter, zoom, etc) and if they do, they won't use any of d3's insanely cool/easy transitions to make the visualization smoothly morph from one state to the next.<p>Really, if you're going to start messing around with d3, read about Mike Bostock's thoughts on change blindness and object constancy.<p><a href="http://bost.ocks.org/mike/constancy/" rel="nofollow">http://bost.ocks.org/mike/constancy/</a><p>amazing example 1:
<a href="http://bl.ocks.org/mbostock/1256572" rel="nofollow">http://bl.ocks.org/mbostock/1256572</a><p>cool example 2:
<a href="http://bl.ocks.org/mbostock/3808234" rel="nofollow">http://bl.ocks.org/mbostock/3808234</a>
Does anyone know if there is a good D3 example of something like noflo [1]? Most of the graphs D3 has are great for data visualization but not as helpful if you're trying to build a system for interaction between nodes that you don't want bouncing all over the place.<p>[1] - <a href="http://noflojs.org/dataflow-noflo/demo/" rel="nofollow">http://noflojs.org/dataflow-noflo/demo/</a>
Had some traffic to my site from random places in the world (Brazil, Sweden, India) and had no clue where it was coming from until I saw this thread in my twitter feed. Mine is the Facebook Mutual Friends one.<p>You could also check out my slides from one of my d3 talks (with interactive examples):<p>notacog.com/d3/slideshow
They forgot mine!
<a href="http://www.doerhub.com/of/dzink" rel="nofollow">http://www.doerhub.com/of/dzink</a><p>D3 based profile visualization of interests and stages of needs in each field.<p>More about what it means here: <a href="http://www.doerhub.com" rel="nofollow">http://www.doerhub.com</a>
The title is a bit more literal than I hoped.<p>Opened link, saw huge list of text links, closed.<p>You know, it would be cool if the list of d3 examples was itself a cool interface powered by d3.
Timely! I've been searching for "Zoomable Sunburst" but was unable to find it. If it's "a treemap, except it uses a radial layout" why don't they call it a radial treemap, instead of a sunburst?<p>Anyway, recall problems aside, this gallery is fantastic.