D3.js is a
JavaScript library for manipulating documents based on
data. Basically, it helps you build shapes based on
HTML, SVG, and CSS.
D3.js has been created by
Mike Bostock and its
home is here.
Why is d3
so awesome? Because it allows to build absolutely any type of
visualization, without any limits.
D3.js already has awesome dedicated resources to get code example:
a wiki, a
gallery
and the very awesome
block builder.
Moreover, thousands of
blocks are available online.
The d3 graph gallery aims to contribute to this documentation by
providing a set of simple examples.
While blocks are awesome to demonstrate the possibilities offered
by d3, it is sometimes hard to find a basic example illustrating a
single concept: this gallery hopes to fill the gap.
About 300 charts are displayed in the gallery. They are
classified in about 40 sections: the main chart types
describe in data to viz.
For each graph, the chart appears on the left at a
static position and the editable code on the right.
Playing with the code is the best way to understand how it works
IMO.
Technical details are provided under each chart, linking to
related docs. No consideration is given concerning dataviz best
practice, links toward
data to viz are provided
for this concern.
Code is extensively commented and data are stored
online. It allows to copy and paste the code in a
.html file and make it works locally.
This gallery has been built while in the process of
learning d3. It is thus imperfect, and code can probably be
optimized in many cases.
Moreover, english mistakes are frequent since I'm not a
native english speaker.
This website is entirely hosted on
github.
Submitting
issues
or
pull requests
is the best way to interact, but you can also reach me via
twitter or
mail.