Catastrophes (outer circle):

", "Catastrophes: ").outerHTML; catastrophesLegend.html(`

${catastrophesSwatchesHTML}

`); } const parent = g.append("circle") .datum(root) .attr("r", radius-10) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); function clicked(p) { console.log(p) parent.datum(p.parent || root); root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); const t = g.transition().duration(750); path.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .filter(function(d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill", (d, i) => { if(selection === "Continents"){ while (d.depth > 1) d = d.parent; return color(d.data.name); }else{ let catastropheData = (d.data.catastrophes / dataByYears[year-1990].catastrophes); return reverseColorScale[getDataBasedOnColorScale(reverseColorScale, catastropheData, 10)]; } }) .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) .attrTween("d", d => () => locationArc(d.current)) emissionsPath.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .filter(function(d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.8 : 0.6) : 0) .attr("fill", d => { return emissionsFactorScale[getDataBasedOnEmissionFactorScale(d.data.emissionsFactor)]}) .attrTween("d", d => () => { return emissionsArc(d.current); }); label.filter(function(d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }).transition(t) .attr("fill-opacity", d => +labelVisible(d.target)) .attr('opacity', d => +labelVisible(d.target)) .attrTween("transform", d => () => labelTransform(d.current)); number.filter(function(d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }).transition(t) .attr("fill-opacity", d => +labelVisible(d.target)) .attr('opacity', d => +labelVisible(d.target)) .attrTween("transform", d => () => numberTransform(d.current)); } function arcVisible(d) { return d.y1 <= 4 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { return d.y1 <= 4 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; } function angleTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius; return `rotate(${x}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } function numberTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = ((d.y0 + d.y1) / 2) * radius - 30; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } return svg.node(); }