Hacker News Reader

Comment by paulgb | Hacker News Reader

D3 is still a useful library for visualization even if you replace the DOM manipulation with React, Vue, Svelte, etc. I think the trend is to use D3 as a library but use a more modern framework to manage the DOM.

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.

View on HN

I also mostly use d3 for its powerful helper functions nowadays: scales and axes, colors, svg path generation, geographic projections, array functions like d3.group (formerly d3.nest), csv/tsv parsing etc.

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.

Do you find there is any performance difference using Vue.js to do DOM manipulation rather than the D3 methods?

I haven't run benchmarks but I also haven't noticed a difference in performance.

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.

Thanks, that's helpful to know about how you implemented it in Vue vs D3, and that there wasn't a noticeable performance difference for your use case.

Reply on news.ycombinator.com