7 ms·

I have a background in both web development and data science, and have used several different visualization libraries in python, R (ggplot), and JS. It still t

by cowpig 8y ago

I have a background in both web development and data science, and have used several different visualization libraries in python, R (ggplot), and JS. It still takes me a crazy amount of time to get a simple chart or graph working in D3 if it's anything more than copy/pasting an example. The last thing I did was an area graph that you could click and drag one of the edges and it would update the numbers in the legend as you did it. It took me 20-30 hours to get it working, and I'm sure I re-invented multiple things that D3 provides because it was easier to just write them from scratch than trying to find where Bostock hid it in the library and then decoding whatever crazy abstractions he came up with for it. I think he's bad at naming stuff and also bad at writing docs. By the time I get something working in D3, I've come close to the point where I could have just written all the abstractions myself. I can use a lightweight virtual DOM library and just write functions that take data and output DOM objects. D3 does barely more than that, at the cost of learning some really funky abstractions. I really wish there was a library out there like D3 that tried harder not to surprise me with every abstraction. But, I think the problem is just a hard one, because I'm not aware of anything that's much better :(

tcgarvin 8y ago
Longtime D3 (even Protovis) user here. I think you're very correct in that D3 itself is not a good choice for "a simple chart or graph". If that's all I needed, I'd stick with HighCharts, or ggplot, or any of dozens of other libraries that do simple charts well, and often with a lot more batteries included. My unsolicited advice would be to consider staying away from D3 until you need it. But if you're doing anything remotely bespoke, with any sort of custom interaction or transition, or anything in which you need to multiplex several datasets in a single set of visualizations, this toolkit is hard to beat. My favorite personal D3 use case so far is modified animated scatter plots/beeswarms using force layouts. Immortalized for me in the "Four Ways to Slice Obama’s 2013 Budget Proposal" ( https://archive.nytimes.com/www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html https://archive.nytimes.com/www.nytimes.com/interactive/2012... ), I've found that set of techniques useful for visualizing business processes in my own work over the years. I've yet to encounter anything else that comes close to enabling those kinds of data visualizations. It's the "funky abstractions" some folks have trouble with that enable me to swap out X or Y scales with intuitive animations by literally replacing a single object and then re-invoking an idempotent render() function. Working with D3 is the most productive I've ever been in my life from a data visualization standpoint, and I suspect that will continue to be the case for some years.
mbesto 8y ago
> It still takes me a crazy amount of time to get a simple chart or graph working in D3 Wrong tool for the job. D3 fills the void between "just send my data to a bar chart" and "I need some charts, maybe I'll use raw JS to manipulate SVG's". You're probably in the former camp.
- staticautomatic 8y ago
  Out of curiosity, what would you use for "just send my data to a bar chart?"
  - db1 8y ago
    I really like chart.js http://www.chartjs.org/docs/latest/ http://www.chartjs.org/docs/latest/
    - acqq 8y ago
      http://www.chartjs.org/samples/latest/ http://www.chartjs.org/samples/latest/ The examples do "cubic" instead of just "connecting the dots" but luckily it can be turned off: http://www.chartjs.org/samples/latest/charts/line/interpolation-modes.html http://www.chartjs.org/samples/latest/charts/line/interpolat...
  - workinthehead 8y ago
    HighCharts for paid, Chart.js for open source.
    - mwaitjmp 8y ago
      Flot is also a good choice. It's old now and hasn't been updated in a long while but if I'm not mistaken, grafana still makes use of it.
  - mbesto 8y ago
    What the other replies said.
  - 8y ago
esterly 8y ago
try Billboard.js a nice wrapper on top of D3v4 https://naver.github.io/billboard.js/demo/#Chart.CombinationChart https://naver.github.io/billboard.js/demo/#Chart.Combination...
anyzen 8y ago
This. I rewrote pure-JS implementation of some topology visualization in D3 and very much regretted it. The abstractions are simply weird, documentation poor and the resulting code difficult to reason about and maintain. Useful for toy projects, but I wouldn't use it in a serious app anymore. > I really wish there was a library out there like D3 that tried harder not to surprise me with every abstraction. Interestingly enough, I find that the combination of React + inline SVG fill this space pretty nicely. The engine is well thought out and documented, as is SVG. And animations are easier to do with CSS anyway. EDIT: note that React is declarative too, which helps with visualizations a lot.

by cowpig 8y ago

tcgarvin 8y ago

Longtime D3 (even Protovis) user here. I think you're very correct in that D3 itself is not a good choice for "a simple chart or graph". If that's all I needed, I'd stick with HighCharts, or ggplot, or any of dozens of other libraries that do simple charts well, and often with a lot more batteries included. My unsolicited advice would be to consider staying away from D3 until you need it. But if you're doing anything remotely bespoke, with any sort of custom interaction or transition, or anything in which you need to multiplex several datasets in a single set of visualizations, this toolkit is hard to beat. My favorite personal D3 use case so far is modified animated scatter plots/beeswarms using force layouts. Immortalized for me in the "Four Ways to Slice Obama’s 2013 Budget Proposal" ( https://archive.nytimes.com/www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html https://archive.nytimes.com/www.nytimes.com/interactive/2012... ), I've found that set of techniques useful for visualizing business processes in my own work over the years. I've yet to encounter anything else that comes close to enabling those kinds of data visualizations. It's the "funky abstractions" some folks have trouble with that enable me to swap out X or Y scales with intuitive animations by literally replacing a single object and then re-invoking an idempotent render() function. Working with D3 is the most productive I've ever been in my life from a data visualization standpoint, and I suspect that will continue to be the case for some years.

mbesto 8y ago

> It still takes me a crazy amount of time to get a simple chart or graph working in D3 Wrong tool for the job. D3 fills the void between "just send my data to a bar chart" and "I need some charts, maybe I'll use raw JS to manipulate SVG's". You're probably in the former camp.

staticautomatic 8y ago
Out of curiosity, what would you use for "just send my data to a bar chart?"
- db1 8y ago
  I really like chart.js http://www.chartjs.org/docs/latest/ http://www.chartjs.org/docs/latest/
  - acqq 8y ago
    http://www.chartjs.org/samples/latest/ http://www.chartjs.org/samples/latest/ The examples do "cubic" instead of just "connecting the dots" but luckily it can be turned off: http://www.chartjs.org/samples/latest/charts/line/interpolation-modes.html http://www.chartjs.org/samples/latest/charts/line/interpolat...
- workinthehead 8y ago
  HighCharts for paid, Chart.js for open source.
  - mwaitjmp 8y ago
    Flot is also a good choice. It's old now and hasn't been updated in a long while but if I'm not mistaken, grafana still makes use of it.
- mbesto 8y ago
  What the other replies said.
- 8y ago

esterly 8y ago

try Billboard.js a nice wrapper on top of D3v4 https://naver.github.io/billboard.js/demo/#Chart.CombinationChart https://naver.github.io/billboard.js/demo/#Chart.Combination...

anyzen 8y ago

This. I rewrote pure-JS implementation of some topology visualization in D3 and very much regretted it. The abstractions are simply weird, documentation poor and the resulting code difficult to reason about and maintain. Useful for toy projects, but I wouldn't use it in a serious app anymore. > I really wish there was a library out there like D3 that tried harder not to surprise me with every abstraction. Interestingly enough, I find that the combination of React + inline SVG fill this space pretty nicely. The engine is well thought out and documented, as is SVG. And animations are easier to do with CSS anyway. EDIT: note that React is declarative too, which helps with visualizations a lot.