Binding Data to DOM Elements
FREE     Duration: 6:01
Part of Course: Introductory D3 Course
 

Takeaways:

  • The D3 Data Operator returns the placeholder elements for each data element for which no corresponding existing DOM element was found
  • The Basic D3 Visualization Pattern is .select, .data, .enter, and .append
  • The D3 Append Operator appends a new element with the specified name as the last child of each element in the current selection
  • Each new element inherits the data of the current elements in the selection, if it's available
  • To Bind Data to DOM elements that do not yet exist - first do the .data join, then select the .enter selection, finally append elements so that each element inherits data from the placeholder elements in the enter selection

Resources:

D3 Video Tutorial Lessons:

Transcript:

Binding Data to DOM Elements

D3 Enter Selection Revisited

d3.selection.data(...).enter()

The Enter Selection returns the placeholder elements for each data element for which no corresponding existing DOM element was found

Note - the enter selection method is only defined on selections returned by the Data Operator

Also - the enter selection only defines the append, insert and select operators.

Once one of these three operators has been used, you can modify the contents of the selection.


First, let's insert a Paragraph Element

d3.select("body").insert("p");

BROWSER - Click on the body tag to expand it

Using a new barebones html file

We select the body and insert a paragraph element

As you can see, the paragraph element has been inserted into the HTML document.


Next, let's attach an array of 3 numbers to this paragraph element

updateSelection = d3.select("body").select("p").data([1,2]);
updateSelection.enter();

BROWSER - Click on the Array in the command line

BROWSER - Click on the one index element

BROWSER - Highlight the object and __data__: 2

This is the Enter Selection referenced from the D3 Update Selection.

You can see the placeholder JavaScript Object for the data element for which no corresponding existing DOM element was found

This is where the second data point, the number 2, was stored.


Next we review the D3 Visualization Pattern to see where we are and what we still need to cover



D3 Visualization Pattern Revisited

The Basic D3 Visualization Pattern is

  1. .select
  2. .data
  3. .enter()
  4. .append

This selects the elements that you are going to use, attaches data to them and creates them on the screen.


Picture of the Bubble Chart
We saw this pattern in the Bubble Chart


Picture of the Sunburst Partition
We saw this pattern in the Sunburst Partition


Picture of the Choropleth
We saw this pattern in the Choropleth


Picture of the Click-to-Zoom via Transform Map
and lastly, we saw this pattern in the Click-to-Zoom via Transform Map


As you can see, no matter how varied the visualization, the main pattern is .select, .data, .enter, and .append.


Next we review the append operator.



D3 Append Operator Revisited

d3.selection.append(name)

The D3 Append Operator appends a new element with the specified name as the last child of each element in the current selection.

Each new element inherits the data of the current elements in the selection, if any.


Picture of the place holder elements.

This is important because in the case of the ENTER SELECTION, this allows the appended elements to inherit the data of our place holder elements.

Then, it returns a new selection containing the APPENDED ELEMENTS.


Next we cover how Binding Data to DOM Elements happens.



Binding Data to DOM Elements

First, we create a variable with the update Selection

var updateSelection = d3.select("body").selectAll("p").data([1,2,3,4,5]);

Using a new barebones html file

We define the updateSelection variable as a selection of all the paragraphs that we have attached the data elements to.

updateSelection;


Next, we look at the enter selection to see the placeholder elements

updateSelection.enter();

BROWSER - Click into the array

BROWSER - Click into element zero

BROWSER - Click into element four

You can see all of the place holder JavaScript Object elements created to hold each of the data points

BROWSER - Close each element and then close the array

BROWSER - Click on the command line


Next, let's append a paragraph element to the ENTER selection

var paragraphElements = updateSelection.enter().append("p");

This command appends a paragraph element for each of the JavaScript Object Place Holder Elements in the Enter Selection

BROWSER - Click on the tag to show the 5 paragraph elements

BROWSER - Click on each of the 5 paragraph elements

As you can see, this has appended 5 paragraph elements to the HTML document Body

BROWSER - highlight d3.select("body")

It attached them to the HTML Document body because that was the initial selection we did.

The d3.select("body")


Now, let's take a look at what is inside of the paragraphElements variable

paragraphElements;

As you can see the paragraphElements variable contains an array of length 5

BROWSER - Click into the array

When we click into the array, you can see the 5 paragraph elements

BROWSER - Click into the first element

BROWSER - Highlight the __data__: 1

When we click into one of the paragraph elements, you can see the data point that has been attached.

BROWSER - Close element one

BROWSER - Click into the second element

BROWSER - Highlight the __data__: 2

Each paragraph element now contains the data points that were in the initial data array

Each paragraph element inherited the data property from the JavaScript Object placeholder elements


Note, this works with any element, not only paragraphs.

Let's try it this time with HTML DIV elements

Arrow up and change the "p" to div and add DIV in the variable name

var updateDivSelection = d3.select("body").selectAll("div").data([1,2,3,4,5]);


First, we define the updateDivSelection

Start typing, press the right hand key, then type the .enter()

updateDivSelection.enter();

Then we look at the enter selection

BROWSER - Click into the array

BROWSER - Click into the first element

BROWSER - Close first element

BROWSER - Close the array


Next, let's append the html DIV elements to the enter selection

var divElements = updateDivSelection.enter().append("div");

BROWSER - Click on the tag to show the 5 DIV elements

BROWSER - Click on each of the 5 DIV elements

As you can see, this has appended 5 div elements to the HTML document Body

It attached them to the HTML Document body because that was the initial selection we did.

BROWSER - Highlight d3.select("body")


Finally, let's take a look at what is inside of the divElements variable

divElements;

BROWSER - Click into the array

BROWSER - Click into the first element

BROWSER - Highlight the __data__: 1

BROWSER - Close element one

BROWSER - Click into the second element

BROWSER - Highlight the __data__: 2

When we click into the array, you can see the 5 DIV elements

When we click into one of the DIV elements, you can see the data point that has been attached.

As you can see, each DIV element now contains the data points that were in the initial data array

Each DIV element inherited the data property from the JavaScript Object placeholder elements


And that is how you do basic binding of data to DOM elements when those DOM elements did not exist before

First you do a select, then you attach data, then you select the enter selection from the update selection, and finally

you append elements so that each element inherits data from the placeholder elements in the enter selection.

<< Back To D3 Screencast and Written Tutorials Index