5 ms·

Ask HN: Is D3 still king for JavaScript visualisation?

For a while I have wanted to learn D3 for complex javascript based data visualisation, especially directed graph networks. However, now I’m looking to finally commit to learning it, I see there are a number of different options such as DC, vega and more. Does anyone have experience in using any of these different ones? Is it still worth learning D3 or is another better in all use cases?

nikivi 6y ago
Vega and Vega Lite is nice too. https://vega.github.io/vega-lite/ https://vega.github.io/vega-lite/
- izyda 6y ago
  What do you use to construct vega charts? any sort of UI-based editor?
gt565k 6y ago
D3 is very flexible and customizable. I'd suggest HighCharts for more cookie cutter basic charting with great API capabilities. This is an information visualization project I did for a college course (surprised it still works on heroku! Did this in 2014) http://beer-guide-data-visualization.herokuapp.com/ http://beer-guide-data-visualization.herokuapp.com/ There's a D3 JS Tree of the family and subfamilies of beers. You can click to toggle on/off elements of the tree and display the children data on the scatter plot. Hope this gives you an idea as a functional example of what is possible, even hooking together different libraries (D3 and HighCharts).
briankelly 6y ago
I used D3's force-directed graph in the past [1]. When I did use it (a couple of years ago) it seemed like there were higher level libraries for different types of visualizations, but if you wanted stuff more unified or customized, D3 was the best bet. https://observablehq.com/@d3/force-directed-graph https://observablehq.com/@d3/force-directed-graph
teachrdan 6y ago
One of the reasons why D3 is such a useful library is that the creator, Mike Bostock, is extremely quick to answer questions on Stack Overflow, complete with working examples of what users are asking about.
gauchojs 6y ago
Yes - it seems so. Case in point, a library to make charts in React Native is mostly using d3-shape and d3-scale to generate SVG paths: https://github.com/JesperLekland/react-native-svg-charts/blob/dev/src/line-chart/line-chart.js https://github.com/JesperLekland/react-native-svg-charts/blo...
asfarley 6y ago
I was thinking about doing a medium-complexity UI for tagging bounding boxes using D3, but I ended up learning Vue for this purpose and was quite pleased with the results.
iagorodriguez 6y ago
It depends on how effort do you want ton invest on your data visualizations. If you are looking to create a dashboard with some charts and not very specific UI requirements on them you can use a data viz library (recharts, vega, C3, highcharts, ...). If you need to go deeper with more specific requirements on the charts ui, the interactions with other UI elements and/or optimize for high volume of data D3 is the best path. If you want to create your own unique consistent experience you would probably even invest on your own library on top of D3. You can have the base of that library in 2-3 months period with the basic charts: barchart, linechart, scatterplot, pie, ...
typedef_struct 6y ago
Pretty much. It's too good. 10 years later, if you tried to write a better one, you'd probably fail. Whoever wrote it should be shot.
- KurtMueller 6y ago
  I think Mike Bostock is on Hacker News and is definitely on Twitter - you can tell him yourself :D
rivo 6y ago
I've worked with D3 for many years. It's great for small, quick visualizations. But I've more than once reached its limits. For one, anything more complex (e.g. custom axis labels that don't overlap) requires you to roll your own implementation, making D3 not much more of a tool than, say, jQuery. Also, because it's SVG/DOM based, if you have a lot of data, it gets slow quickly. Nonetheless, for anything quick but (at least slightly) out of the ordinary, I'd pick D3 any time.
- thrashh 6y ago
  D3 isn’t SVG/DOM-based, although it can be. I only use D3 with HTML5 canvas.
