31–40 of 106 posts
I've used a similar technique to implement one of the graphs for small "header dashboard" for a trading tool at my previous job. It was replacing an old decrepit tool and I wanted to add some pizzaz to the tool, and had an obsession with SVG and micro interactions at the time, so I've basically implemented most of the little graphics using hand-emitted SVG that was manipulatied through React. The updates happened in…
This is cool! For those who don't know, there's a font called Sparks that uses glyphs to create sparklines: https://github.com/aftertheflood/sparks
Very neat idea, though! I did find this example: https://observablehq.com/@tomgp/sparks-with-live-data
For those examples to work (which they still do), the URL references to the font data in the stylesheet should ostensibly still be valid: https://tools.aftertheflood.com/sparks/styles/font-faces.css
And it's often interesting to see trends or cycles emerge as people in different geographical regions wake up and log on. Some comments play much better in the US than in Asia or the EU and vice versa, and sparklines would be a good way to observe that.
Earlier quoted context omitted.
In that case, browsers should optimize SVG more.
SVG could never be as fast as canvas.
[1] Obviously if you're zooming and transforming and animating layers there is going to be a cost, but that should be compared with doing the same with a canvas.
A static svg unit circle
Example adapted from: https://simpatico.io/svg.md#naturalunits
In this way you can use the intuition about the coordinate system that you built in school.
But SVG is slower than Canvas. The main use case for sparklines is embedding them into cells, many hundreds or even thousands of them [1]. With hundreds of SVG files page becomes becomes visibly slower (first paint, scroll, interactions). I suggest to invest some time and check canvas solution too. [1]: https://www.google.com/search?q=sparkline&tbm=isch
This is only an issue on chrome-based browsers; performance in Firefox is much closer to what you would expect. You can/could (late 2022) reliably crash chrome by displaying 1000+ unique SVG files on one page, with each SVG simply displaying a single line of text. My current workaround is rendering the SVGs to png serverside if the client is chrome-based, as canvas feels like the wrong solution.
I like it! But instead of modifying your data to suit SVG's default coordinate system, I suggest using a top-level "g" tag with a "transform/scale" attribute. Like this: A static svg unit circle Example adapted from: https://simpatico.io/svg.md#naturalunits In this way you can use the intuition about the coordinate system that you built in school.