I was recently working on a few D3 projects. I have used D3 in the past and think it is really awesome. Here is a list of notes I am using as I refresh my mind to think in terms of data-driven documents:


With one element selected, append one additional element
d3.select("body").append("h1").text("hello world")
Select all existing h1s and update their text
d3.selectAll("h1").text("hello world again 1")
Add a bunch of h1 elements bound to data array:
.data([1,2,3]).enter().append("h1").text("hello world")

Data Binding

  • data can be arrays or objects
  • use data to create new elements
  • existing elements on a page that were hard coded have no data bound to them. this can be very confusing
  • to see what data is bound to a given element, use d3.select and than look at the __data__ element in the chrome console
  • to specify what data gets bound to which element, use the key function
var circle = svg.selectAll("circle")
    .data([32, 57, 293], function(d) { return d; });
  • given three circles on the page, bind some data to them and update their radius. note this does not update the enter selection, just the current circles that are on the page
.data([2,4,6,7]).attr("r",function(d){ return 2*d})


  • given three circles on a page, bind data to them, add an additional circles per the data source ( one circle for datum 7) and and it to the page. this does not update the existing circles on the page (update selection), just the enter selection.
.attr("r",function(d){ return 2*d})
Enter, Updated, Exit

-Thinking In Joins


Given three existing circles, a new data point was added to the enter select corresponding to datum 7. Since we call append here, this new 4th circle was added to the DOM

.attr("r",function(d){ return 2*d})

Given 3 existing circles in the SVG, new data was bound to these circles (2,4,6). After the data was bound to the circle, we updated the circle radius using the newly bound data. Note that even though we are passing an array of size 4, we are not doing anything with the last element (7) here, because that is in the enter selection, and right now we are only working with the update selection.

.attr("r",function(d){ return 2*d})

Given three existing circles with data bound to them [2,4,6], remove 2, and 6 and add 7:

Given three circles, bind some new data to them and perform UPDATE

.attr("r", function(d){ return 2*d})

Now, add a 4th circle using new data element, which goes into enter select, and update it

.data([2,4,6,7]).attr("r", function(d){ return 2*d})
.enter().append("circle").attr("r", function(d){ return 2*d})

Finally, remove 2,6 leaving data bound to 4 and 7