I have a browser extension (treeverse.app) where the entire UI is D3. I probably wouldn't write it that way today, but the codebase dates back to ~2014 and it's held up fine.
I tend to leave DOM manipulation to Vue.js unless I need to animate transitions between states. I find it easier to reason about binding data to an html/svg template with Vue than to mess with d3 data joins and enter/update/exit pattern.
d3 is and stays an impressive piece of work.
With Vue.js, I use computed properties + v-for in html template.
With D3 I use the the enter/update/exit pattern with d3.selectAll(...).data(...).join(...).
Both seem to only modify the needed DOM elements. Vue.js uses a virtual DOM while D3 attaches a __data__ property to DOM elements.
D3.js, as someone else already noted, is "jQuery for data". And yes, it has its good parts, but the same as for jQuery) the problem is with:
- mixing static HTML/SVG with generated
- no modularization (every modularization is custom)
For the latter, while it may not be a big deal for small projects, for bigger it sucks.
For big stories, I created a game in D3.js. Modularization was... well, argument why I rewrote it a few years later to Vue.js.
For projects with Vue.js, the performance was not my concern.
In any case, if needed, you can use D3.js rendering within a Vue component.
It sounds like it's worth me doing a Vue implementation and running some benchmarks.
Alternatives at a low level? Hard to say - it really does allow you to do a lot at a very low level if you want BUT...
- Vega Lite / Vega
- HighCharts (paid)
- ChartJS
- Raphael (unsure if this is still used as much)
- Leaflet / Turf for GIS visualizations
- Server-side? PyGal? http://www.pygal.org/en/stable/
If you don't want to go so low-level there are a huge number of D3 abstractions that allow you to pick your chart and work with the data. Britecharts from EventBrite is one example of an actively maintained abstraction. http://eventbrite.github.io/britecharts/
https://vega.github.io/vega/about/vega-and-d3/
Vega lite is what I use as my day to day web graphing driver (it exports to svg which is awesome...)
We're still happy with that decision :)
As soon as you go to react & friends, most of the d3 model does become redundant, and Yet Another Thing to burden the team. There's still a temptation to reuse beautiful d3 gallery items posted by others, but generally, they're annoying to patch up & now you must maintain them. Better to use dedicated maintained libs if that's what you want. There have been attempts to do Standard D3 Chart libs, but afaict it's a graveyard of abandonware, and I approach most efforts here with strong caution. (The trend for the last few years has been each bigco to release their own NIH framework and then abandon as the authors leave, and little incentive for D3 design consultants to maintain old projects.)
I agree that React / Redux state can take the place of a lot of the D3 models. That said, it's nice that D3 handles entry / updates and changes so you can point to redux and it "just works" and all the transitions, etc are handled as your app state is handled.
The shortlist for GIS is DecKGL. Graphistry gets a lot of requests here, so we helped the DeckGL folks on some Arrow/GPU stuff and we had promising experiments as part of it, but (if I remember right) we hit memory issues and something else. We'll be evaluating that for GIS next time it makes sense.
+1 to others on HighCharts team!
I liked it quite a bit. It's pretty fast and decently easy to use. Plus, all the examples Mike Bostock has thrown around online really helped for giving me examples of how to do various visualizations I was interested in.