6 ms·
Histogrem: The Histogram Font
- joshu 15y agothis seems useful. shouldn't it remain sharp when zooming in?
- tsergiu 15y agoIt does. In your browser it may appear fuzzy because it is first passed through a filter before being displayed (see http://typeface.neocracy.org/ http://typeface.neocracy.org/).
- terinjokes 15y agoAny reason why you choice using typeface.js instead of making a WOFF version of your font?
- tsergiu 15y agoIt was the first thing I found.
- ricardobeat 15y agoTypeface.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 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;`.
- joshu 15y agoHuh. https://skitch.com/joshua/8tm1y/histogrem-the-histogram-font https://skitch.com/joshua/8tm1y/histogrem-the-histogram-font
- tsergiu 15y agoWhat 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.
- po 15y agoWindings for the information age. :-) Reminds me of this one: http://www.bissantz.com/sparklines/sparkfonts.asp http://www.bissantz.com/sparklines/sparkfonts.asp
- mbostock 15y agoThis 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 https://github.com/holman/spark
- bazzargh 15y agoI 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-pageviews/ http://blog.jonudell.net/2009/01/13/fuel-prices-and-pageview...
- deleted 15y ago[deleted]
- minikomi 15y agoDoes 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/ http://jsfiddle.net/AwynM/2/ And Continuous : http://jsfiddle.net/AwynM/3/ http://jsfiddle.net/AwynM/3/
- tsergiu 15y agoYou 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 15y agoInteresting question. You could do something like this: http://jsfiddle.net/AwynM/4/ http://jsfiddle.net/AwynM/4/ and keep the values as values for people who use curl, and replace them dynamically using JS
- dfc 15y agoDid 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...
- ralph 15y agoUnicode does have one-eighth blocks, which can be handy when a special font isn't convenient. ▁▂▃▄▅▆▇█
- TazeTSchnitzel 15y agoThe page renders horrendously in IE10. Might be the font but I suspect there's problems in the CSS.
- notaddicted 15y agoAnother 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 http://codepad.org/YmkQDvni . 0 | 1 | 2 | 3 | # 4 | #### 5 | ######### 6 | ############### 7 | ###################### 8 | ############################### 9 | ##################################### 10 | ######################################## 11 | ######################################## 12 | ##################################### 13 | ############################### 14 | ###################### 15 | ############### 16 | ######### 17 | #### 18 | #