Hacker News Reader

Comment by forrestthewoods | Hacker News Reader

I am ever increasingly a fan or just manually generated SVG. Creating DSL abstraction layer on top is fine, I guess. But ultimately I know what I want and it’s easier to just make it directly instead of fighting a tool to try and induce it to make the thing I want.

That said, I’m weird. My blog is artisinally hand crafted HTML, JS, and CSS for the same reason.

View on HN

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

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.

That's true of almost all computer UI (excepting 3D modeling). It's all just boxes and text.

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.

Reply on news.ycombinator.com