11 ms·

A Big List of D3 Examples

333 points by biovisualize 13y ago

danso 13y ago
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: http://www.nytimes.com/interactive/2013/01/02/us/chicago-killings.html http://www.nytimes.com/interactive/2013/01/02/us/chicago-kil... 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)
- coryfklein 13y ago
  For a second I thought these were killings done by Mike Bostock...
  - SubMachinePun 13y ago
    I guess that explains the recent decline of HighCharts and Fusion Tables users...
- mhw 13y ago
  I think you're right that there's a quantity of data where using D3.js will start to be more productive than doing it manually in something like Illustrator. It's an instance of a trade off that we're all familiar with: at what point is it worth building a tool instead of doing the task manually? It's also worth bearing in mind that the point where it makes sense to use a tool is reached more quickly with proficiency in the tool - if you have Mike Bostock working for you I imagine most visualisations will be easier to produce with D3.js! I think the other significant aspect is the speed of iteration. In my experience, producing good visualisations takes lots of iteration and those can take a lot of time if you have to alter each data item by hand. I've often reverted to paper and sketched out a revision that's way a few times before going back to the drawing program. I think it's likely that it's much quicker to iterate using D3.js (in the right hands).
- ejfox 13y ago
  It's important to factor in the importance of reusability. When someone makes a D3 visualization, it is infinitely reusable and hackable. So next time you want to make a map of killings in Chicago, you have it ready to go, and you just plug in the data, rather than having someone re-make it by hand. When you're a news organization, where speed is obviously of the essence, this investment has to be a no-brainer. As Bostock's incredible skill is deployed on a variety of visualization problems, the New York Times builds a library of visualizations and templates that they can use for the foreseeable future, as long as the data is in the same format. That is incredibly valuable.
  - toomuchtodo 13y ago
    I work for a web news network startup, and I'm hacking together D3 visualizations specifically because they're reusable. We're based in Chicago, and plan on doing crime segments, and my visualization will take public CPD crime stats, display them (hopefully beautifully), and then encode them with ffmpeg for web video.
- dnprock 13y ago
  Back in the days, people used to draw graphic by hand. Then, tools like Illustrator help automate the creation of graphic. Vector graphic libraries are going to disrupt the landscape. It is starting out as artisan tool for programmers to build data visualization. Overtime, we'll have reusable templates/components that speed up the creation process and reduce cost. Christophe's list is awesome. I reference it quite a bit :) At some point, creating vector graphic will be just as fast as creating static graphic. Plus, much more flexibility. My team is tinkering with such idea with http://vida.io http://vida.io. Here's a little demo video: http://www.youtube.com/watch?v=1_LDH1T1D1Y http://www.youtube.com/watch?v=1_LDH1T1D1Y
