5 ms·

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='

by 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.
cldellow 9y ago
The simpler format is easier to generate, which can make the difference between having something and having nothing. An example: our company uses redash for sharing ad hoc data sets internally. It'd be easy to generate a SQL expression with array_agg that could be wrapped in a span w/this font. I currently cruft up a call to a google charts replacement to do just that, which sucks because it adds a bunch of image requests. I _could_ do it with SVG, too, but the expression to create it would be a lot more complex. I can imagine submitting a PR to redash to autoformat any SQL column named "sparkline" with this font, actually. (Valid criticism: maybe I should use a richer tool than redash for this...but I love it when a general tool can do a lot just because of composable primitives, AtF Spark fits the bill perfectly here.)
- sago 9y ago
  Good points, thank you. And take this as respectful musing not arguing... > it would be a lot more complex I don't use redash, but isn't the 'complexity' just the boiler plate literal text? The query is rather simple. '<svg ...etc... d="L' + SELECT ROW_NUMBER() OVER (ORDER BY Date DESC), Value FROM Data GROUP BY Date + '" ...etc... /></svg>' No more complex than the google chart call, surely?
  - cldellow 9y ago
    Yeah, "a lot more complex" is pretty sloppy. "A lot more annoying", perhaps. It's doable. The complexity comes when you aggregate tuples of (row number, value) instead of just aggregating value. To fit in the redash model, you need a single expression that returns a string of HTML. So the example you cite isn't quite there, as I don't think it's valid SQL (or is it? I'm mainly familiar with Postgres--perhaps that example is valid in some other DB?) So you need something like: SELECT 'preamble' || (SELECT string_agg(ROW_NUMBER() OVER (ORDER BY Date Desc), ...) || 'postamble' Except aggregate functions can't contain window functions, so something like: WITH windowed as (SELECT ROW_NUMBER(), ...) SELECT 'preamble' || (SELECT string_agg(row_number || ',' value, ',') FROM windowed) || 'postamble' is needed. Which isn't a big deal, but since you don't really care about the row number, it's nice to be able to skip the CTE and just directly smash the values into a string_agg. It's a minor thing, but I'm lazy.
thom_nic 9y ago
> 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.
- Waterluvian 9y ago
  I see what you're saying but I'm skeptical. The point of graphs is to show the gist of a lot of numbers. What's more useful, a screen reader spewing dozens of numbers at you for one of those little graphs or a generalization of what our brains are seeing? "an upward trend from 123 to 789." It's an interesting problem, to be sure.
- sago 9y ago
  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).
- nebabyte 9y ago
  Except the data density is likely far more than needed for a screen reader. A simple graph that establishes context becomes a trail of 15-20 numbers only a few of which may be relevant.
- DonHopkins 9y ago
  I'd like a screen reader that read the graph like "One hundred twenty three. Boop. Boop. Boop. Boop. Boop. Four hundred twenty four." with the pitch of the "Boop" proportional to the value. Sounds like a job for aQuery! ;) http://donhopkins.com/mediawiki/index.php/AQuery http://donhopkins.com/mediawiki/index.php/AQuery
ComodoHacker 9y ago
>why not use simple SVG? Because author's goal was to create charts "without using code". And SVG is much more "code" than simple "{}" markup.
lightblade 9y ago
I would imagine this works in your terminal too.
zwerdlds 9y ago
The accessibility of it kinda irked me too. The real problem with this approach is that it's a kludge. The element here is semantically, a chart. The font makes it lie about that - "Look more text!" Anyone having to deal with accessibility issues regarding icon fonts will have the same issues here: 123{30,60,90}456 isn't a chart, and you'd have to wrap it in another element to make that clear to any accessibility technology. This is a neat idea, but a tool to generate actual charts will have more longevity.

by sago 9y ago

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.

cldellow 9y ago

The simpler format is easier to generate, which can make the difference between having something and having nothing. An example: our company uses redash for sharing ad hoc data sets internally. It'd be easy to generate a SQL expression with array_agg that could be wrapped in a span w/this font. I currently cruft up a call to a google charts replacement to do just that, which sucks because it adds a bunch of image requests. I _could_ do it with SVG, too, but the expression to create it would be a lot more complex. I can imagine submitting a PR to redash to autoformat any SQL column named "sparkline" with this font, actually. (Valid criticism: maybe I should use a richer tool than redash for this...but I love it when a general tool can do a lot just because of composable primitives, AtF Spark fits the bill perfectly here.)

sago 9y ago
Good points, thank you. And take this as respectful musing not arguing... > it would be a lot more complex I don't use redash, but isn't the 'complexity' just the boiler plate literal text? The query is rather simple. '<svg ...etc... d="L' + SELECT ROW_NUMBER() OVER (ORDER BY Date DESC), Value FROM Data GROUP BY Date + '" ...etc... /></svg>' No more complex than the google chart call, surely?
- cldellow 9y ago
  Yeah, "a lot more complex" is pretty sloppy. "A lot more annoying", perhaps. It's doable. The complexity comes when you aggregate tuples of (row number, value) instead of just aggregating value. To fit in the redash model, you need a single expression that returns a string of HTML. So the example you cite isn't quite there, as I don't think it's valid SQL (or is it? I'm mainly familiar with Postgres--perhaps that example is valid in some other DB?) So you need something like: SELECT 'preamble' || (SELECT string_agg(ROW_NUMBER() OVER (ORDER BY Date Desc), ...) || 'postamble' Except aggregate functions can't contain window functions, so something like: WITH windowed as (SELECT ROW_NUMBER(), ...) SELECT 'preamble' || (SELECT string_agg(row_number || ',' value, ',') FROM windowed) || 'postamble' is needed. Which isn't a big deal, but since you don't really care about the row number, it's nice to be able to skip the CTE and just directly smash the values into a string_agg. It's a minor thing, but I'm lazy.

thom_nic 9y ago

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

Waterluvian 9y ago
I see what you're saying but I'm skeptical. The point of graphs is to show the gist of a lot of numbers. What's more useful, a screen reader spewing dozens of numbers at you for one of those little graphs or a generalization of what our brains are seeing? "an upward trend from 123 to 789." It's an interesting problem, to be sure.
sago 9y ago
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).
nebabyte 9y ago
Except the data density is likely far more than needed for a screen reader. A simple graph that establishes context becomes a trail of 15-20 numbers only a few of which may be relevant.
DonHopkins 9y ago
I'd like a screen reader that read the graph like "One hundred twenty three. Boop. Boop. Boop. Boop. Boop. Four hundred twenty four." with the pitch of the "Boop" proportional to the value. Sounds like a job for aQuery! ;) http://donhopkins.com/mediawiki/index.php/AQuery http://donhopkins.com/mediawiki/index.php/AQuery

ComodoHacker 9y ago

>why not use simple SVG? Because author's goal was to create charts "without using code". And SVG is much more "code" than simple "{}" markup.

lightblade 9y ago

I would imagine this works in your terminal too.

zwerdlds 9y ago

The accessibility of it kinda irked me too. The real problem with this approach is that it's a kludge. The element here is semantically, a chart. The font makes it lie about that - "Look more text!" Anyone having to deal with accessibility issues regarding icon fonts will have the same issues here: 123{30,60,90}456 isn't a chart, and you'd have to wrap it in another element to make that clear to any accessibility technology. This is a neat idea, but a tool to generate actual charts will have more longevity.