Tidy d3 view.

martindale · Feb 20, 2015 · 2aca79f · 2aca79f
1 parent d50bc26
commit 2aca79f
Showing 1 changed file with 55 additions and 49 deletions.
diff --git a/views/track.jade b/views/track.jade
@@ -27,6 +27,8 @@ block content
     .tab-content
       .tab-pane.active#plays
         h3 Plays Over Time
+        .pull-right today
+        .pull-left 30 days ago
         #track-stats
 
         ul
@@ -93,52 +95,56 @@ block scripts
   script.
     // TODO: embed this in microdata.
     var playsPerDay = [#{playsPerDay}];
-
-     var w = 20,
-         h = 80;
-
-      var x = d3.scale.linear()
-          .domain([0, 1])
-          .range([0, w]);
-
-      var y = d3.scale.linear()
-          .domain([0, 100])
-        .rangeRound([0, h]);
-
-     var chart = d3.select("#track-stats").append("svg")
-          .attr("class", "chart")
-          .attr("width", w * playsPerDay.length - 1)
-          .attr("height", h);
-
-      chart.selectAll("rect")
-          .data(playsPerDay)
-        .enter().append("rect")
-          .attr("x", function(d, i) { return x(i) - .5; })
-          .attr("y", function(d) { return h - y(d) - .5; })
-          .attr("width", w)
-          .attr("height", function(d) { return y(d); });
-
-      chart.append("line")
-          .attr("x1", 0)
-          .attr("x2", w * playsPerDay.length)
-          .attr("y1", h - .5)
-          .attr("y2", h - .5)
-          .style("stroke", "#000");
-
-      chart.selectAll("text")
-               .data(playsPerDay)
-               .enter()
-               .append("text")
-               .text(function(d) {
-                  return d;
-               })
-               .attr("text-anchor", "middle")
-               .attr("x", function(d, i) {
-                  return i * (w / playsPerDay.length) + (w / playsPerDay.length - barPadding) / 2;
-               })
-               .attr("y", function(d) {
-                  return h - (d * 4) + 14;
-               })
-               .attr("font-family", "sans-serif")
-               .attr("font-size", "11px")
-               .attr("fill", "white");
+    var max = 1;
+    playsPerDay.forEach(function(i) {
+      max = (i > max) ? i : max;
+    });
+
+    var w = 20;
+    var h = 80;
+
+    var x = d3.scale.linear()
+      .domain([0, 1])
+      .range([0, w]);
+
+    var y = d3.scale.linear()
+      .domain([0, max + 1 ])
+      .rangeRound([0, h]);
+
+    var chart = d3.select('#track-stats').append('svg')
+      .attr('class', 'chart')
+      .attr('width', '100%')
+      .attr('height', h);
+
+    chart.selectAll('rect')
+      .data(playsPerDay)
+      .enter().append('rect')
+      .attr('x', function(d, i) { return x(i) - .5; })
+      .attr('y', function(d) { return h - y(d) - .5; })
+      .attr('width', w)
+      .attr('height', function(d) { return y(d); });
+
+    chart.append('line')
+      .attr('x1', 0)
+      .attr('x2', w * playsPerDay.length)
+      .attr('y1', h - .5)
+      .attr('y2', h - .5)
+      .style('stroke', '#000');
+
+    chart.selectAll('text')
+      .data(playsPerDay)
+      .enter()
+      .append('text')
+      .text(function(d) {
+        return d;
+      })
+      .attr('text-anchor', 'middle')
+      .attr('x', function(d, i) {
+        return i * (w / playsPerDay.length) + (w / playsPerDay.length - barPadding) / 2;
+      })
+      .attr('y', function(d) {
+        return h - (d * 4) + 14;
+      })
+      .attr('font-family', 'sans-serif')
+      .attr('font-size', '11px')
+      .attr('fill', 'white');