Adding count, added license. Fixes #6

tmcw · Jan 8, 2012 · 6a02438 · 6a02438
1 parent 0be3542
commit 6a02438
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 151 deletions.
diff --git a/css/site.css b/css/site.css
@@ -2,86 +2,70 @@ body {
   margin:0;
   padding:0;
   font: 12px/20px "Helvetica Neue", sans-serif;
-  background:url('lightnoise.png');
-}
-
-rect.tick-container {
-  fill:#fff;
-}
-
-rect.tick-container text {
-  fill:#333;
-}
-
-rect.strokes {
-  fill:#a50f15;
-}
-
-text {
-  font: bold 12px/20px "Helvetica Neue", monospace;
-}
-
-text.hour-label {
-  fill:#fff;
-  text-anchor:middle;
-  opacity:0.5;
-}
-
-text.day-label {
-  fill:#000;
+  background:#010101;
 }
 
 #keystrokes-canvas {
   position:absolute;
-  top:90px;
 }
 
-#header {
+#buttons {
+  position:fixed;
+  background:#25273a;
+  right:0px;
+  top:0px;
   padding:10px;
+  opacity:0.3;
+  -webkit-transition:50ms all linear;
 }
 
-#header .keystrokes-sum, .stroke-tooltip {
-  font:bold 30px/40px 'Helvetica Neue';
+#buttons:hover { opacity:1; }
+
+#buttons h4 {
+  display:inline;
+  padding:5px 20px 5px 10px;
+  font-weight:bold;
+  color:#eee;
 }
 
-#header .keystrokes-sum span, #header .stroke-tooltip span {
-  color:#aaa;
-  font:normal 30px/40px 'Helvetica Neue';
+#buttons a {
+  text-decoration:none;
+  color:#ccc;
 }
 
-#keystrokes h4 {
-  text-transform:uppercase;
-  letter-spacing:3.5px;
-  border-top:1px solid #333;
+#buttons a:hover {
+  text-decoration:underline;
 }
 
-rect.commit {
-  fill:#c40a7f;
+#buttons #stack {
+  background:url('../css/chart.png') no-repeat;
+  padding:5px 20px 5px 30px;
+  height:40px;
 }
 
-text.hover {
-  font: 11px/20px "Helvetica Neue", sans-serif;
-  fill:#fff;
+#buttons #normal {
+  background:url('../css/blocks.png') no-repeat;
+  height:40px;
+  padding:5px 10px 5px 30px;
 }
 
-div.hover-number {
-  position:absolute;
-  background:#fff;
-  z-index:9999;
+.Greys .q1-9{ fill:#111; }
+.Greys .q2-9{ fill:#223; }
+.Greys .q3-9{ fill:#336; }
+.Greys .q4-9{ fill:#457; }
+.Greys .q5-9{ fill:#568; }
+.Greys .q6-9{ fill:#679; }
+.Greys .q7-9{ fill:#99a; }
+.Greys .q8-9{ fill:#fab; }
+
+.play { fill:#a22; }
+rect.hour-line { fill:#110; }
+
+.logged {
+  color:#eee;
+  padding-right:20px;
 }
 
-div.hover-number span.st {
+.logged #total_keystrokes {
   font-weight:bold;
-  padding:5px;
-  margin-right:5px;
-  background:#333;
-  color:#fff;
 }
-
-/*
-.Greys .q4-9{fill:rgb(251,106,74)}
-*/
-.Greys .q5-9{fill:rgb(239,59,44)}
-.Greys .q6-9{fill:rgb(203,24,29)}
-.Greys .q7-9{fill:rgb(165,15,21)}
-.Greys .q8-9{fill:rgb(103,0,13)}
diff --git a/index.html b/index.html
@@ -3,26 +3,29 @@
   <head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <link href='css/reset.css' rel='stylesheet' type='text/css' />
-    <link href='stream/site.css' rel='stylesheet' type='text/css' />
-    <title>hi how are you?</title>
+    <link href='css/site.css' rel='stylesheet' type='text/css' />
+    <title>minute</title>
   </head>
   <body onload='javascript:load()'>
     <div id='keystrokes'>
       <div id='keystrokes-canvas'></div>
     </div>
     <div id='buttons'>
-      <h4>hi how are you?</h4>
+      <span class='logged'>
+        <span id='total_keystrokes'></span>
+        keystrokes
+      </span>
       <a href='#' id='stack'>stack</a>
       <a href='#' id='normal'>normal</a>
       <a href='#' id='timeflux'>timeflux</a>
+      <span class='about'><a href='http://macwright.org/minute'>/minute</a></span>
     </div>
     <script type="text/javascript" src="js/underscore-min.js"></script>
     <script type="text/javascript" src="js/d3.js"></script>
     <script type="text/javascript" src="js/jquery.js"></script>
     <script type="text/javascript" src="js/d3.csv.js"></script>
     <script type="text/javascript" src="js/d3.time.js"></script>
     <script type="text/javascript" src="js/layout.js"></script>
-    <script type="text/javascript" src="js/stack.js"></script>
     <script type='text/javascript' src='stream/site.js'></script>
   </body>
 </html>
diff --git a/stream/site.css b/stream/site.css
diff --git a/stream/site.js b/stream/site.js
@@ -1,4 +1,3 @@
-var csvglob;
 var idx = {};
 
 function load() {
@@ -17,6 +16,7 @@ function load() {
   var biminutes = 1440 / 2;
 
   d3.csv("keystrokes.log", function(csv) {
+    var total_keystrokes = 0;
     csv = csv.map(function(c) {
       var dia = d3.time.day(new Date(c.minute * 1000));
       var ndia = +d3.time.day(new Date(c.minute * 1000));
@@ -25,6 +25,7 @@ function load() {
       } else {
         idx[ndia] = idx[ndia] + 1;
       }
+      total_keystrokes += parseInt(c.strokes, 10);
       return {
         d: new Date(c.minute * 1000),
         day: dia,
@@ -33,7 +34,6 @@ function load() {
       };
     });
 
-    csvglob = csv;
     var dscale = d3.time.scale().domain([
       d3.min(csv, function(d) { return d.d; }),
       d3.max(csv, function(d) { return d.d; })
@@ -100,7 +100,6 @@ function load() {
       .attr('width', ~~(w/(n_days)))
       .attr('height', 1);
 
-
       function transitionStack() {
         chart.selectAll('rect.day')
           .transition()
@@ -173,7 +172,7 @@ function load() {
          playertext
             .attr('y', mousey - 10)
             .text(function() {
-                return ''; d3.time.format('%B %e')();
+                return ''; // d3.time.format('%B %e')();
             });
       });
 
@@ -188,5 +187,21 @@ function load() {
       d3.select('#normal').on('click', function() {
         transitionNormal();
       });
+
+      d3.select('#total_keystrokes')
+        .text(function() {
+          var prec = {
+            'million': 1000000,
+            'thousand': 1000,
+            'hundred': 100
+          };
+          console.log(total_keystrokes);
+          for (var i in prec) {
+            if (total_keystrokes > prec[i]) {
+              return Math.round(total_keystrokes / prec[i]) +
+                ' ' + i;
+            }
+          }
+        });
   });
 }