Live data from Hacker News

Easy SVG sparklines

alexplescan.com

11–20 of 106 posts

Re: Easy SVG sparklines

#11
post #10

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

Hard to imagine that pure-HTML SVG is really slower than Canvas which relies on JS..

Re: Easy SVG sparklines

#12
post #9
post #6

Earlier quoted context omitted.

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.

+1, the whole point of a sparkline is to compactly show a trend. Packing a gazillion data points is not the right use

Re: Easy SVG sparklines

#13
post #2

this 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.

You're populating a tiny template with a tiny list of numbers to produce a tiny plaintext document that will cache like Scrooge McDuck.

Why do you think this is going to be a problem?

Re: Easy SVG sparklines

#15
post #10

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

In that case, browsers should optimize SVG more.

Re: Easy SVG sparklines

#16
post #10

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

Hard to imagine that pure-HTML SVG is really slower than Canvas which relies on JS..

Especially if we're talking using "many hundreds or even thousands of them" on a page.

Re: Easy SVG sparklines

#17
post #3

Simple, 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.

do you have a blog

Re: Easy SVG sparklines

#18
post #3

Simple, 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.

SVGs are amazing for interactive visualisation too. Like Flamegraphs: https://www.brendangregg.com/flamegraphs.html

Re: Easy SVG sparklines

#19
post #9
post #6

Earlier quoted context omitted.

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.

Totally. I just mean that logic has to live somewhere, whether in client-side JS or a server. It's not a great practice to just blindly render SVGs out of raw data.

Re: Easy SVG sparklines

#20
post #10

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

Hard to imagine that pure-HTML SVG is really slower than Canvas which relies on JS..

It is, it is! SVG is DOM, with event handling on every node, with attempts to apply CSS rules. Canvas for non-interactive charts is just "draw once and forget". It is a sequence of moveTo + lineTo, then you have a bitmap and nothing else. Extremely basic graphics, modern JS engines will handle it in the blink of an eye.

I don't even mention the fact that article suggests to return each SVG sparkline in a separate request.

Post reply on HN