acomjean 6y ago
We use Vega-lite. We really like it. After using hodgepodge of different libraries we've settled on this one. (I've used D3, C3, highcharts and some others) The documentation on features is kinda ok (vega lite sets a lot of defaults). but it works really well. Vega is more full featured but more difficult. The ability to be able to easily add download as SVG and PNG is fantastic. You can open an example and play with the configuration online. (Click on an example and find the link to "edit online") https://vega.github.io/vega-lite/examples/ https://vega.github.io/vega-lite/examples/ Vega lite is built ontop of D3 I think. They have a intro documents called "Data Visualization Curriculum" which can be helpful. https://observablehq.com/collection/@uwdata/visualization-curriculum https://observablehq.com/collection/@uwdata/visualization-cu... And the VS-plugin for Vega/Vega lite: https://github.com/RandomFractals/vscode-vega-viewer https://github.com/RandomFractals/vscode-vega-viewer
- prepend 6y ago
  I use Vega-lite through python’s Altair library [0] and find it pretty nice. I seem to have a hard time teaching people D3 who don’t already know javascript, but Altair and Vega seem to let python programmers still produce web visualizations. Seems like a good competitor to plotly. [0] https://altair-viz.github.io/ https://altair-viz.github.io/
- izyda 6y ago
  Do you use any GUI editors for Vega-lite (say Polestar or Voyager2)? or do you just write the specs from scratch?
  - acomjean 6y ago
    We write them from scratch.. We have a single html page graph template and the data, then just adjust the specs.
    - izyda 6y ago
      If there were an editor available that allowed you to both have Tableau-like interactions or edit the vega spec at the same time, would you use it? Do you build any visualizations on "live data"? (ie. backed by some updating database or API?) Or is the data generally static once you're at the visualization stage?
thehappypm 6y ago
Embedding Tableau is becoming very popular too.
redis_mlc 6y ago
D3 is not an answer for most people, since you have to be a front-end expert on css, svg, js, dom and d3 - quite a project for somebody who just wants to make a plot. Most people end up using an end-user focused layer on top of D3. Or they just say "forget it" and use high-level packages including google charts (these are rendered browser-side) or highcharts (paid.) In your case, just ddg for "plot directed graph networks" and see what comes up. But for 99% of people, the answer in't D3. I ended up using google charts with svg hooks - the resulting code is not a lot different than D3.
atian 6y ago
- Apache ECharts: https://echarts.apache.org/examples/en/index.html https://echarts.apache.org/examples/en/index.html - VX (React + D3): https://vx-demo.now.sh/gallery https://vx-demo.now.sh/gallery

nikivi 6y ago

Vega and Vega Lite is nice too. https://vega.github.io/vega-lite/ https://vega.github.io/vega-lite/

izyda 6y ago
What do you use to construct vega charts? any sort of UI-based editor?

gt565k 6y ago

D3 is very flexible and customizable. I'd suggest HighCharts for more cookie cutter basic charting with great API capabilities. This is an information visualization project I did for a college course (surprised it still works on heroku! Did this in 2014) http://beer-guide-data-visualization.herokuapp.com/ http://beer-guide-data-visualization.herokuapp.com/ There's a D3 JS Tree of the family and subfamilies of beers. You can click to toggle on/off elements of the tree and display the children data on the scatter plot. Hope this gives you an idea as a functional example of what is possible, even hooking together different libraries (D3 and HighCharts).

briankelly 6y ago

I used D3's force-directed graph in the past [1]. When I did use it (a couple of years ago) it seemed like there were higher level libraries for different types of visualizations, but if you wanted stuff more unified or customized, D3 was the best bet. https://observablehq.com/@d3/force-directed-graph https://observablehq.com/@d3/force-directed-graph

teachrdan 6y ago

One of the reasons why D3 is such a useful library is that the creator, Mike Bostock, is extremely quick to answer questions on Stack Overflow, complete with working examples of what users are asking about.

gauchojs 6y ago

Yes - it seems so. Case in point, a library to make charts in React Native is mostly using d3-shape and d3-scale to generate SVG paths: https://github.com/JesperLekland/react-native-svg-charts/blob/dev/src/line-chart/line-chart.js https://github.com/JesperLekland/react-native-svg-charts/blo...

asfarley 6y ago

I was thinking about doing a medium-complexity UI for tagging bounding boxes using D3, but I ended up learning Vue for this purpose and was quite pleased with the results.

