Added history file, updated documentation, fixed transform module

mhemesath · Mar 18, 2013 · ee11122 · ee11122
1 parent 062d4c7
commit ee11122
Show file tree

Hide file tree

Showing 22 changed files with 285 additions and 143 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -0,0 +1,10 @@
+0.1.0 / 2013-03-17
+==================
+
+  * Updated D3 to 3.0.8
+  * Updated examples to match v3.0.8
+  * Refactor R2D3 to use wrapper for DOM and Raphael objects.
+  * Cache SVG to Raphael transform Strings
+  * Change R2D3 reference on DOM nodes to be more direct
+  * Move Raphael paper extensions to R2D3 element wrapper.
+  * Enable setting SVG height/width via css
diff --git a/examples/area/area.html b/examples/area/area.html
@@ -20,11 +20,12 @@
 
 </style>
 <body>
-<!--[if lte IE 8]><script src="../../../r2d3.js"></script><![endif]-->
+<!--[if lte IE 8]><script src="/r2d3.js"></script><![endif]-->
 <!--[if gte IE 9]><!-->
-<script src="../../../lib/d3/d3.js"></script>
+<script src="/lib/d3/d3.js"></script>
 <!--<![endif]-->
 
+
 <script>
 
 var margin = {top: 20, right: 20, bottom: 30, left: 50},

diff --git a/examples/area/line.html b/examples/area/line.html
diff --git a/examples/bar/bar.html b/examples/bar/bar.html
@@ -23,11 +23,13 @@
 
 </style>
 <body>
-<!--[if lte IE 8]><script src="../../../r2d3.js"></script><![endif]-->
+<!--[if lte IE 8]><script src="/r2d3.js"></script><![endif]-->
 <!--[if gte IE 9]><!-->
-<script src="../../../lib/d3/d3.js"></script>
+<script src="/lib/d3/d3.js"></script>
 <!--<![endif]-->
 
+
+
 <script>
 
 var margin = {top: 20, right: 20, bottom: 30, left: 40},

diff --git a/examples/chord.html b/examples/chord.html
@@ -14,10 +14,11 @@
 
 </style>
 <body>
-<!--[if lte IE 8]><script src="../../../r2d3.js"></script><![endif]-->
+<!--[if lte IE 8]><script src="/r2d3.js"></script><![endif]-->
 <!--[if gte IE 9]><!-->
-<script src="../../../lib/d3/d3.js"></script>
+<script src="/lib/d3/d3.js"></script>
 <!--<![endif]-->
+
 <script>
 
 // From http://mkweb.bcgsc.ca/circos/guide/tables/

diff --git a/examples/cluster/cluster.html b/examples/cluster/cluster.html
@@ -2,10 +2,11 @@
 <html>
   <head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
-    <!--[if lte IE 8]><script src="../../../r2d3.js"></script><![endif]-->
+    <!--[if lte IE 8]><script src="/r2d3.js"></script><![endif]-->
     <!--[if gte IE 9]><!-->
-    <script src="../../../lib/d3/d3.js"></script>
+    <script src="/lib/d3/d3.js"></script>
     <!--<![endif]-->
