Aug 8, 2021
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.
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.
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.
