11 ms·

A font to make sparklines in seconds

358 points by kawera 9y ago

azeirah 9y ago
Yessssssssss, love it!
dfischer 9y ago
This is amazing!
taeric 9y ago
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 9y ago
  I think where it excels is "dumb" Word docs, terminal, etc. since it's just text.
  - sago 9y ago
    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 9y ago
      xterm $ printf '\e]50;%s\a' '-your-x11-font-spec' # for example: $ printf '\e]50;%s\a' '-misc-dejavu serif-*'
      - sago 9y ago
        That's very cool, I had no idea.
sago 9y ago
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">  <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.
- kaoD 9y ago
  Try copying and pasting the graphs anywhere else :)
  - sago 9y ago
    Isn't the problem worse with this approach? You get {2,3,4,6,5,4,8,8} It doesn't look like the thing you copied, and the numbers make no sense (our stock price is 8? since when?). You're back to trying to get people to install the correct fonts, not use it in emails, etc.
    - thinkloop 9y ago
      Can't the real numbers be used?
      - sago 9y ago
        Only if they happen to a) be in the range 0-9 (for the sparkline) or 0-99 (for the dot or bar chart) and b) cover (pretty much) the whole of that range. See the page examples, the data in the sparkline bears no obvious relation to the start and end values.
    - WorldMaker 9y ago
      People generally tend to see a lot of percentages so 0-99 should seem reasonable, and the 0-9 is merely a "per dec" and you just need to imagine another digit behind it to get a percentage. Maybe the set notation curly brackets isn't enough of a signal to think of them as percentages if the font is unavailable, but adding that as a note when copying/pasting isn't entirely strange.
kawera 9y ago
Github repo: https://github.com/aftertheflood/spark https://github.com/aftertheflood/spark
tw1010 9y ago
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.
- cldellow 9y ago
  We run a Spark cluster for distributed processing. Spark is awesome - makes it dead easy to parallelize work. But it's also easy to write bad Spark code that doesn't parallelize well. So I wrote a report to let us view key stats broken out by Spark job, including a sparkline of avg load on the machines running the job for its duration. This provides an easy way to see whether a job uses the cluster efficiently, and if it doesn't, where the key points in the job are that it's sitting idle. It also lets us eyeball the repeatability -- if a given batch job's sparklines are wildly varying from run to run, it usually suggests that something funky is going on in the code. Also, it lets us have "Spark" lines. Worth it for the pun alone, IMO.
  - dvfjsdhgfv 9y ago
    Neat!
