Make text in sunburst path more readable (#675)

apache · Jun 24, 2016 · 914f234 · 914f234
1 parent 967b2ff
commit 914f234
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/caravel/assets/visualizations/sunburst.css b/caravel/assets/visualizations/sunburst.css
@@ -1,5 +1,5 @@
 .sunburst text {
-  shape-rendering: crispEdges;
+  text-rendering: optimizeLegibility;
 }
 .sunburst path {
   stroke: #333;

diff --git a/caravel/assets/visualizations/sunburst.js b/caravel/assets/visualizations/sunburst.js
@@ -270,6 +270,11 @@ function sunburstVis(slice) {
           .attr("x", (breadcrumbDims.width + breadcrumbDims.tipTailWidth) / 2)
           .attr("y", breadcrumbDims.height / 4)
           .attr("dy", "0.35em")
+          .style("fill", function (d) {
+            // Make text white or black based on the lightness of the background
+            var col = d3.hsl(colorByCategory ? px.color.category21(d.name) : colorScale(d.m2 / d.m1));
+            return col.l < 0.5 ? 'white' : 'black';
+          })
           .attr("class", "step-label")
           .text(function (d) { return d.name.replace(/_/g, " "); })
           .call(wrapSvgText, breadcrumbDims.width, breadcrumbDims.height / 2);