I have a few sites, like census.yonson.dev, where I want to show some data in graph form. Plot some points. That data is relatively very small, like a few days of data for just a months worth. And it doesn’t require some sort of complex data analysis graph. I was hoping I could pull this off without having to introduce javascript to my sites. I hate javascript with an un-deserved, or perhaps deserved, passion. I went down a few paths.
First, I thought SVGs might be perfect for this. I can’t say I am an expert on SVGs even after using them a handful of times in the past few years, but the basic idea is they are a specialized element which draws shapes. Internally they look HTML-like with their XML syntax and they even use CSS for some styling. But there appears to be a bit of an uncanny valley situation here, because the interaction between the DOM and the SVG element is always a little off from what I would expect.
The spot where they get really weird is on mobile devices. The graphs scale down nicely, but any <text> elements also get scaled down, as you would expect, but it just gets too tiny. So you might think this would be a good spot for some CSS media queries. But setting CSS outside of a SVG to control its internals is not a very common pattern. Lots of times these graphing libraries use inline CSS on the SVG <text> elements to control how they render. They don’t want you messing with them. And maybe with good reason, I dunno, never maintained an SVG graphing library. I tried to find an SVG library that fit my preferred CSS pattern, but I appear to be a very small minority.
The second option is <canvas> elements. These are black boxes which require javascript to draw them at runtime. Way more javascript-y, which I don’t like, but it does handle the scaling better. But yea, just no interaction with CSS at all, so you have to copy over any styling to the “driving” javascript.