D3.js & Observable Basic Tutorial

What is D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

https://d3js.org

Basic Data Binding & DOM Manipulation

One of the objective of D3.js is to provide mechanisms that make creating visualizations of data easier. Toward that goal, D3.js provides a set of selection methods that allow us to pair up the values in a set of data points with distinct visual elements, adding and removing visual elements when necessary. Once this pairing (binding) is complete, we can modify the visual elements according to their bound data.

The d3.selection methods used to bind data to elements and retrieve data bound to elements are as follows:

selection.data([data[, key]]) - bind data to elements
selection.datum([value]) - get or set the data bound to the elements in the selection

The methods that allow us to match up the data to a set of visual elements are:

selection.enter() - get the temporary elements for the data not bound to elements
selection.merge(selection) - merge this selection with another selection
selection.exit() - get the elements that are missing data

D3.js also provides a convenience method that allows us to match up the data to a set of visual elements with a single method call:

selection.join(enter,[,update][,exit]) - a convenience method which can be used as an alternative to enter, merge and exit.

Data Selection

When using D3.js, we often bind individual data values to the visual elements in a selection and then modify the appearance of the visual elements to reflect the data. To bind data to the elements in a selection we call selection.data([data[, key]]) on the selection. The data method takes as an argument either an array of any type of data or a function.

The data used in the following example is simply an array of integers. var arr = [13, 8, 3, 2, 2];

When the data method is executed, it iterates over the elements in the array and for each data value adds a __data__ property holding the data value to one of the visual elements in the selection.

In the example below, we have a svg element that contains 5 rect elements. We’ve positioned each rectelement by setting their x and y properties, but have omitted the width attribute for each rectangle (for now), because we’d like the width of each rectangle to be dependent on the data that is bound to the element.

</svg>

When the button is pressed, we select the svg element with select, select all of the rect elements with selectAll and then call data, passing to the data method the array named arr.

d3.select("#bargraph1")

.selectAll("rect")

.data(arr) // returns the update selection

.attr("width", (d) => d * (400/13));

The data method returns a new selection, called an update selection, that contains all of the elements for which data has been joined (all 5 rect elements, in this case). We then call the attr method on the update selection to modify the width of each bar based on the data that is bound to them.

Append and Update Data with enter and exit

There are 3 different scenarios:

There are no visual elements in the selection.
There are not enough visual elements in the selection.
There are too many visual elements in the selection.

D3.js provides two selection methods named enter and exit that can be called on an update selection to help deal with these situations.

The enter method is called on an update selection and returns an enter selection that contains one pseudo-element for each data element that was not bound to a visual element by the data method. Each pseudo-element holds the data that was not bound.

To create visual elements for each pseudo-element we call append on the enter selection. In addition to creating a new visual element, append binds the data that is stored in the pseudo-elements to the newly created visual elements.

The exit method is also called on an update selection but returns a selection called the exit selection that contains all of the visual elements in the original selection that did not have data bound to them. We often call remove on the exit selection to remove the unnecessary visual elements.

function createBarGraph2() {

d3.select("#bargraph2")

.selectAll("rect")

.data(arr)

.enter()

.append("rect")

.attr("height", 10)

.attr("width", (d) => d * (400/13))

.attr("x", 0)

.attr("y", (d, i) => i * 20)

.attr("fill", "pink");

}

</script>

This code will give us a button that once you press it, it will generate these pink bars:

What is Observable

Observable is an online JavaScript/HTML notebook that you can execute and interactive with your code at real time. You can also use it to load JSON/CSV files and filter with JavaScript to see a preview of the dataset.

https://observablehq.com