Easy SVG sparklines
alexplescan.com
Easy SVG sparklines
1–10 of 106 posts
Re: Easy SVG sparklines
#2this works well when you have a few sparklines with a dozen datapoints each, but less well when you have many sparklines with hundreds of datapoints.
Re: Easy SVG sparklines
#3Simple, data-driven graphics like this is one area where SVG really shines, I think. No need to load a JavaScript charting library if you just want some simple line charts like this. I create SVG images fairly often, and maybe half the time I find myself hand-coding them, or at least hand-tweaking them, since I enjoy the magic of seeing code turn into something visual.
Re: Easy SVG sparklines
#4I've recently used this approach for generating Open Graph images for display when a link to the site is used on Twitter, WhatsApp, Facebook, etc [1]. I was pleasantly surprised at how quickly something could be implemented. The last time I'd done something similar was using Cairo and needing to write more of the scaling dynamics. I don't think I ever got it to adjust to dynamic content very well. This time I put together a prototype in Inkscape, converted it to a template and render it to PNG with Sharp [2].
[1]: https://hntrends.net/api/og?word=twitter [2]: https://github.com/lovell/sharp
Re: Easy SVG sparklines
#5this works well when you have a few sparklines with a dozen datapoints each, but less well when you have many sparklines with hundreds of datapoints.
I'd bet an SVG can easily handle hundreds, if not thousands, of datapoints.
Re: Easy SVG sparklines
#6this works well when you have a few sparklines with a dozen datapoints each, but less well when you have many sparklines with hundreds of datapoints.
I'd bet an SVG can easily handle hundreds, if not thousands, of datapoints.
Then you have to deal with scaling, responsiveness, data decimation, etc. It's not really a good idea to just have a multi thousand point line chat rendered real tiny
Re: Easy SVG sparklines
#7pretty good. can user interactive charts be prepared in this way?
Re: Easy SVG sparklines
#8pretty good. can user interactive charts be prepared in this way?
Sure, but you'll need JS for anything complex. You could use SVG+CSS to show/hide specific things like data values on mouseover but it would be a global on/off for the whole chart.
Re: Easy SVG sparklines
#9Earlier quoted context omitted.
I'd bet an SVG can easily handle hundreds, if not thousands, of datapoints.
Then you have to deal with scaling, responsiveness, data decimation, etc. It's not really a good idea to just have a multi thousand point line chat rendered real tiny
If you know what size you're dealing with it's not a huge deal. You can quantize the data and for (small) sparklines that's probably fine because most people view them as miniature glimpses at data rather than granular and accurate.
Re: Easy SVG sparklines
#10But 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.