D3 Bind data to DOM
Load a CSV in D3 and bind the data to elements in the DOM.
Steps to bind data to DOM in D3:
- Select
HTML
elements with.select()
- Add the data with
.data()
- Bind the data to elements with
.enter()
- Append elements to the DOM with
.append()
More about rowConverter
in D3 Convert String to Date
d3.csv("file.csv", rowConverter).then(function(dataset) {
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p");
});
Loading the CSV uses then
syntax. More on D3 Load a CSV file with Promises
This is how binding data to DOM works:
- It selects the element
body
. - Then it selects all
p
elements. However, nop
elements exist yet. - Use the attribute
.data
to readdataset
. - Use
.enter()
to bind thedataset
values withp
elements - Use
.append("p")
to append thep
elements to the DOM.
Run the D3 server in Python as seen in Setup D3 Step by Step
Go to the Elements
tab to see the HTML
code. The body
section has this now:
<body>
<script type="text/javascript" src="project.js"></script>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
It created four p
tags. In the console type d3.selectAll("p");
:
Pt {_groups: Array(1), _parents: Array(1)}
_groups: [NodeList(4)]
_parents: [html]
__proto__: Object
Expand groups
_groups: Array(1)
0: NodeList(4) [p, p, p, p]
length: 1
Expand NodeList
0: NodeList(4)
0: p
1: p
2: p
3: p
Expand the first 0: p
. It’s pretty long, scroll down to the bottom:
__data__: {year: Sun Jan 01 1950 00:00:00 GMT-0500 (Eastern Standard Time), population: 5}
__proto__: HTMLParagraphElement
Expand data
:
__data__:
population: 5
year: Sun Jan 01 1950 00:00:00 GMT-0500 (Eastern Standard Time) {}
Next: D3 Drawing SVG