Research D3

What is the D3.js

The D3.js library is used in JavaScript to manipulate documents. In other words, D3.js is used within JavaScript to use build HTML, SVG and CSS visualizations on websites Source. Various visualizations can be made with the help of this library. Think of pie charts, bar charts, scatter plots, bubble plots and much more Source.

To make a graph with d3, it can be loaded in two ways. A script tag can be placed within the html that links to the entire D3 library or only specific methods can be imported using a bundler Source.

Using a script tag:

  <script src="https://unpkg.com/d3@6.2.0/dist/d3.min.js"></script>

Using import with a bundler:

import { select } from 'd3';

Personally, I preferred to use a bundler and therefore work with the import in JavaScript. That way I don't have to load the entire library.

How the code is then written depends on how d3 is loaded into the JavaScript code. With the import no 'd3' needs to be attached in the code.

Select or Select ALL

With .select() or .selectAll() you can address elements in the DOM in D3. This is useful for selecting a svg tag in the html code to create a visualization.

Attr

With .attr() attributes can be assigned. Just think of adding a class to an element.