
A Big List of D3 Examples - biovisualize
http://christopheviau.com/d3list/
======
sakai
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.

------
jedbrown
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
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/)

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

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)

~~~
ejfox
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
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.

------
javajosh
1900 D3 examples.

1723 of them by Mike Bostock! [1]

[1] number is made up but almost certainly close.

~~~
ejfox
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)

------
elwell
Oh my... [http://www.jasondavies.com/animated-
quasicrystals/](http://www.jasondavies.com/animated-quasicrystals/)

~~~
cocoflunchy
Try this one too:
[http://www.jasondavies.com/bml/](http://www.jasondavies.com/bml/)

~~~
RaSoJo
Interesting..but made me feel pukish!

------
viggity
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
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!

------
joeblau
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
jsPlumb may be more suitable for what you want.

------
jeybalachandran
One more to the list
[https://github.com/jeyb/d3.punchcard](https://github.com/jeyb/d3.punchcard)

------
shmageggy
1171: null was my favorite.

[http://bl.ocks.org/mbostock/582781](http://bl.ocks.org/mbostock/582781)

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

------
brucehubbard
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

------
dzink
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
That does look quite cool. Would you mind saying more about it, and how the
scraper works?

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

~~~
biovisualize
This one has:
[http://christopheviau.com/d3list/gallery.html](http://christopheviau.com/d3list/gallery.html)

~~~
larrydag
or this: [http://bl.ocks.org/mbostock](http://bl.ocks.org/mbostock)

------
kbar13
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
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)

------
boothead
Any thoughts on vega?
[http://trifacta.github.io/vega/](http://trifacta.github.io/vega/)

~~~
_nate_
It's hard to beat D3... once you learn it, that it is. And it takes time to
learn.

~~~
boothead
Vega is a grammar for describing d3 from what I can see.

------
adamb_
First link I tried was dead... #48

~~~
biovisualize
Fixed. Thanks!

~~~
adamb_
Thanks for the promptness. This list is awesome.

------
photorized
D3 is awesome. We use it a lot.

------
wildmXranat
nice compilation

------
thrownaway2424
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.

