All examples By author By category About

About

D3OG is a collection of D3 examples that have been published in Github gists by various authors. These exmples were formerly aggregated within bl.ocks.org which was taken offline in December 2022.

Many of these examples are quite old, but some of the techniques and data visualization ideas they incorporate don't really exist anywhere else, so it seemed worth the effort to preserve them. Where possible I've also updated outdated and broken references to get them running again. I've also taken screenshots to create thumbnails for a great many of the examples that were missing thumbnail images.

What is D3?

D3 is a JavaScript library that allows you to manipulate documents based on data. You take a dataset, then use D3 to craft a transformation that renders markup. Most commonly this markup is SVG, but it could be anything at all. In the end, the result is a visual representation of the data.

If this sounds like a very general way to say "make a chart" that's exactly the point. The visualizations that you create with D3 aren't baked into the library. You craft a visualization from your imagination, and then use the tools that D3 provides to create it.

Once you've spent anytime working with D3 at all, you soon reailze that the real magic of D3 is in the elegance of its abstraction. Given that beauty is a natural consequence of elegance, and that love is a natural consequence of beauty, it's unsurprising that D3 is loved by many.

What was Bl.ocks.org?

Bl.ocks was a site that provided a simple wrapper around Github gists and served as a home for the many examples that Mike Bostock and others created using the D3 library. Bl.ocks.org was ultimately superceded by ObservableHQ and taken offline with little fanfare.

Mike Bostock has migrated a great many of his examples on bl.ocks to Observable and updated them to work with the latest version of D3.

What is Observable?

Observable is a startup that helps organizations understand their data by collaborating on data visualization. Observable notebooks mix data and text, employing a reactive model that allows you to easily see the effect of changes to code an inputs.

How can I learn D3?

Here are some great resources:

Mike Bostock's Three Little Circles remains the definitive introduction to unlocking the magic of D3.

The D3 graph gallery provides a straight forward introduction to the most common chart types and their variations (ignore the AdWords mess, it really is pretty well done otherwise).