Pick an element, lay claim to all Xs within it, bind them to a ring of data, and with your invocations give rise to creatures of form within them, of shape ,size and color of your choosing

or, in other words —

d3.select(‘div’) , or ‘body’ or ‘.chart’ ,if you have a container defined with class=’chart’

.selectAll(‘div’)

meaning you are going to put ‘div’s in the container (body/div/.chart)

.data(data)

where .data() is a method and data is an array you’ve defined

.enter()

one of the three high spells of d3 joins — enter, update, exit

.append(‘div’)

I dunno of this must be the same element as called in selectAll ( I think yes, not to be soooo open-minded)

.style(‘background-color’,’blue’).style(‘border’,’solid 1px black’)

style your div

.text( function(x){ return “[” + x + “]”; })

and display [1] or [2] etc on your divs. It is allowed to insert a function instead of a constant for also the styling function calls, which is how the bar chart heights are achieved to be different.

Notes:

The collusion between selectAll and append , which are separated by the data(data).enter() calls, I will now try to explain.

The selectAll is a sort of a lazy selection, or an empty gesture, like a revolutionary’s call to action or a grand manifesto. It selects items that aren’t there. It sets the tone, to thinking in things that could be, but may or may not be there.The data(data).enter() is the spell that bridges the gesture and reality, by supplying individual identities to the children-yet-to-be-born.The spells following the select call give form and function to the children. The use of anonymous functions help manifest the variation in the data, into the children. I mean, you _can_ do a select(‘div’).text(‘32’), which will give all the children the label of ‘32’, instead of their original values, as present in the data.

Resources

read this for more : https://www.dashingd3js.com/binding-data-to-dom-elements

Mike Bostock’s 3 part article on making a bar chart