Permalink
Browse files

quick chartjunk example

  • Loading branch information...
1 parent d16a272 commit fd598b4f5ae92ee121e1790eedb9b305bbfab44e @nsfmc committed Mar 14, 2012
Showing with 28 additions and 5 deletions.
  1. +23 −2 index.html
  2. +5 −3 readme.md
View
25 index.html
@@ -7,14 +7,19 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title></title>
+ <title>chartjunk: a font for quickly making sparklines in your page</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- CSS concatenated and minified via ant build script-->
<link rel="stylesheet" href="css/style.css">
+ <style type="text/css" media="screen">
+ .junkjunk{
+ font-family:chartjunk;
+ }
+ </style>
<!-- end CSS-->
<script src="js/libs/modernizr-2.0.6.min.js"></script>
@@ -27,7 +32,7 @@
</header>
<div id="main" role="main">
-
+ <p>Stocks rose sharply in trading today... <span class="chartjunk">1,2,4,1,9,42,53,2,45,16,2,3,15,0</span>
</div>
<footer>
@@ -45,6 +50,22 @@
<!-- put your new backbone creation here -->
<script defer src="js/script.js"></script>
+ <script>
+ _($(".chartjunk")).each(function(e,i){
+ var range = 16;
+ var d = $(e).text().split(",")
+ var max = _.max(d)
+ var min = _.min(d)
+ var dataRange = max-min;
+ var cj = _.range(17).map(function(e){return e.toString(17)})
+ var rescaled = _(d).map(function(e){
+ var idx = Math.ceil((e - min) * (range / dataRange) );
+ return cj[idx]
+ })
+ var graphText = rescaled.join(",")
+ $(e).text( graphText ).addClass("junkjunk")
+ })
+ </script>
<!-- end scripts-->
View
8 readme.md
@@ -1,5 +1,7 @@
-#backbone starter kit
+#chartjunk
-i usually find something like backbone and want to get started with it but i hate having to assemble my work environment. here's one put together from the html5 boilerplate and backbone/underscore.
+A while ago, I started working on a sparkline font at the Khan Academy. Instead of writing some obtuse canvas script that would be hard to maintain, why not use a font to represent the same thing? The text then, could be meaningful, and you'd have the advantage that the sparkline display would gracefully degrade.
-in addition, it also includes the docs for both underscore and backbone so if you're offline (i.e. "i'm on a boat") you can hack and look up some docs easily. enjoy!
+We tried it out and the project went another way, but the font remained. Please edit, hack, update, do whatever.
+
+In this project, i'm providing it both as a css base64 encoded font (for webpages), as a UFO file and also as an OTF. I don't have any current intent to support this at the moment, but sparklines are always interesting and having tools available for implementing them is always nice.

0 comments on commit fd598b4

Please sign in to comment.