I worked on a project that required some pretty standard line charts, but with the addition of an overlaid set of horizontal "benchmark" lines -- and some callouts. After struggling (and failing) to get what we wanted out of two different off-the-shelf graphing libraries (one of which was built on top of D3), we finally bit the bullet and just built the charts we wanted in D3 "from scratch". Once I wrapped my head around the model, it was such a pleasant experience. D3 is soooo nice and well thought out. You mayneed to level up in SVG, but it is so freeing to be able to bind data and display it basically any way you want. In hindsight, I wish we started with D3 from the beginning and I would not hesitate to pick it up for even simple charts again. It really is worth climbing the learning curve, which isn't as big and scary as it appears at first sight.

How much extra work would it have been, percentage-wise, to write the whole thing from scratch? What features did D3 give you for free?

udfalkso

d3 has a lot of really useful libraries baked in. You can even use them independently and roll your own svg using its components as utilities. I find this super helpful when using d3 as a whole isn't really a good option (as part of a React/React-Native app for example).

Such as: https://github.com/d3/d3-shape

https://github.com/d3/d3-scale

Doing it from scratch without the help of utilities like these would be much harder.

A couple examples:

var line = d3.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.value); }) .curve(d3.curveCatmullRom.alpha(0.5));

line(data); // gives you svg path

and

var color = d3.scaleLinear().domain([10, 100]).range(["brown", "steelblue"]);

color(20); // "#9a3439" color(50); // "#7b5167"