iagorodriguez 6y ago

It depends on how effort do you want ton invest on your data visualizations. If you are looking to create a dashboard with some charts and not very specific UI requirements on them you can use a data viz library (recharts, vega, C3, highcharts, ...). If you need to go deeper with more specific requirements on the charts ui, the interactions with other UI elements and/or optimize for high volume of data D3 is the best path. If you want to create your own unique consistent experience you would probably even invest on your own library on top of D3. You can have the base of that library in 2-3 months period with the basic charts: barchart, linechart, scatterplot, pie, ...

typedef_struct 6y ago

Pretty much. It's too good. 10 years later, if you tried to write a better one, you'd probably fail. Whoever wrote it should be shot.

KurtMueller 6y ago
I think Mike Bostock is on Hacker News and is definitely on Twitter - you can tell him yourself :D

rivo 6y ago

I've worked with D3 for many years. It's great for small, quick visualizations. But I've more than once reached its limits. For one, anything more complex (e.g. custom axis labels that don't overlap) requires you to roll your own implementation, making D3 not much more of a tool than, say, jQuery. Also, because it's SVG/DOM based, if you have a lot of data, it gets slow quickly. Nonetheless, for anything quick but (at least slightly) out of the ordinary, I'd pick D3 any time.

thrashh 6y ago
D3 isn’t SVG/DOM-based, although it can be. I only use D3 with HTML5 canvas.

acomjean 6y ago

We use Vega-lite. We really like it. After using hodgepodge of different libraries we've settled on this one. (I've used D3, C3, highcharts and some others) The documentation on features is kinda ok (vega lite sets a lot of defaults). but it works really well. Vega is more full featured but more difficult. The ability to be able to easily add download as SVG and PNG is fantastic. You can open an example and play with the configuration online. (Click on an example and find the link to "edit online") https://vega.github.io/vega-lite/examples/ https://vega.github.io/vega-lite/examples/ Vega lite is built ontop of D3 I think. They have a intro documents called "Data Visualization Curriculum" which can be helpful. https://observablehq.com/collection/@uwdata/visualization-curriculum https://observablehq.com/collection/@uwdata/visualization-cu... And the VS-plugin for Vega/Vega lite: https://github.com/RandomFractals/vscode-vega-viewer https://github.com/RandomFractals/vscode-vega-viewer

prepend 6y ago
I use Vega-lite through python’s Altair library [0] and find it pretty nice. I seem to have a hard time teaching people D3 who don’t already know javascript, but Altair and Vega seem to let python programmers still produce web visualizations. Seems like a good competitor to plotly. [0] https://altair-viz.github.io/ https://altair-viz.github.io/
izyda 6y ago
Do you use any GUI editors for Vega-lite (say Polestar or Voyager2)? or do you just write the specs from scratch?
- acomjean 6y ago
  We write them from scratch.. We have a single html page graph template and the data, then just adjust the specs.
  - izyda 6y ago
    If there were an editor available that allowed you to both have Tableau-like interactions or edit the vega spec at the same time, would you use it? Do you build any visualizations on "live data"? (ie. backed by some updating database or API?) Or is the data generally static once you're at the visualization stage?

thehappypm 6y ago

Embedding Tableau is becoming very popular too.

redis_mlc 6y ago

D3 is not an answer for most people, since you have to be a front-end expert on css, svg, js, dom and d3 - quite a project for somebody who just wants to make a plot. Most people end up using an end-user focused layer on top of D3. Or they just say "forget it" and use high-level packages including google charts (these are rendered browser-side) or highcharts (paid.) In your case, just ddg for "plot directed graph networks" and see what comes up. But for 99% of people, the answer in't D3. I ended up using google charts with svg hooks - the resulting code is not a lot different than D3.

atian 6y ago

- Apache ECharts: https://echarts.apache.org/examples/en/index.html https://echarts.apache.org/examples/en/index.html - VX (React + D3): https://vx-demo.now.sh/gallery https://vx-demo.now.sh/gallery