sud0n1m · May 28, 2012 21:39 · May 28, 2012 · Nov 9, 2011 · Nov 9, 2011 · Nov 9, 2011
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <!-- JS -->
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
-    <script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script>
+    <script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.v2.min.js"></script>
     <script type="text/javascript" src="main.js"></script>
     <script type="text/javascript">
       $(document).ready(function () {

diff --git a/README b/README
@@ -1 +0,0 @@
-This is a reimplementation of the Grouped Bar Chart by Mike Bostock (http://bl.ocks.org/882152). Although useful, I found the original's minimal comments and inverted axes hard to follow, so I created the version you see here.

diff --git a/README.mkd b/README.mkd
@@ -0,0 +1 @@
+This is a reimplementation of the [Grouped Bar Chart by Mike Bostock](http://bl.ocks.org/882152). Although useful, I found the original's minimal comments and inverted axes hard to follow, so I created the version you see here.
diff --git a/README b/README
@@ -0,0 +1 @@
+This is a reimplementation of the Grouped Bar Chart by Mike Bostock (http://bl.ocks.org/882152). Although useful, I found the original's minimal comments and inverted axes hard to follow, so I created the version you see here.
diff --git a/main.js b/main.js
@@ -1,4 +1,9 @@
 function main() {
+  // This is a reimplementation of the Grouped Bar Chart by Mike Bostock
+  // (http://bl.ocks.org/882152). Although useful, I found the original's
+  // minimal comments and inverted axes hard to follow, so I created the
+  // version you see here.
+
   // First, we define sizes and colours...
   var outerW = 640; // outer width
   var outerH = 480; // outer height

diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+  <head>
+    <title>Grouped Bar Chart</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <!-- JS -->
+    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
+    <script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script>
+    <script type="text/javascript" src="main.js"></script>
+    <script type="text/javascript">
+      $(document).ready(function () {
+        main();
+      });
+    </script>
+  </head>
+  <body>
+    <div id="vis"></div>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,67 @@
+function main() {
+  // First, we define sizes and colours...
+  var outerW = 640; // outer width
+  var outerH = 480; // outer height
+  var padding = { t: 0, r: 0, b: 0, l: 0 };
+  var w = outerW - padding.l - padding.r; // inner width
+  var h = outerH - padding.t - padding.b; // inner height
+  var c = [ "#E41A1C", "#377EB8", "#4DAF4A" ]; // ColorBrewer Set 1
+
+  // Second, we define our data...
+  // Create a two-dimensional array.
+  // The first dimension has as many Array elements as there are series.
+  // The second dimension has as many Number elements as there are groups.
+  // It looks something like this...
+  //  var data = [
+  //    [ 0.10, 0.09, 0.08, 0.07, 0.06, ... ], // series 1
+  //    [ 0.10, 0.09, 0.08, 0.07, 0.06, ... ], // series 2
+  //    [ 0.10, 0.09, 0.08, 0.07, 0.06, ... ]  // series 3
+  //  ];
+  var numberGroups = 10; // groups
+  var numberSeries = 3;  // series in each group
+  var data = d3.range(numberSeries).map(function () { return d3.range(numberGroups).map(Math.random); });
+
+  // Third, we define our scales...
+  // Groups scale, x axis
+  var x0 = d3.scale.ordinal()
+      .domain(d3.range(numberGroups))
+      .rangeBands([0, w], 0.2);
+
+  // Series scale, x axis
+  // It might help to think of the series scale as a child of the groups scale
+  var x1 = d3.scale.ordinal()
+      .domain(d3.range(numberSeries))
+      .rangeBands([0, x0.rangeBand()]);
+
+  // Values scale, y axis
+  var y = d3.scale.linear()
+      .domain([0, 1]) // Because Math.random returns numbers between 0 and 1
+      .range([0, h]);
+
+  // Visualisation selection
+  var vis = d3.select("#vis")
+      .append("svg:svg")
+      .attr("width", outerW)
+      .attr("height", outerH);
+
+  // Series selection
+  // We place each series into its own SVG group element. In other words,
+  // each SVG group element contains one series (i.e. bars of the same colour).
+  // It might be helpful to think of each SVG group element as containing one bar chart.
+  var series = vis.selectAll("g.series")
+      .data(data)
+    .enter().append("svg:g")
+      .attr("class", "series") // Not strictly necessary, but helpful when inspecting the DOM
+      .attr("fill", function (d, i) { return c[i]; })
+      .attr("transform", function (d, i) { return "translate(" + x1(i) + ")"; });
+
+  // Groups selection
+  var groups = series.selectAll("rect")
+      .data(Object) // The second dimension in the two-dimensional data array
+    .enter().append("svg:rect")
+        .attr("x", 0)
+        .attr("y", function (d) { return h - y(d); })
+        .attr("width", x1.rangeBand())
+        .attr("height", y)
+        .attr("transform", function (d, i) { return "translate(" + x0(i) + ")"; });
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +0,0 @@
		This is a reimplementation of the Grouped Bar Chart by Mike Bostock (http://bl.ocks.org/882152). Although useful, I found the original's minimal comments and inverted axes hard to follow, so I created the version you see here.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This is a reimplementation of the [Grouped Bar Chart by Mike Bostock](http://bl.ocks.org/882152). Although useful, I found the original's minimal comments and inverted axes hard to follow, so I created the version you see here.