viggity 13y ago
very cool, christophe, thanks for taking the time to compile this list. 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. Really, if you're going to start messing around with d3, read about Mike Bostock's thoughts on change blindness and object constancy. http://bost.ocks.org/mike/constancy/ http://bost.ocks.org/mike/constancy/ amazing example 1: http://bl.ocks.org/mbostock/1256572 http://bl.ocks.org/mbostock/1256572 cool example 2: http://bl.ocks.org/mbostock/3808234 http://bl.ocks.org/mbostock/3808234
- bunkat 13y ago
  My swimlane chart made the list (http://bl.ocks.org/bunkat/1962173 http://bl.ocks.org/bunkat/1962173) and it includes panning and zooming functionality as another example. Be warned, it's pretty ugly looking!
adamb_ 13y ago
First link I tried was dead... #48
- oscilloscope 13y ago
  http://www.atlas.cid.harvard.edu/aidxp http://www.atlas.cid.harvard.edu/aidxp
- biovisualize 13y ago
  Fixed. Thanks!
  - adamb_ 13y ago
    Thanks for the promptness. This list is awesome.
tieTYT 13y ago
I wish this had thumbnails of the link I will be redirected to. Still a good list though.
- biovisualize 13y ago
  This one has: http://christopheviau.com/d3list/gallery.html http://christopheviau.com/d3list/gallery.html
  - larrydag 13y ago
    or this: http://bl.ocks.org/mbostock http://bl.ocks.org/mbostock
kbar13 13y ago
The title is a bit more literal than I hoped. Opened link, saw huge list of text links, closed. You know, it would be cool if the list of d3 examples was itself a cool interface powered by d3.
- mcintyre1994 13y ago
  Not sure if it's been added since your comment, but there's a link to explore an interactive version on the page. It goes here: http://christopheviau.com/d3list/gallery.html http://christopheviau.com/d3list/gallery.html
sakai 13y ago
Ugh, I clicked a few of the earthquake examples (did a similar viz in the past) and saw that none of them was working. 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." One can only wish they saw these and similar APIs as important infrastructure that needs to remain functional. Otherwise -- this is very helpful! Thanks so much for assembling the collection.
wbogg 13y ago
everyone can make $50 to 80 per hr....if you work on your free time you actually will make a lots of money it depends on you how much you work.. just read carefully starts to end...here info big57.com
boothead 13y ago
Any thoughts on vega? http://trifacta.github.io/vega/ http://trifacta.github.io/vega/
- _nate_ 13y ago
  It's hard to beat D3... once you learn it, that it is. And it takes time to learn.
  - deleted 13y ago
    [deleted]
  - boothead 13y ago
    Vega is a grammar for describing d3 from what I can see.
thrownaway2424 13y ago
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? Anyway, recall problems aside, this gallery is fantastic.
shmageggy 13y ago
1171: null was my favorite. http://bl.ocks.org/mbostock/582781 http://bl.ocks.org/mbostock/582781
- martininmelb 13y ago
  I ran it through an html checker (http://validator.w3.org/check http://validator.w3.org/check) and got 3 Errors and 4 Warnings.
photorized 13y ago
D3 is awesome. We use it a lot.
jeybalachandran 13y ago
One more to the list https://github.com/jeyb/d3.punchcard https://github.com/jeyb/d3.punchcard
javajosh 13y ago
1900 D3 examples. 1723 of them by Mike Bostock! [1] [1] number is made up but almost certainly close.
- ejfox 13y ago
  You can actually see that Bostock is "only" responsible for 698: http://christopheviau.com/d3list/gallery.html#author=all http://christopheviau.com/d3list/gallery.html#author=all
- arthurgibson 13y ago
  Pretty good one from @whichlight Reddit Network Vis with D3: https://github.com/whichlight/reddit-network-vis https://github.com/whichlight/reddit-network-vis
- granttimmerman 13y ago
  [1] 682 are by mbostock (to be accurate)
wildmXranat 13y ago
nice compilation
dzink 13y ago
They forgot mine! http://www.doerhub.com/of/dzink http://www.doerhub.com/of/dzink D3 based profile visualization of interests and stages of needs in each field. More about what it means here: http://www.doerhub.com http://www.doerhub.com
- doomtoast 13y ago
  That does look quite cool. Would you mind saying more about it, and how the scraper works?
elwell 13y ago
Oh my... http://www.jasondavies.com/animated-quasicrystals/ http://www.jasondavies.com/animated-quasicrystals/
- cocoflunchy 13y ago
  Try this one too: http://www.jasondavies.com/bml/ http://www.jasondavies.com/bml/
  - RaSoJo 13y ago
    Interesting..but made me feel pukish!
jedbrown 13y ago
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. 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. [1] http://texample.net/tikz/ http://texample.net/tikz/
- chairmankaga 13y ago
  I was able to pick up D3 fairly quickly and I love it. Dashing d3 [1] was a great starting off point, but nothing beats looking through a ton of live examples. [1] https://www.dashingd3js.com/ https://www.dashingd3js.com/
joeblau 13y ago
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. [1] - http://noflojs.org/dataflow-noflo/demo/ http://noflojs.org/dataflow-noflo/demo/
- aheilbut 13y ago
  jsPlumb may be more suitable for what you want.
brucehubbard 13y ago
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. You could also check out my slides from one of my d3 talks (with interactive examples): notacog.com/d3/slideshow

333 points by biovisualize 13y ago

danso 13y ago

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: http://www.nytimes.com/interactive/2013/01/02/us/chicago-killings.html http://www.nytimes.com/interactive/2013/01/02/us/chicago-kil... 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)

coryfklein 13y ago
For a second I thought these were killings done by Mike Bostock...
- SubMachinePun 13y ago
  I guess that explains the recent decline of HighCharts and Fusion Tables users...
mhw 13y ago
I think you're right that there's a quantity of data where using D3.js will start to be more productive than doing it manually in something like Illustrator. It's an instance of a trade off that we're all familiar with: at what point is it worth building a tool instead of doing the task manually? It's also worth bearing in mind that the point where it makes sense to use a tool is reached more quickly with proficiency in the tool - if you have Mike Bostock working for you I imagine most visualisations will be easier to produce with D3.js! I think the other significant aspect is the speed of iteration. In my experience, producing good visualisations takes lots of iteration and those can take a lot of time if you have to alter each data item by hand. I've often reverted to paper and sketched out a revision that's way a few times before going back to the drawing program. I think it's likely that it's much quicker to iterate using D3.js (in the right hands).
ejfox 13y ago
It's important to factor in the importance of reusability. When someone makes a D3 visualization, it is infinitely reusable and hackable. So next time you want to make a map of killings in Chicago, you have it ready to go, and you just plug in the data, rather than having someone re-make it by hand. When you're a news organization, where speed is obviously of the essence, this investment has to be a no-brainer. As Bostock's incredible skill is deployed on a variety of visualization problems, the New York Times builds a library of visualizations and templates that they can use for the foreseeable future, as long as the data is in the same format. That is incredibly valuable.
- toomuchtodo 13y ago
  I work for a web news network startup, and I'm hacking together D3 visualizations specifically because they're reusable. We're based in Chicago, and plan on doing crime segments, and my visualization will take public CPD crime stats, display them (hopefully beautifully), and then encode them with ffmpeg for web video.
dnprock 13y ago
Back in the days, people used to draw graphic by hand. Then, tools like Illustrator help automate the creation of graphic. Vector graphic libraries are going to disrupt the landscape. It is starting out as artisan tool for programmers to build data visualization. Overtime, we'll have reusable templates/components that speed up the creation process and reduce cost. Christophe's list is awesome. I reference it quite a bit :) At some point, creating vector graphic will be just as fast as creating static graphic. Plus, much more flexibility. My team is tinkering with such idea with http://vida.io http://vida.io. Here's a little demo video: http://www.youtube.com/watch?v=1_LDH1T1D1Y http://www.youtube.com/watch?v=1_LDH1T1D1Y

viggity 13y ago

very cool, christophe, thanks for taking the time to compile this list. 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. Really, if you're going to start messing around with d3, read about Mike Bostock's thoughts on change blindness and object constancy. http://bost.ocks.org/mike/constancy/ http://bost.ocks.org/mike/constancy/ amazing example 1: http://bl.ocks.org/mbostock/1256572 http://bl.ocks.org/mbostock/1256572 cool example 2: http://bl.ocks.org/mbostock/3808234 http://bl.ocks.org/mbostock/3808234

bunkat 13y ago
My swimlane chart made the list (http://bl.ocks.org/bunkat/1962173 http://bl.ocks.org/bunkat/1962173) and it includes panning and zooming functionality as another example. Be warned, it's pretty ugly looking!

adamb_ 13y ago

First link I tried was dead... #48

oscilloscope 13y ago
http://www.atlas.cid.harvard.edu/aidxp http://www.atlas.cid.harvard.edu/aidxp
biovisualize 13y ago
Fixed. Thanks!
- adamb_ 13y ago
  Thanks for the promptness. This list is awesome.

tieTYT 13y ago

I wish this had thumbnails of the link I will be redirected to. Still a good list though.

biovisualize 13y ago
This one has: http://christopheviau.com/d3list/gallery.html http://christopheviau.com/d3list/gallery.html
- larrydag 13y ago
  or this: http://bl.ocks.org/mbostock http://bl.ocks.org/mbostock

kbar13 13y ago

The title is a bit more literal than I hoped. Opened link, saw huge list of text links, closed. You know, it would be cool if the list of d3 examples was itself a cool interface powered by d3.

mcintyre1994 13y ago
Not sure if it's been added since your comment, but there's a link to explore an interactive version on the page. It goes here: http://christopheviau.com/d3list/gallery.html http://christopheviau.com/d3list/gallery.html

sakai 13y ago

Ugh, I clicked a few of the earthquake examples (did a similar viz in the past) and saw that none of them was working. 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." One can only wish they saw these and similar APIs as important infrastructure that needs to remain functional. Otherwise -- this is very helpful! Thanks so much for assembling the collection.

wbogg 13y ago

everyone can make $50 to 80 per hr....if you work on your free time you actually will make a lots of money it depends on you how much you work.. just read carefully starts to end...here info big57.com

boothead 13y ago

Any thoughts on vega? http://trifacta.github.io/vega/ http://trifacta.github.io/vega/

_nate_ 13y ago
It's hard to beat D3... once you learn it, that it is. And it takes time to learn.
- deleted 13y ago
  [deleted]
- boothead 13y ago
  Vega is a grammar for describing d3 from what I can see.

thrownaway2424 13y ago

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? Anyway, recall problems aside, this gallery is fantastic.

shmageggy 13y ago

1171: null was my favorite. http://bl.ocks.org/mbostock/582781 http://bl.ocks.org/mbostock/582781

martininmelb 13y ago
I ran it through an html checker (http://validator.w3.org/check http://validator.w3.org/check) and got 3 Errors and 4 Warnings.

photorized 13y ago

D3 is awesome. We use it a lot.

jeybalachandran 13y ago

One more to the list https://github.com/jeyb/d3.punchcard https://github.com/jeyb/d3.punchcard

javajosh 13y ago

1900 D3 examples. 1723 of them by Mike Bostock! [1] [1] number is made up but almost certainly close.

ejfox 13y ago
You can actually see that Bostock is "only" responsible for 698: http://christopheviau.com/d3list/gallery.html#author=all http://christopheviau.com/d3list/gallery.html#author=all
arthurgibson 13y ago
Pretty good one from @whichlight Reddit Network Vis with D3: https://github.com/whichlight/reddit-network-vis https://github.com/whichlight/reddit-network-vis
granttimmerman 13y ago
[1] 682 are by mbostock (to be accurate)

wildmXranat 13y ago

nice compilation

dzink 13y ago

They forgot mine! http://www.doerhub.com/of/dzink http://www.doerhub.com/of/dzink D3 based profile visualization of interests and stages of needs in each field. More about what it means here: http://www.doerhub.com http://www.doerhub.com

doomtoast 13y ago
That does look quite cool. Would you mind saying more about it, and how the scraper works?

elwell 13y ago

Oh my... http://www.jasondavies.com/animated-quasicrystals/ http://www.jasondavies.com/animated-quasicrystals/

cocoflunchy 13y ago
Try this one too: http://www.jasondavies.com/bml/ http://www.jasondavies.com/bml/
- RaSoJo 13y ago
  Interesting..but made me feel pukish!

jedbrown 13y ago

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. 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. [1] http://texample.net/tikz/ http://texample.net/tikz/

chairmankaga 13y ago
I was able to pick up D3 fairly quickly and I love it. Dashing d3 [1] was a great starting off point, but nothing beats looking through a ton of live examples. [1] https://www.dashingd3js.com/ https://www.dashingd3js.com/

joeblau 13y ago

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. [1] - http://noflojs.org/dataflow-noflo/demo/ http://noflojs.org/dataflow-noflo/demo/

aheilbut 13y ago
jsPlumb may be more suitable for what you want.

brucehubbard 13y ago

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. You could also check out my slides from one of my d3 talks (with interactive examples): notacog.com/d3/slideshow