๐Ÿ“ˆ

D3.js Favorites

https://observablehq.com/@d3/
Data VisualizationJavaScript

A few years ago I got really into d3.js while working on some front end-heavy projects, and still love to see the awesome work shared by its community. (Observable notebooks are ๐Ÿ˜ป)

Getting started

  • https://bost.ocks.org/mike/
    • To get a feel for the power of the library, browse through these examples from the creator of d3. Prolific, educational, inspiring, there aren't enough words to describe the great output from Mike Bostock. Thanks!
    • More recent work is on Observable including this collection of Learn D3 notebooks.
  • Blocks
    • A simple way of visualizing GitHub gists. I used to search for "[chart type] bl.ocks.org" when looking for a starter.
    • Now things are moving to Observable, you can find just about anything there.
  • D3.js in Action: Data visualization with JavaScript 2nd Edition
    • I read the first edition of this book and would highly recommend it for anyone really getting into data visualization. The author does a great job of breaking down d3 concepts, walks you through plenty of examples, and grounds everything in practice. A little copy pasta might do the trick for a simple bar chart, but when you're dealing with interactivity and complex interactions, hierarchical data, or just want to feel the freedom to be really expressive, you've gotta dig in. This is a great way to get there.
  • Gates Bubbles
    • This visualization and its companion blog post opened a new set of possibilities for me at the time. (And some cool demos on my former team that never saw the light of production ๐Ÿ™) The author hosts a ton of other great posts and examples, too.
  • Covid-19 Bubble Chart
    • Another neat bubble chart. I recently spotted this example that works through a great way of organizing objects into "components".
  • SMS Analysis This project was demo'ed at a Meetup a few years (eek!) ago. It takes one's SMS from an iPhone backup and produces various visualizations.
  • Choropleth No collection would be complete without a choropleth map!
Edit this page
A collection of notes, quick references, and other ideas.