6 ms·

The Tao of Unicode Sparklines (2021)

106 points by fanf2 2y ago

Tomte 2y ago
It‘s unfortunate that the fill blocks seem to dip below the baseline. It looks untidy.
- deleted 2y ago
  [deleted]
- divbzero 2y ago
  OP discusses the below-the-baseline issue describes it as “annoying but not a deal breaker”. If this is a deal breaker because you’re aspiring for Edward Tufte levels of visualization purity, OP also offers an alternative that omits below-the-baseline U+2584 and U+2588. The trade off is having fewer unequally sized buckets for the data. (Could there be font faces without this rendering issue?)
  - divbzero 2y ago
    > (Could there be font faces without this rendering issue?) A comment under OP suggests that the rendering issue is font-dependent. When I view a Unicode sparkline on a test page [1], the rendering issue occurs using Arial, Courier New, Gill Sans, Helvetica, or Times New Roman, but appears to be fixed if I use Georgia, Menlo, or Comic Sans. [1]: https://rosettacode.org/wiki/Sparkline_in_unicode https://rosettacode.org/wiki/Sparkline_in_unicode
  - uj8efdjkfdshf 2y ago
    If you're going to pick a font to avoid this issue you might as well as define your own custom sparkline font with fancy ligatures.
    - divbzero 2y ago
      That’s a very interesting idea. Apparently, someone has actually tried this [1] and it looks pretty good [2]. [1]: https://github.com/aftertheflood/sparks https://github.com/aftertheflood/sparks [2]: https://observablehq.com/@tomgp/after-the-flood-i-sparks-i-typeface https://observablehq.com/@tomgp/after-the-flood-i-sparks-i-t...
- Gare 2y ago
  On (mobile) Firefox they don't. And all are of equal width.
- rbanffy 2y ago
  It really depends on the font choice and terminal engine. Some terminals (such as VTE, which is the base for most Gnome terminals) renders blocks and boxes without using a font, which makes them perfectly fit the character cell. With Unicode 16, which is coming out very shortly, there will be 2x4 mosaics (originally identified on Kaypro CP/M machines), which have about half the vertical resolution of the blocks, but twice the time resolution (and allows us to leave Braille for what it was intended for). After this post came out, Unicode 13 introduced Teletext 2x3 mosaics and their "smoothed" versions (with diagonal lines). Those are also useful for sparklines.
- TheRealPomax 2y ago
  That depends entirely on the font used.
nsfmc 2y ago
the unicode angle is great for moving sparklines back into the terminal especially making it into a postgres function, since it makes so much ad-hoc analysis easier at the point of query. it also solves the problem where sparklines feel useful to somebody reading a summary and not so useful to somebody that's just exploring data "in the moment." having it be available in postgres is brilliant. a bit of shameless self promotion, i had done something similar ages ago but with a custom webfont and some small js to handle scaling of the input dataset, solving the problem of unicode graph characters not being baseline aligned well. http://nsfmc.github.io/chartjunk/ http://nsfmc.github.io/chartjunk/ (turns into dust while looking at the last commit date)
deleted 2y ago
[deleted]
throw0101d 2y ago
Meta: for the old fogies out there, Jon Udell used to write for BYTE back in the day: * https://en.wikipedia.org/wiki/Jon_Udell https://en.wikipedia.org/wiki/Jon_Udell He stood up their first web site in 1995: > One day this spring, an HTTP request popped out the back of my old Swan 386/25, rattled through our LAN, jumped across an X.25 link to BIX, negotiated its way through three major carriers and a dozen hosts, and made a final hop over a PPP link to its rendezvous with BYTE's newborn Web server, an Alpha AXP 150 located just 2 feet from the Swan. * https://web.archive.org/web/19990128182622/http://www.byte.com/art/9507/sec7/art4.htm https://web.archive.org/web/19990128182622/http://www.byte.c... * https://twitter.com/judell/status/1278883833903898624 https://twitter.com/judell/status/1278883833903898624 * https://vintageapple.org/byte/pdf/199507_Byte_Magazine_Vol_20-07_The_World_@_Your_Command.pdf https://vintageapple.org/byte/pdf/199507_Byte_Magazine_Vol_2...
- deleted 2y ago
  [deleted]
