Why D3('s DOM methods) are so verbose (another angle)
This morning I came across the article Why is D3 Code So Long and Complicated (or Why is it So Verbose)?, which sums up the issue as
D3 is verbose so you can create art.
The note is worth reading in full. I think it's mostly comparing D3 to other charting libraries and that's a good explanation of D3's complexity from that perspective.
But I have a slightly different perspective on this that I've remarked on in previous posts, but the gist is:
D3 is verbose because it supports animations
Like: if we're just talking about SVG output, everything that you can do with D3's DOM manipulation methods you can do with a 'virtual DOM' system like React, or a templating system, in arguably simpler syntax. Where D3 binds SVG to data, most other systems just map data to SVG, and it's kind of simpler and more obvious: why does it matter if the data is bound if you get the same DOM result?
It's animations, interactions, and transitions! That's why D3 has the enter selection. Binding data to SVG elements is useful if you want to update those elements later - in contrast, React doesn't know what data you used to produce some DOM elements. The forms of object constancy in React and similar systems are much more rudimentary - keys let React know whether you intend for the 'identity' of an element to stay the same between renders. In React, ensuring that an element is moved from one place to another rather than being removed from one place and a new element created in the other can be difficult: the system guarantees that you end up with a particular DOM, but not how you get there. D3 makes it explicit how you get there.
So: to sum up. D3 is more verbose than chart-builders because you can create art. D3's way of constructing the DOM (SVG or HTML structures) is more verbose than 'modern web frameworks' or templating because it supports interactivity, animation, and makes the DOM construction explicit rather than implicit.