wayneminton · August 29, 2015 14:07 · Oct 18, 2014 · Oct 18, 2014 · Oct 18, 2014 · Oct 14, 2012
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 Combination of mbostock's Pie Chart Example
 [Gist](https://gist.github.com/mbostock/3887235) and ZJONSSON's d3.legend
-[Gist](https://gist.github.com/ZJONSSON/3918369).  Useful to me when dat labels
+[Gist](https://gist.github.com/ZJONSSON/3918369).  Useful to me when data labels
 are too big to write over the pie chart itself.  Probably obvious to
 veterans, but here it is anyway.
 
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
-This pie chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:
+## Pie Chart with Legend
+
+Combination of mbostock's Pie Chart Example
+[Gist](https://gist.github.com/mbostock/3887235) and ZJONSSON's d3.legend
+[Gist](https://gist.github.com/ZJONSSON/3918369).  Useful to me when dat labels
+are too big to write over the pie chart itself.  Probably obvious to
+veterans, but here it is anyway.
 
-* [d3.csv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
-* [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - color encoding
-* [d3.svg.arc](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-arc) - display arcs
-* [d3.layout.pie](https://github.com/mbostock/d3/wiki/Pie-Layout) - compute arc angles from data
diff --git a/d3.legend.js b/d3.legend.js
@@ -0,0 +1,55 @@
+// d3.legend.js 
+// (C) 2012 [email protected]
+// MIT licence
+
+(function() {
+d3.legend = function(g) {
+  g.each(function() {
+    var g= d3.select(this),
+        items = {},
+        svg = d3.select(g.property("nearestViewportElement")),
+        legendPadding = g.attr("data-style-padding") || 5,
+        lb = g.selectAll(".legend-box").data([true]),
+        li = g.selectAll(".legend-items").data([true])
+
+    lb.enter().append("rect").classed("legend-box",true)
+    li.enter().append("g").classed("legend-items",true)
+
+    svg.selectAll("[data-legend]").each(function() {
+        var self = d3.select(this)
+        items[self.attr("data-legend")] = {
+          pos : self.attr("data-legend-pos") || this.getBBox().y,
+          color : self.attr("data-legend-color") != undefined ? self.attr("data-legend-color") : self.style("fill") != 'none' ? self.style("fill") : self.style("stroke") 
+        }
+      })
+
+    items = d3.entries(items).sort(function(a,b) { return a.value.pos-b.value.pos})
+
+
+    li.selectAll("text")
+        .data(items,function(d) { return d.key})
+        .call(function(d) { d.enter().append("text")})
+        .call(function(d) { d.exit().remove()})
+        .attr("y",function(d,i) { return i+"em"})
+        .attr("x","1em")
+        .text(function(d) { ;return d.key})
+
+    li.selectAll("circle")
+        .data(items,function(d) { return d.key})
+        .call(function(d) { d.enter().append("circle")})
+        .call(function(d) { d.exit().remove()})
+        .attr("cy",function(d,i) { return i-0.25+"em"})
+        .attr("cx",0)
+        .attr("r","0.4em")
+        .style("fill",function(d) { console.log(d.value.color);return d.value.color})  
+
+    // Reposition and resize the box
+    var lbbox = li[0][0].getBBox()  
+    lb.attr("x",(lbbox.x-legendPadding))
+        .attr("y",(lbbox.y-legendPadding))
+        .attr("height",(lbbox.height+2*legendPadding))
+        .attr("width",(lbbox.width+2*legendPadding))
+  })
+  return g
+}
+})()
diff --git a/index.html b/index.html
@@ -10,9 +10,14 @@
   stroke: #fff;
 }
 
+.legend rect {
+  fill:white;
+  stroke:black;}
+
 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
+<script src="d3.legend.js"></script>
 <script>
 
 var width = 960,
@@ -33,7 +38,7 @@
 var svg = d3.select("body").append("svg")
     .attr("width", width)
     .attr("height", height)
-  .append("g")
+    .append("g")
     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
 d3.csv("data.csv", function(error, data) {
@@ -44,19 +49,27 @@
 
   var g = svg.selectAll(".arc")
       .data(pie(data))
-    .enter().append("g")
+      .enter().append("g")
       .attr("class", "arc");
 
   g.append("path")
       .attr("d", arc)
+      .attr("data-legend", function(d) { return d.data.age; })
+      .attr("data-legend-pos", function(d, i) { return i; })
       .style("fill", function(d) { return color(d.data.age); });
 
   g.append("text")
       .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
       .attr("dy", ".35em")
-      .style("text-anchor", "middle")
-      .text(function(d) { return d.data.age; });
+      .style("text-anchor", "middle");
 
+  var padding = 20,
+    legx = radius + padding,
+    legend = svg.append("g")
+    .attr("class", "legend")
+    .attr("transform", "translate(" + legx + ", 0)")
+    .style("font-size", "12px")
+    .call(d3.legend);
 });
 
 </script>
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-This donut chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:
+This pie chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:
 
 * [d3.csv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
 * [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - color encoding

diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
 
 var arc = d3.svg.arc()
     .outerRadius(radius - 10)
-    .innerRadius(radius - 70);
+    .innerRadius(0);
 
 var pie = d3.layout.pie()
     .sort(null)

diff --git a/README.md b/README.md
@@ -0,0 +1,6 @@
+This donut chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:
+
+* [d3.csv](https://github.com/mbostock/d3/wiki/CSV) - load and parse data
+* [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) - color encoding
+* [d3.svg.arc](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-arc) - display arcs
+* [d3.layout.pie](https://github.com/mbostock/d3/wiki/Pie-Layout) - compute arc angles from data
diff --git a/index.html b/index.html
@@ -2,6 +2,14 @@
 <meta charset="utf-8">
 <style>
 
+body {
+  font: 10px sans-serif;
+}
+
+.arc path {
+  stroke: #fff;
+}
+
 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>

diff --git a/index.html b/index.html
@@ -44,8 +44,7 @@
       .style("fill", function(d) { return color(d.data.age); });
 
   g.append("text")
-      .attr("x", function(d) { return Math.cos((d.startAngle + d.endAngle) / 2) * (radius - 40); })
-      .attr("y", function(d) { return Math.sin((d.startAngle + d.endAngle) / 2) * (radius - 40); }) 
+      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
       .attr("dy", ".35em")
       .style("text-anchor", "middle")
       .text(function(d) { return d.data.age; });

diff --git a/index.html b/index.html
@@ -44,8 +44,8 @@
       .style("fill", function(d) { return color(d.data.age); });
 
   g.append("text")
-      .attr("x", function(d) { return Math.cos((d.startAngle + d.endAngle) / 2 * Math.PI / 180) * (radius - 40); })
-      .attr("y", function(d) { return Math.sin((d.startAngle + d.endAngle) / 2 * Math.PI / 180) * (radius - 40); }) 
+      .attr("x", function(d) { return Math.cos((d.startAngle + d.endAngle) / 2) * (radius - 40); })
+      .attr("y", function(d) { return Math.sin((d.startAngle + d.endAngle) / 2) * (radius - 40); }) 
       .attr("dy", ".35em")
       .style("text-anchor", "middle")
       .text(function(d) { return d.data.age; });

diff --git a/index.html b/index.html
@@ -8,14 +8,15 @@
 <script>
 
 var width = 960,
-    height = 500;
+    height = 500,
+    radius = Math.min(width, height) / 2;
 
 var color = d3.scale.ordinal()
     .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
 
 var arc = d3.svg.arc()
-    .outerRadius(Math.min(width, height) / 2 - 10)
-    .innerRadius(Math.min(width, height) / 2 - 70);
+    .outerRadius(radius - 10)
+    .innerRadius(radius - 70);
 
 var pie = d3.layout.pie()
     .sort(null)
@@ -42,6 +43,13 @@
       .attr("d", arc)
       .style("fill", function(d) { return color(d.data.age); });
 
+  g.append("text")
+      .attr("x", function(d) { return Math.cos((d.startAngle + d.endAngle) / 2 * Math.PI / 180) * (radius - 40); })
+      .attr("y", function(d) { return Math.sin((d.startAngle + d.endAngle) / 2 * Math.PI / 180) * (radius - 40); }) 
+      .attr("dy", ".35em")
+      .style("text-anchor", "middle")
+      .text(function(d) { return d.data.age; });
+
 });
 
-</script>
+</script>
diff --git a/index.html b/index.html
@@ -18,6 +18,7 @@
     .innerRadius(Math.min(width, height) / 2 - 70);
 
 var pie = d3.layout.pie()
+    .sort(null)
     .value(function(d) { return d.population; });
 
 var svg = d3.select("body").append("svg")

diff --git a/index.html b/index.html
@@ -15,14 +15,16 @@
 
 var arc = d3.svg.arc()
     .outerRadius(Math.min(width, height) / 2 - 10)
-    .innerRadius(Math.min(width, height) / 2 - 50);
+    .innerRadius(Math.min(width, height) / 2 - 70);
 
 var pie = d3.layout.pie()
     .value(function(d) { return d.population; });
 
 var svg = d3.select("body").append("svg")
     .attr("width", width)
-    .attr("height", height);
+    .attr("height", height)
+  .append("g")
+    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
 d3.csv("data.csv", function(error, data) {
 

diff --git a/data.tsv → data.csv b/data.tsv → data.csv
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
     .attr("width", width)
     .attr("height", height);
 
-d3.tsv("data.tsv", function(error, data) {
+d3.csv("data.csv", function(error, data) {
 
   data.forEach(function(d) {
     d.population = +d.population;

diff --git a/index.html b/index.html
@@ -10,6 +10,9 @@
 var width = 960,
     height = 500;
 
+var color = d3.scale.ordinal()
+    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
+
 var arc = d3.svg.arc()
     .outerRadius(Math.min(width, height) / 2 - 10)
     .innerRadius(Math.min(width, height) / 2 - 50);

diff --git a/index.html b/index.html
@@ -17,6 +17,10 @@
 var pie = d3.layout.pie()
     .value(function(d) { return d.population; });
 
+var svg = d3.select("body").append("svg")
+    .attr("width", width)
+    .attr("height", height);
+
 d3.tsv("data.tsv", function(error, data) {
 
   data.forEach(function(d) {

diff --git a/data.tsv b/data.tsv
@@ -0,0 +1,8 @@
+age,population
+<5,2704659
+5-13,4499890
+14-17,2159981
+18-24,3853788
+25-44,14106543
+45-64,8819342
+≥65,612463
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+</style>
+<body>
+<script src="http://d3js.org/d3.v3.min.js"></script>
+<script>
+
+var width = 960,
+    height = 500;
+
+var arc = d3.svg.arc()
+    .outerRadius(Math.min(width, height) / 2 - 10)
+    .innerRadius(Math.min(width, height) / 2 - 50);
+
+var pie = d3.layout.pie()
+    .value(function(d) { return d.population; });
+
+d3.tsv("data.tsv", function(error, data) {
+
+  data.forEach(function(d) {
+    d.population = +d.population;
+  });
+
+  var g = svg.selectAll(".arc")
+      .data(pie(data))
+    .enter().append("g")
+      .attr("class", "arc");
+
+  g.append("path")
+      .attr("d", arc)
+      .style("fill", function(d) { return color(d.data.age); });
+
+});
+
+</script>