sonofhans 2y ago
This is a great hack, but it makes bad sparklines. It’s probably about as good as you can get with unicode, so props to Jon. Sparklines have a few important properties which these do not exhibit. They’re typically higher resolution, with more data per inch. Also the slopes from point to point, and the whitespace under the typical graph/sparkline, help readability.
- layer8 2y ago
  Maybe we need terminal escape codes to temporarily switch to linked alternative fonts. ;)
  - estebank 2y ago
    Congratulations on reinventing sixels. :)
    - hnlmorg 2y ago
      Sixel is different. It’s a way of drawing graphics rather than switching to alternative character sets. Sixels could be used here too, but native support for vector graphics would be nicer. I’m also of the opinion that sixel sucks as a modern option. It’s got a low DPI resolution, cannot be compressed, and is its own bespoke specification which means lots of additional work for terminal maintainers. Which is why most terms these days go with their own escape sequences for natively supporting common formats like PNG and JPEG. In my own terminal emulator, I’ve got support for several image formats but I doubt I’ll ever bother with sixel.
  - hnlmorg 2y ago
    There are already several escape sequences for doing just this. In fact the original way of drawing terminal graphics was using a 7bit escape sequence to switch to a terminal graphics font. Personally I’d rather see in-lined vector graphics become better supported. This was available on some of the Techtonix (iirc) hardware VTs and as far as I know, the only widespread terminal emulator to support that particular mode is xterm.
pphysch 2y ago
Beyond Unicode, it should be possible to define a Web Component that generates SVG on-the-fly from a datasource. Imagine: <sparkline src="an image or csv"\> One cool thing about SVG is it can inherit styles from your application, so you can produce e.g. dark-mode aware graphics rather easily, also one of the perks of this Unicode approach.
- TheRealPomax 2y ago
  This would be 5 minutes work. A whole 10 if we want to respond to attribute changes in a cleanish way: https://jsbin.com/rumakulido/1/edit?html,css,js,output https://jsbin.com/rumakulido/1/edit?html,css,js,output
  - TheRealPomax 2y ago
    Although of course, we don't even need a custom element here, this already has a pure-CSS solution: https://jsbin.com/xuwicoquwo/edit?html,css,js,output https://jsbin.com/xuwicoquwo/edit?html,css,js,output
    - pphysch 2y ago
      Nice. A real SVG sparkline would use polyline or path, though. Not much point in using Unicode glyphs.
      - TheRealPomax 2y ago
        Eh, you'd probably use <rect> rather than a single <path>, because then you can trivially slice your sparkline and tag every tick with metadata. So for simple sparklines you don't really need a custom element. Page elements already follow a box model, just CSS them boxes =) But for an annotated data set that renders as a sparkline, a custom element with an SVG shadow DOM probably makes sense. Definitely more work than the "this'll do for most folks" solution though =D
- nick-of-time 2y ago
  People have done something like this. No standard web component so far unfortunately. https://alexplescan.com/posts/2023/07/08/easy-svg-sparklines/ https://alexplescan.com/posts/2023/07/08/easy-svg-sparklines...
Izkata 2y ago
FULL BLOCK is slightly shorter than LOWER SEVEN EIGHTHS BLOCK for me. They would be the same height except LOWER SEVEN EIGHTHS BLOCK has some antialiasing that extends a tiny bit higher while FULL BLOCK is a solid edge. Also none of them drop below the baseline in the main page text, only in the code block. (Firefox on Ubuntu 20.04)
- AceJohnny2 2y ago
  (Safari 17 on MacOS 14) FULL BLOCK is the largest to me, but also dips below the line by about as much as it is above LOWER SEVEN EIGTHS BLOCK. And unlike the author, LOWER HALF BLOCK (U+2584) does not dip below the line. Aah, multi-platform font rendering... ;)
- TheRealPomax 2y ago
  Digital typefaces are fun! Because whether they render sensibly is 100% a font issue.
ggm 2y ago
Why would you call a histogram a line? If you segment your data into buckets, its a histogram. Histospark? SparkGram?
- zamadatix 2y ago
  By that argument any shaded line chart which is rasterized becomes a histogram by way of each column of pixels being a bar :p. (i.e. the "binning" is just the horizontal resolution of the rasterization, not a choice in abandoning the intent of showing a line).
  - ggm 2y ago
    Eh. if you set out to chart and the system rasterises or dithers, its a line. If you set out to divide your data into buckets and hand-select the elements to represent the slope of the trend from a set of 8.. It's ..
WalterBright 2y ago
More Unicode mission creep. What's next, 4 characters that form 90 degree line segments, so you can write a circle? If you want images, use gifs. Grump grump grump.
- deleted 2y ago
  [deleted]
