Hacker News Reader

Comment by danielvaughn | Hacker News Reader

This is true. We decided to use D3 directly to render charts at my job, and it was honestly kind of a terrible decision. Ideally you would use a library that uses D3 to render charts.

View on HN

Same here, too much work just for simple charts

What made d3 a terrible decision?

My guess is that d3 is too low-level to make reuse simple, and that using a higher-level abstraction would make the code more maintainable.

My guess is that d3 is too low-level to make reuse simple, and that using a higher-level abstraction would make the code more maintainable.

In what context? It's not that hard to collect some scales and axes into a JS object, mix it with judicious use of CSS et voila.

I understand that d3 is low-level and verbose, but I can't say that I've any regret over deploying it in production.

It's too low level. For reference, I just re-implemented the entire thing in React. just react, with svg elements directly. Not using D3 at all. And it was roughly the same level of effort.

edit: saying that D3 was a terrible choice is not saying that D3 itself is terrible. D3 is amazing. But before choosing it, you should know exactly what it is, and whether it helps in your specific use case.

That's the idea when you're using D3 with React: React handles the DOM updates, D3 handles data wrangling and math. You said you reimplemented your charts in SVG directly – did you also reimplement scales, chart axis generation, d3-collections, d3-time, etc?

I'm not sure how you'd implement scales, color theory, etc.. in React (a rendering library). There are a lot of useful parts of d3 which have nothing to do with rendering to the DOM. In fact, React and D3 complement each other quite well (maybe that is what you were saying?).

D3 is slightly more verbose than the one liners, but with that I get complete control over the scales and appearance of my chart. In addition it's trivial to combine multiple charts in a single diagram.

Out of interest, how did the performance compare between the React+SVG and D3 implementations? (and what sort of data size / structure were you working with?).

> D3 is amazing. But before choosing it, you should know exactly what it is, and whether it helps in your specific use case.

I agree. D3 is really great, but not always the most appropriate solution.

each D3 project is an entire application of its own

adding the “simple pie chart” to your view is not simple at all.

It needs independent UX planning, system architecture planning, and multiple sprints to implement

All the example code and prebuilt charts are outdated due to using old versions of D3 or other dependencies and essentially have to be rebuilt from scratch

All the example code and prebuilt charts are outdated due to using old versions of D3 or other dependencies and essentially have to be rebuilt from scratch

As part of moving them over to observable (which I'm not a fan of) the examples are being updated to use the v5 API.

I had the same experience. It started great when you just want a simple line chart, but when you need more and more features, it will be like creating tons of abstractions and writing a whole charting library ...

Reply on news.ycombinator.com