

Histogrem: The Histogram Font - tsergiu
http://www.histogrem.com

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

~~~
bazzargh
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...](http://blog.jonudell.net/2009/01/13/fuel-prices-and-pageviews/)

------
notaddicted
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 | #

------
minikomi
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/>

~~~
tsergiu
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?

~~~
minikomi
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

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

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

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

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

------
joshu
this seems useful.

shouldn't it remain sharp when zooming in?

~~~
tsergiu
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/>).

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

~~~
tsergiu
It was the first thing I found.

~~~
ricardobeat
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;`.

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

