
A font to make sparklines in seconds - kawera
http://aftertheflood.co/projects/atf-spark
======
sago
Oops, the site was hackernewsified and is intermittently down for me.

Neat idea, and I do like the OTF hacking, but why not use simple SVG?

    
    
        <svg viewBox='0 -20 85 40' style="height: 1.5em">
          <!-- data in d parameter below as x,y pairs -->
          <path d='m 0,0 L 10,5 20,8 30,6 40,3 50,-2 60,-8 70,4 80,6'
                fill='none' stroke='black'/>
          <circle cx='80' cy='6' r='2'/>
        </svg>
    

It has the advantage of using actual data, it is trivial to generate, is
embedded into HTML without an extra fetch, won't confuse screen readers,
doesn't require the normal web-font alternative file format dance, and isn't
quantised to a set of precreated values.

Poor old SVG, it is constantly being reinvented.

~~~
thom_nic
> won't confuse screen readers

I don't disagree SVG isn't difficult and a lot more flexible, but I think in
this case, the font has the advantage that it _is_ accessible to screen
readers. 345, A screen reader is going to see an SVG element and I imagine at
best it will use some alt-text or other "description" of the graphic. Versus
if the data is literally `123{123,234,435}424` then a person without vision
can get much more information about what's actually being conveyed.

~~~
sago
You have to remap the data though, from the examples:

Alibaba:
93.89{40,27,69,58,44,42,52,39,27,8,40,45,33,37,24,20,30,36,36,29,40,60,50,40,50,63,87,100}152.11

Brexit:
5562{4,27,48,37,60,40,56,54,59,62,37,63,30,59,75,68,50,40,47,30,5,9,50,74,59,75,100,92}7501

It only accepts numbers in the range 0-10 (for a sparkline) or 0-100 (for the
bar or dot plot), and because it performs no vertical normalisation, you have
to remap to that. Making either your data gibberish, or your sparkline oddly
offset and scaled (e.g. if you put in the brexit FTSE data / 100).

------
jamessb
There are several predecessors with the same idea of using a font that
represents numbers as a graph: FF Chartwell [1], Chartjunk [2], Datalegreya
[3].

