Ask HN: Is D3 still king for JavaScript visualisation? | Hacker News Reader

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?

View on HN

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/

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).

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, ...

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/

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-cu...

And the VS-plugin for Vega/Vega lite: https://github.com/RandomFractals/vscode-vega-viewer

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/

Do you use any GUI editors for Vega-lite (say Polestar or Voyager2)? or do you just write the specs from scratch?

We write them from scratch..

We have a single html page graph template and the data, then just adjust the specs.

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?

Our data is very static. (Genetic data) so I think we like things they way they are. We can use the “open data in” to open in an editor bit for us we iterate faster on our local system

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.

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

Vega and Vega Lite is nice too.

https://vega.github.io/vega-lite/

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

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.

- Apache ECharts: https://echarts.apache.org/examples/en/index.html

- VX (React + D3): https://vx-demo.now.sh/gallery

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

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/blo...

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.

Embedding Tableau is becoming very popular too.

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.

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

Reply on news.ycombinator.com