- samatman 2y ago
  That's uh. I dunno how to tell ya this Walter. Coming your way in Unicode 16.0... Allow me to introduce: BOTTOM LEFT JUSTIFIED UPPER RIGHT QUARTER BLACK CIRCLE! https://www.unicode.org/charts/PDF/Unicode-16.0/U160-1FB00.pdf https://www.unicode.org/charts/PDF/Unicode-16.0/U160-1FB00.p... But wait! There's more! U+1CC31, UPPER CENTRE LEFT TWELFTH CIRCLE! And you best believe there's 11 more. https://www.unicode.org/charts/PDF/Unicode-16.0/U160-1CC00.pdf https://www.unicode.org/charts/PDF/Unicode-16.0/U160-1CC00.p...
  - Joker_vD 2y ago
    I personally like getting more terminal-oriented ideographical symbols in the Unicode; what I don't like is yet another font variation for the basic Latin alphabet. Oh well.
    - zamadatix 2y ago
      I think there comes a point we should just embrace sixels so you can draw whatever it is you want to be shown in a character cell. That point is usually somewhere around here where it's "sure, I can copy it as normal text data but is it actually going to look like anything like it's supposed in a normal font anyways?". Even Windows is getting support for sixels now.
  - WalterBright 2y ago
    gag me with a spoon
- Joker_vD 2y ago
knlb 2y ago
I have a small python (hy) package which extends the idea to horizon charts https://github.com/kunalb/orphism https://github.com/kunalb/orphism
rurban 2y ago
I once had a bash script to produce such horizontal spark lines from numeric input, but I forgot it's name. Anyone remembers it? From about the same time. As described here: https://rosettacode.org/wiki/Sparkline_in_unicode https://rosettacode.org/wiki/Sparkline_in_unicode
- rurban 2y ago
  Found it! https://github.com/holman/spark/blob/master/spark https://github.com/holman/spark/blob/master/spark
quink 2y ago
🬼🭈🭆🭑🬽🭋🭎🭆🬹🭑🭄🭎🬭🭆🬿🭊 Teletext in Unicode - each character is three pixels tall, two pixels wide, with separate characters for inverse as well, and diagonals to get you from one set to another. https://en.wikipedia.org/wiki/Teletext_character_set#Graphics_character_sets https://en.wikipedia.org/wiki/Teletext_character_set#Graphic... Intended for use with teletext graphics, but hey, do a sparkline with them, why not? Sure, it'll only do you four levels, but do you really need more than that in this use case? Previously on Hacker News: https://news.ycombinator.com/item?id=40269606 https://news.ycombinator.com/item?id=40269606
- quink 2y ago
  Actually... they're not meant to have gaps between these lines, so: (never mind, Hacker News stripped some characters, probably because of non-BMP things, it looks like, but imagine the above on subsequent lines without a gap)
  - deleted 2y ago
    [deleted]
rkharsan64 2y ago
There's also this font that uses OpenType Contextual Alternates to create sparklines from text: https://aftertheflood.com/journal/the-worlds-first-code-free-sparkline-typeface/ https://aftertheflood.com/journal/the-worlds-first-code-free...
- boffinAudio 2y ago
  Alas, the .zip file containing those fonts is no longer accessible. Along similar lines, the absolutely delightful FF Chartwell has sparkline capabilities, plus a lot, lot more to boot (and it actually predates After-the-Floods attempt by half a decade): https://www.vectrotype.com/chartwell https://www.vectrotype.com/chartwell
boffinAudio 2y ago
As a fan of Sparklines (and Tufte in general), I have to shout out to one of my favourite places that sparklines have been used - in sudara's Audio Sparkline library for the popular JUCE Audio processing framework: https://github.com/sudara/melatonin_audio_sparklines https://github.com/sudara/melatonin_audio_sparklines The reason this is such a nerd tickle, is that sudara even went as far as to teach lldb how to render arrays' using sparklines, meaning one can get a pretty useful clue about the contents of an audio buffer within the debugger: https://forum.juce.com/t/new-audio-sparklines-module/46606 https://forum.juce.com/t/new-audio-sparklines-module/46606 This, to me, aligns very much with the "Tao" of sparklines - although of course I've modified my local copy to use unicode fonts, which is either heinous or fabulous, depending on how much coffee I've had before I have to hit up lldb for details about why my day is going to be good/bad... ;)
willm 2y ago
I'd be remiss if I didn't share this... https://textual.textualize.io/widgets/sparkline/ https://textual.textualize.io/widgets/sparkline/

