D3 Data

Tutorial

D3 stands for Data Driven Documents. But what does that mean? For one thing, it means you can join data to your document, and use the "joined" data to create and manipulate document elemets.

Three big ideas

You create elements in your document from your data points
Your data changes, so you need a way to change your document elements based on the change
When data changes, each data point can either stay the same, be new, or no longer exist. You need a way to handle all three scenarios.

In this lab we'll talk about creating elements based on data, the next two items will be covered in the next lab.

Creating elements based on data

D3 data is simply items in an array. Here are some examples of data:

var numberOfBatteriesRequired = [1,5,7,10];

var averageAgeOfPeopleWithName = 
                   [ {name: "Susanna", age: 36}, 
                     {name: "Bill", age: 50}, 
                     {name: "Bella", age: 14}, 
                     {name: "Edward", age: 28} ]; 

var stockMarketPrice = 
                   [ {time: "10:00", price: 1.45},
                     {time: "11:00", price: 1.47},
                     {time: "12:00", price: 1.42},
                     {time: "13:00", price: 1.53} ]

D3 selections have the data() function, it allows you to join data to your document. Once joined you can call the enter() function which is a selection of the data points not yet turned into document elements. The typical case looks like the example below:

var numberOfBatteriesRequired = [1,5,7,10];
var example1 = d3.select("#example1");
example1.append("p").text("Number of Batteries Required:");
var ul = example1.append("ul");

ul.selectAll("li")
  .data(numberOfBatteriesRequired)
  .enter()
  .append("li")
  .text(function(d) { return d; });

In this example we create an unordered list based on our data numberOfBatteriesRequired. A few potential points of confusion are selectAll("li"), enter() and that function(d) business.

selectAll("li") selects all li elements, which is strange because none exist yet. This selection allows data() to know what to bind data to.

data() then binds data to these non-existant elements.

enter() is a selection of all of the data points that do not already exist as an li. Because none of the data points are already present, it returns the entire data set.

append() is used to create li elements for each data point. Because append returns a selection of the appended items, we can then use text() to set the text for EVERY li.

Instead of specifing constant text to the text() function, we specify a function. D3 calls this concept an accessor. What we are saying is that the value of the text varies based on our data. The accessor function specifies how to find the value. There are a few forms of accessors that we'll talk about later. Accessors are critical because they allow us to make changes based on the data.

In fact, this pattern is so common, let's commit it to memory. Fill in the blank with your mind.

[the blank]
.data(yourData)
.enter()
.append("element")

.selectAll("element")
.data(yourData)
[the blank]
.append("element")

.selectAll("element")
.data(yourData)
.enter()
[the blank]

D3 data is stored in the document

After using the data() method and append() or insert() the data point itself is stored in the __data__ (that's two underscores on each side) property of the element. When D3 performs a data update it can examine this existing data to see if elements already exist. In additon, you can make use of already bound data without having to rebind.

In the next lab we'll explore how to handle changing data.

Quiz


Put the method chain below into order to create one paragraph per data item:
.selectAll("p")
.data(data)
.enter()
.append("p")

Data bound with D3 is stored in the document. True/False

enter() returns a selection of the data points that already exist in the document. True/False

Things to do

Using the selectAll, data, enter, append pattern. Populate the "#list" with the stock market prices as text.
Change the list so that it is in the format "10:00 - $x.xx"