var w = 700, h = w, r = w / 2, x = d3.scale.linear().range([0, 2 * Math.PI]), y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, r]), p = 5, duration = 1000; var div = d3.select("#chart"); var vis = div.append("svg") .attr("width", w + p * 2) .attr("height", h + p * 2) .append("g") .attr("transform", "translate(" + (r + p) + "," + (r + p) + ")"); var partition = d3.layout.partition() .sort(null) .value(function(d) { return 5.8 - d.depth; }); var arc = d3.svg.arc() .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) .innerRadius(function(d) { return Math.max(0, d.y ? y(d.y) : d.y); }) .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); }); d3.json("./moxie-dependencies.json", function(json) { var nodes = partition.nodes(json); var path = vis.selectAll("path").data(nodes); path.enter().append("path") .attr("id", function(d, i) { return "path-" + i; }) .attr("d", arc) .attr("fill-rule", "evenodd") .style("fill", colour) .on("click", click); var text = vis.selectAll("text").data(nodes); var textEnter = text.enter().append("text") .style("fill-opacity", 1) .style("fill", function(d) { return brightness(d3.rgb(colour(d))) < 125 ? "#eee" : "#000"; }) .attr("text-anchor", function(d) { return x(d.x + d.dx / 2) > Math.PI ? "end" : "start"; }) .attr("dy", ".2em") .attr("transform", function(d) { var multiline = (d.name || "").split(" ").length > 1, angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90, rotate = angle + (multiline ? -.5 : 0); return "rotate(" + rotate + ")translate(" + (y(d.y) + p) + ")rotate(" + (angle > 90 ? -180 : 0) + ")"; }) .on("click", click); textEnter.append("tspan") .attr("x", 0) .text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; }); textEnter.append("tspan") .attr("x", 0) .attr("dy", "1em") .text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; }); function click(d) { path.transition() .duration(duration) .attrTween("d", arcTween(d)); // Somewhat of a hack as we rely on arcTween updating the scales. text .style("visibility", function(e) { return isParentOf(d, e) ? null : d3.select(this).style("visibility"); }) .transition().duration(duration) .attrTween("text-anchor", function(d) { return function() { return x(d.x + d.dx / 2) > Math.PI ? "end" : "start"; }; }) .attrTween("transform", function(d) { var multiline = (d.name || "").split(" ").length > 1; return function() { var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90, rotate = angle + (multiline ? -.5 : 0); return "rotate(" + rotate + ")translate(" + (y(d.y) + p) + ")rotate(" + (angle > 90 ? -180 : 0) + ")"; }; }) .style("fill-opacity", function(e) { return isParentOf(d, e) ? 1 : 1e-6; }) .each("end", function(e) { d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden"); }); } }); function isParentOf(p, c) { if (p === c) return true; if (p.children) { return p.children.some(function(d) { return isParentOf(d, c); }); } return false; } function colour(d) { if (d.children) { // There is a maximum of two children! var colours = d.children.map(colour), a = d3.hsl(colours[0]), b = d3.hsl(colours[1]); // L*a*b* might be better here... return d3.hsl((a.h + b.h) / 2, a.s * 1.2, a.l / 1.2); } return d.colour || "#fff"; } // Interpolate the scales! function arcTween(d) { var my = maxY(d), xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]), yd = d3.interpolate(y.domain(), [d.y, my]), yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]); return function(d) { return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); }; }; } function maxY(d) { return d.children ? Math.max.apply(Math, d.children.map(maxY)) : d.y + d.dy; } // http://www.w3.org/WAI/ER/WD-AERT/#color-contrast function brightness(rgb) { return rgb.r * .299 + rgb.g * .587 + rgb.b * .114; }