There are countless libraries for generating charts on the web. Each serves a slightly different niche, but all of them have one thing in common: t...
For further actions, you may consider blocking this person and/or reporting abuse
Hi Rich,
thanks for the article, that's a very cool idea!
Did you think about making it a bit more accessible by using a
tableordlfor the data? A little bit more data points would be necessary, but I think something like this would improve accessibility:(don't look too detailed at the code, I just put together real quick)
I was also wondering if using
aria-describedbywould be appropriate here to make the connection between the svg and the data element, but I'm not sure about that.Cheers,
Michael
Yes, absolutely — thank you for mentioning this. It's something that really should be a priority of any library that tries to implement these techniques. My initial focus was on figuring out whether or not this was a viable solution at all, but I've just opened an issue to address a11y github.com/Rich-Harris/pancake/iss...
There is in fact a way to solve the text scaling issue: nest your svg with the
polylineinside another svg that contains thetextelements and use percentages to position those. It's important that the top level svg doesn't have aviewBoxin that case.An example:
Daily Svelte developer and long time SVG enthusiast here, I literally just got done making an immensely immature twerk demo in the REPL to experiment with tweened SVG path data svelte.dev/repl/b682e0fda28f40dc99... and was pleased as usual with how Svelte can manipulate SVG so seamlessly, now this? Incredible.
I'm excited to see where this can lead for data viz in Svelte but I'm wondering about your note on pie charts, is there no plan for integrating pie charts in Pancake or is it just something that hasn't been tackled yet?
Personally I'd love to see some Pancake.Pie and Pancake.Donut components if for nothing else than the delicious names.
JS God. Now CSS God. 🙇🏻♂️🙇🏻♀️
I'm curious to what point we can push things with SVG. I recently needed to embed multiple animated SVGs into components in an Angular project. (A single canvas wasn't a straightforward option; unless I treated it as a spritesheet perhaps?) There was a noticeable performance impact on load; and significant CPU load caused by simple animations in the SVGs themselves.
TBH I'm not sure how much of the load slowdown was the data processing + angular rendering the dynamic SVGs and how much was the browser having to parse/render the generated SVG markup; but it felt like both contributed to the delay (I suppose this should actually be obvious from the performance data). From what I could find, the CPU load caused by animation seems to be a known issue: not all browsers optimise for animation in SVG (whether it's SMIL or CSS-based) - Chrome being a notable culprit...
I'm now looking at D3 for another project and much prefer the approach you've taken here: passing attributes into a dynamically created SVG via JS feels really verbose in comparison to writing them directly in the markup.
Anyway - thanks for the article and thanks for Svelte!
another clever solution is chaarts : ffoodd.github.io/chaarts/index.html
semantic
thanks for the great resource!
Really cool Rich. I've added pancake to my svelte app and am using it to make little sparkline graphs. It works, but the only issue is that I'm not getting the chart to refresh on data change (need to reload the browser). For data, I'm just using a simple array like in your example /// sourceData = [10, 2, 4, -3, 14, 12, -4, 8, 9].
Thanks for this article! Great tips on making responsive axis. I will check pancake in my next svelte project :)
"..but the homepage has examples you can climb from" I mean, it is like climbing, every time there is a goal higher than you can achieve right now