Data-Driven Documents
D3.js stands for Data-Driven Documents, a JavaScript library for dynamic, interactive data visualization.
Data-Driven Documents
D3.js was designed for more than just graphs and charts. It's also capable of presenting maps, networks, and ordered lists. It was created for the efficient manipulation of documents based on data.
D3.js makes use of Web Standards such as HTML5, CSS3, and SVG, so it is therefore designed for modern browsers.
Modules
Pros and Cons
Very popular
-
Learning curve
Selectors
Selectors are patterns to select items from the DOM
- Selections are a subclass of an array
- D3.js uses css3 selectors
- d3.select(selector) selects the first element that matches the specified selector string, returning a single-element selection
- d3.selectAll(selector) selects all elements that match the specified selector
Selectors
- d3.select('body') // selects the entire, single body of the document
- d3.select(this) // selects the referenced node in an event listener
- d3.select('#Id') // selects the element with the id of 'Id'
- d3.selectAll('.circles') // selects all elements with class 'circle'
- d3.selectAll('p') // selects all paragraph elements on a page
- d3.selectAll('div.content') // selects all divs with class 'content'
Data-join
- Data is bound to the DOM - this is called a data-join
- data([someData]) returns three virtual selections: enter, update and exit
- Enter: if there is no existing data, all data ends up as placeholder nodes in enter()
- Update: the update selection contains existing elements, bound to data
- Exit: anything left over are in the exit selection for removal
Data-join
HTML:
Renders:
Data-join
SVG:
const circle = svg.selectAll("circle").data(data);
circle.enter().append("circle").attr("r", 2.5);
circle.attr("cx", function(d) { return d.x; }).attr("cy", function(d) { return d.y; });
circle.exit().remove();
Issues: Performance Components tree DOM manipulation
DOM manipulation
Important part: D3.js should never manipulate what React is already keeping track of.
The virtual DOM keeps track of the structure, so if at any point of the React lifecycle the DOM is changed without its knowledge, it throws nasty bugs.
It consists in only using D3.js’s helpers to prepare the data, the axes, etc. and then feed all of that to React to be rendered.
No D3.js’s data binding, but handle it with React by specifying a key for all SVG elements.
Good performance overall.
Lost the enter-update-exit pattern.
It forces us to componentize the elements, so it’s easier to reuse.
It comes pretty close to mirroring the structure of the DOM, so it’s easier to keep track of what the components look like.
No entering and exiting.