+
     <style type="text/css">
 
 path.arc {

diff --git a/examples/donut/donut.html b/examples/donut/donut.html
@@ -12,11 +12,12 @@
 
 </style>
 <body>
-<!--[if lte IE 8]><script src="../../../r2d3.js"></script><![endif]-->
+<!--[if lte IE 8]><script src="/r2d3.js"></script><![endif]-->
 <!--[if gte IE 9]><!-->
-<script src="../../../lib/d3/d3.js"></script>
+<script src="/lib/d3/d3.js"></script>
 <!--<![endif]-->
 
+
 <script>
 
 var width = 960,

diff --git a/examples/gears.html b/examples/gears.html
@@ -50,9 +50,9 @@ <h2>
       <input type="radio" name="reference" id="ref-sun">
       <label for="ref-sun">Sun</label>
     </form>
-    <!--[if lte IE 8]><script src="../../../r2d3.js"></script><![endif]-->
+    <!--[if lte IE 8]><script src="/r2d3.js"></script><![endif]-->
     <!--[if gte IE 9]><!-->
-    <script src="../../../lib/d3/d3.js"></script>
+    <script src="/lib/d3/d3.js"></script>
     <!--<![endif]-->
 
     <script type="text/javascript">

diff --git a/examples/grouped_bar/data.csv b/examples/grouped_bar/data.csv
@@ -0,0 +1,7 @@
+State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over
+CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496
+TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223
+NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672
+FL,1140516,1938695,925060,1607297,4782119,4746856,3187797
+IL,894368,1558919,725973,1311479,3596343,3239173,1575308
+PA,737462,1345341,679201,1203944,3157759,3414001,1910571
diff --git a/examples/grouped_bar/grouped_bar.html b/examples/grouped_bar/grouped_bar.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+body {
+  font: 10px sans-serif;
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.bar {
+  fill: steelblue;
+}
+
+.x.axis path {
+  display: none;
+}
+
+</style>
+<body>
+  <!--[if lte IE 8]><script src="/r2d3.js"></script><![endif]-->
+  <!--[if gte IE 9]><!-->
+  <script src="/lib/d3/d3.js"></script>
+  <!--<![endif]-->
+
+
+<script>
+
+var margin = {top: 20, right: 20, bottom: 30, left: 40},
+    width = 960 - margin.left - margin.right,
+    height = 500 - margin.top - margin.bottom;
+
+var x0 = d3.scale.ordinal()
+    .rangeRoundBands([0, width], .1);
+
+var x1 = d3.scale.ordinal();
+
+var y = d3.scale.linear()
+    .range([height, 0]);
+
+var color = d3.scale.ordinal()
+    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
+
+var xAxis = d3.svg.axis()
+    .scale(x0)
+    .orient("bottom");
+
+var yAxis = d3.svg.axis()
+    .scale(y)
+    .orient("left")
+    .tickFormat(d3.format(".2s"));
+
+var svg = d3.select("body").append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+  .append("g")
+    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+d3.csv("data.csv", function(error, data) {
+  var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
+
+  data.forEach(function(d) {
+    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
+  });
+
+  x0.domain(data.map(function(d) { return d.State; }));
+  x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
+  y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
+
+  svg.append("g")
+      .attr("class", "x axis")
+      .attr("transform", "translate(0," + height + ")")
+      .call(xAxis);
+
+  svg.append("g")
+      .attr("class", "y axis")
+      .call(yAxis)
+    .append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("y", 6)
+      .attr("dy", ".71em")
+      .style("text-anchor", "end")
+      .text("Population");
+
+  var state = svg.selectAll(".state")
+      .data(data)
+    .enter().append("g")
+      .attr("class", "g")
+      .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });
+
+  state.selectAll("rect")
+      .data(function(d) { return d.ages; })
+    .enter().append("rect")
+      .attr("width", x1.rangeBand())
+      .attr("x", function(d) { return x1(d.name); })
+      .attr("y", function(d) { return y(d.value); })
+      .attr("height", function(d) { return height - y(d.value); })
+      .style("fill", function(d) { return color(d.name); });
+
+  var legend = svg.selectAll(".legend")
+      .data(ageNames.slice().reverse())
+    .enter().append("g")
+      .attr("class", "legend")
+      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
+
+  legend.append("rect")
+      .attr("x", width - 18)
+      .attr("width", 18)
+      .attr("height", 18)
+      .style("fill", color);
+
+  legend.append("text")
+      .attr("x", width - 24)
+      .attr("y", 9)
+      .attr("dy", ".35em")
+      .style("text-anchor", "end")
+      .text(function(d) { return d; });
+
+});
+
+</script>
diff --git a/examples/line/line.html b/examples/line/line.html
@@ -25,11 +25,12 @@
 
 </style>
 <body>
-<!--[if lte IE 8]><script src="../../../r2d3.js"></script><![endif]-->
+<!--[if lte IE 8]><script src="/r2d3.js"></script><![endif]-->
 <!--[if gte IE 9]><!-->
-<script src="../../../lib/d3/d3.js"></script>
+<script src="/lib/d3/d3.js"></script>
 <!--<![endif]-->
 
+
 <script>
 
 var margin = {top: 20, right: 20, bottom: 30, left: 50},

diff --git a/examples/multiseries/line.html b/examples/multiseries/line.html
@@ -25,11 +25,12 @@
 
 </style>
 <body>
-<!--[if lte IE 8]><script src="../../../r2d3.js"></script><![endif]-->
+<!--[if lte IE 8]><script src="/r2d3.js"></script><![endif]-->
 <!--[if gte IE 9]><!-->
-<script src="../../../lib/d3/d3.js"></script>
+<script src="/lib/d3/d3.js"></script>
 <!--<![endif]-->
 
+
 <script>
 
 var margin = {top: 20, right: 80, bottom: 30, left: 50},

diff --git a/examples/pie/pie.html b/examples/pie/pie.html
@@ -12,9 +12,9 @@
 
 </style>
 <body>
-<!--[if lte IE 8]><script src="../../../r2d3.js"></script><![endif]-->
+<!--[if lte IE 8]><script src="/r2d3.js"></script><![endif]-->
 <!--[if gte IE 9]><!-->
-<script src="../../../lib/d3/d3.js"></script>
+<script src="/lib/d3/d3.js"></script>
 <!--<![endif]-->
 
 <script>

diff --git a/examples/scatterplot/scatterplot.html b/examples/scatterplot/scatterplot.html
@@ -19,11 +19,12 @@
 
 </style>
 <body>
-<!--[if lte IE 8]><script src="../../../r2d3.js"></script><![endif]-->
+<!--[if lte IE 8]><script src="/r2d3.js"></script><![endif]-->
 <!--[if gte IE 9]><!-->
-<script src="../../../lib/d3/d3.js"></script>
+<script src="/lib/d3/d3.js"></script>
 <!--<![endif]-->
 
+
 <script>
 
 var margin = {top: 20, right: 20, bottom: 30, left: 40},