106 points by fanf2 2y ago

Tomte 2y ago

It‘s unfortunate that the fill blocks seem to dip below the baseline. It looks untidy.

deleted 2y ago
[deleted]
divbzero 2y ago
OP discusses the below-the-baseline issue describes it as “annoying but not a deal breaker”. If this is a deal breaker because you’re aspiring for Edward Tufte levels of visualization purity, OP also offers an alternative that omits below-the-baseline U+2584 and U+2588. The trade off is having fewer unequally sized buckets for the data. (Could there be font faces without this rendering issue?)
- divbzero 2y ago
  > (Could there be font faces without this rendering issue?) A comment under OP suggests that the rendering issue is font-dependent. When I view a Unicode sparkline on a test page [1], the rendering issue occurs using Arial, Courier New, Gill Sans, Helvetica, or Times New Roman, but appears to be fixed if I use Georgia, Menlo, or Comic Sans. [1]: https://rosettacode.org/wiki/Sparkline_in_unicode https://rosettacode.org/wiki/Sparkline_in_unicode
- uj8efdjkfdshf 2y ago
  If you're going to pick a font to avoid this issue you might as well as define your own custom sparkline font with fancy ligatures.
  - divbzero 2y ago
    That’s a very interesting idea. Apparently, someone has actually tried this [1] and it looks pretty good [2]. [1]: https://github.com/aftertheflood/sparks https://github.com/aftertheflood/sparks [2]: https://observablehq.com/@tomgp/after-the-flood-i-sparks-i-typeface https://observablehq.com/@tomgp/after-the-flood-i-sparks-i-t...
Gare 2y ago
On (mobile) Firefox they don't. And all are of equal width.
rbanffy 2y ago
It really depends on the font choice and terminal engine. Some terminals (such as VTE, which is the base for most Gnome terminals) renders blocks and boxes without using a font, which makes them perfectly fit the character cell. With Unicode 16, which is coming out very shortly, there will be 2x4 mosaics (originally identified on Kaypro CP/M machines), which have about half the vertical resolution of the blocks, but twice the time resolution (and allows us to leave Braille for what it was intended for). After this post came out, Unicode 13 introduced Teletext 2x3 mosaics and their "smoothed" versions (with diagonal lines). Those are also useful for sparklines.
TheRealPomax 2y ago
That depends entirely on the font used.

nsfmc 2y ago

the unicode angle is great for moving sparklines back into the terminal especially making it into a postgres function, since it makes so much ad-hoc analysis easier at the point of query. it also solves the problem where sparklines feel useful to somebody reading a summary and not so useful to somebody that's just exploring data "in the moment." having it be available in postgres is brilliant. a bit of shameless self promotion, i had done something similar ages ago but with a custom webfont and some small js to handle scaling of the input dataset, solving the problem of unicode graph characters not being baseline aligned well. http://nsfmc.github.io/chartjunk/ http://nsfmc.github.io/chartjunk/ (turns into dust while looking at the last commit date)

deleted 2y ago

[deleted]

throw0101d 2y ago

Meta: for the old fogies out there, Jon Udell used to write for BYTE back in the day: * https://en.wikipedia.org/wiki/Jon_Udell https://en.wikipedia.org/wiki/Jon_Udell He stood up their first web site in 1995: > One day this spring, an HTTP request popped out the back of my old Swan 386/25, rattled through our LAN, jumped across an X.25 link to BIX, negotiated its way through three major carriers and a dozen hosts, and made a final hop over a PPP link to its rendezvous with BYTE's newborn Web server, an Alpha AXP 150 located just 2 feet from the Swan. * https://web.archive.org/web/19990128182622/http://www.byte.com/art/9507/sec7/art4.htm https://web.archive.org/web/19990128182622/http://www.byte.c... * https://twitter.com/judell/status/1278883833903898624 https://twitter.com/judell/status/1278883833903898624 * https://vintageapple.org/byte/pdf/199507_Byte_Magazine_Vol_20-07_The_World_@_Your_Command.pdf https://vintageapple.org/byte/pdf/199507_Byte_Magazine_Vol_2...

deleted 2y ago
[deleted]

sonofhans 2y ago

This is a great hack, but it makes bad sparklines. It’s probably about as good as you can get with unicode, so props to Jon. Sparklines have a few important properties which these do not exhibit. They’re typically higher resolution, with more data per inch. Also the slopes from point to point, and the whitespace under the typical graph/sparkline, help readability.

