Comment by text0404
Note: the example is a misconception and not what's meant by "binding to data." In D3, binding to data refers to using the `.data()` method to supply an object (typically an array) which you can then use in a function callback in the accessors, so like `.attr('x1', d => /* access individual array item here */)`. This allows you to easily bind a dataset to a graphical representation and use its attributes to inform the properties of the visualization.
I'd also argue that D3 is no more verbose than vanilla JS (at least for this example). What's the alternative for creating a line in SVG?
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
line.setAttribute('x1', ...)
line.setAttribute('y1', ...)
line.setAttribute('x2', ...)
line.setAttribute('y2', ...)
// etc
document.querySelector('svg').appendChild(line)
This is very fair: I went for a metaphorical explanation, rather than a literal one. (For instance, I'd actually have had to write down the code for an SVG, and I was quickly writing this on my lunch break).
The `.selectAll().data().join()` data binding method (or `.enter()` on older versions) is very intuitive once you understand it, but for the layman coming in, it's inaccessible AF. I fudged a little in my explanation to make it more accessible. But hey. That's learning.