Add various new examples. Update to 1.11.

_includes/Makefile

@@ -15,6 +15,11 @@ SRC_FILES = \
 	../d3.time.min.js
 
 EX_FILES = \
+	../ex/box.js \
+	../ex/box.css \
+	../ex/morley.csv \
+	../ex/cluster.js \
+	../ex/cluster.css \
 	../ex/calendar.js \
 	../ex/calendar.css \
 	../ex/chord.css \
@@ -33,6 +38,8 @@ EX_FILES = \
 	../ex/treemap.css \
 	../ex/treemap.js \
 	../ex/miserables.json \
+	../ex/pack.js \
+	../ex/pack.css \
 	../ex/splom.css \
 	../ex/splom.js \
 	../ex/flowers.json \
@@ -55,6 +62,8 @@ EX_FILES = \
 	../ex/tree.css
 
 INCLUDE_FILES = \
+  box.js \
+  cluster.js \
 	cartogram.js \
 	chord.js \
 	choropleth.js \
@@ -70,6 +79,7 @@ INCLUDE_FILES = \
 	sunburst.js \
 	bullet.js \
 	bullets.json \
+	pack.js \
 	tree.js
 
 .PHONY all: $(SRC_FILES) $(EX_FILES) $(INCLUDE_FILES)
@@ -86,6 +96,34 @@ $(SRC_FILES):
 	@rm -rf $@
 	git cat-file blob master:examples/calendar/calendar.css > $@
 
+../ex/box.js box.js:
+	@rm -rf $@
+	git cat-file blob master:examples/box/box.js > $@
+
+../ex/morley.csv:
+	@rm -rf $@
+	git cat-file blob master:examples/box/morley.csv > $@
+
+../ex/box.css:
+	@rm -rf $@
+	git cat-file blob master:examples/box/box.css > $@
+
+../ex/pack.js pack.js:
+	@rm -rf $@
+	git cat-file blob master:examples/pack/pack.js > $@
+
+../ex/pack.css:
+	@rm -rf $@
+	git cat-file blob master:examples/pack/pack.css > $@
+
+../ex/cluster.js cluster.js:
+	@rm -rf $@
+	git cat-file blob master:examples/cluster/cluster.js > $@
+
+../ex/cluster.css:
+	@rm -rf $@
+	git cat-file blob master:examples/cluster/cluster.css > $@
+
 ../ex/bullet.js bullet.js:
 	@rm -rf $@
 	git cat-file blob master:examples/bullet/bullet.js > $@

_includes/box.js

@@ -0,0 +1,68 @@
+var w = 120,
+    h = 500,
+    m = [10, 50, 20, 50], // top right bottom left
+    min = Infinity,
+    max = -Infinity;
+
+var chart = d3.chart.box()
+    .whiskers(iqr(1.5))
+    .width(w - m[1] - m[3])
+    .height(h - m[0] - m[2]);
+
+d3.csv("morley.csv", function(csv) {
+  var data = [];
+
+  csv.forEach(function(x) {
+    var e = ~~x.Expt - 1,
+        r = ~~x.Run - 1,
+        s = ~~x.Speed,
+        d = data[e];
+    if (!d) d = data[e] = [s];
+    else d.push(s);
+    if (s > max) max = s;
+    if (s < min) min = s;
+  });
+
+  chart.domain([min, max]);
+
+  var vis = d3.select("#chart").selectAll("svg")
+      .data(data)
+    .enter().append("svg:svg")
+      .attr("class", "box")
+      .attr("width", w)
+      .attr("height", h)
+    .append("svg:g")
+      .attr("transform", "translate(" + m[3] + "," + m[0] + ")")
+      .call(chart);
+
+  chart.duration(1000);
+  window.transition = function() {
+    vis.map(randomize).call(chart);
+  };
+});
+
+function randomize(d) {
+  if (!d.randomizer) d.randomizer = randomizer(d);
+  return d.map(d.randomizer);
+}
+
+function randomizer(d) {
+  var k = d3.max(d) * .02;
+  return function(d) {
+    return Math.max(min, Math.min(max, d + k * (Math.random() - .5)));
+  };
+}
+
+// Returns a function to compute the interquartile range.
+function iqr(k) {
+  return function(d, i) {
+    var q1 = d.quartiles[0],
+        q3 = d.quartiles[2],
+        iqr = (q3 - q1) * k,
+        i = -1,
+        j = d.length;
+    while (d[++i] < q1 - iqr);
+    while (d[--j] > q3 + iqr);
+    return [i, j];
+  };
+}

