Merge pull request #219 from airbnb/chris/sunburst-conditional-percent

Add 'Percent of previous' to sunburst vis. Appease npm warnings for data tables and d3.layout.cloud
apache · Apr 1, 2016 · ffa29b3 · ffa29b3
2 parents ee4e3c1 + b87d8a0
commit ffa29b3
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 21 deletions.
diff --git a/caravel/assets/package.json b/caravel/assets/package.json
@@ -49,10 +49,9 @@
     "d3-cloud": "^1.2.1",
     "d3-sankey": "^0.2.1",
     "d3-tip": "^0.6.7",
-    "d3.layout.cloud": "^1.2.0",
     "datamaps": "^0.4.4",
-    "datatables": "^1.10.9",
     "datatables-bootstrap3-plugin": "^0.4.0",
+    "datatables.net": "^1.10.11",
     "exports-loader": "^0.6.3",
     "font-awesome": "^4.5.0",
     "gridster": "^0.5.6",

diff --git a/caravel/assets/visualizations/sunburst.css b/caravel/assets/visualizations/sunburst.css
@@ -10,11 +10,15 @@
   fill: #000;
   pointer-events: none;
 }
-.sunburst .path-percent {
-  font-size: 4em;
+.sunburst .path-abs-percent {
+  font-size: 3.5em;
+  font-weight: 400;
+}
+.sunburst .path-cond-percent {
+  font-size: 2em;
 }
 .sunburst .path-metrics {
-  font-size: 1.75em;
+  font-size: 1.5em;
 }
 .sunburst .path-ratio {
   font-size: 1.2em;
@@ -31,9 +35,15 @@
 .dashboard .sunburst text {
   font-size: 1em;
 }
-.dashboard .sunburst .path-percent {
+.dashboard .sunburst .path-abs-percent {
   font-size: 2.5em;
 }
+.dashboard .sunburst .path-cond-percent {
+  font-size: 1.75em;
+}
 .dashboard .sunburst .path-metrics {
   font-size: 1em;
 }
+.dashboard .sunburst .path-ratio {
+  font-size: 1em;
+}
diff --git a/caravel/assets/visualizations/sunburst.js b/caravel/assets/visualizations/sunburst.js
@@ -43,8 +43,8 @@ function sunburstVis(slice) {
         return Math.sqrt(d.y + d.dy);
       });
 
-    var f = d3.format(".3s");
-    var fp = d3.format(".3p");
+    var formatNum = d3.format(".3s");
+    var formatPerc = d3.format(".3p");
 
     container.select("svg").remove();
 
@@ -145,28 +145,44 @@ function sunburstVis(slice) {
     // Fade all but the current sequence, and show it in the breadcrumb trail.
     function mouseenter(d) {
 
-      var percentage = (d.m1 / totalSize).toPrecision(3);
-      var percentageString = fp(percentage);
-      var metricsMatch = Math.abs(d.m1 - d.m2) < 0.000001;
+      var sequenceArray = getAncestors(d);
+      var parentOfD = sequenceArray[sequenceArray.length - 2] || null;
+
+      var absolutePercentage = (d.m1 / totalSize).toPrecision(3);
+      var conditionalPercentage = parentOfD ? (d.m1 / parentOfD.m1).toPrecision(3) : null;
+
+      var absolutePercString = formatPerc(absolutePercentage);
+      var conditionalPercString = parentOfD ? formatPerc(conditionalPercentage) : "";
+
+      var yOffsets = ["-25", "7", "35", "60"]; // 3 levels of text if inner-most level, 4 otherwise
+      var offsetIndex = 0;
+
+      // If metrics match, assume we are coloring by category
+      var metricsMatch = Math.abs(d.m1 - d.m2) < 0.00001;
 
       gMiddleText.selectAll("*").remove();
 
       gMiddleText.append("text")
-        .attr("class", "path-percent")
-        .attr("y", "-10")
-        .text(percentageString);
+        .attr("class", "path-abs-percent")
+        .attr("y", yOffsets[offsetIndex++])
+        .text(absolutePercString + " of total");
+
+      if (conditionalPercString) {
+        gMiddleText.append("text")
+          .attr("class", "path-cond-percent")
+          .attr("y", yOffsets[offsetIndex++])
+          .text(conditionalPercString + " of parent");
+      }
 
       gMiddleText.append("text")
         .attr("class", "path-metrics")
-        .attr("y", "25")
-        .text("m1: " + f(d.m1) + (metricsMatch ? "" : ", m2: " + f(d.m2)));
+        .attr("y", yOffsets[offsetIndex++])
+        .text("m1: " + formatNum(d.m1) + (metricsMatch ? "" : ", m2: " + formatNum(d.m2)));
 
       gMiddleText.append("text")
         .attr("class", "path-ratio")
-        .attr("y", "50")
-        .text("m2/m1: " + fp(d.m2 / d.m1));
-
-      var sequenceArray = getAncestors(d);
+        .attr("y", yOffsets[offsetIndex++])
+        .text((metricsMatch ? "" : ("m2/m1: " + formatPerc(d.m2 / d.m1))) );
 
       // Reset and fade all the segments.
       arcs.selectAll("path")
@@ -183,7 +199,7 @@ function sunburstVis(slice) {
         .style("stroke-width", "2px")
         .style("stroke", "#000");
 
-      updateBreadcrumbs(sequenceArray, percentageString);
+      updateBreadcrumbs(sequenceArray, absolutePercString);
     }
 
     // Restore everything to full opacity when moving off the visualization.