Mastodawn

🆕 blog! “Stupidly Simple SVG Sparklines”

A sparkline is a little line-graph with no axes or other unnecessary details. They're useful for getting quick understanding of what the data is showing.

They're also really easy to create programmatically.

This uses the SVG "polyline" which takes a list of x,y co-ordinate pairs. But can you spot the small problem?

<svg…

Stupidly Simple SVG Sparklines

A sparkline is a little line-graph with no axes or other unnecessary details. They're useful for getting quick understanding of what the data is showing. They're also really easy to create programmatically. This uses the SVG "polyline" which takes a list of x,y co-ordinate pairs. But can you spot the small problem? ⧉ SVG<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 124"> <…

Terence Eden’s Blog

Show thread

Emily_S May 13

@Edent instead of transforming every point could you apply a matrix transform to the root element to flip it upside down? Think it would still need to know the height of the view port but it would not need to be known outside the image so much

Show thread

Terence Eden May 13

@emily_s ooooh! Good point 🙂

Show thread

Emily_S May 13

@Edent I think you'll still need to either know the viewport size outside or the min and max values of the data to be able to scale the chart to the viewport (or the other way around) but I guess it saves you doing one of the multiples manually.

Show thread

Manuel Strehl 🫏

@emily_s @Edent unfortunately, yes. I had the same problem when trying to use glyphs from SVG fonts as graphics. (They use a mirrored Y axis as well.)

https://github.com/Codepoints/unicode2mysql/blob/main/bin/fonts_to_sql.js#L93

But if you’ve got the height of the sparklines, the transform is as simple as

transform="translate(0, -HEIGHT) scale(1, -1)"

unicode2mysql/bin/fonts_to_sql.js at main · Codepoints/unicode2mysql

The code that powers the codepoints.net data import - Codepoints/unicode2mysql

GitHub