_includes/bullet.js

@@ -17,15 +17,15 @@ d3.json("bullets.json", function(data) {
     .append("svg:g")
       .attr("transform", "translate(" + m[3] + "," + m[0] + ")")
       .call(chart);
-  
+
   var title = vis.append("svg:g")
       .attr("text-anchor", "end")
       .attr("transform", "translate(-6," + (h - m[0] - m[2]) / 2 + ")");
-  
+
   title.append("svg:text")
       .attr("class", "title")
       .text(function(d) { return d.title; });
-  
+
   title.append("svg:text")
       .attr("class", "subtitle")
       .attr("dy", "1em")

_includes/cluster.js

@@ -0,0 +1,41 @@
+var w = 960,
+    h = 2200;
+
+var cluster = d3.layout.cluster()
+    .size([h, w - 160])
+    .sort(null)
+    .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; });
+
+var diagonal = d3.svg.diagonal()
+    .projection(function(d) { return [d.y, d.x]; });
+
+var vis = d3.select("#chart").append("svg:svg")
+    .attr("width", w)
+    .attr("height", h)
+  .append("svg:g")
+    .attr("transform", "translate(40, 0)");
+
+d3.json("flare.json", function(json) {
+  var nodes = cluster(d3.entries(json)[0]);
+
+  var link = vis.selectAll("path.link")
+      .data(cluster.links(nodes))
+    .enter().append("svg:path")
+      .attr("class", "link")
+      .attr("d", diagonal);
+
+  var node = vis.selectAll("g.node")
+      .data(nodes)
+    .enter().append("svg:g")
+      .attr("class", "node")
+      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
+
+  node.append("svg:circle")
+      .attr("r", 4.5);
+
+  node.append("svg:text")
+      .attr("dx", function(d) { return d.children ? -8 : 8; })
+      .attr("dy", 3)
+      .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
+      .text(function(d) { return d.data.key; });
+});

_includes/pack.js

@@ -0,0 +1,33 @@
+var w = 960,
+    h = 960,
+    format = d3.format(",d");
+
+var pack = d3.layout.pack()
+    .size([w - 4, h - 4])
+    .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; });
+
+var vis = d3.select("#chart").append("svg:svg")
+    .attr("width", w)
+    .attr("height", h)
+    .attr("class", "pack")
+  .append("svg:g")
+    .attr("transform", "translate(2, 2)");
+
+d3.json("flare.json", function(json) {
+  var node = vis.data(d3.entries(json)).selectAll("g.node")
+      .data(pack)
+    .enter().append("svg:g")
+      .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
+      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+
+  node.append("svg:title")
+      .text(function(d) { return d.data.key + (d.children ? "" : ": " + format(d.value)); });
+
+  node.append("svg:circle")
+      .attr("r", function(d) { return d.r; });
+
+  node.filter(function(d) { return !d.children; }).append("svg:text")
+      .attr("text-anchor", "middle")
+      .attr("dy", ".3em")
+      .text(function(d) { return d.data.key.substring(0, d.r / 3); });
+});

_includes/tree.js

@@ -6,6 +6,12 @@ var tree = d3.layout.tree()
     .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
     .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
 
+var diagonal = d3.svg.diagonal()
+    .projection(function(d) {
+      var r = d.y, a = (d.x - 90) / 180 * Math.PI;
+      return [r * Math.cos(a), r * Math.sin(a)];
+    });
+
 var vis = d3.select("#chart").append("svg:svg")
     .attr("width", r * 2)
     .attr("height", r * 2 - 150)
