add horizontal axis

JosuaKrause · Nov 14, 2015 · 8a50280 · JosuaKrause · Nov 16, 2015 · JosuaKrause
1 parent d013351
commit 8a50280
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,22 @@
     * {
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     }
+
+    .axis {
+      shape-rendering: crispEdges;
+    }
+
+    .x.axis line {
+      stroke: lightgray;
+    }
+
+    .x.axis .minor {
+      stroke-opacity: .5;
+    }
+
+    .x.axis path {
+      display: none;
+    }
   </style>
 </head>
 <body onload="start()">
@@ -19,11 +35,12 @@
   var w = 800;
   var h = 600;
   var radius = 2;
+  var textHeight = 20;
 
   var content = d3.select("#divContent");
   var svg = content.append("svg").attr({
     "width": w,
-    "height": h
+    "height": h + textHeight
   }).style({
     "border": "solid black 1px"
   });
@@ -55,9 +72,17 @@
     });
 
     var xScale = d3.time.scale().domain([ d3.min(times), d3.max(times) ]).range([ 0, w ]).nice();
+    var xAxis = d3.svg.axis().scale(xScale).tickSize(-h).tickSubdivide(true);
 
     var groupScale = d3.scale.category10().domain(Object.keys(groups));
 
+    var visAxis = svg.append("g").classed({
+      "x": true,
+      "axis": true
+    }).attr({
+      "transform": "translate(" + [ 0, h ] + ")"
+    }).call(xAxis);
+
     var sel = svg.selectAll("circle.event").data(events);
     sel.exit().remove();
     sel.enter().append("circle").classed("event", true);

diff --git a/outline.txt b/outline.txt
@@ -11,7 +11,7 @@
 7. Position circles vertically by event type (X)
 	* Create a type scale (X)
   * Order type scale by first occurrence (X)
-8. Create horizontal axis
+8. Create horizontal axis (X)
 9. Add zooming and panning
 10. Add mouse-over events to circles
 	* Grow circles upon mouse-over