layer8 2y ago
Maybe we need terminal escape codes to temporarily switch to linked alternative fonts. ;)
- estebank 2y ago
  Congratulations on reinventing sixels. :)
  - hnlmorg 2y ago
    Sixel is different. It’s a way of drawing graphics rather than switching to alternative character sets. Sixels could be used here too, but native support for vector graphics would be nicer. I’m also of the opinion that sixel sucks as a modern option. It’s got a low DPI resolution, cannot be compressed, and is its own bespoke specification which means lots of additional work for terminal maintainers. Which is why most terms these days go with their own escape sequences for natively supporting common formats like PNG and JPEG. In my own terminal emulator, I’ve got support for several image formats but I doubt I’ll ever bother with sixel.
- hnlmorg 2y ago
  There are already several escape sequences for doing just this. In fact the original way of drawing terminal graphics was using a 7bit escape sequence to switch to a terminal graphics font. Personally I’d rather see in-lined vector graphics become better supported. This was available on some of the Techtonix (iirc) hardware VTs and as far as I know, the only widespread terminal emulator to support that particular mode is xterm.

pphysch 2y ago

Beyond Unicode, it should be possible to define a Web Component that generates SVG on-the-fly from a datasource. Imagine: <sparkline src="an image or csv"\> One cool thing about SVG is it can inherit styles from your application, so you can produce e.g. dark-mode aware graphics rather easily, also one of the perks of this Unicode approach.

TheRealPomax 2y ago
This would be 5 minutes work. A whole 10 if we want to respond to attribute changes in a cleanish way: https://jsbin.com/rumakulido/1/edit?html,css,js,output https://jsbin.com/rumakulido/1/edit?html,css,js,output
- TheRealPomax 2y ago
  Although of course, we don't even need a custom element here, this already has a pure-CSS solution: https://jsbin.com/xuwicoquwo/edit?html,css,js,output https://jsbin.com/xuwicoquwo/edit?html,css,js,output
  - pphysch 2y ago
    Nice. A real SVG sparkline would use polyline or path, though. Not much point in using Unicode glyphs.
    - TheRealPomax 2y ago
      Eh, you'd probably use <rect> rather than a single <path>, because then you can trivially slice your sparkline and tag every tick with metadata. So for simple sparklines you don't really need a custom element. Page elements already follow a box model, just CSS them boxes =) But for an annotated data set that renders as a sparkline, a custom element with an SVG shadow DOM probably makes sense. Definitely more work than the "this'll do for most folks" solution though =D
nick-of-time 2y ago
People have done something like this. No standard web component so far unfortunately. https://alexplescan.com/posts/2023/07/08/easy-svg-sparklines/ https://alexplescan.com/posts/2023/07/08/easy-svg-sparklines...

Izkata 2y ago

FULL BLOCK is slightly shorter than LOWER SEVEN EIGHTHS BLOCK for me. They would be the same height except LOWER SEVEN EIGHTHS BLOCK has some antialiasing that extends a tiny bit higher while FULL BLOCK is a solid edge. Also none of them drop below the baseline in the main page text, only in the code block. (Firefox on Ubuntu 20.04)

AceJohnny2 2y ago
(Safari 17 on MacOS 14) FULL BLOCK is the largest to me, but also dips below the line by about as much as it is above LOWER SEVEN EIGTHS BLOCK. And unlike the author, LOWER HALF BLOCK (U+2584) does not dip below the line. Aah, multi-platform font rendering... ;)
TheRealPomax 2y ago
Digital typefaces are fun! Because whether they render sensibly is 100% a font issue.

ggm 2y ago

Why would you call a histogram a line? If you segment your data into buckets, its a histogram. Histospark? SparkGram?

zamadatix 2y ago
By that argument any shaded line chart which is rasterized becomes a histogram by way of each column of pixels being a bar :p. (i.e. the "binning" is just the horizontal resolution of the rasterization, not a choice in abandoning the intent of showing a line).
- ggm 2y ago
  Eh. if you set out to chart and the system rasterises or dithers, its a line. If you set out to divide your data into buckets and hand-select the elements to represent the slope of the trend from a set of 8.. It's ..

WalterBright 2y ago

More Unicode mission creep. What's next, 4 characters that form 90 degree line segments, so you can write a circle? If you want images, use gifs. Grump grump grump.

