D3.js Example

D3.js has become one of the defacto frontend data visualization frameworks.  Sure enough, one can peruse the litany of examples out there to get a sense of how powerful of a visualization framework it is.  After working on several projects that utilized D3.js, a couple things became apparent:

  1. D3 is a very low-level shim that sits on top of SVG.  It’s extremely versatile and very powerful.  But not for the faint-of-heart or uninitiated; be prepared to get in the weeds.  If your JavaScript and/or SVG/graphics chops aren’t up to scratch, be prepared to drink from the firehose.
  2. Despite all the tutorials, examples, etc., out there, very few actually stitch together things that one is likely to encounter in a real world project.

To help address the latter, I put together a D3.js example project on GitHub that lays out, end-to-end, a D3.js project that addresses the following in an un-convoluted, easily accessible way.  It’s a simple, interactive Web page that shows hourly bicycle usage across Seattle’s famous Fremont bridge – using a publicly available feed, provided by the city of Seattle, courtesy of Socrata Open Data API.

Specifically, this D3.js example covers the following concepts:

  • SVG (rect)
  • Scale (d3.scale.ordinal, d3.scale.linear)
  • Axis (d3.svg.axis)
  • Transitions (delay, duration)
  • Data Join (enter/update/exit)
  • User Interactions (mouseover, mouseout)
  • Dynamic Data Updates (AJAX, REST)

Live Demo:

Pro-Tip: D3.js is super cool, but super low-level.  For common data visualization needs, you’re likely better off using one of the myriad abstraction layers available (Vega, NVD3.js) or a graphic/charting library from other well-known 3rd parties, such as Google.

Leave Reply