Bring tree examples up-to-date

prasanthj · Apr 7, 2012 · d4b0939 · d4b0939
1 parent c5465ca
commit d4b0939
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 23 deletions.
diff --git a/examples/tree/tree-dynamic.html b/examples/tree/tree-dynamic.html
@@ -21,18 +21,18 @@
   <body>
     <script type="text/javascript">
 
-var w = 960,
-    h = 500,
+var width = 960,
+    height = 500,
     root = {},
     data = [root],
-    tree = d3.layout.tree().size([w - 20, h - 20]),
+    tree = d3.layout.tree().size([width - 20, height - 20]),
     diagonal = d3.svg.diagonal(),
     duration = 750,
     timer = setInterval(update, duration);
 
 var vis = d3.select("body").append("svg")
-    .attr("width", w)
-    .attr("height", h)
+    .attr("width", width)
+    .attr("height", height)
   .append("g")
     .attr("transform", "translate(10, 10)");
 

diff --git a/examples/tree/tree-interactive.html b/examples/tree/tree-interactive.html
@@ -29,28 +29,28 @@
     <div id="chart"></div>
     <script type="text/javascript">
 
-var m = [20, 120, 20, 120],
-    w = 1280 - m[1] - m[3],
-    h = 800 - m[0] - m[2],
+var margin = {top: 20, right: 120, bottom: 20, left: 120},
+    width = 1280 - margin.right - margin.left,
+    height = 800 - margin.top - margin.bottom,
     i = 0,
     duration = 500,
     root;
 
 var tree = d3.layout.tree()
-    .size([h, w]);
+    .size([height, width]);
 
 var diagonal = d3.svg.diagonal()
     .projection(function(d) { return [d.y, d.x]; });
 
 var vis = d3.select("#chart").append("svg")
-    .attr("width", w + m[1] + m[3])
-    .attr("height", h + m[0] + m[2])
+    .attr("width", width + margin.right + margin.left)
+    .attr("height", height + margin.top + margin.bottom)
   .append("g")
-    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
+    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
 d3.json("../data/flare.json", function(json) {
   root = json;
-  root.x0 = h / 2;
+  root.x0 = height / 2;
   root.y0 = 0;
 
   function collapse(d) {

diff --git a/examples/tree/tree-radial.js b/examples/tree/tree-radial.js
@@ -1,17 +1,17 @@
-var r = 960 / 2;
+var radius = 960 / 2;
 
 var tree = d3.layout.tree()
-    .size([360, r - 120])
+    .size([360, radius - 120])
     .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
 
 var diagonal = d3.svg.diagonal.radial()
     .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
 
 var vis = d3.select("#chart").append("svg")
-    .attr("width", r * 2)
-    .attr("height", r * 2 - 150)
+    .attr("width", radius * 2)
+    .attr("height", radius * 2 - 150)
   .append("g")
-    .attr("transform", "translate(" + r + "," + r + ")");
+    .attr("transform", "translate(" + radius + "," + radius + ")");
 
 d3.json("../data/flare.json", function(json) {
   var nodes = tree.nodes(json);

diff --git a/examples/tree/tree.js b/examples/tree/tree.js
@@ -1,15 +1,15 @@
-var w = 960,
-    h = 2000;
+var width = 960,
+    height = 2000;
 
 var tree = d3.layout.tree()
-    .size([h, w - 160]);
+    .size([height, width - 160]);
 
 var diagonal = d3.svg.diagonal()
     .projection(function(d) { return [d.y, d.x]; });
 
 var vis = d3.select("#chart").append("svg")
-    .attr("width", w)
-    .attr("height", h)
+    .attr("width", width)
+    .attr("height", height)
   .append("g")
     .attr("transform", "translate(40, 0)");