Data
D3 gives us a function called data. The data function operates on a selection and receives an array of information. It then maps each element in the array to the elements in the selection array.
Each element in the selection gains a new attribute called data. This attribute is added directly to the DOM node, not as an HTML5 data attribute.
%aside.box
Data is stored on the DOM node
The data is stored as an attribute of the DOM node object, not as a data attribute in the html. You will need to use the inspector to see it.
Given html like this:
<div class="graph">
<div></div>
<div></div>
<div></div>
</div>
The following JavaScript will add a an attribute called data to each div node. This will not be visible on the page, you’ll need to use your inspector to inspect the DOM node itself.
d3.select(".graph").selectAll("div").data([1, 2, 3]);
Note that there are three divs and three elements in the data array. The first div gets data:1, the second data:2 and the third data:3.
‘Aha’ I can hear you asking, ‘What happens if there are more divs than data, or vice versa?‘. All in good time.
Attributes from data
After we have bound data to a node we can access it in various ways. Let’s set an attribute.
We can receive this in a function, and use the return value of the function as the value of the attribute.
Here we use the style function to set a style attribute. Notice that we have passed a function as the second parameter to the .style() function. This function receives the bound data, and also i, which is an iterator.
d3.select(".graph")
.selectAll("div")
.data([1, 2, 3])
.style("width", function (data, i) {
return data * 100 + "px;";
});
This will give us a page like this:
<div class="graph">
<div style="width:100px"></div>
<div style="width:200px"></div>
<div style="width:300px"></div>
</div>
Text
We can also create text elements from data, again by receiving a function. This function can receive data, and also i which is the current iterator.
d3.select(".graph")
.selectAll("div")
.data([4, 5, 6])
.text(function (data, i) {
return i + " : " + data;
});
This will give us a page like this:
<div class="graph">
<div>1: 4</div>
<div>2: 5</div>
<div>3: 6</div>
</div>
Exercise
Start with html like this:
<div class="graph">
<div></div>
<div></div>
<div></div>
</div>
use data like this:
let data = [10, 60, 25];
- Select the divs using selectAll().
- Bind the data to the selection using data().
- Check in your inspector, see if you can find the data on the element.
- Use the style() function to set a width on the elements based on the bound data. You will not need to do any work to make this happen, just pass a function to the style function, have it receive data, and return a width.
- Use the text() function to set text.
Your final chart should look something like this:
%div{ style: ‘padding:10px; width:10%; margin:1px 0; color:white; background:red’} 10% %div{ style: ‘padding:10px; width:60%; margin:1px 0; color:white; background:red’} 60% %div{ style: ‘padding:10px; width:35%; margin:1px 0; color:white; background:red’} 35%
Further Exercise - Sorting
Your data will look nice if it is sorted. Read up on Array sorting here:
https://github.com/mbostock/d3/wiki/Arrays
Create a larger data set by typing random numbers, now use the array sort method to sort the data prior to display
Very cool.