2b:null 2c:["$","title",null,{"children":"Country-cluster Doughnuts | Andrew Fanning | Observable"}] 31:T105e,html_struct3 = { return html `

`; }32:Te991,chart = ({ controls: null, place1: null, place2: null, place3: null, data1: null, data2: null, data3: null, yearData1: null, yearData2: null, yearData3: null, maxSequence: 22, sequence: 17, doughnutSVG: null, socialIndexes1: [ "co1", "co2", "en1", "en2", "wa1", "wa2", "nu1", "nu2", "he1", "he2", "ed1", "ed2", "iw1", "iw2", "pj1", "pj2", "pv1", "pv2", "sc1", "sc2", "eq1", "eq2", "ho1", "ho2" ], socialIndexes2: [ "co", "en", "wa", "nu", "he", "ed", "iw", "pj", "pv", "sc", "eq", "ho" ], socialLabels1: [ 'connectivity', 'energy', 'water', 'food', 'health', 'education', 'income', 'peace &', 'political', 'social', 'equality', 'housing' ], socialLabels2: [ '', '', '', '', '', '', '& work', 'justice', 'voice', 'cohesion', '', '' ], socialLabels3: [ 'CO', 'EN', 'WA', 'FO', 'HE', 'ED', 'IW', 'PJ', 'PV', 'SC', 'EQ', 'HO' ], socialRadius: 80, //global is 135 socialScale: null, ecoIndexes1: [ "cc1", "cc2", "oa1", "oa2", "cp1", "cp2", "np1", "np2", "ap1", "ap2", "fd1", "fd2", "lc1", "lc2", "bb1", "bb2", "od1", "od2" ], ecoIndexes2: [ "cc", "oa", "cp", "np", "ap", "fd", "lc", "bb", "od" ], ecoLabels1: [ 'climate', 'ocean', 'chemical', 'pollution', 'pollution', 'disruption', 'conversion', 'biodiversity', 'ozone layer' ], ecoLabels2: [ 'change', 'acidification', 'pollution', 'nutrient', 'air', 'freshwater', 'land', 'breakdown', 'depletion' ], ecoRadius: 125, //global is 210 ceilingScale: null, setControls(controls) { this.controls = controls; }, setPlace1: function (placeCode) { function getByPlaceCode(arr, value) { for (var i=0, iLen=arr.length; i" + d.data.labels + "
Missing data.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { if (d.data.ratio < 1) { return Tooltip .html("" + d.data.labels + "
" + d.data.value + " " + d.data.units + ", which does not overshoot the per capita boundary and leaves a gap of " + d.data.percent + "% remaining.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { return Tooltip .html("" + d.data.labels + "
" + d.data.value + " " + d.data.units + ", which overshoots the per capita boundary by " + d.data.percent + "%.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } } }) .on('mouseout', function(event, d) { Tooltip.style("opacity", 0); d3.select(this) .style("fill", "#ffffff") }) ; }, drawEcologicalBackground2: function(svg, place, Tooltip) { let Self = this; let pie = d3.pie() .startAngle(-20*Math.PI/180) .endAngle(-20*Math.PI/180 + 2 * Math.PI) .sort(null) .value(Math.PI * 2 / this.yearData3.ecological2.length) ; let arcs; if (place === "B40") { arcs = pie(this.yearData1.ecological2); } else { if (place == "M40") { arcs = pie(this.yearData2.ecological2); } else { arcs = pie(this.yearData3.ecological2) } } let arc_grey2 = d3.arc() .innerRadius( function(){ return 0; } ) .outerRadius( function (d) { return Self.ceilingScale(d.data.visible) + 12; } ) ; svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("fill", function(d) { if (d.data === 1.00001) { return "#b9b9b9"; } else { return "#ffffff"; } }) .attr("d", arc_grey2) .on('mouseover', function(event, d) { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f5f6f7") }) .on('mousemove', function(event, d) { if (d.data.ratio === 1.00001) { return Tooltip .html("" + d.data.labels + "
Missing data.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { if (d.data.ratio < 1) { return Tooltip .html("" + d.data.labels + "
" + d.data.value + " " + d.data.units + ", which does not overshoot the per capita boundary and leaves a gap of " + d.data.percent + "% remaining.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { return Tooltip .html("" + d.data.labels + "
" + d.data.value + " " + d.data.units + ", which overshoots the per capita boundary by " + d.data.percent + "%.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } } }) .on('mouseout', function(event, d) { Tooltip.style("opacity", 0); d3.select(this) .style("fill", "#ffffff") }) ; }, drawSocialBackground1: function (svg, place, Tooltip) { let Self = this; let pie = d3.pie() .startAngle(-90*Math.PI/180) .sort(null) .value(Math.PI * 2 / this.yearData3.social1.length) ; let arcs; if (place === "B40") { arcs = pie(this.yearData1.social1); } else { if (place == "M40") { arcs = pie(this.yearData2.social1); } else { arcs = pie(this.yearData3.social1) } } let arc_red1 = d3.arc() .innerRadius( function(){ return 0; } ) .outerRadius( function (d) { return Self.socialScale(d.data.visible); } ) ; svg .append("g") .attr("stroke-width", 0.5) .selectAll("path") .data(arcs) .join("path") .attr("stroke", function(d) { if (d.data.ratio === 1.00001) { return "#cdcdcd"; } else { return "#cc0243"; } }) .attr("fill", function(d) { if (d.data.ratio === 1.00001) { return "#cdcdcd"; } else { return "#cc0243"; } }) .attr("d", arc_red1) .on('mouseover', function(event, d) { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f30250") }) .on('mousemove', function(event, d) { if (d.data.ratio === 1.00001) { return Tooltip .html("" + d.data.labels + "
Missing data.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { return Tooltip .html("" + d.data.labels + "
"+ d.data.value + d.data.units + ".") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } }) .on('mouseout', function(d) { Tooltip .style("opacity", 0) d3.select(this) .style("fill", "#cc0243") }) ; }, drawSocialBackground2: function (svg, place, Tooltip) { let Self = this; //let full_soc2 = [1,1,1,1,1,1,1,1,1,1,1,1]; let pie = d3.pie() .startAngle(-90*Math.PI/180) .sort(null) .value(Math.PI * 2 / this.yearData3.social2.length) ; let arcs; if (place === "B40") { arcs = pie(this.yearData1.social2); } else { if (place == "M40") { arcs = pie(this.yearData2.social2); } else { arcs = pie(this.yearData3.social2) } } let arc_red2 = d3.arc() .innerRadius( function(){ return 0; } ) .outerRadius( function (d) { return Self.socialScale(d.data.visible); } ) ; svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("fill", function(d) { if (d.data.ratio === 1.00001) { return "#cdcdcd"; } else { return "#cc0243"; } }) .attr("d", arc_red2) .on('mouseover', function(event, d) { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f30250") }) .on('mousemove', function(event, d) { if (d.data.ratio === 1.00001) { return Tooltip .html("" + d.data.labels + "
Missing data.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { return Tooltip .html("" + d.data.labels + "
"+ d.data.value + d.data.units + ".") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } }) .on('mouseout', function(d) { Tooltip .style("opacity", 0) d3.select(this) .style("fill", "#cc0243") }) ; }, drawSocialDoughnut1: function (svg, place, Tooltip) { let Self = this; let pie = d3.pie() .startAngle(-90*Math.PI/180) .sort(null) .value(Math.PI * 2 / this.yearData3.social1.length) ; let arcs; if (place === "B40") { arcs = pie(this.yearData1.social1); } else { if (place == "M40") { arcs = pie(this.yearData2.social1); } else { arcs = pie(this.yearData3.social1) } } let arc_blue = d3.arc() .innerRadius( function () { return 0; } ) .outerRadius( function (d) { return Self.socialScale(d.data.ratio > 1 ? 1 : d.data.ratio); } ) ; svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("stroke", function (d) { if (d.data.ratio === 1.00001) { return "#cdcdcd"; } else { return "#f3f4f5"; } }) .attr("stroke-width", 1) .attr("fill", function (d) { if (d.data.ratio === 1.00001) { return "#cdcdcd"; } else { return "#f3f4f5"; } }) .attr("d", arc_blue) .on('mouseover', function(event, d) { Tooltip.style("opacity", 0.9) d3.select(this) .style("opacity", 0.85) }) .on('mousemove', function(event, d) { if (d.data.ratio === 1.00001) { return Tooltip .html("" + d.data.labels + "
Missing data.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { return Tooltip .html("" + d.data.labels + "
"+ d.data.value + d.data.units + ".") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } }) .on('mouseout', function(d) { Tooltip .style("opacity", 0) d3.select(this) .style("opacity", 1) }) ; }, drawSocialDoughnut2: function (svg, place, Tooltip) { let Self = this; let pie = d3.pie() .startAngle(-90*Math.PI/180) .sort(null) .value(Math.PI * 2 / this.yearData3.social2.length) ; let arcs; if (place === "B40") { arcs = pie(this.yearData1.social2); } else { if (place == "M40") { arcs = pie(this.yearData2.social2); } else { arcs = pie(this.yearData3.social2) } } let arc_blue = d3.arc() .innerRadius( function () { return 0; } ) .outerRadius( function (d) { return Self.socialScale(d.data.ratio > 1 ? 1 : d.data.ratio); } ) ; svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("stroke", function (d) { if (d.data.ratio === 1.00001) { return "#cdcdcd"; } else { return "#f3f4f5"; } }) .attr("stroke-width", 1) .attr("fill", function (d) { if (d.data.ratio === 1.00001) { return "#cdcdcd"; } else { return "#f3f4f5"; } }) .attr("d", arc_blue) .on('mouseover', function(event, d) { Tooltip.style("opacity", 0.9) d3.select(this) .style("opacity", 0.85) }) .on('mousemove', function(event, d) { if (d.data.ratio === 1.00001) { return Tooltip .html("" + d.data.labels + "
Missing data.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { return Tooltip .html("" + d.data.labels + "
"+ d.data.value + d.data.units + ".") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } }) .on('mouseout', function(d) { Tooltip .style("opacity", 0) d3.select(this) .style("opacity", 1) }) ; }, drawSocialLines2: function (svg) { let Self = this; let line_soc2 = [1,1,1,1,1,1,1,1,1,1,1,1]; let pie = d3.pie() .startAngle(-90*Math.PI/180) .sort(null) .value(Math.PI * 2 / this.yearData3.social2.length) ; let arcs = pie(line_soc2); let arc_white = d3.arc() .innerRadius( function(){ return 0; } ) .outerRadius( function () { return Self.socialRadius + 3.5; } ) ; svg .append("g") .attr("stroke", "white") .attr("stroke-width", 2) .selectAll("path") .data(arcs) .join("path") .attr("fill", "none") .attr("d", arc_white) ; }, drawEcologicalDoughnut1: function (svg, place, Tooltip) { let Self = this; let pie = d3.pie() .startAngle(-20*Math.PI/180) .endAngle(-20*Math.PI/180 + 2 * Math.PI) .sort(null) .value(Math.PI * 2 / this.yearData3.ecological1.length) ; let arcs; if (place === "B40") { arcs = pie(this.yearData1.ecological1); } else { if (place == "M40") { arcs = pie(this.yearData2.ecological1); } else { arcs = pie(this.yearData3.ecological1) } } let arc_green1 = d3.arc() .innerRadius( function (d) { return Self.socialRadius + 12; } ) .outerRadius( function (d) { if (d.data.ratio === 0) { return Self.ceilingScale(0); } else { return Self.ceilingScale(d.data.ratio > 1 ? 1 : d.data.ratio); } } ) ; let arc_red3 = d3.arc() .innerRadius( function (d) { return Self.ecoRadius + 12; } ) .outerRadius( function (d) { if (d.data.ratio === 1.00001) { return Self.ceilingScale(3.5) + 12; } else { if (d.data.ratio === 0) { return Self.ecoRadius + 12; } else { return Self.ceilingScale(d.data.ratio > 1 ? d.data.ratio : 1) + 12; } } } ) ; svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("stroke", function (d) { if (d.data.ratio === 1.00001) { return "#e7e7e7"; } else { return "#cc0243"; } //#6eb446 }) .attr("stroke-width", "0.1") .style("stroke-opacity", 0.5) .attr("fill", function (d) { if (d.data.ratio === 1.00001) { return "#e7e7e7"; } else { return "#cc0243"; } //was #6eb446 }) .attr("fill-opacity", 0.5) .attr("d", arc_green1) .on('mouseover', function(event, d) { if (d.data.ratio === 1.00001) { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f3f4f5") } else { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f30250") } }) .on('mousemove', function(event, d) { if (d.data.ratio === 1.00001) { return Tooltip .html("" + d.data.labels + "
Missing data.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { if (d.data.ratio < 1) { return Tooltip .html("" + d.data.labels + "
" + d.data.value + " " + d.data.units + ", which does not overshoot the per capita boundary and leaves a gap of " + d.data.percent + "% remaining.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { return Tooltip .html("" + d.data.labels + "
" + d.data.value + " " + d.data.units + ", which overshoots the per capita boundary by " + d.data.percent + "%.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } } }) .on('mouseout', function(event, d) { if (d.data.ratio === 1.00001) { Tooltip.style("opacity", 0); d3.select(this) .style("fill", "#e7e7e7") } else { Tooltip.style("opacity", 0); d3.select(this) .style("fill", "#cc0243") } }) ; svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("stroke", function(d) { if (d.data.ratio === 1.00001) { return "#e7e7e7"; } else { return "#cc0243"; } }) .attr("stroke-width", "1") .attr("fill", function(d) { if (d.data.ratio === 1.00001) { return "#e7e7e7"; } else { return "#cc0243"; } }) .attr("d", arc_red3) .on('mouseover', function(event, d) { if (d.data.ratio === 1.00001) { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f3f4f5") } else { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f30250") } }) .on('mousemove', function(event, d) { if (d.data.ratio === 1.00001) { return Tooltip .html("" + d.data.labels + "
Missing data.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { if (d.data.ratio < 1) { return Tooltip .html("" + d.data.labels + "
" + d.data.value + " " + d.data.units + ", which does not overshoot the per capita boundary and leaves a gap of " + d.data.percent + "% remaining.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { return Tooltip .html("" + d.data.labels + "
" + d.data.value + " " + d.data.units + ", which overshoots the per capita boundary by " + d.data.percent + "%.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } } }) .on('mouseout', function(event, d) { if (d.data.ratio === 1.00001) { Tooltip.style("opacity", 0); d3.select(this) .style("fill", "#e7e7e7") } else { Tooltip.style("opacity", 0); d3.select(this) .style("fill", "#cc0243") } }) ; }, drawEcologicalDoughnut2: function (svg, place, Tooltip) { let Self = this; let pie = d3.pie() .startAngle(-20*Math.PI/180) .endAngle(-20*Math.PI/180 + 2 * Math.PI) .sort(null) .value(Math.PI * 2 / this.yearData3.ecological2.length) ; let arcs; if (place === "B40") { arcs = pie(this.yearData1.ecological2); } else { if (place == "M40") { arcs = pie(this.yearData2.ecological2); } else { arcs = pie(this.yearData3.ecological2) } } let arc_green2 = d3.arc() .innerRadius( function (d) { return Self.socialRadius + 12; } ) .outerRadius( function (d) { if (d.data.ratio === 0) { return Self.ceilingScale(0); } else { return Self.ceilingScale(d.data.ratio > 1 ? 1 : d.data.ratio); } } ) ; let arc_red4 = d3.arc() .innerRadius( function (d) { return Self.ecoRadius + 12; } ) .outerRadius( function (d) { if (d.data.ratio === 1.00001) { return Self.ceilingScale(3.5) + 12; } else { if (d.data.ratio === 0) { return Self.ecoRadius + 12; } else { return Self.ceilingScale(d.data.ratio > 1 ? d.data.ratio : 1) + 12; } } } ) ; svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("stroke", function (d) { if (d.data.ratio === 1.00001) { return "#e7e7e7"; } else { return "#cc0243"; } }) .attr("stroke-width", "0.1") .style("stroke-opacity", 0.5) .attr("fill", function (d) { if (d.data.ratio === 1.00001) { return "#e7e7e7"; } else { return "#cc0243"; } }) .attr("fill-opacity", 0.5) .attr("d", arc_green2) .on('mouseover', function(event, d) { if (d.data.ratio === 1.00001) { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f3f4f5") } else { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f30250") } }) .on('mousemove', function(event, d) { if (d.data.ratio === 1.00001) { return Tooltip .html("" + d.data.labels + "
Missing data.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { if (d.data.ratio < 1) { return Tooltip .html("" + d.data.labels + "
" + d.data.value + " " + d.data.units + ", which does not overshoot the per capita boundary and leaves a gap of " + d.data.percent + "% remaining.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { return Tooltip .html("" + d.data.labels + "
" + d.data.value + " " + d.data.units + ", which overshoots the per capita boundary by " + d.data.percent + "%.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } } }) .on('mouseout', function(event, d) { if (d.data.ratio === 1.00001) { Tooltip.style("opacity", 0); d3.select(this) .style("fill", "#e7e7e7") } else { Tooltip.style("opacity", 0); d3.select(this) .style("fill", "#cc0243") } }) ; svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("stroke", function(d) { if (d.data.ratio === 1.00001) { return "#e7e7e7"; } else { return "#cc0243"; } }) .attr("stroke-width", 1) .attr("fill", function(d) { if (d.data.ratio === 1.00001) { return "#e7e7e7"; } else { return "#cc0243"; } }) .attr("d", arc_red4) .on('mouseover', function(event, d) { if (d.data.ratio === 1.00001) { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f3f4f5") } else { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f30250") } }) .on('mousemove', function(event, d) { if (d.data.ratio === 1.00001) { return Tooltip .html("" + d.data.labels + "
Missing data.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { if (d.data.ratio < 1) { return Tooltip .html("" + d.data.labels + "
" + d.data.value + " " + d.data.units + ", which does not overshoot the per capita boundary and leaves a gap of " + d.data.percent + "% remaining.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } else { return Tooltip .html("" + d.data.labels + "
" + d.data.value + " " + d.data.units + ", which overshoots the per capita boundary by " + d.data.percent + "%.") .style("left", (event.pageX - 110) + "px") .style("top", (event.pageY - 100) + "px"); } } }) .on('mouseout', function(event, d) { if (d.data.ratio === 1.00001) { Tooltip.style("opacity", 0); d3.select(this) .style("fill", "#e7e7e7") } else { Tooltip.style("opacity", 0); d3.select(this) .style("fill", "#cc0243") } }) ; }, drawEcologicalLines2: function (svg) { let Self = this; let line_eco2 = [1,1,1,1,1,1,1,1,1]; let pie = d3.pie() .startAngle(-20*Math.PI/180) .endAngle(-20*Math.PI/180 + 2 * Math.PI) .sort(null) .value(Math.PI * 2 / this.yearData3.ecological2.length) ; let arcs = pie(line_eco2); let arc_white = d3.arc() // .innerRadius( // function (d) { // return Self.ecoRadius + 15; // } // ) .innerRadius( function () { return 0; } ) .outerRadius( function () { return Self.ceilingScale(30) + 12; } ) ; svg .append("g") .attr("stroke", "white") .attr("stroke-width", 3) .selectAll("path") .data(arcs) .join("path") .attr("fill", "none") .attr("d", arc_white) ; }, drawEcologicalCutoff: function (svg) { let Self = this; let pie = d3.pie() .startAngle(-20*Math.PI/180) .endAngle(-20*Math.PI/180 + 2 * Math.PI) .sort(null) .value(Math.PI * 2 / this.yearData3.ecological1.length) ; let arcs = pie(this.yearData3.ecological1); let arc_cut = d3.arc() .innerRadius( function (d) { return Self.ceilingScale(1.9) + 12 } ) .outerRadius( function (d) { return Self.ceilingScale(12.3) + 12; } ) ; svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("stroke", function(d) { return d.data.ratio === 1.00001 ? '#e7e7e7' : "white"; }) .attr("stroke-width", "1") .attr("fill", function(d) { return d.data.ratio === 1.00001 ? '#e7e7e7' : "white"; }) .attr("d", arc_cut) ; }, drawBoundaries: function (svg) { const Self = this; let pie_soc = d3.pie() .startAngle(-98 * Math.PI / 180) .endAngle(-98 * Math.PI / 180 + 2 * Math.PI) .value( function (d) { return d; }) .sort(null); const arcsoc = d3.arc() .innerRadius(Self.socialRadius) .outerRadius(Self.socialRadius + 12); //was 16 svg .selectAll("#socialboundaryarc") .data(function (d) { return pie_soc([Self.socialLabels1.length]); }) .enter() .append("path") .attr("class", "arc") .attr("id", "socialboundaryarc") .attr("d", arcsoc)// was 1.2 in natSus .attr('fill', '#227443') //#3182bd in NatSus .style("stroke-width", 1.5) .style("stroke", "#227443") ; svg .selectAll("#socarctext") .data(["SOCIAL FOUNDATION"]) .enter() .append("text") .attr("dx", 85) //was 186 .attr("dy", 11) .attr("font-size", '14px') .attr("font-weight", 700) .attr("fill", "#fff") .append("textPath") .attr("xlink:href", "#socialboundaryarc") .text(function (d) { return d; }) ; let pie_bio = d3.pie() .startAngle(-98 * Math.PI / 180) .endAngle(-98 * Math.PI / 180 + 2 * Math.PI) .value( function (d) { return d; }) .sort(null); const arcbio = d3.arc() .innerRadius(Self.ecoRadius) .outerRadius(Self.ecoRadius + 12); svg .selectAll("#bioboundaryarc") .data(function (d) { return pie_bio([Self.ecoLabels1.length]); }) .enter() .append("path") .attr("class", "arc") .attr("id", "bioboundaryarc") .attr("d", arcbio) .attr("fill", "#227443") .style("stroke-width", 1.5) .style("stroke", "#227443") ; svg .selectAll("#bioarctext") .data(["ECOLOGICAL CEILING"]) .enter() .append("text") .attr("dx", 165) //was 315 .attr("dy", 10) .attr("font-weight", 700) .attr("font-size", "14px") .attr("fill", "#fff") .append("textPath") .attr("xlink:href", "#bioboundaryarc") .text(function (d) { return d; }) ; let pie_dough = d3.pie() .startAngle(-98 * Math.PI / 180) .endAngle(-98 * Math.PI / 180 + 2 * Math.PI) .value( function (d) { return d; }) .sort(null); const arcdough = d3.arc() .innerRadius(Self.socialRadius + 12.2) .outerRadius(Self.ecoRadius - 0.2); svg .selectAll("#dougharc") .data(function (d) { return pie_dough([Self.ecoLabels1.length]); }) .enter() .append("path") .attr("class", "arc") .attr("id", "dougharc") .attr("d", arcdough) .attr("fill", "#6eb446") .attr("fill-opacity", 0.6) .style("stroke-width", 1) .style("stroke", "#6eb446") ; }, drawSocialLabels1: function(svg, place){ let Self = this; let socLabelArcs1 = [1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1]; //Bottom-40 let socLabelArcs2 = [1, 2, 1, 2, 2, 2, 1, 1, 1, 1, 1, 2]; //Middle-40 let socLabelArcs3 = [2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2]; //Top-20 let pie = d3.pie() .startAngle(-90*Math.PI/180) .sort(null) .value(Math.PI * 2 / this.yearData3.social2.length) ; let arcs; if (place === "B40") { arcs = pie(socLabelArcs1); } else { if (place == "M40") { arcs = pie(socLabelArcs2); } else { arcs = pie(socLabelArcs3) } } // let arcs = pie(socLabelArcs); let arcLabel1 = d3.arc() .innerRadius(Self.ecoRadius*0.6) .outerRadius(Self.ecoRadius*0.6); // let arcLabel2 = d3.arc() // .innerRadius(Self.socRadius*0.88) // .outerRadius(Self.socRadius*0.88); svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("display", "none") .attr("fill", "#333") .attr("stroke", "#000") .attr("d", arcLabel1) .attr("id", (d, i) => `arc_soc1_${i}`) ; svg .append("g") .selectAll("text") .data(arcs) .join("text") .attr("dx", function (d, i) { return i < 6 ? 20 : 60; //was -90 : 90 }) .attr("dy", function (d, i) { return i < 6 ? 11 : -2; }) .attr("font-size", "14px") .attr("font-weight", 500) .attr("fill", function (d) { return d.data > 1.2 ? "#000" : "#fff"; }) .append("textPath") .style("text-anchor", "middle") .attr("xlink:href", (d, i) => `#arc_soc1_${i}`) .text((d, i) => Self.socialLabels3[i]) ; }, drawEcologicalLabels: function(svg, place){ let Self = this; let ecoLabelArcs1 = [1, 1, 1, 1, 1, 1, 1, 1, 1]; //Bottom-40 let ecoLabelArcs2 = [2, 1, 1, 2, 1, 1, 1, 1, 1]; //Middle-40 let ecoLabelArcs3 = [2, 1, 1, 2, 1, 1, 1, 1, 1]; //Top-20 let pie = d3.pie() .startAngle(-20*Math.PI/180) .endAngle(-20*Math.PI/180 + 2 * Math.PI) .sort(null) .value(Math.PI * 2 / this.yearData3.ecological2.length) ; let arcs; if (place === "B40") { arcs = pie(ecoLabelArcs1); } else { if (place == "M40") { arcs = pie(ecoLabelArcs2); } else { arcs = pie(ecoLabelArcs3) } } let arcLabel1 = d3.arc() .innerRadius(Self.ecoRadius*1.43) .outerRadius(Self.ecoRadius*1.43); let arcLabel2 = d3.arc() .innerRadius(Self.ecoRadius*1.33) .outerRadius(Self.ecoRadius*1.33); svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("display", "none") .attr("fill", "#333") .attr("stroke", "#000") .attr("d", arcLabel1) .attr("id", (d, i) => `arc_bio1_${i}`) ; svg .append("g") .selectAll("text") .data(arcs) .join("text") .attr("dy", function (d, i) { return i < 3 || i > 6 ? 0 : 2; }) .attr("dx", function (d, i) { return i < 3 || i > 6 ? 62 : 186; //-90 : 290 }) .attr("font-size", "14px") .attr("font-weight", 500) .attr("fill", function (d) { return d.data > 1.2 ? "#fff" : "#000"; }) .append("textPath") .style("text-anchor", "middle") .attr("xlink:href", (d, i) => `#arc_bio1_${i}`) .text((d, i) => Self.ecoLabels1[i]) ; svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("display", "none") .attr("fill", "#333") .attr("stroke", "#000") .attr("d", arcLabel2) .attr("id", (d, i) => `arc_bio2_${i}`) ; svg .append("g") .selectAll("text") .data(arcs) .join("text") .attr("dy", function (d, i) { return i < 3 || i > 6 ? 0 : 2; }) .attr("dx", function (d, i) { return i < 3 || i > 6 ? 58 : 173; }) .attr("font-size", "14px") .attr("font-weight", 500) .attr("fill", function (d) { return d.data > 1.2 ? "#fff" : "#000"; }) .append("textPath") .style("text-anchor", "middle") .attr("xlink:href", (d, i) => `#arc_bio2_${i}`) .text((d, i) => Self.ecoLabels2[i]) ; }, plot1: function (place) { this.getDataAndScales1(); this.plotDoughnut1(place); }, plot2: function (place) { this.getDataAndScales2(); this.plotDoughnut2(place); }, plot3: function (place) { this.getDataAndScales3(); this.plotDoughnut3(place); }, //Social tooltip vars socLabels1: [ {"co1":"Lack of public transport"}, {"co2":"Lack of internet"}, {"en1":"Lack of electricity"}, {"en2":"Lack of clean fuels indoors"}, {"wa1":"Unsafe drinking water"}, {"wa2":"Unsafe sanitation"}, {"nu1":"Undernourishment"}, {"nu2":"Food insecurity"}, {"he1":"Child mortality"}, {"he2":"Lack of health services"}, {"ed1":"Illiteracy"}, {"ed2":"Incomplete secondary school"}, {"iw1":"Societal poverty"}, {"iw2":"Youth unemployment"}, {"pj1":"Perceptions of corruption"}, {"pj2":"Homicides"}, {"pv1":""}, {"pv2":""}, {"sc1":"Lack of social support"}, {"sc2":"Income inequality"}, {"eq1":"Gender inequality"}, {"eq2":"Racial inequality"}, {"ho1":""}, {"ho2":""} ], socUnits1: [ {"co1":"% of this country-cluster's urban population lacks access to convenient public transport"}, {"co2":"% of this country-cluster's population does not access the internet"}, {"en1":"% of this country-cluster's population lacks access to electricity"}, {"en2":"% of this country-cluster's population lacks access to clean fuels indoors"}, {"wa1":"% of this country-cluster's population lacks access to safe drinking water"}, {"wa2":"% of this country-cluster's population lacks access to safe sanitation"}, {"nu1":"% of this country-cluster's population is undernourished"}, {"nu2":"% of this country-cluster's population has moderate to severe food insecurity"}, {"he1":"% of this country-cluster's population lives in countries with under-five mortality rates of 25 deaths or more per 1,000 births"}, {"he2":"% of this country-cluster's population lives in countries that lack high coverage of essential health services"}, {"ed1":"% of this country-cluster's population aged 15+ is illiterate"}, {"ed2":"% of this country-cluster's population aged 21-23 has incomplete upper secondary education"}, {"iw1":"% of this country-cluster's population lives below the societal poverty line"}, {"iw2":"% of this country-cluster's population aged 15-24 is not in education, employment, or training"}, {"pj1":"% of this country-cluster's population perceives widespread corruption in government and business"}, {"pj2":"% of this country-cluster's population lives in countries with homicide rates of 5 or more per 100,000 people"}, {"pv1":""}, {"pv2":""}, {"sc1":"% of this country-cluster's population states that they are without someone to count on in times of trouble"}, {"sc2":"% of this country-cluster's population lives in countries with a Palma ratio of 2 or more"}, {"eq1":"% of this country-cluster's gender gap remaining"}, {"eq2":""}, {"ho1":""}, {"ho2":""} ], socVisible1: [ {"co1":1}, {"co2":1}, {"en1":1}, {"en2":1}, {"wa1":1}, {"wa2":1}, {"nu1":1}, {"nu2":1}, {"he1":1}, {"he2":1}, {"ed1":1}, {"ed2":1}, {"iw1":1}, {"iw2":1}, {"pj1":1}, {"pj2":1}, {"pv1":0}, {"pv2":0}, {"sc1":1}, {"sc2":1}, {"eq1":1}, {"eq2":1}, {"ho1":0},{"ho2":"0"} ], socLabels2: [ {"co":""}, {"en":""}, {"wa":""}, {"nu":""}, {"he":""}, {"ed":""}, {"iw":""}, {"pj":""}, {"pv":"Autocratic regimes"}, {"sc":""}, {"eq":""}, {"ho":"Inadequate housing"} ], socUnits2: [ {"co":""}, {"en":""}, {"wa":""}, {"nu":""}, {"he":""}, {"ed":""}, {"iw":""}, {"pj":""}, {"pv":"% of this country-cluster's population lives in countries governed by an autocratic regime"}, {"sc":""}, {"eq":""}, {"ho":"% of ths country-cluster's urban population lives in slums or informal settlements"} ], socVisible2: [ {"co":0}, {"en":0}, {"wa":0}, {"nu":0}, {"he":0}, {"ed":0}, {"iw":0}, {"pj":0}, {"pv":1}, {"sc":0}, {"eq":0}, {"ho":1} ], //Ecological tooltip vars ecoLabs1: [ {"cc1": ""}, {"cc2": ""}, {"oa1": ""}, {"oa2": ""}, {"cp1": ""}, {"cp2": ""}, {"np1": "Phosphorus footprint"}, {"np2": "Nitrogen footprint"}, {"ap1": ""}, {"ap2": ""}, {"fd1": ""}, {"fd2": ""}, {"lc1": ""}, {"lc2": ""}, {"bb1": "Species-loss footprint"}, {"bb2": "HANPP footprint"}, {"od1": ""}, {"od2": ""} ], ecoBounds1: [ {"cc1": ""}, {"cc2": ""}, {"oa1": ""}, {"oa2": ""}, {"cp1": ""}, {"cp2": ""}, {"np1": 0.85}, {"np2": 8.5}, {"ap1": ""}, {"ap2": ""}, {"fd1": ""}, {"fd2": ""}, {"lc1": ""}, {"lc2": ""}, {"bb1": 0.5}, {"bb2": "0.7"}, {"od1": ""}, {"od2": ""} ], ecoUnits1: [ {"cc1": ""}, {"cc2": ""}, {"oa1": ""}, {"oa2": ""}, {"cp1": ""}, {"cp2": ""}, {"np1": "kg P per capita"}, {"np2": "kg N per capita"}, {"ap1": ""}, {"ap2": ""}, {"fd1": ""}, {"fd2": ""}, {"lc1": ""}, {"lc2": ""}, {"bb1": "MSA-loss per capita"}, {"bb2": "t C per capita"}, {"od1": ""}, {"od2": ""} ], ecoVisible1:[ {"cc1": 0}, {"cc2": 0}, {"oa1": 0}, {"oa2": 0}, {"cp1": 0}, {"cp2": 0}, {"np1": 15}, {"np2": 15}, {"ap1": 0}, {"ap2": 0}, {"fd1": 0}, {"fd2": 0}, {"lc1": 0}, {"lc2": 0}, {"bb1": 15}, {"bb2": 15}, {"od1": 0}, {"od2": 0} ], ecoLabs2: [ {"cc": "Carbon footprint"}, {"oa": "Ocean acidification footprint"}, {"cp": "Chemical pollution footprint"}, {"np": ""}, {"ap": "Air pollution footprint"}, {"fd": "Blue water footprint"}, {"lc": "Land conversion footprint"}, {"bb": ""}, {"od": "Ozone layer depletion footprint"} ], ecoBounds2: [ {"cc": "0.95"}, {"oa": ""}, {"cp": ""}, {"np": ""}, {"ap": ""}, {"fd": "384"}, {"lc": ""}, {"bb": ""}, {"od": ""} ], ecoUnits2: [ {"cc": "t CO2 per capita"}, {"oa": ""}, {"cp": ""}, {"np": ""}, {"ap": ""}, {"fd": "m3 H2O per capita"}, {"lc": ""}, {"bb": ""}, {"od": ""} ], ecoVisible2: [ {"cc": 15}, {"oa": 15}, {"cp": 15}, {"np": 0}, {"ap": 15}, {"fd": 15}, {"lc": 15}, {"bb": 0}, {"od": 15} ] });33:Tdd5,controls = ({ timer: null, timerInterval: 500, year: 2017, maxYear: 2022, chart: null, init: function (chart) { let Self = this; this.chart = chart; //if (document.location.host === 'deal.static.observableusercontent.com') { // d3.select('#main_block').attr("style", "min-height: " + width * 2 + "px; height: " + 600 + "px;"); //} d3.select("#yearRange").on("input", function () { Self.year = (this.value * 1) + 2000; d3.select("#yearRangeNumber").text(Self.year); Self.chart.setYear(Self.year); }); d3.select("#playRange").on("click", function () { let button = this; button.disabled = true; d3.select("#yearRangeNumber").text(2000); d3.select("#yearRange").node().value = 0; Self.year = 2000; Self.chart.setYear(2000); Self.timer = d3.timer(function (duration) { let pos = 2000 + Math.floor(duration / Self.timerInterval) + 1; if (pos > Self.year) { Self.year = pos; if (pos < Self.maxYear) { Self.chart.setYear(pos); } else { Self.chart.setYear(Self.maxYear); Self.timer.stop(); button.disabled = false; } d3.select("#yearRangeNumber").text(Self.year); d3.select("#yearRange").node().value = Self.year - 2000; } }, Self.timerInterval * 1.8); }); }, fillPlacesDropdown: function(wldData) { let Self = this; let placeList = wldData.map(elem => ( { place: elem.place, placeCode: elem.placeCode } )); let list1 = d3.select("#country_dropdown_menu1") .selectAll("option") .data(placeList) .enter() .append("option") .attr("class", "dropdown-item") .attr("id", d => "place_" + d.placeCode) .attr("name", "place") .attr("value", d => d.placeCode) .text(d => d.place) .property("selected", function (d) { return d.placeCode === 'B40'; }) ; let list2 = d3.select("#country_dropdown_menu2") .selectAll("option") .data(placeList) .enter() .append("option") .attr("class", "dropdown-item") .attr("id", d => "place_" + d.placeCode) .attr("name", "place") .attr("value", d => d.placeCode) .text(d => d.place) .property("selected", function (d) { return d.placeCode === 'M40'; }) ; let list3 = d3.select("#country_dropdown_menu3") .selectAll("option") .data(placeList) .enter() .append("option") .attr("class", "dropdown-item") .attr("id", d => "place_" + d.placeCode) .attr("name", "place") .attr("value", d => d.placeCode) .text(d => d.place) .property("selected", function (d) { return d.placeCode === 'T20'; }) ; $('#country_dropdown_menu1') .on('change', function () { let key = $(this).val(); Self.chart.setPlace1(key); }); $('#country_dropdown_menu2') .on('change', function () { let key = $(this).val(); Self.chart.setPlace2(key); }); $('#country_dropdown_menu3') .on('change', function () { let key = $(this).val(); Self.chart.setPlace3(key); }); }, enablePanels: function() { $('#panels').removeClass('d-none'); $('#controls2').removeClass('d-none').addClass('d-flex'); $('#yearRange').removeAttr('disabled'); $('#playRange').removeAttr('disabled'); } });34:[{"id":"cc1f1b1f81f2ad4ef82371338c39c5ce9a36efbeaf05360dbcf6992396b823507b661e55c11a89727cb4ffcb89902ac0ca8d302509292d56c87538da54114720","href":"https://static.observableusercontent.com/files/cc1f1b1f81f2ad4ef82371338c39c5ce9a36efbeaf05360dbcf6992396b823507b661e55c11a89727cb4ffcb89902ac0ca8d302509292d56c87538da54114720","name":"001_20250925_incomeGrpDoughnuts-missingToNum.json","type":"application/json","lastModified":1758792829153.68,"size":257433}] 2f:{"id":"ee648828d644797e","slug":null,"title":"Country-cluster Doughnuts","thumbnail":"ac9988386463d9d57dcb63f1e43e447530d025284e70640ff12e12b959b35c15","access_level":"public","create_time":"$D2025-09-17T12:07:40.379Z","update_time":"$D2025-10-01T17:44:27.366Z","view_time":null,"first_public_time":"$D2025-10-01T17:46:29.211Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"1374acedd7936e73","login":"859086386529af09","name":"Andrew Fanning","avatar_url":"https://avatars-next.observableusercontent.com/2e8918df2b34090068128ad4ef0a883e065d85ab3ef59083acf37b3f6c2368c6","tier":"starter_2024","bio":""},"version":1099,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"859086386529af09","login":"859086386529af09","name":"Andrew Fanning","avatar_url":"https://avatars-next.observableusercontent.com/2e8918df2b34090068128ad4ef0a883e065d85ab3ef59083acf37b3f6c2368c6","tier":null,"bio":""}],"members":[{"type":"individual","id":"859086386529af09","login":"859086386529af09","name":"Andrew Fanning","avatar_url":"https://avatars-next.observableusercontent.com/2e8918df2b34090068128ad4ef0a883e065d85ab3ef59083acf37b3f6c2368c6","tier":null,"role":"editor"},{"type":"team","id":"1374acedd7936e73","login":"859086386529af09","name":"Andrew Fanning","avatar_url":"https://avatars-next.observableusercontent.com/2e8918df2b34090068128ad4ef0a883e065d85ab3ef59083acf37b3f6c2368c6","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Country-cluster Doughnuts","cells":[{"id":0,"value":"# Country-cluster Doughnuts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$$ = require('jquery').then(jquery => {\n window.jquery = jquery;\n // return require('popper@1.16.1/index.js').catch(() => jquery);\n require('bootstrap@4.0');\n return jquery;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"play_chart3 = {\n $(document).ready(function() {\n chart.setControls(controls);\n \n controls.init(chart);\n controls.fillPlacesDropdown(wldData);\n\n chart.setPlace3('T20');\n chart.setPlace2('M40');\n chart.setPlace1('B40');\n \n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"wldData = FileAttachment(\"001_20250925_incomeGrpDoughnuts-missingToNum.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"