An Intro to D3

In 2011, developers from the Stanford Visualization Group released a new JavaScript library called D3.js. D3, which stands for Data-Driven Documents, “is a JavaScript library for manipulating documents based on data.” (https://d3js.org/). D3 is currently used widely for data visualizations across the web.

The Basics

D3 works by directly manipulating DOM elements on web pages. The basic way the library does that is by making use of selectors. Similar to other libraries such as jQuery, D3 selectors can grab elements by their class, id, or element type. This cuts down on the amount of vanilla JavaScript that is needed to manipulate browser elements.

Basic selections using D3

In the above example, the select and selectAll methods are utilized. With these selectors, we show we can directly manipulate the properties of these DOM elements. A distinction between jQuery and D3 is that element properties “can be specified as functions of data in D3, not just simple constants.” (https://d3js.org/). Above, we see that the color of the ‘h1’ element is changed to red using a function. However, the true power of these functions is that they can take in data and change properties based on that data.

In the last example above, a simple transition function of D3 is used to slowly change the background color and text color of an element. D3 has an emphasis on transitions, animations, and interaction. The transition function is just one of many built-in functions to D3 that facilitate data visualizations.

SVG

An important part of D3 is making use of SVGs, or Scalable Vector Graphics. SVGs describe “two-dimensional based vector graphics” (https://developer.mozilla.org/en-US/docs/Web/SVG). SVGs can be added to HTML files as elements, and thus can be manipulated just like another element. D3 makes use of these graphic elements in many visualizations.

The Possibilities

The possibilities seem endless with D3. As the world continues to develop around data, the field of data visualization is ever-growing and gaining more importance. Below are a few examples of visualizations from https://observablehq.com/@d3/gallery.

https://observablehq.com/@d3/streamgraph-transitions
https://observablehq.com/@d3/smooth-zooming

In Conclusion

D3 is a powerful and fun JavaScript library that allows for direct manipulation of DOM elements. D3 is fast and can support large datasets, making it a great option for creating beautiful data visualizations.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store