@@ -15,18 +21,11 @@ var vis = d3.select("#chart").append("svg:svg")
 d3.json("flare.json", function(json) {
   var nodes = tree(d3.entries(json)[0]);
 
-  var link = vis.selectAll("g.link")
-      .data(nodes)
-    .enter().append("svg:g")
-      .attr("class", "link");
-
-  link.selectAll("line")
-      .data(children)
-    .enter().append("svg:line")
-      .attr("x1", function(d) { return x(d.parent); })
-      .attr("y1", function(d) { return y(d.parent); })
-      .attr("x2", function(d) { return x(d.child); })
-      .attr("y2", function(d) { return y(d.child); });
+  var link = vis.selectAll("path.link")
+      .data(tree.links(nodes))
+    .enter().append("svg:path")
+      .attr("class", "link")
+      .attr("d", diagonal);
 
   var node = vis.selectAll("g.node")
       .data(nodes)
@@ -35,26 +34,12 @@ d3.json("flare.json", function(json) {
       .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
 
   node.append("svg:circle")
-      .attr("r", 5);
+      .attr("r", 4.5);
 
   node.append("svg:text")
       .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
       .attr("dy", ".31em")
       .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
       .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
       .text(function(d) { return d.data.key; });
-
-  // Returns parent+child objects for any children of `d`.
-  function children(d) {
-    return (d.children || []).map(function(v) {
-      return {
-        parent: d,
-        child: v
-      };
-    });
-  }
-
-  // Radial scales for x and y.
-  function x(d) { return d.y * Math.cos((d.x - 90) / 180 * Math.PI); }
-  function y(d) { return d.y * Math.sin((d.x - 90) / 180 * Math.PI); }
 });

_layouts/api.html

@@ -3,7 +3,7 @@
   <head>
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
     <title>d3.js{% if page.title %} ~ {{ page.title }}{% endif %}</title>
-    <script type="text/javascript" src="../d3.js?1.10.0"></script>
+    <script type="text/javascript" src="../d3.js?1.11.0"></script>
     <style type="text/css">
 
 @import url("../style.css?1.10.0");

_layouts/default.html

@@ -3,7 +3,7 @@
   <head>
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
     <title>d3.js{% if page.title %} ~ {{ page.title }}{% endif %}</title>
-    <script type="text/javascript" src="d3.js?1.10.0"></script>
+    <script type="text/javascript" src="d3.js?1.11.0"></script>
     <style type="text/css">
 
 @import url("style.css?1.10.0");

_layouts/ex.html

@@ -3,7 +3,7 @@
   <head>
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
     <title>d3.js{% if page.title %} ~ {{ page.title }}{% endif %}</title>
-    <script type="text/javascript" src="../d3.js?1.10.0"></script>
+    <script type="text/javascript" src="../d3.js?1.11.0"></script>
     <style type="text/css">
 
 @import url("../style.css?1.10.0");

_layouts/tutorial.html

@@ -3,7 +3,7 @@
   <head>
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
     <title>d3.js{% if page.title %} ~ {{ page.title }}{% endif %}</title>
-    <script type="text/javascript" src="../d3.js?1.10.0"></script>
+    <script type="text/javascript" src="../d3.js?1.11.0"></script>
     <style type="text/css">
 
 @import url("../style.css?1.10.0");

api/index.markdown

@@ -47,6 +47,33 @@ title: Documentation
 
 <br clear="left"/>
 
+## User Guides
+
+<div class="gallery">
+
+<div class="list">
+  <a href="http://www.janwillemtulp.com/category/d3/">
+    <img src="janwillemtulp.png"/>
+  </a>
+  <h4><a href="http://www.janwillemtulp.com/category/d3/">Jan Willem Tulp's Blog</a></h4>
+
+  <p>Jan Willem Tulp has posted a number of introductory tutorials on D3 to his
+  blog.</p>
+</div>
+
+<div class="list">
+  <a href="http://groups.google.com/group/d3-js">
+    <img src="group.png"/>
+  </a>
+  <h4><a href="http://groups.google.com/group/d3-js">Google Group d3-js</a></h4>
+
+  <p>Questions about D3? Post them to our Google Group.</p>
+</div>
+
+</div>
+
+<br clear="left"/>
+
 ## Reference
 
 ### d3