This is definitely possible, and gives you a high degree of control over the visual design of visualizations.
I built an experimental system to do just that - design the layout and all data visualizations in a single Sketch/Figma document, export to SVG, then map data to the SVG elements in the browser. It's all 100% declarative.
Here's an over-the-top example: https://youtu.be/S9cmi89fvT8
There are no limits to what you can achieve with this approach, but obviously needs Sketch/Figma skills (or a colleague who does).
edit: typo
Re:A Tiny Grammar of Graphics
by forrestthewoods on Tuesday June 14, 2022 @11:18PM
(#31748748)
I’ve done it in both JavaScript and Rust. At the end of the day it’s just a bunch of lines, circles, polygons, and text.
Re:A Tiny Grammar of Graphics
by infinite8s on Wednesday June 15, 2022 @09:09AM
(#31752344)
That's true of almost all computer UI (excepting 3D modeling). It's all just boxes and text.
Re:A Tiny Grammar of Graphics
by forrestthewoods on Wednesday June 15, 2022 @11:32AM
(#31754529)
Kind of. Except with SVG data viz you likely don’t need a layout engine. It doesn’t need to be “responsive” and render differently on different devices.
I also find that writing SVG directly is easiest.
There are a few primitives that d3 uses, and once you implement those you can produce easy SVG results. `Scale` is the most important, for mapping your x,y plane into SVG pixel coordinates. Then some of the ticks helpers can be handy too.
Writing the SVG directly is just the fastest way to get what you need.
That said, I’m weird. My blog is artisinally hand crafted HTML, JS, and CSS for the same reason.