- abraae 9y ago
  (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 9y ago
    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.
    - 9y ago
Y7ZCQtNo39 9y ago
How does this play with accessibility? Sounds like a good idea, but is the HTML markup semantically understandable to a low vision user?
- thinkloop 9y ago
  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 9y ago
    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 9y ago
      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 9y ago
        Come to think of it, generating decent verbal description of graphs automatically would be a worthy (and probably hard) challenge.
holman 9y ago
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 9y ago
  There also Spark for Java http://sparkjava.com http://sparkjava.com
- tome 9y ago
  I remember this! I thought it was really cool.
noobermin 9y ago
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 9y ago
  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
m0ther 9y ago
Doesn't appear to be working in edge.
- tome 9y ago
  Seconded.
  - deleted 9y ago
    [deleted]
graphememes 9y ago
I have never seen a useful sparkline.
- platz 9y ago
  finance.google.com
  - jannes 9y ago
    Where is the sparkline on that page?
    - platz 9y ago
      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 9y ago
        it is not useful.
        platz 9y ago
        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 .
_pmf_ 9y ago
Tufte is so 2000s; just include a huge ass stock photo every paragraph.
- omnimus 9y ago
  Maybe is Tufte so out that he is coming around the circle and is hype again.
  - DonHopkins 9y ago
    I'm biding my time until the Cubist reaction to Flat UI.
ComodoHacker 9y ago
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.
jamessb 9y ago
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 9y ago
  The third one, datalegreya, looks amazing.
HNSucksAss 9y ago
Whatever that means.
rym_ 9y ago
Very nice but I cannot get this to work in MS Word
- rexpan 9y ago
  Format > Font > Advanced > Use Contextual Alternates https://github.com/aftertheflood/spark#using-atf-spark-in-ms-word https://github.com/aftertheflood/spark#using-atf-spark-in-ms...
pimlottc 9y ago
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".

358 points by kawera 9y ago

azeirah 9y ago

Yessssssssss, love it!

dfischer 9y ago

This is amazing!

taeric 9y ago

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 9y ago
I think where it excels is "dumb" Word docs, terminal, etc. since it's just text.
- sago 9y ago
  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 9y ago
    xterm $ printf '\e]50;%s\a' '-your-x11-font-spec' # for example: $ printf '\e]50;%s\a' '-misc-dejavu serif-*'
    - sago 9y ago
      That's very cool, I had no idea.

sago 9y ago

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">  <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.

kaoD 9y ago
Try copying and pasting the graphs anywhere else :)
- sago 9y ago
  Isn't the problem worse with this approach? You get {2,3,4,6,5,4,8,8} It doesn't look like the thing you copied, and the numbers make no sense (our stock price is 8? since when?). You're back to trying to get people to install the correct fonts, not use it in emails, etc.
  - thinkloop 9y ago
    Can't the real numbers be used?
    - sago 9y ago
      Only if they happen to a) be in the range 0-9 (for the sparkline) or 0-99 (for the dot or bar chart) and b) cover (pretty much) the whole of that range. See the page examples, the data in the sparkline bears no obvious relation to the start and end values.
  - WorldMaker 9y ago
    People generally tend to see a lot of percentages so 0-99 should seem reasonable, and the 0-9 is merely a "per dec" and you just need to imagine another digit behind it to get a percentage. Maybe the set notation curly brackets isn't enough of a signal to think of them as percentages if the font is unavailable, but adding that as a note when copying/pasting isn't entirely strange.

kawera 9y ago

Github repo: https://github.com/aftertheflood/spark https://github.com/aftertheflood/spark

tw1010 9y ago

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.

cldellow 9y ago
We run a Spark cluster for distributed processing. Spark is awesome - makes it dead easy to parallelize work. But it's also easy to write bad Spark code that doesn't parallelize well. So I wrote a report to let us view key stats broken out by Spark job, including a sparkline of avg load on the machines running the job for its duration. This provides an easy way to see whether a job uses the cluster efficiently, and if it doesn't, where the key points in the job are that it's sitting idle. It also lets us eyeball the repeatability -- if a given batch job's sparklines are wildly varying from run to run, it usually suggests that something funky is going on in the code. Also, it lets us have "Spark" lines. Worth it for the pun alone, IMO.
- dvfjsdhgfv 9y ago
  Neat!
abraae 9y ago
(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 9y ago
  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.
  - 9y ago

Y7ZCQtNo39 9y ago

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

thinkloop 9y ago
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 9y ago
  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 9y ago
    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 9y ago
      Come to think of it, generating decent verbal description of graphs automatically would be a worthy (and probably hard) challenge.

holman 9y ago

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 9y ago
There also Spark for Java http://sparkjava.com http://sparkjava.com
tome 9y ago
I remember this! I thought it was really cool.

noobermin 9y ago

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 9y ago
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

m0ther 9y ago

Doesn't appear to be working in edge.

tome 9y ago
Seconded.
- deleted 9y ago
  [deleted]

graphememes 9y ago

I have never seen a useful sparkline.

platz 9y ago
finance.google.com
- jannes 9y ago
  Where is the sparkline on that page?
  - platz 9y ago
    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 9y ago
      it is not useful.
      - platz 9y ago
        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 .

_pmf_ 9y ago

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

omnimus 9y ago
Maybe is Tufte so out that he is coming around the circle and is hype again.
- DonHopkins 9y ago
  I'm biding my time until the Cubist reaction to Flat UI.

ComodoHacker 9y ago

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.

jamessb 9y ago

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 9y ago
The third one, datalegreya, looks amazing.

HNSucksAss 9y ago

Whatever that means.

rym_ 9y ago

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

rexpan 9y ago
Format > Font > Advanced > Use Contextual Alternates https://github.com/aftertheflood/spark#using-atf-spark-in-ms-word https://github.com/aftertheflood/spark#using-atf-spark-in-ms...

pimlottc 9y ago

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".