First attempt to add annotations to a pie chart

css/main.css

@@ -1,3 +1,7 @@
+/*
+ * As you may have guessed, a little custom css is part of our project.
+ */
+
 body {
   padding-top: 5rem;
 }

js/diagrams.js

@@ -5,8 +5,8 @@
  */
 
 function createTestPieChart(containerId, dataset) {
-  var width = 100;
+  var width = 1000;
-  var height = 100;
+  var height = 1000;
   // Build the basic container for the chart
   var svg = d3.select(containerId)
     .append("div")
@@ -16,21 +16,27 @@ function createTestPieChart(containerId, dataset) {
     .attr("viewBox", "0 0 " + width + " " + height + "")
     .classed("svg-content-responsive", true)
     .append("g")
+    .classed("main-group", true)
     .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
 
+  var arcs = svg.append("g").classed("pie-chart-arcs", true);
+  var labels = svg.append("g").classed("pie-chart-labels", true);
+  var lines = svg.append("g").classed("pie-chart-lines", true);
+
   // Preparations are done, now let's build the pie chart
-  var radius = Math.min(width, height) / 2;
+  var maxRadius = Math.min(width, height) / 2;
+  var radius = maxRadius * 0.4;
   var color = d3.scaleOrdinal(d3.schemeCategory10);
 
   var arc = d3.arc()
-    .innerRadius(0)
+    .innerRadius(radius*0.4)
     .outerRadius(radius);
 
   var pie = d3.pie()
-    .value(function(d) { return d.count; })
+    .sort(function(a, b) { return b.count - a.count })
-    .sort(null);
+    .value(function(d) { return d.count; });
 
-  var path = svg.selectAll("path")
+  arcs.selectAll("path")
     .data(pie(dataset))
     .enter()
     .append("path")
@@ -39,4 +45,36 @@ function createTestPieChart(containerId, dataset) {
       return color(d.data.label);
     });
 
+  labels.selectAll("text")
+    .data(pie(dataset))
+    .enter()
+    .append("text")
+    .attr("dy", ".35em")
+    .text(function(d) {
+      console.log(d);
+      return d.data.label;
+    });
+
+  function midAngle(d) {
+    return d.startAngle + (d.endAngle - d.startAngle) / 2;
+  }
+
+  lines.selectAll("polyline")
+    .data(pie(dataset))
+    .enter()
+    .append("polyline")
+    .transition()
+      .duration(1000)
+      .attrTween("points", function(d) {
+        this._current = this._current || d;
+        var interpolate = d3.interpolate(this._current, d);
+        this._current = interpolate(0);
+        return function(t) {
+          var d2 = interpolate(t);
+          var pos = outerArc.centroid(d2);
+          pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
+          return [arc.centroid(d2), outerArc.centroid(d2), pos];
+        };
+      })
+
 }

js/queries.js

@@ -1,5 +1,9 @@
 "use strict";
 
+/*
+ * This file defines functions that create d3 datasets from the rawData provided by preprocessor.getResults()
+ */
+
 var queries = {
 
   /*