deleted 2y ago
[deleted]
samatman 2y ago
That's uh. I dunno how to tell ya this Walter. Coming your way in Unicode 16.0... Allow me to introduce: BOTTOM LEFT JUSTIFIED UPPER RIGHT QUARTER BLACK CIRCLE! https://www.unicode.org/charts/PDF/Unicode-16.0/U160-1FB00.pdf https://www.unicode.org/charts/PDF/Unicode-16.0/U160-1FB00.p... But wait! There's more! U+1CC31, UPPER CENTRE LEFT TWELFTH CIRCLE! And you best believe there's 11 more. https://www.unicode.org/charts/PDF/Unicode-16.0/U160-1CC00.pdf https://www.unicode.org/charts/PDF/Unicode-16.0/U160-1CC00.p...
- Joker_vD 2y ago
  I personally like getting more terminal-oriented ideographical symbols in the Unicode; what I don't like is yet another font variation for the basic Latin alphabet. Oh well.
  - zamadatix 2y ago
    I think there comes a point we should just embrace sixels so you can draw whatever it is you want to be shown in a character cell. That point is usually somewhere around here where it's "sure, I can copy it as normal text data but is it actually going to look like anything like it's supposed in a normal font anyways?". Even Windows is getting support for sixels now.
- WalterBright 2y ago
  gag me with a spoon
Joker_vD 2y ago

knlb 2y ago

I have a small python (hy) package which extends the idea to horizon charts https://github.com/kunalb/orphism https://github.com/kunalb/orphism

rurban 2y ago

I once had a bash script to produce such horizontal spark lines from numeric input, but I forgot it's name. Anyone remembers it? From about the same time. As described here: https://rosettacode.org/wiki/Sparkline_in_unicode https://rosettacode.org/wiki/Sparkline_in_unicode

rurban 2y ago
Found it! https://github.com/holman/spark/blob/master/spark https://github.com/holman/spark/blob/master/spark

quink 2y ago

🬼🭈🭆🭑🬽🭋🭎🭆🬹🭑🭄🭎🬭🭆🬿🭊 Teletext in Unicode - each character is three pixels tall, two pixels wide, with separate characters for inverse as well, and diagonals to get you from one set to another. https://en.wikipedia.org/wiki/Teletext_character_set#Graphics_character_sets https://en.wikipedia.org/wiki/Teletext_character_set#Graphic... Intended for use with teletext graphics, but hey, do a sparkline with them, why not? Sure, it'll only do you four levels, but do you really need more than that in this use case? Previously on Hacker News: https://news.ycombinator.com/item?id=40269606 https://news.ycombinator.com/item?id=40269606

quink 2y ago
Actually... they're not meant to have gaps between these lines, so: (never mind, Hacker News stripped some characters, probably because of non-BMP things, it looks like, but imagine the above on subsequent lines without a gap)
- deleted 2y ago
  [deleted]

rkharsan64 2y ago

There's also this font that uses OpenType Contextual Alternates to create sparklines from text: https://aftertheflood.com/journal/the-worlds-first-code-free-sparkline-typeface/ https://aftertheflood.com/journal/the-worlds-first-code-free...

boffinAudio 2y ago
Alas, the .zip file containing those fonts is no longer accessible. Along similar lines, the absolutely delightful FF Chartwell has sparkline capabilities, plus a lot, lot more to boot (and it actually predates After-the-Floods attempt by half a decade): https://www.vectrotype.com/chartwell https://www.vectrotype.com/chartwell

boffinAudio 2y ago

As a fan of Sparklines (and Tufte in general), I have to shout out to one of my favourite places that sparklines have been used - in sudara's Audio Sparkline library for the popular JUCE Audio processing framework: https://github.com/sudara/melatonin_audio_sparklines https://github.com/sudara/melatonin_audio_sparklines The reason this is such a nerd tickle, is that sudara even went as far as to teach lldb how to render arrays' using sparklines, meaning one can get a pretty useful clue about the contents of an audio buffer within the debugger: https://forum.juce.com/t/new-audio-sparklines-module/46606 https://forum.juce.com/t/new-audio-sparklines-module/46606 This, to me, aligns very much with the "Tao" of sparklines - although of course I've modified my local copy to use unicode fonts, which is either heinous or fabulous, depending on how much coffee I've had before I have to hit up lldb for details about why my day is going to be good/bad... ;)

willm 2y ago

I'd be remiss if I didn't share this... https://textual.textualize.io/widgets/sparkline/ https://textual.textualize.io/widgets/sparkline/