Comment by biowaffeln
2 days ago
recently i've been having a lot of success with working with d3 + solid.js. I use d3 as the data processing layer, and solid for actually rendering svgs from the data. the combination is lovely, you get all the power of d3, while the parts that usually end up verbose are written succinctly in jsx. and it's a lot less pain than doing it in react, because the mental models of solid/d3 feel much more aligned
I'll check that out. At the moment I'm just building up a bunch of template code which I'll re-use. But might check out solid.js.
can you elaborate a bit? how do you use d3 but not have it render svgs?
D3 provides a bunch of utilities for building visualizations beyond DOM manipulation. Here are some of the modules I use regularly:
- d3-array: data processing
- d3-scale: mapping from data attributes to visualization encodings
- d3-scale-chromatic: color schemes
- d3-shape: defining the shapes of paths, such for a line chart
- d3-color: manipulating colors
- d3-time: manipulating dates
- d3-format: formatting numbers
- d3-time-format: formatting dates
These modules are useful even if you don't use D3 to manage the DOM. For example, you can use these utilities to help calculate all of the attributes for your SVG elements, but then use Svelte/React/Solid/Vue to create and render the SVG.
If I'm building a visualization inside of a web app, I tend to prefer this approach since it leaves the framework in control of the DOM throughout the whole app. It feels simpler, especially if I want interactions in the visualization to modify the app's state.
D3 renders using the logic you provide, and while it gives you a lot of helpers to make it easy to write SVG or HTML canvas tags, it's just as easy to tie it into other JS frameworks as well.