D3 — Select, SelectAll, Data, Enter, and Exit

Looking for a great (remote only) React Dev? Visit my profile on LinkedIn and say hi! 😃

DISCLAIMER: Much of the material here comes from Lynda.com’s amazing course: D3.js Essential Training for Data Scientists, taught by the magnificent Emma Saunders.

Honestly, I found D3 very confusing in the beginning because I didn’t have access to a concise summary like the one below, which I later learned from Lynda.com. If this info helps you, please give a clap. It makes me happy 😁.

let oddNums = [1, 3, 5, 7, 9]
let svg = d3.select('body').append('svg')
svg.selectAll('rect')
  .data(oddNums)
    .enter().append('rect')

svg.selectAll('rect') tells the browser to find the svg element and look inside it for any rectangles. If it finds rectangles, it returns them in a selection that is an array of elements. If it doesn’t find any, it returns an empty selection, which is what will happen in this case.

.data(oddNums) binds data to a selection. It does this in order, so if the browser had found three rectangles, it would link the first rectangle to number 1, the second to number 3, the third one to 5, etc.

1, 3, and 5, are being used because oddNums is defined. If the browser had only found two rectangles, D3 would have put the leftover data into what’s called an enter selection.