4 ms·

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

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.

lo5 4y ago
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 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
- forrestthewoods 4y ago
  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.
  - infinite8s 4y ago
    That's true of almost all computer UI (excepting 3D modeling). It's all just boxes and text.
    - forrestthewoods 4y ago
      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.
lostdog 4y ago
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.

4 ms·

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

by forrestthewoods 4y ago

lo5 4y ago
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 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
- forrestthewoods 4y ago
  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.
  - infinite8s 4y ago
    That's true of almost all computer UI (excepting 3D modeling). It's all just boxes and text.
    - forrestthewoods 4y ago
      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.
lostdog 4y ago
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.