2b:null 2c:["$","title",null,{"children":"Global Doughnut | Andrew Fanning | Observable"}] 31:T805,html_struct = { return html `

`; }32:Te5b9,chart = ({ controls: null, place: null, data: null, yearData: null, maxSequence: 22, sequence: 22, doughnutSVG: null, socialRadius: 135, socialScale: null, ecoRadius: 210, ceilingScale: null, panelDIV: null, //Declare index variables for doughnut annotations and tooltips 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" ], 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" ], //Annotated social dimension labels socialLabels1: [ 'connectivity', 'energy', 'water', 'food', 'health', 'education', 'income', 'peace &', 'political', 'social', 'equality', 'housing' ], socialLabels2: [ '', '', '', '', '', '', '& work', 'justice', 'voice', 'cohesion', '', '' ], //Annotated ecological dimension labels ecologicalLabels1: [ 'climate', 'ocean', 'chemical', 'pollution', 'pollution', 'disruption', 'conversion', 'biodiversity', 'ozone layer' ], ecologicalLabels2: [ 'change', 'acidification', 'pollution', 'nutrient', 'air', 'freshwater', 'land', 'breakdown', 'depletion' ], //Set controls setControls(controls) { this.controls = controls; }, //Set place from dropdown setPlace: function (placeCode) { function getByPlaceCode(arr, value) { for (var i=0, iLen=arr.length; i g.attr('transform', e.transform) let zoom = d3.zoom() .scaleExtent([0.3,1]) .on('zoom', handleZoom) ; svg.call(zoom); g .append("path") .attr("d", function () { let path = d3.path(); path.moveTo(-30, 0); path.lineTo(30, 0); path.moveTo(0, -30); path.lineTo(0, 30); return path; }) .style('stroke', 'red') .style('fill', 'none') .style('stroke-width', 2) ; let Tooltip = d3.select("#doughnut") .append("div") .style("opacity", 0) .attr("class", "tooltip") .style("background-color", "white") .style("border", "solid") .style("border-width", "2px") .style("border-radius", "5px") .style("padding", "5px") .style("pointer-events", "none"); this.drawEcologicalBackground1(g, Tooltip); this.drawEcologicalBackground2(g, Tooltip); this.drawEcologicalDoughnut1(g, Tooltip); this.drawEcologicalDoughnut2(g, Tooltip); this.drawEcologicalLines2(g); this.drawSocialBackground1(g, Tooltip); this.drawSocialBackground2(g, Tooltip); this.drawSocialDoughnut1(g, Tooltip); this.drawSocialDoughnut2(g, Tooltip); this.drawSocialLines2(g); //this.drawEcologicalCutoff(svg); this.drawBoundaries(g); this.drawSocialLabels(g); this.drawEcologicalLabels(g); this.hidePanel(); }, showEcoPanel: function (d) { d3.select("#panelText div").remove(); let panel = this.panelDIV = d3.select("#panelText").append("div") .style("background-color", "white") .style("border", "solid") .style("border-width", "1px") .style("border-radius", "5px") .style("padding", "5px"); if(d.data.ratio === 1.00001) { panel .html("" + d.data.dim + ": " + d.data.labels + "
" + d.data.descPanel + "

Indicator: " + d.data.descTip + "

Year " + d.data.year + " overshoot: Missing data.") } else { if(d.data.ratio < 1) { panel .html("" + d.data.dim + ": " + d.data.labels + "
" + d.data.descPanel + "

Indicator: " + d.data.descTip + "

Year "+ d.data.year + " overshoot: " + d.data.value + " " + d.data.units + ", which does not overshoot the " + d.data.boundary + " " + d.data.units + " boundary and leaves a gap of " + d.data.percent + "% remaining.") } else { panel .html("" + d.data.dim + ": " + d.data.labels + "
" + d.data.descPanel + "

Indicator: " + d.data.descTip + "

Year "+ d.data.year + " overshoot: " + d.data.value + " " + d.data.units + ", which overshoots the " + d.data.boundary + " " + d.data.units + " boundary by " + d.data.percent + "%.") } } }, showSocPanel: function (d) { d3.select("#panelText div").remove(); let panel = this.panelDIV = d3.select("#panelText").append("div") .style("background-color", "white") .style("border", "solid") .style("border-width", "1px") .style("border-radius", "5px") .style("padding", "5px"); if(d.data.ratio === 1.00001) { panel .html("" + d.data.dim + ": " + d.data.labels + "
" + d.data.descPanel + "

Indicator: " + d.data.descTip + "

Year " + d.data.year + " shortfall: Missing data.") } else { if (d.data.code === "eq1") { panel .html("" + d.data.dim + ": " + d.data.labels + "
" + d.data.descPanel + "

Indicator: " + d.data.descTip + "

Year " + d.data.year + " shortfall: " + d.data.value + d.data.units + ".") } else { if (d.data.population < 10) { panel .html("" + d.data.dim + ": " + d.data.labels + "
" + d.data.descPanel + "

Indicator: " + d.data.descTip + "

Year " + d.data.year + " shortfall: " + d.data.value + d.data.units + ", which is equivalent to " + d.data.population + " billion people.") } else { panel .html("" + d.data.dim + ": " + d.data.labels + "
" + d.data.descPanel + "

Indicator: " + d.data.descTip + "

Year " + d.data.year + " shortfall: " + d.data.value + d.data.units + ", which is equivalent to " + d.data.population + " million people.") } } } }, hidePanel: function () { d3.select("#panelText div").remove(); let panel = this.panelDIV = d3.select("#panelText").append("div") .style("background-color", "white") .style("border", "solid") .style("border-width", "1px") .style("border-radius", "5px") .style("padding", "5px"); panel .html("Hover or tap on the wedges for information about the global indicators shown in the Doughnut of Social and Planetary Boundaries."); }, drawEcologicalBackground1: function (svg, 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.yearData.ecological1.length) ; let arcs = pie(this.yearData.ecological1); let arc_grey1 = d3.arc() .innerRadius( function(){ return 0; } ) .outerRadius( function (d) { return Self.ceilingScale(d.data.visible) + 15; } ) ; 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_grey1) .on('mouseover', function(event, d) { Tooltip.style("opacity", 0.9); d3.select(this) .style("fill", "#f3f4f5"); Self.showEcoPanel(d); }) .on('mousemove', function(event, d) { return Tooltip .html("" + d.data.labels + " (" + d.data.year + ")") .style("left", (event.pageX - 90) + "px") .style("top", (event.pageY - 140) + "px"); }) .on('mouseout', function(d) { Tooltip .style("opacity", 0); d3.select(this) .style("fill", "#ffffff"); Self.hidePanel(); }) ; }, drawEcologicalBackground2: function (svg, 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.yearData.ecological2.length) ; let arcs = pie(this.yearData.ecological2); let arc_grey2 = d3.arc() .innerRadius( function(){ return 0; } ) .outerRadius( function (d) { return Self.ceilingScale(d.data.visible) + 15; } ) ; svg .append("g") //.attr("stroke", "white") //.attr("stroke-width", 2) .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", "#f3f4f5") Self.showEcoPanel(d); }) .on('mousemove', function(event, d) { return Tooltip .html("" + d.data.labels + " (" + d.data.year + ")") .style("left", (event.pageX - 90) + "px") .style("top", (event.pageY - 140) + "px"); }) .on('mouseout', function(d) { Tooltip .style("opacity", 0) d3.select(this) .style("fill", "#ffffff") Self.hidePanel(); }) ; }, drawSocialBackground1: function (svg, Tooltip) { let Self = this; let pie = d3.pie() .startAngle(-90*Math.PI/180) .sort(null) .value(Math.PI * 2 / this.yearData.social1.length) ; let arcs = pie(this.yearData.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", 2) .selectAll("path") .data(arcs) .join("path") .attr("stroke", function(d) { if (d.data.ratio === 1.00001) { return "#b9b9b9"; } else { return "#cc0243"; } }) .attr("fill", function(d) { if (d.data.ratio === 1.00001) { return "#b9b9b9"; } else { return "#cc0243"; } }) .attr("d", arc_red1) .on('mouseover', function(event, d) { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f30250") Self.showSocPanel(d); }) .on('mousemove', function(event, d) { return Tooltip .html("" + d.data.labels + " (" + d.data.year + ")") .style("left", (event.pageX - 90) + "px") .style("top", (event.pageY - 140) + "px"); }) .on('mouseout', function(d) { Tooltip .style("opacity", 0) d3.select(this) .style("fill", "#cc0243") Self.hidePanel(); }) ; }, drawSocialBackground2: function (svg, Tooltip) { let Self = this; let pie = d3.pie() .startAngle(-90*Math.PI/180) .sort(null) .value(Math.PI * 2 / this.yearData.social2.length) ; let arcs = pie(this.yearData.social2); let arc_red2 = d3.arc() .innerRadius( function(){ return 0; } ) .outerRadius( function (d) { return Self.socialScale(d.data.visible); } ) ; svg .append("g") .attr("stroke-width", 2) .selectAll("path") .data(arcs) .join("path") .attr("stroke", function(d) { if (d.data.ratio === 1.00001) { return "#b9b9b9"; } else { return "#cc0243"; } }) .attr("fill", function(d) { if (d.data.ratio === 1.00001) { return "#b9b9b9"; } else { return "#cc0243"; } }) .attr("d", arc_red2) .on('mouseover', function(event, d) { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f30250") Self.showSocPanel(d); }) .on('mousemove', function(event, d) { return Tooltip .html("" + d.data.labels + " (" + d.data.year + ")") .style("left", (event.pageX - 90) + "px") .style("top", (event.pageY - 140) + "px"); }) .on('mouseout', function(d) { Tooltip .style("opacity", 0) d3.select(this) .style("fill", "#cc0243") Self.hidePanel(); }) ; }, drawSocialDoughnut1: function (svg, Tooltip) { let Self = this; let pie = d3.pie() .startAngle(-90*Math.PI/180) .sort(null) .value(Math.PI * 2 / this.yearData.social1.length) ; let arcs = pie(this.yearData.social1); let arc_blue1 = 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 "#b9b9b9"; } else { return "#f3f4f5"; } }) .attr("stroke-width", 1) .attr("fill", function (d) { if (d.data.ratio === 1.00001) { return "#b9b9b9"; } else { return "#f3f4f5"; } }) .attr("d", arc_blue1) .on('mouseover', function(event, d) { Tooltip.style("opacity", 0.9) d3.select(this) .style("opacity", 0.85) Self.showSocPanel(d); }) .on('mousemove', function(event, d) { return Tooltip .html("" + d.data.labels + " (" + d.data.year + ")") .style("left", (event.pageX - 90) + "px") .style("top", (event.pageY - 140) + "px"); }) .on('mouseout', function(d) { Tooltip .style("opacity", 0) d3.select(this) .style("opacity", 1) Self.hidePanel(d); }) ; }, drawSocialDoughnut2: function (svg, Tooltip) { let Self = this; let pie = d3.pie() .startAngle(-90*Math.PI/180) .sort(null) .value(Math.PI * 2 / this.yearData.social2.length) ; let arcs = pie(this.yearData.social2); let arc_blue2 = 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 === 1.00001) { return "#b9b9b9"; } else { return "#f3f4f5"; } }) .attr("stroke-width", 1) .attr("fill", function (d) { if (d.data === 1.00001) { return "#b9b9b9"; } else { return "#f3f4f5"; } }) .attr("d", arc_blue2) .on('mouseover', function(event, d) { Tooltip.style("opacity", 0.9) d3.select(this) .style("opacity", 0.85) Self.showSocPanel(d); }) .on('mousemove', function(event, d) { return Tooltip .html("" + d.data.labels + " (" + d.data.year + ")") .style("left", (event.pageX - 90) + "px") .style("top", (event.pageY - 140) + "px"); }) .on('mouseout', function(d) { Tooltip .style("opacity", 0) d3.select(this) .style("opacity", 1) Self.hidePanel(); }) ; }, 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.yearData.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", 3) .selectAll("path") .data(arcs) .join("path") .attr("fill", "none") .attr("d", arc_white) ; }, drawEcologicalDoughnut1: function (svg, 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.yearData.ecological1.length) ; let arcs = pie(this.yearData.ecological1); let arc_red3 = d3.arc() .innerRadius( function () { return 0; } ) .outerRadius( function (d) { if (d.data.ratio === 1.00001) { return Self.ceilingScale(10) + 15; } else { return Self.ceilingScale(d.data.ratio > 1 ? d.data.ratio : 1) + 15; } } ) ; svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("stroke", function(d) { if (d.data.ratio === 1.00001) { return "#b9b9b9"; } else { return "#cc0243"; } }) .attr("stroke-width", "1") .attr("fill", function(d) { if (d.data.ratio === 1.00001) { return "#b9b9b9"; } else { return "#cc0243"; } }) .attr("d", arc_red3) .on('mouseover', function(event, d) { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f30250") Self.showEcoPanel(d); }) .on('mousemove', function(event, d) { return Tooltip .html("" + d.data.labels + " (" + d.data.year + ")") .style("left", (event.pageX - 90) + "px") .style("top", (event.pageY - 140) + "px"); }) .on('mouseout', function(d) { Tooltip .style("opacity", 0) d3.select(this) .style("fill", "#cc0243") Self.hidePanel(); }) ; }, drawEcologicalDoughnut2: function (svg, 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.yearData.ecological2.length) ; let arcs = pie(this.yearData.ecological2); let arc_red4 = d3.arc() .innerRadius( function () { return 0; } ) .outerRadius( function (d) { if (d.data.ratio === 1.00001) { return Self.ceilingScale(10) + 15; } else { return Self.ceilingScale(d.data.ratio > 1 ? d.data.ratio : 1) + 15; } } ) ; svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("stroke", function(d) { if (d.data.ratio === 1.00001) { return "#b9b9b9"; } else { return "#cc0243"; } }) .attr("stroke-width", 1) .attr("fill", function(d) { if (d.data.ratio === 1.00001) { return "#b9b9b9"; } else { return "#cc0243"; } }) .attr("d", arc_red4) .on('mouseover', function(event, d) { Tooltip.style("opacity", 0.9) d3.select(this) .style("fill", "#f30250") Self.showEcoPanel(d); }) .on('mousemove', function(event, d) { return Tooltip .html("" + d.data.labels + " (" + d.data.year + ")") .style("left", (event.pageX - 90) + "px") .style("top", (event.pageY - 140) + "px"); }) .on('mouseout', function(d) { Tooltip .style("opacity", 0) d3.select(this) .style("fill", "#cc0243") Self.hidePanel(); }) ; }, 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.yearData.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(34) + 15; } ) ; svg .append("g") .attr("stroke", "white") .attr("stroke-width", 4) .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.yearData.ecological1.length) ; let arcs = pie(this.yearData.ecological1); let arc_cut = d3.arc() .innerRadius( function (d) { return Self.ceilingScale(1.9) + 15 } ) .outerRadius( function (d) { return Self.ceilingScale(10) + 15; } ) ; svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("stroke", function(d) { return d.data === 1.00001 ? '#b9b9b9' : "white"; }) .attr("stroke-width", "1") .attr("fill", function(d) { return d.data === 1.00001 ? '#b9b9b9' : "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 + 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", 186) .attr("dy", 12) .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 + 16); svg .selectAll("#bioboundaryarc") .data(function (d) { return pie_bio([Self.ecologicalLabels1.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", 315) .attr("dy", 12) .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 + 16.5) .outerRadius(Self.ecoRadius - 0.5); svg .selectAll("#dougharc") .data(function (d) { return pie_dough([Self.ecologicalLabels1.length]); }) .enter() .append("path") .attr("class", "arc") .attr("id", "dougharc") .attr("d", arcdough) .attr("fill", "#6eb446") .style("stroke-width", 1) .style("stroke", "#6eb446") ; }, drawSocialLabels: function(svg){ let Self = this; let socLabelArcs = [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]; let pie = d3.pie() .startAngle(-90*Math.PI/180) .sort(null) .value(Math.PI * 2 / this.yearData.social2.length) ; let arcs = pie(socLabelArcs); let arcLabel1 = d3.arc() .innerRadius(Self.ecoRadius*0.8) .outerRadius(Self.ecoRadius*0.8); let arcLabel2 = d3.arc() .innerRadius(Self.ecoRadius*0.88) .outerRadius(Self.ecoRadius*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 ? -90 : 90; }) .attr("dy", function (d, i) { return i < 6 ? 5 : 2; }) .attr("font-size", "14px") .attr("font-weight", 700) .attr("fill", "#fff") .append("textPath") .style("text-anchor", "middle") .attr("startOffset", function(d,i){ return i < 6 ? "75%" : "22%"; }) .attr("xlink:href", (d, i) => `#arc_soc1_${i}`) .text((d, i) => Self.socialLabels1[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_soc2_${i}`) ; svg .append("g") .selectAll("text") .data(arcs) .join("text") .attr("dx", function(d, i) { return i < 6 ? -90 : 90; }) .attr("dy", function(d, i) { return i < 6 ? 5 : 2; }) .attr("font-size", "14px") .attr("font-weight", 700) .attr("fill", "#fff") .append("textPath") .style("text-anchor", "middle") .attr("startOffset", function(d,i){ return i < 6 ? "75%" : "27%"; }) .attr("xlink:href", (d, i) => `#arc_soc2_${i}`) .text((d, i) => Self.socialLabels2[i]) ; }, drawEcologicalLabels: function(svg){ let Self = this; let ecoLabelArcs = [2, 1, 2, 2, 1, 2, 2, 2, 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.yearData.ecological2.length) ; let arcs = pie(ecoLabelArcs); let arcLabel1 = d3.arc() .innerRadius(Self.ecoRadius*1.28) .outerRadius(Self.ecoRadius*1.28); let arcLabel2 = d3.arc() .innerRadius(Self.ecoRadius*1.2) .outerRadius(Self.ecoRadius*1.2); 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 ? 5 : 2; }) .attr("dx", function (d, i) { return i < 3 || i > 6 ? -90 : 290; }) .attr("font-size", "14px") .attr("font-weight", 700) .attr("fill", function (d) { return d.data > 1.2 ? "#fff" : "#000"; }) .append("textPath") .style("text-anchor", "middle") .attr("startOffset", function(d, i){ return i < 3 || i > 6 ? "50%" : "0%" }) .attr("xlink:href", (d, i) => `#arc_bio1_${i}`) .text((d, i) => Self.ecologicalLabels1[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 ? 5 : 2; }) .attr("dx", function (d, i) { return i < 3 || i > 6 ? -90 : 270; }) .attr("font-size", "14px") .attr("font-weight", 700) .attr("fill", function (d) { return d.data > 1.2 ? "#fff" : "#000"; }) .append("textPath") .style("text-anchor", "middle") .attr("startOffset", function(d, i){ return i < 3 || i > 6 ? "51.5%" : "0%" }) .attr("xlink:href", (d, i) => `#arc_bio2_${i}`) .text((d, i) => Self.ecologicalLabels2[i]) ; }, plot: function () { this.getDataAndScales(); this.plotDoughnut(); this.hidePanel(); }, //Social tooltip/panel vars socDims1: [ {"co1":"Connectivity"}, {"co2":"Connectivity"}, {"en1":"Energy"}, {"en2":"Energy"}, {"wa1":"Water"}, {"wa2":"Water"}, {"nu1":"Food"}, {"nu2":"Food"}, {"he1":"Health"}, {"he2":"Health"}, {"ed1":"Education"}, {"ed2":"Education"}, {"iw1":"Income & Work"}, {"iw2":"Income & Work"}, {"pj1":"Peace & Justice"}, {"pj2":"Peace & Justice"}, {"pv1":"Political voice"}, {"pv2":"Political voice"}, {"sc1":"Social cohesion"}, {"sc2":"Social cohesion"}, {"eq1":"Equality"}, {"eq2":"Equality"}, {"ho1":"Housing"}, {"ho2":"Housing"} ], 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":""} ], socDescTip1: [ {"co1":"Population lacking access to convenient public transport in cities (% of urban population)"}, {"co2":"Population not accessing the internet (% of population)"}, {"en1":"Population lacking access to elecricity (% of population)"}, {"en2":"Population lacking access to clean fuels indoors (% of population)"}, {"wa1":"Population lacking access to safe drinking water (% of population)"}, {"wa2":"Population lacking access to safe sanitation (% of population)"}, {"nu1":"Population undernourished (% of population)"}, {"nu2":"Population with moderate to severe food insecurity (% of population)"}, {"he1":"Population living in countries with under-five mortality rate that exceeds 25 deaths per 1,000 live births (% of population)"}, {"he2":"Population living in countries lacking high coverage of essential health services, set at Universal Health Coverage Index score less than 60 out of 100 (% of population)"}, {"ed1":"Adult population who are illiterate (% of population aged 15+)"}, {"ed2":"Young adult population with incomplete upper secondary education (% of population aged 21-23)"}, {"iw1":"Population living below the societal poverty line, set at half their country's median household income or at least $15 a day (% of population)"}, {"iw2":"Youth population not in employment, education, or training (% of population aged 15-24)"}, {"pj1":"Population stating that they perceive widespread corruption in government and business (% of population)"}, {"pj2":"Population living in countries with a homicide rate of 5 or more per 100,000 people (% of population)"}, {"pv1":""}, {"pv2":""}, {"sc1":"Population stating that they are without someone to count on in times of trouble (% of population)"}, {"sc2":"Population living in countries where the income share of the richest 10% of people is 2 or more times larger than the income share of the poorest 40%, also known as a 'Palma ratio' of 2 or more (% of population)"}, {"eq1":"Percentage of the gender gap remaining (population-weighted Gender Inequality Index, [0-100] scale)"}, {"eq2":"No global indicator currently tracks racial and ethnic inequality gaps in social outcomes"}, {"ho1":""}, {"ho2":""} ], socUnits1: [ {"co1":"% of the world urban population lacks access to convenient public transport"}, {"co2":"% of the world population does not access the internet"}, {"en1":"% of the world population lacks access to electricity"}, {"en2":"% of the world population lacks access to clean fuels indoors"}, {"wa1":"% of the world population lacks access to safe drinking water"}, {"wa2":"% of the world population lacks access to safe sanitation"}, {"nu1":"% of the world population is undernourished"}, {"nu2":"% of the world population has moderate to severe food insecurity"}, {"he1":"% of the world population lives in countries with under-five mortality rates of 25 deaths or more per 1,000 births"}, {"he2":"% of the world population lives in countries that lack high coverage of essential health services"}, {"ed1":"% of the world population aged 15+ is illiterate"}, {"ed2":"% of the world population aged 21-23 has incomplete upper secondary education"}, {"iw1":"% of the world population lives below the societal poverty line"}, {"iw2":"% of the world population aged 15-24 is not in education, employment, or training"}, {"pj1":"% of the world population perceives widespread corruption in government and business"}, {"pj2":"% of the world population lives in countries with homicide rates of 5 or more per 100,000 people"}, {"pv1":""}, {"pv2":""}, {"sc1":"% of the world population states that they are without someone to count on in times of trouble"}, {"sc2":"% of the world population lives in countries with a Palma ratio of 2 or more"}, {"eq1":"% of the global gender gap remaining"}, {"eq2":""}, {"ho1":""}, {"ho2":""} ], socDescPanel1: [ {"co1":"Mobility services are important means of generating opportunities in life, connecting people to essential services, employment and community. Access to public transport in urban areas is considered convenient when a stop is accessible either within a 500 m walking distance along the street network from a reference point, such as a home, school, work place, market, etc. to a low-capacity public transport system (e.g. bus, Bus Rapid Transit), or within 1 km to a high-capacity system (e.g. rail, metro, ferry)."}, {"co2":"Access to the Internet has changed the way most people live, work, and communicate in the 21st century. The proportion of people using the Internet is defined as the proportion of individuals who used the Internet from any location in the last three months, and highlights the importance of Internet use as an enabler and helps to measure the digital divide, which, if not properly addressed, will aggravate inequalities in all social domains."}, {"en1":"Gaining access to reliable electricity can be transformative for education, household life, community services, and the local economy. Access to electricity is defined as the presence of an electricity connection in the household that serves as the primary source of lighting from the local electricity provider, solar systems, mini-grids, or stand-alone systems."}, {"en2":"Removing dependencies on dirty fuels – like wood, dung, and kerosene for cooking – avoids indoor air pollution, especially affecting women and girls. Access to clean fuels for cooking, heating, and lighting is defined by evidence-based guidance from the World Health Organisation for indoor air quality and household fuel combustion."}, {"wa1":"Clean water is a daily essential for drinking, bathing, cooking, washing clothes, and avoiding the spread of water-borne diseases like cholera. Safely managed drinking water services are defined as an improved drinking water source which is accessible on premises, available when needed, and free from contamination."}, {"wa2":"Clean water is a daily essential for drinking, bathing, cooking, washing clothes, and avoiding the spread of water-borne diseases like cholera. Safely managed sanitation services are defined as an improved sanitation facility that is not shared with other households and where excreta are safely disposed of in situ, or removed and treated off-site."}, {"nu1":"Undernourishment is the condition by which a person lacks regular access to an amount of food that is sufficient to provide the energy required for conducting a normal, healthy and active life, given their own dietary energy requirements."}, {"nu2":"Moderate levels of food insecurity are associated with various forms of diet-related health conditions, such as micronutrient deficiency and unbalanced diets, while severe levels of food insecurity imply a high probability of more severe forms of undernutrition, including hunger."}, {"he1":"Mortality rates among young children are a central outcome indicator for child health and an established proxy indicator for broader social and economic concerns. The under-five mortality rate is defined as the probability of a child dying before the age of five years, subject to age-specific mortality rates during their year of birth, expressed as deaths per 1,000 live births."}, {"he2":"Coverage of essential health services spans multiple health domains, including health protection, promotion, prevention, treatment and care. Given the multi-faceted nature of essential health services, the World Health Organisation has constructed the Universal Health Coverage (UHC) service coverage index on a 0-100 scale, based on the geometric mean of 14 normalised proxy indicators."}, {"ed1":"The adult literacy rate is an established proxy for tracking a minimum standard of people's ability to participate in society with dignity, defined as the percentage of people aged 15 and above who can both read and write with understanding a simple statement about their everyday life."}, {"ed2":"Well-known benefits of secondary education include preparing young people for tertiary education or the workforce, reducing risks of anti-social activities such as juvenile delinquency and drug abuse, and lowering fertility rates and teenage pregnancies, among others. The upper secondary incompletion rate is the percentage of a cohort of young people aged 3-5 years above the intended completion age of 18 years, who have not completed the upper secondary level."}, {"iw1":"Societal poverty is defined as a combination of extreme poverty, which is an absolute floor for everyone, and a relative component that differs across countries as median household income increases above the absolute floor. Here, a country’s societal poverty headcount is selected as the larger value of either: (a) the number of people living on less than 50% of their country’s median household income, or (b) the number of people living on less than $15-day (2017 PPP)."}, {"iw2":"Meaningful work that is safe and fairly paid is essential for households to meet many of their needs and wants with dignity. The proportion of young people aged 15-24 not in education, employment, or training (youth NEET rate) rate serves as a broader proxy of employment possibilities than the unemployment rate due to the inclusion of young discouraged workers as well as those who are outside the labour force due to disability and household chores, while accounting for those young people who are not in the labour force due to education."}, {"pj1":"Promoting peaceful and inclusive societies and providing access to justice for all through accountable institutions enable people to live free from fear, exploitation, and corruption. Given the complex and elusive nature of corruption, self-reported evaluations can provide a straightforward means to capture perceptions of the extent to which public power is exercised for private gain, as well as perceptions of ‘capture’ of the state by elites and private interests."}, {"pj2":"Promoting peaceful and inclusive societies and providing access to justice for all through accountable institutions enable people to live free from fear, exploitation, and corruption. Intentional homicide is defined as the unlawful death inflicted upon a person with the intent to cause death or serious injury, which is reported across countries as the total count of victims divided by the population, expressed per 100,000 people."}, {"pv1":""}, {"pv2":""}, {"sc1":"Social cohesion can be seen as a function of people’s sense of belonging within a community, and of the strength of relationships between its members. For the former, self-reported social support can be seen as a reasonable proxy, notably given evidence showing clear links between the quality of social relationships and belonging."}, {"sc2":"Social cohesion can be seen as a function of people’s sense of belonging within a community, and of the strength of relationships between its members. For the latter, evidence suggests people living in more equal societies tend to be healthier, safer, better supported and more trusting compared to those in less equal societies."}, {"eq1":"The Gender Inequality Index is a core component of the UNDP’s flagship Human Development Report that annually benchmarks the current state and evolution of gender parity across three key dimensions (reproductive health, empowerment, and the labour market). Scores can be interpreted as the percentage of the gender gap remaining."}, {"eq2":"There is currently a striking lack of global targets and metrics available to track the explicit racial- and ethnic-equality commitments of the international community. This ‘missing data’ wedge is included to help inspire others to fill this gap in global racial- and ethnic-equality monitoring, and that this could then, along with gender equality, serve as a more effective proxy for broader intersecting forms of discrimination."}, {"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"} ], socDims2: [ {"co":""}, {"en":""}, {"wa":""}, {"nu":""}, {"he":""}, {"ed":""}, {"iw":""}, {"pj":""}, {"pv":"Political voice"}, {"sc":""}, {"eq":""}, {"ho":"Housing"} ], socLabels2: [ {"co":""}, {"en":""}, {"wa":""}, {"nu":""}, {"he":""}, {"ed":""}, {"iw":""}, {"pj":""}, {"pv":"Autocratic regimes"}, {"sc":""}, {"eq":""}, {"ho":"Inadequate housing"} ], socDescTip2: [ {"co":""}, {"en":""}, {"wa":""}, {"nu":""}, {"he":""}, {"ed":""}, {"iw":""}, {"pj":""}, {"pv":"Population living in countries governed by an autocratic regime (% of population)"}, {"sc":""}, {"eq":""}, {"ho":"Population living in slums or informal settlements in cities (% of urban population)"} ], socDescPanel2: [ {"co":""}, {"en":""}, {"wa":""}, {"nu":""}, {"he":""}, {"ed":""}, {"iw":""}, {"pj":""}, {"pv":"Democratic institutions, freedom of expression, freedom of association, and a free media have proven essential to enable social participation and personal autonomy, and to contest divisive structures that concentrate power and opportunity into the hands of a wealthy few. This indicator is a part of the V-Dem Institute’s Regimes of the World classification, which uses expert evaluation to distinguish between four types of governance regimes: Closed Autocracy, Electoral Autocracy, Electoral Democracy and Liberal Democracy."}, {"sc":""}, {"eq":""}, {"ho":"People living in sustainable and resilient homes have better health, improved capacity to create thriving communities, and are less vulnerable to the risks of natural hazards and climate change. Population living in slums or informal settlements are defined according to minimum standards across the following four criteria: (i) access to improved water and sanitation, (ii) sufficient living area, (iii) structural quality, durability, and location, and (iv) security of tenure."} ], socUnits2: [ {"co":""}, {"en":""}, {"wa":""}, {"nu":""}, {"he":""}, {"ed":""}, {"iw":""}, {"pj":""}, {"pv":"% of the world population lives in countries governed by an autocratic regime"}, {"sc":""}, {"eq":""}, {"ho":"% of the world 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/panel vars ecoDims1: [ {"cc1": "Climate change"}, {"cc2": "Climate change"}, {"oa1": ""}, {"oa2": ""}, {"cp1": ""}, {"cp2": ""}, {"np1": "Nutrient pollution"}, {"np2": "Nutrient pollution"}, {"ap1": ""}, {"ap2": ""}, {"fd1": "Freshwater disruption"}, {"fd2": "Freshwater disruption"}, {"lc1": ""}, {"lc2": ""}, {"bb1": "Biodiversity breakdown"}, {"bb2": "Biodiversity breakdown"}, {"od1": ""}, {"od2": ""} ], ecoLabels1: [ {"cc1": "CO2 concentration"}, {"cc2": "Radiative forcing"}, {"oa1": ""}, {"oa2": ""}, {"cp1": ""}, {"cp2": ""}, {"np1": "Phosphorus pollution"}, {"np2": "Nitrogen pollution"}, {"ap1": ""}, {"ap2": ""}, {"fd1": "Blue-water flows"}, {"fd2": "Soil moisture"}, {"lc1": ""}, {"lc2": ""}, {"bb1": "Species extinctions"}, {"bb2": "Human appropriation of energy produced by plants"}, {"od1": ""}, {"od2": ""} ], ecoDescTip1: [ {"cc1": "Atmospheric carbon dioxide concentration (parts per million, ppm CO2)"}, {"cc2": "Human-induced change in the Earth's energy balance at the top of the atmosphere (Watts per square meter, W/m2)"}, {"oa1": ""}, {"oa2": ""}, {"cp1": ""}, {"cp2": ""}, {"np1": "Phosphorus applied to land as fertiliser (millions of tonnes, Mt P)"}, {"np2": "Nitrogen applied to land as fertiliser (millions of tonnes, Mt N)"}, {"ap1": ""}, {"ap2": ""}, {"fd1": "Proportion of land area with human-induced disturbance of blue-water flows (%)"}, {"fd2": "Proportion of land area with altered root-zone soil moisture (%)"}, {"lc1": ""}, {"lc2": ""}, {"bb1": "Extinction rate (extinctions per million species-years, E/MSY)"}, {"bb2": "Human appropriation of net primary productivity (billions of tonnes of carbon, Gt C)"}, {"od1": ""}, {"od2": ""} ], ecoDescPanel1: [ {"cc1": "Fossil-fuel combustion, agriculture, and other human activities release carbon dioxide into the air, which amplifies Earth’s natural greenhouse effect, causing an increase in temperatures, sea-level rise, and more intense droughts, floods and storms."}, {"cc2": "Radiative forcing monitors the net change in the Earth's energy balance at the top of the atmosphere, which includes the combined warming and cooling effects of all physical drivers of climate change, such as carbon dioxide, methane, and nitrous oxide concentrations, aerosols, and surface albedo."}, {"oa1": ""}, {"oa2": ""}, {"cp1": ""}, {"cp2": ""}, {"np1": "The widespread application of phosphorus (P) fertilisers supports plant growth in agriculture, but most of these nutrients are washed into inland and coastal waters, causing algal blooms that can be toxic and/or that kill off other aquatic life by depleting the water’s oxygen, which is essential for respiration."}, {"np2": "The widespread application of nitrogen (N) fertilisers supports plant growth in agriculture, but most of these nutrients are washed into inland and coastal waters, causing algal blooms that can be toxic and/or that kill off other aquatic life by depleting the water’s oxygen, which is essential for respiration."}, {"ap1": ""}, {"ap2": ""}, {"fd1": "The freshwater cycle provides water that is essential for life, but human activities are disrupting freshwater systems through excessive extraction, land conversion, and emissions of greenhouse gases and aerosols, which alter evaporation, soil moisture, precipitation, and runoff regimes."}, {"fd2": "The freshwater cycle provides water that is essential for life, but human activities are disrupting freshwater systems through excessive extraction, land conversion, and emissions of greenhouse gases and aerosols, which alter evaporation, soil moisture, precipitation, and runoff regimes."}, {"lc1": ""}, {"lc2": ""}, {"bb1": "Biodiversity – the diversity within species, between species, and of ecosystems – is declining faster than at any time in human history due to excessive human appropriation of biomass and energy from ecosystems, which threatens species with extinction and undermines planetary health."}, {"bb2": "Biodiversity – the diversity within species, between species, and of ecosystems – is declining faster than at any time in human history due to excessive human appropriation of biomass and energy from ecosystems, which threatens species with extinction and undermines planetary health. "}, {"od1": ""}, {"od2": ""} ], ecoBounds1: [ {"cc1": 350}, {"cc2": 1}, {"oa1": ""}, {"oa2": ""}, {"cp1": ""}, {"cp2": ""}, {"np1": 6.2}, {"np2": 62}, {"ap1": ""}, {"ap2": ""}, {"fd1": 10.2}, {"fd2": 11.1}, {"lc1": ""}, {"lc2": ""}, {"bb1": 10}, {"bb2": "5.6"}, {"od1": ""}, {"od2": ""} ], ecoUnits1: [ {"cc1": "ppm CO2"}, {"cc2": "W/m2"}, {"oa1": ""}, {"oa2": ""}, {"cp1": ""}, {"cp2": ""}, {"np1": "Mt P"}, {"np2": "Mt N"}, {"ap1": ""}, {"ap2": ""}, {"fd1": "% deviation from the Holocene baseline"}, {"fd2": "% deviation from the Holocene baseline"}, {"lc1": ""}, {"lc2": ""}, {"bb1": "E/MSY"}, {"bb2": "Gt C"}, {"od1": ""}, {"od2": ""} ], ecoVisible1:[ {"cc1": 10}, {"cc2": 10}, {"oa1": 0}, {"oa2": 0}, {"cp1": 0}, {"cp2": 0}, {"np1": 10}, {"np2": 10}, {"ap1": 0}, {"ap2": 0}, {"fd1": 10}, {"fd2": 10}, {"lc1": 0}, {"lc2": 0}, {"bb1": 10}, {"bb2": 10}, {"od1": 0}, {"od2": 0} ], ecoDims2: [ {"cc": ""}, {"oa": "Ocean acidification"}, {"cp": "Chemical pollution"}, {"np": ""}, {"ap": "Air pollution"}, {"fd": ""}, {"lc": "Land conversion"}, {"bb": ""}, {"od": "Ozone layer depletion"} ], ecoLabels2: [ {"cc": ""}, {"oa": "Aragonite saturation"}, {"cp": "Hazardous chemicals production"}, {"np": ""}, {"ap": "Aerosol Optical Depth"}, {"fd": ""}, {"lc": "Forest area"}, {"bb": ""}, {"od": "Stratospheric ozone concentration"} ], ecoBounds2: [ {"cc": ""}, {"oa": 2.75}, {"cp": 60}, {"np": ""}, {"ap": 0.1}, {"fd": ""}, {"lc": 47.9}, {"bb": ""}, {"od": 276} ], ecoUnits2: [ {"cc": ""}, {"oa": "Omega"}, {"cp": "Mt"}, {"np": ""}, {"ap": "AOD"}, {"fd": ""}, {"lc": "Mkm2"}, {"bb": ""}, {"od": "DU"} ], ecoVisible2: [ {"cc": 0}, {"oa": 10}, {"cp": 10}, {"np": 0}, {"ap": 10}, {"fd": 0}, {"lc": 10}, {"bb": 0}, {"od": 10} ], ecoDescTip2: [ {"cc": ""}, {"oa": "Saturation state of seawater with respect to aragonite at the ocean surface (Omega Index)"}, {"cp": "Production of hazardous chemicals (millions of tonnes, Mt)"}, {"np": ""}, {"ap": "Asymmetry between the Earth's hemispheres of sunlight reaching the surface due to particles in the air (interhemispheric difference in Aerosol Optical Depth, AOD)"}, {"fd": ""}, {"lc": "Area of forested land (millions of square kilometres, Mkm2)"}, {"bb": ""}, {"od": "Concentration of ozone in the stratosphere (Dobson Units, DU)"} ], ecoDescPanel2: [ {"cc": ""}, {"oa": "The ocean absorbs carbon dioxide emitted by human activity, but this is increasing the acidity of seawater and reducing saturation levels of calcium carbonate minerals, which endangers marine ecosystems, notably by inhibiting organisms’ shell and skeleton growth."}, {"cp": "The production and environmental release of hazardous chemicals and synthetic compounds, such as organic pollutants and endocrine disruptors, endangers ecosystems on land and in the oceans. They can persist in the environment for a very long time, accumulating in the tissues of living beings, such as plants, fish, and mammals, with toxic effects including illness and death, reduced fertility, and genetic damage."}, {"np": ""}, {"ap": "Micro-particles, or aerosols, emitted into the air – such as dust, smoke, and other atmospheric pollutants – affect air quality and the health of living beings, and influence the climate through effects on cloud formation, on sunlight reaching Earth’s surface, and on interhemispheric differences in aerosol concentrations."}, {"fd": ""}, {"lc": "Forests help maintain suitable conditions for life on Earth by housing biodiversity, storing carbon, and cycling water and nutrients, yet global forest area is shrinking by millions of hectares per year, with nearly three quarters of total deforestation due to agricultural expansion."}, {"bb": ""}, {"od": "Ozone in the stratosphere protects the Earth from the sun’s biologically harmful ultraviolet radiation, but the emission of ozone-depleting substances, such as chlorofluorocarbons (CFCs), led to a notable decline in stratospheric ozone concentration in the 20th century. This declining trend was largely halted by 1995 due to global regulations on ozone-depleting substances, and the Earth's ozone layer is now slowly recovering."} ] });33:T964,controls = ({ timer: null, timerInterval: 500, year: 2022, 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 list = d3.select("#country_dropdown_menu") .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 === 'WLD'; }) ; $('#country_dropdown_menu') .on('change', function () { let key = $(this).val(); Self.chart.setPlace(key); }); }, enablePanels: function() { //$('#panels').removeClass('d-none'); $('#controls2').removeClass('d-none').addClass('d-flex'); $('#yearRange').removeAttr('disabled'); $('#playRange').removeAttr('disabled'); } });34:[{"id":"c033ea9c5669e3b6955b5ad906d1a7dbc7df5d9c3ebf87715e7deacc36f67efabaae806139a317c7cb64e500dcdf669a72c6543355664fe30a365a107fc1f31e","href":"https://static.observableusercontent.com/files/c033ea9c5669e3b6955b5ad906d1a7dbc7df5d9c3ebf87715e7deacc36f67efabaae806139a317c7cb64e500dcdf669a72c6543355664fe30a365a107fc1f31e","name":"001_20250815_globalDoughnut-observable_missingToNum@1.json","type":"application/json","lastModified":1755257908578.538,"size":76189}] 2f:{"id":"e1a5cd3221fb8782","slug":null,"title":"Global Doughnut","thumbnail":"54f15af118a1b864bf64235758038fb26e847663eca7f0bc806f503d061cd72a","access_level":"public","create_time":"$D2025-05-06T09:56:46.905Z","update_time":"$D2025-10-01T17:46:01.978Z","view_time":null,"first_public_time":"$D2025-10-01T17:45:29.773Z","has_unpublished_edits":null,"fork":true,"stars":2,"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":1121,"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":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Global Doughnut","cells":[{"id":0,"value":"# Global Doughnut","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_chart = {\n $(document).ready(function() {\n chart.setControls(controls);\n \n controls.init(chart);\n controls.fillPlacesDropdown(wldData);\n\n if (document.location.hash.length === 4) {\n console.log(document.location.hash.substr(1));\n chart.setPlace(document.location.hash.substr(1));\n } else {\n chart.setPlace('WLD');\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_20250815_globalDoughnut-observable_missingToNum@1.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"