[1]: [https://typographica.org/typeface-
reviews/chartwell/](https://typographica.org/typeface-reviews/chartwell/)

[2]: [https://nsfmc.github.io/chartjunk/](https://nsfmc.github.io/chartjunk/)

[3]: [http://figs-lab.com/datalegreya](http://figs-lab.com/datalegreya)

~~~
mosselman
The third one, datalegreya, looks amazing.

------
holman
Ha, I dig the name `spark`. I did a tangentially related project years ago —
also called spark — that did simple sparklines in shell:
[https://github.com/holman/spark](https://github.com/holman/spark)

Just as a warning, though; over the years I’ve gotten 3-4 requests by media
companies to write a book on Apache Spark, so, um, watch out for that one.
(Regardless of whether you know Apache Spark or not, you should go for it. I
believe in you.)

~~~
kitd
There also Spark for Java

[http://sparkjava.com](http://sparkjava.com)

------
tw1010
I like the idea of sparklines and I have used them myself on occasion. But now
that I think about it, I'm not sure I've actually ever found a sparklines plot
insightful or useful.

~~~
abraae
(cynically) sparklines are awesome eye candy for flogging your product.

Any new HR product should have a hero page with:

\- a couple of sparklines

\- a mugshot of user/candidate

\- some important looking numbers in a giant-assed sans serif font

Throw in a social media-like feed down the side of the page for added oomph.

Things have moved on from the days when a pie chart was table stakes.

~~~
rangibaby
Every product only needs one sparkline anyway. 0% on the left, and bit of up
and down (to make it look realistic) then a steep climb to 101% on the right.

~~~
Crespyl
My error metrics dashboard begs to differ.

Maybe we can just relabel everything in terms of "features discovered".

------
Y7ZCQtNo39
How does this play with accessibility? Sounds like a good idea, but is the
HTML markup semantically understandable to a low vision user?

~~~
thinkloop
There is no HTML, it is literally text like: {1,2,4,6}

I'm not versed on screen readers, would wrapping that text in an HTML element
(like a span) with a title attribute that read: stock price for last 5 years -
solve accessibility issues? How do screen readers generally handle charts?

~~~
Y7ZCQtNo39
Usually a chart would be an SVG that contained a <title> and <desc> tags. Or
an <img> tag with an alt attribute.

I haven't tried it, but perhaps aria-label would do the trick.

My point is, people create these fairly novel approaches all the time, but
never think about the structure of the markup, and if the semantic meaning is
at least usable for screen readers. Turning on screen reading functionality in
Chrome, the first example in the article read as follows:

"1 2 3 left brace 10,20,30,40,50,60,70,80,90,100 right brace 7 8 9"

The semantic meaning is lost.

~~~
ajanuary
A quick check with ChromeVox confirms that, at least for that screenreader,
aria-label works fine. e.g. <span aria-label="sparkline showing a linear
upward trend">{10,20,30,40,50,60,70,80,90,100}</span>

~~~
musage
Come to think of it, generating decent verbal description of graphs
automatically would be a worthy (and probably hard) challenge.

------
graphememes
I have never seen a useful sparkline.

~~~
platz
finance.google.com

~~~
jannes
Where is the sparkline on that page?

~~~
platz
sorry you have to click on an actual stock

[https://finance.google.com/finance?q=NYSEARCA%3ASPY](https://finance.google.com/finance?q=NYSEARCA%3ASPY)

~~~
graphememes
it is not useful.

~~~
platz
lol ok, it is if you're trying to gauge whether a stock's behavior is local to
itself, or signifies a trend in all the stocks in the same related sector .

------
kawera
Github repo:
[https://github.com/aftertheflood/spark](https://github.com/aftertheflood/spark)

------
pimlottc
Can any with more knowledge of fonts offer some insight on how this actually
works? I'm guessing they're doing something clever with ligatures?

The "how it works" section doesn't really explain anything, it's more of a
"how to use it".

------
taeric
This is cool, but I'm curious what makes this superior to just using
javascript in a browser? Could still use the same input syntax. Bonus points
for having a graphic that could easily scale up if someone right clicks to
open it specifically.

~~~
prashnts
I think where it excels is "dumb" Word docs, terminal, etc. since it's just
text.

~~~
sago
You're brave using custom fonts in Word. Fine for personal use, a nightmare if
the document is ever shared. And what terminals allow you to change font from
the program writing to stdout?

~~~
LukeShu
xterm

    
    
        $ printf '\e]50;%s\a' '-your-x11-font-spec'
        # for example:
        $ printf '\e]50;%s\a' '-misc-dejavu serif-*'

~~~
sago
That's very cool, I had no idea.

------
noobermin
Reading those examples hurt my brain, but probably because I'm used to reading
figures with labelled axes. My first gut reaction was, "great, figures with no
x-axes," however, he had the x-axis in the text, which made my head hurt more.

First, my eye gravitates towards the figures. This forced me to look at the
sparkline to get the shape, go back to the left to see the y-axes min-limits,
then scan to the right to see the other limit. Then, I had to read around the
line in the text to understand the x-axis, then look back at the sparkline
again to understand the trend line in context. It caused more confusion for me
than enlightenment.

~~~
deanclatworthy
I tend to like sparklines. They can be pretty useful on dashboards and for
reports. But this implementation, in my opinion, is not as visually digestable
as the JS implementation [1]

[1]
[https://omnipotent.net/jquery.sparkline/#s-about](https://omnipotent.net/jquery.sparkline/#s-about)

------
_pmf_
Tufte is so 2000s; just include a huge ass stock photo every paragraph.

~~~
omnimus
Maybe is Tufte so out that he is coming around the circle and is hype again.

~~~
DonHopkins
I'm biding my time until the Cubist reaction to Flat UI.

------
ComodoHacker
Nice idea! This approach could be useful for quick charting in data analysis
tools like Jupyter Notebook and the like. It can even be embedded into
Markdown.

------
m0ther
Doesn't appear to be working in edge.

~~~
tome
Seconded.

------
dfischer
This is amazing!

------
azeirah
Yessssssssss, love it!

------
rym_
Very nice but I cannot get this to work in MS Word

~~~
rexpan
Format > Font > Advanced > Use Contextual Alternates

[https://github.com/aftertheflood/spark#using-atf-spark-in-
ms...](https://github.com/aftertheflood/spark#using-atf-spark-in-ms-word)

