Initial work on bar chart

zeroviscosity · zeroviscosity · commit 43a507a3ac3e · 2015-12-26T12:05:41.000-05:00
diff --git a/step-7-a-basic-bar-chart.html b/step-7-a-basic-bar-chart.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Step 7 - A Basic Bar Chart</title>
+    <link rel="stylesheet" href="normalize.css">
+    <style>
+      #chart {
+        height: 360px;
+        margin: 0 auto;                                               /* NEW */
+        position: relative;
+        width: 360px;
+      }
+      rect {
+        fill: steelblue;                                              /* NEW */
+      }
+      h1 {                                                            /* NEW */
+        font-size: 14px;                                              /* NEW */
+        text-align: center;                                           /* NEW */
+      }                                                               /* NEW */
+    </style>
+  </head>
+  <body>
+    <h1>Toronto Parking Tickets by Weekday in 2012</h1>             <!-- NEW -->
+    <div id="chart"></div>
+    <script src="d3.v3.min.js"></script>
+    <script>
+      (function(d3) {
+        'use strict';
+
+        var width = 360;
+        var height = 360;
+
+        var svg = d3.select('#chart')
+          .append('svg')
+          .attr('width', width)
+          .attr('height', height)
+          .append('g');
+
+        var x = d3.scale.ordinal()
+          .rangeBands([0, width], 0.1);
+
+        var y = d3.scale.linear()
+          .range([height, 0]);
+
+        d3.csv('weekdays.csv', function(error, dataset) {
+          dataset.forEach(function(d) {
+            d.count = +d.count;
+          });
+          
+          x.domain(dataset.map(function(d) {
+            return d.label;
+          }));
+
+          y.domain([0, d3.max(dataset, function(d) {
+            return d.count;
+          })]);
+
+          svg.selectAll('rect')
+            .data(dataset)
+            .enter()
+            .append('rect')
+            .attr('x', function(d) { return x(d.label); })
+            .attr('y', function(d) { return y(d.count); })
+            .attr('width', x.rangeBand())
+            .attr('height', function(d) { return height - y(d.count); });
+        });
+      })(window.d3);
+    </script>
+  </body>
+</html>
