quick chartjunk example

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

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.