D3.js Best Practices, Guidelines, and FAQs

This page contains helpful information regarding the JavaScript library D3.js.

Frequently Asked Questions

---

1. What is D3.js and where's the best place to learn about it?

D3.js is a JavaScript library for manipulating documents based on data. You can learn about it initially from the main website or visit this multi-page tutorial found here that gives you step by step instructions on how to get setup and how to use different features of D3.js.

2. D3 says it depends on SVG. What is SVG, and how is it related to the DOM? Do I need to use an HtmlCanvas?

SVG stands for Scalable Vector Graphics and is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG is just another HTML element that is defined in the DOM. HtmlCanvas is not needed when developing SVGs.

3. I want to apply some styling to a visualization statically (i.e., not connected to the values of the data). Should I use CSS for that? Or should I do that directly with D3?

With D3, you can actually add styling to a selection by using the "style" operator. The "style" operator can be used both with and without being connected to the values of the data. For a simple explanation of the "style" operator in D3, click here.

4. I have some data I want to display as a table with sortable data, and maybe do things like interact with the data by hovering over it. Is this the sort of thing I could do with D3?

Yes, this is still possible with D3. It's a matter of using the "on" operator to implement functionality such as hovering and sorting.

5. How do I make sure that when my data changes, the visualization will update?

As long as .data() is called after the data array is updated, D3 knows which elements already exist and only adds the new elements to the visualization.

6. Does D3 work with ES6? Like, can I use an ES6 collection class to populate a D3 visualization?

The key to populating a visualization in D3 is to make sure the .data() operation is passed an array. This array can be an array of numbers, objects, strings, arrays, HTML Elements, DOM Elements, etc. This would mean that it could work with ES6 collection classes such as Set, WeakSet, Map, and WeakMap.