A context-independent renderer

As a relative beginner to Observable I was having trouble deciding whether to commit to SVG or Canvas for rendering, and then finding myself having to learn two different drawing models for coding both. So I thought I would try to abstract drawing and interaction a little to be independent of drawing context allowing me to change between them without any change to code. I also wanted to be able to incorporate roughJS sketchy rendering without any code changes, and in the future, WebGL for performant rendering.

The result is @jwolondon/renderer, that I hope hits a sweet spot between higher level visualization packages (Vega-Lite, Vega, Plot etc.) and low-level drawing commands to the DOM.

I would value feedback on whether this would be useful to others, whether there are better equivalents that address the problem or enhancements that you’d like to see. Given my relatively recent induction in the modern JavaScript world, any feedback on code improvements are always welcome.

4 Likes

really cool! yes this type of renderer is very much needed. I wonder how this could articulate with d3-path, which D3 uses internally?