by

Simple Visualizations with D3plus

I’ve been using D3, a JavaScript library for data visualizations (the three ‘D’s stand for Data-Driven Documents), for my own projects and with my students for some time. It’s a particularly cool tool for working with dynamic data or information from a database and giving it life in a visual format through charts, graphs, and interactive data displays. Information visualization can be a powerful way to represent complex or otherwise inaccessible data. However, the learning curve for it is a little high, so I’ve never recommended it as an entry tool for this type of visualization.

Last week I followed Miriam Posner’s mention on Twitter to something that may change that: D3plus. D3plus is described as an extension for D3, but it’s really a simplification of the library’s at times overwhelming options and data structures to make it easy to built visualizations of data sets. For instance, the image at the top of this post is an example of simple bubble charts using only a few lines of code. Even better, most of the code is human-readable: setting up that chart requires creating a d3plus object with recognizable properties like type, depth, size, and color options. If you have a little background with JavaScript or a similar scripting language it’s very easy to pick up.

There are a lot of options for creating charts and graphs, but D3 and D3plus stand out for being particularly web-friendly. They can be integrated as part of a responsive design (with scaling options to fit on different resolution screens) or linked to a live data feed to allow for instant updating of the display without redoing the code. For a digital humanities or other project of digital scholarship, this can be very useful.

There are an incredible number of examples of cool visualizations built using D3 available on Github, which really shows the flexibility of the library. While some of those are much more complicated than what D3plus easily supports, there’s a lot of potential in the more limited vocabulary it enables.

Have you tried D3 or D3plus? Share your resources in the comments!

Return to Top