DHSI - Javascript & D3 Day 4

less than 1 minute read

Published:

Notes

Review of CSS and operating on colors.

Data Binding

Connecting an array of data to a selection of elements, here svg elements.

.selectAll("circle")
.data(data) // d3 binds data to the selection into the enter selection. The elements in the data structure are bound to the elements in the selection but not yet which to which elements. Here next...
.enter() // creates a placeholder for each data point after D3 has bound the data to the selection.
.append("circle") // appends a circle to each placeholder which can then be in the svg.

data enter workflow

//Same idea for removing data points from the selection.

.selectAll("circle")
.data(data) 
// d3 binds data to the selection into the enter selection. The elements in the data structure are bound to the elements in the selection but not yet which to which elements. Here next...
.exit() 
// removes the binding of the data to the selection.
.remove()
// now completely gone.

data exit workflow