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