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?
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'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.
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.
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
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.