Histogrem: The Histogram Font | Hacker News Reader

Histogrem: The Histogram Font

histogrem.com

86 pointstsergiu20 comments

This is similar to Spark [1], except Spark uses standard Unicode characters whereas Histogrem requires a custom font. Still, it's nice that Histogrem offers greater precision.

[1] https://github.com/holman/spark

I did a similar thing (with Bill Zeller and John Udell) as a ubiquity/twitter extension a couple of years earlier[1]... but in practice the low resolution of the standard unicode caracters makes them just a novelty; the technique's been reinvented several times but hasn't found a niche.

Even this font doesn't quite hack it for me - the curves are too wide to take in the time series at a glance.

[1] http://blog.jonudell.net/2009/01/13/fuel-prices-and-pageview...

Another easy way to put histograms in a text file is to make them sideways. Below is one for the sum of three dice rolls. Python code + larger example: http://codepad.org/YmkQDvni .

   0 | 
   1 | 
   2 | 
   3 | #
   4 | ####
   5 | #########
   6 | ###############
   7 | ######################
   8 | ###############################
   9 | #####################################
  10 | ########################################
  11 | ########################################
  12 | #####################################
  13 | ###############################
  14 | ######################
  15 | ###############
  16 | #########
  17 | ####
  18 | #

Does this have advantages over using a canvas element?

Aside from the cool-hack-factor (which I genuinely appreciate!)

Edit: Something quick on jsfiddle : http://jsfiddle.net/AwynM/2/

And Continuous : http://jsfiddle.net/AwynM/3/

You are bound to viewing the document in a browser. This may not be a problem in most cases, but console users cannot see them. There is also a large overhead in the amount of code that needs to be written to position and scale everything. For example, what if I wanted to add another line? Finally, because it's text, it's easy to move around. To build the site, I just copied some text out of some of the files I already had and stuck it where it needed to go. How would I have done it if it was a canvas element?

Interesting question. You could do something like this: http://jsfiddle.net/AwynM/4/ and keep the values as values for people who use curl, and replace them dynamically using JS

Unicode does have one-eighth blocks, which can be handy when a special font isn't convenient. ▁▂▃▄▅▆▇█

Windings for the information age. :-) Reminds me of this one:

http://www.bissantz.com/sparklines/sparkfonts.asp

Did someone edit the title? I swear it used to contain the full project/tagline.

My one complaint is that this really does not work "right inside a text file," atleast as far as "inside a text file" is usually interpreted. When I saw the project tagline I was really excited and somewhat skeptic. When I see "do x in a text file" i think of a text file I can send to someone and not require that they use a certain font. But, I do realize given that constraint it's a lot harder to implement a histogram. Neat project though...

this seems useful.

shouldn't it remain sharp when zooming in?

It does. In your browser it may appear fuzzy because it is first passed through a filter before being displayed (see http://typeface.neocracy.org/).

Any reason why you choice using typeface.js instead of making a WOFF version of your font?

It was the first thing I found.

Typeface.js/cufon/etc were very useful for a while. It's easy to switch to @font-face now: upload your font here http://www.fontsquirrel.com/fontface/generator, it will give you some CSS rules, just use the font name in your styles like `font-family: Histogrem;`.

Huh. https://skitch.com/joshua/8tm1y/histogrem-the-histogram-font

What you see in your browser is not the actual font. It was first transformed by typeface.js so that people without the font installed could still see what it looks like in their browsers. Some people have mentioned (seemingly great) alternatives to displaying uninstalled fonts, but I haven't had a chance to try them out. If you were to view text with the actual font, it would have no problems scaling.

Oh. But if it were webfont embedded it would look better?

Yes. I've updated it to use webfonts.

ooh. now it is very beautiful.

The page renders horrendously in IE10. Might be the font but I suspect there's problems in the CSS.

Reply on news.ycombinator.com