Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Easy SVG sparklines

alexplescan.com

Post reply on HN
Print view View original

51–60 of 106 posts

Re: Easy SVG sparklines

#51

Post by wryanzimmerman »

Lockal wrote: 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

I find it hard to imagine a use-case for thousands of sparklines on screen at the same time! And if it’s not on screen, you don’t need to render it.

Instead of using svg files, just include them in the html, and make them simple. Each svg sparkline only needs to be two elements (the tag and one ), which is crazy efficient.

Canvas uses one element, instead of two, but you have to create a custom implementation of path rendering and do all that work in JavaScript instead of native browser APIs.

Canvas pulls ahead with drawing complex images where you have a single pixel buffer representing thousands of individual “shapes” because the DOM itself is optimized for interaction, not just drawing pixels, but I think that’s a different use-case from sparklines.

Re: Easy SVG sparklines

#52

Post by lazyjeff »

Lockal wrote: 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

There's an open source project I was briefly involved in called SSVG [1] that renders the SVG as Canvas to speed it up drastically, especially on Chrome. It works as a simple one-line js drop in for many common visualization examples [2].

[1] https://ssvg.io/ [2] https://ssvg.io/examples

Re: Easy SVG sparklines

#53

Post by mindok »

pictur wrote: post #7

pretty good. can user interactive charts be prepared in this way?

Yes, but depending on the interactions it can get complex quickly. D3.js handles all the interactions in JS on the client. ContEx (elixir server-side charting) handles certain events (e.g. data point click) server side (see https://contex-charts.org/barcharts - turn on “show clicked bar” option). Showing data point detail, e.g. “On hover” would require client side code.

(Disc: ContEx author)

Re: Easy SVG sparklines

#54

Post by thehappypm »

fuzzy2 wrote: post #25
thehappypm wrote: post #11

Earlier quoted context omitted.

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

Ah, but Canvas does not rely on JS. You would update it using JS, yes. When you don’t update it, it’s just another image. Browsers are quite good at images. In the end, I think it’s down to the complexity of the graph and the dimensions (in pixels, because images need memory, too).

How do you draw an image on a canvas without JS?

Re: Easy SVG sparklines

#55

Post by ComputerGuru »

javajosh wrote: post #46
bla3 wrote: post #40

Earlier quoted context omitted.

Doesn't this flip all text in the SVG upside down?

Alas, yes. And you have to reflip it with another g/scale. But such is life!

A bigger problem is that it breaks text rendering. Transforms turn off pixel snapping in the hinting engine so you’ll get blurry text or lines.

(At least if you applied it as a css transform you would. Maybe if you did it natively in svg you wouldn’t?)

Re: Easy SVG sparklines

#56

Post by bob1029 »

This is fantastic. I'm already using string interpolation & builders for my HTML/JS/CSS source, so why not the same for SVG?

I didn't realize the syntax was so straightforward. It looks like you could even build the final SVG with some clever SQL queries if all you need to do is produce a time series visual (i.e. string aggregation over Path).

Re: Easy SVG sparklines

#57

Post by 082349872349872 »

solardev wrote: post #19
nkozyra wrote: post #9

Earlier quoted context omitted.

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.

Aha, I misunderstood — I'd thought you were thinking of rendering multiple small SVGs.

Good point, although decimation for sparklines shouldn't be that difficult: I've done completely stupid decimation (recursively split stopping whenever linear fit is close enough) for live GPS traces and (because people are only using them qualitatively) no one ever complained.

Re: Easy SVG sparklines

#58

Post by fuzzy2 »

thehappypm wrote: post #54
fuzzy2 wrote: post #25

Earlier quoted context omitted.

Ah, but Canvas does not rely on JS. You would update it using JS, yes. When you don’t update it, it’s just another image. Browsers are quite good at images. In the end, I think it’s down to the complexity of the graph and the dimensions (in pixels, because images need memory, too).

How do you draw an image on a canvas without JS?

You don’t. My point is: After drawing, the canvas is “inert”. Rendering to the canvas once is probably more or less as expensive as rendering the SVG once. However, the SVG will probably be rendered a lot more than once. The page developer cannot control it either, the browser decides what’s best.

Re: Easy SVG sparklines

#59

Post by esafak »

wryanzimmerman wrote: post #51
Lockal wrote: 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

I find it hard to imagine a use-case for thousands of sparklines on screen at the same time! And if it’s not on screen, you don’t need to render it. Instead of using svg files, just include them in the html, and make them simple. Each svg sparkline only needs to be two elements (the tag and one ), which is crazy efficient. Canvas uses one element, instead of two, but you have to create a custom implementation of path…

A spreadsheet with numerous sparklines per row would get you there.

Re: Easy SVG sparklines

#60

Post by psygn89 »

chefandy wrote: post #38

Maybe it's just because I have so much experience with design and visual art, but I think SVG is one of the most, if not the most underutilized web format. It's great for the self-contained static vector graphics that it's most commonly used for, but it can do so much more. SMIL animations can be a little clunky, but having an alternative to gif and video that doesn't require JS is pretty rad-- especially for throbbe…

I wish would accept `fill` property through css. There's a neat trick to colorize SVG's: https://angel-rs.github.io/css-color-filter-generator/
Post reply on HN