Why is D3 so Verbose?

Summary

D3 is a b***h of a language at first glance. It’s long. It’s complicated and verbose. You have to enter what feels like an obscene amount of key strokes to draw one line. I’m currently about one-third of the way through my journey of learning D3.js, having finished Interactive Visualisation for the Web by Scott Murray, and now picking my way through D3.js in Action by Elijah Meeks and Anne-Marie Dufour. (And just for kicks, I’m reading D3 for the Impatient by Philipp K Janert on the side whenever I have some free time). Which means, I just finished drawing a box plot from chapter 6. Yup. You know. That thing, you just make four or five clicks in Microsoft Excel, and voila, it appears. In a way that you don’t think is magical, because Excel has been around longer than the dial up modem. I just shared this on my social media, and for the non-technical, I had to explain “hey, so, the reason why this is impressive is because…” Such beautiful charts……but such long code. That’s 194 lines of code to draw a box plot. Why on earth would any masochist do this? Because of the flexibility D3 provides. The reason why there are so many lines is because: I’m doing this the long way. I could write some functions or components which could collapse a lot of those lines, but I’m still learning the ropes. Better to do it the long and manual way so I don’t skip anything This is important: D3 is a library which allows you to draw SVGs and bind them to data All D3 is doing is saying “so, hey, I got all this data. Now. Dear browser. I’d like you to draw these SVG shapes, according to these instructions.” SVG code reads like an extended HTML block of code. To draw a line on a two dimensional grid you have to define: x1 – the horizontal position of point 1 x2 – the horizontal position of point 2 y1 – the vertical position of point 1 y2 – the vertical position of point 2 In D3 if I was just going to draw this with fixed values, say a line that goes from co-ordinates (0,12) to (4,15): aRandomN...