2b:null 2c:["$","title",null,{"children":"National Doughnuts - Trends | Andrew Fanning | Observable"}] 31:T38d6,html_struct = { return html `

`; }32:T7b41,chart = ({ controls: null, country: null, data: null, yearData: null, maxSequence: 23, sequence: 23, doughnutSVG: null, biophysicalSVG: null, socialSVG: null, socialIndexes: [ "LSval", "LEval", "NUval", "SAval", "INval", "ENval", "EDval", "SSval", "DQval", "EQval", "EMval" ], socialLabelsShort: [ 'LS', 'LE', 'NU', 'SA', 'IN', 'EN', 'ED', 'SS', 'DQ', 'EQ', 'EM' ], socialLabels: [ 'Life Satisfaction', 'Life Expectancy', 'Nutrition', 'Sanitation', 'Income Poverty', 'Access to Energy', 'Education', 'Social Support', 'Democratic Quality', 'Equality', 'Employment' ], socialUnits: { 'LSval': '[0-10] Cantril scale', 'LEval': 'years of life', 'NUval': 'kilocalories per capita per day', 'SAval': '% with access to improved sanitation', 'INval': '% who earn above $5.50 per day (2011 PPP)', 'ENval': '% with access to electricity', 'EDval': '% gross enrolment in secondary school', 'SSval': '% with friends of family they can depend upon', 'DQval': '[0-10 scale]', 'EQval': '[0-100] scale (Gini index of 0.3)', 'EMval': '% of labour force employed' }, socialEnabled: { "LSval": false, "LEval": false, "NUval": false, "SAval": false, "INval": false, "ENval": false, "EDval": false, "SSval": false, "DQval": false, "EQval": false, "EMval": false }, socialRadius: 63, socialScale: null, bioIndexes: [ "CO2footCum", "PfootPerCap", "NfootPerCap", "H2OfootPerCap", "ehanppPerCap", "EFfootPerCap", "MFfootPerCap" ], bioLabels: [ 'CO2 Emissions', 'Phosphorus', 'Nitrogen', 'Blue Water', 'Land-Use Change', 'Ecological Footprint', 'Material Footprint' ], bioUnits: { 'CO2footCum': 'cumulative megatonnes CO2', 'PfootPerCap': 'kilograms P per capita', 'NfootPerCap': 'kilograms N per capita', 'ehanppPerCap': 'tonnes C per capita', 'EFfootPerCap': 'global hectares per capita', 'MFfootPerCap': 'tonnes per capita' }, bioEnabled: { "CO2footCum": false, "PfootPerCap": false, "NfootPerCap": false, "H2OfootPerCap": false, "ehanppPerCap": false, "EFfootPerCap": false, "MFfootPerCap": false }, bioRadius: 132, ceilingScale: null, bioColors: { CO2footCum: "red", PfootPerCap: "blue", NfootPerCap: "cyan", H2OfootPerCap: "orange", ehanppPerCap: "deepskyblue", EFfootPerCap: "pink", MFfootPerCap: "purple" }, socialColors: { LSval: "red", LEval: "blue", NUval: "steelblue", SAval: "orange", INval: "deepskyblue", ENval: "burlywood", EDval: "purple", SSval: "blueviolet", DQval: "violet", EQval: "brown", EMval: "cyan" }, lineUnityLabels: { 'ecological': 'Ecological Boundary', 'social': 'Social Threshold' }, setControls(controls) { this.controls = controls; }, setCountry: function(iso3c) { function getByIso3c(arr, value) { for (var i=0, iLen=arr.length; i 1 ? 1 : d.data); } ) .outerRadius( function () { return Self.socialRadius; } ) ; svg .append("g") .attr("stroke", "white") .selectAll("path") .data(arcs) .join("path") .attr("fill", function (d) { if (d.data === 1.00001) { return "#E5E5E5"; } else { return "#9ecae1"; } }) .attr("d", arc_blue) ; svg .append("g") .attr("stroke", "white") .selectAll("path") .data(arcs) .join("path") .attr("fill", function(d) { if (d.data === 1.00001) { return "#E5E5E5"; } else { return "#cc0243"; } }) .attr("d", arc_red) ; const radius = Self.socialRadius * 0.78; let arcLabel = d3.arc().innerRadius(radius).outerRadius(radius); svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("display", "none") .attr("fill", "#333") .attr("stroke", "#000") .attr("d", arcLabel) .attr("id", (d, i) => `arc_soc_${i}`) ; svg .append("g") .selectAll("text") .data(arcs) .join("text") .attr("dx", function (d, i) { return i < 6 ? -14 : 14; }) .attr("dy", function (d, i) { return i < 6 ? 0 : 10; }) .attr("font-size", "14px") .attr("fill", function (d, i) { let r = Self.socialScale(d.data); return r < 48 ? "#fff" : "#000"; }) .append("textPath") .style("text-anchor", "middle") .attr("startOffset", "50%") .attr("xlink:href", (d, i) => `#arc_soc_${i}`) .text((d, i) => Self.socialLabelsShort[i]) ; svg .append("g") .selectAll("text") .data(arcs) .join("text") .attr("dx", function(d, i) { return i < 6 ? -14 : 14; }) .attr("dy", function(d, i) { return i < 6 ? 20 : -10; }) .attr("font-size", "14px") .attr("fill", "#000") .append("textPath") .style("text-anchor", "middle") .attr("startOffset", "50%") .attr("xlink:href", (d, i) => `#arc_soc_${i}`) .text( d => (d.data === 1.00001 ? ' ?' : '')) ; }, drawBiophysicalDoughnut: function (svg) { let Self = this; let pie = d3.pie() .startAngle(-Math.PI * 2 / (this.bioLabels.length * 2)) .endAngle((-Math.PI * 2 / (this.bioLabels.length * 2)) + 2 * Math.PI) .sort(null) .value(Math.PI * 2 / this.yearData.ecological.length) ; let arcs = pie(this.yearData.ecological); let arc_green = d3.arc() .innerRadius( function (d) { return Self.socialRadius + 16; // Self.socialScale(d.data); } ) .outerRadius( function (d) { return Self.ceilingScale(d.data > 1 ? 1 : d.data); } ) ; let arc_red = d3.arc() .innerRadius( function (d) { return Self.bioRadius + 16; } ) .outerRadius( function (d) { if (d.data === 1.00001) { return Self.ceilingScale(3.2); } else { return Self.ceilingScale(d.data > 1 ? d.data : 1) + 16; } } ) ; svg .append("g") .attr("stroke", "white") .attr("stroke-width", "1.2") .selectAll("path") .data(arcs) .join("path") .attr("fill", function (d) { if (d.data === 1.00001) { return "#E5E5E5"; } else { return "#a1d99b"; } }) .attr("d", arc_green) ; svg .append("g") .attr("stroke", "white") .attr("stroke-width", "1.2") .selectAll("path") .data(arcs) .join("path") .attr("fill", function(d) { return d.data === 1.00001 ? '#E5E5E5' : "#cc0243"; }) .attr("d", arc_red) ; const radius = Self.bioRadius * 1.5; let arcLabel = d3.arc().innerRadius(radius).outerRadius(radius); svg .append("g") .selectAll("path") .data(arcs) .join("path") .attr("display", "none") .attr("fill", "#333") .attr("stroke", "#000") .attr("d", arcLabel) .attr("id", (d, i) => `arc_bio_${i}`) ; svg .append("g") .selectAll("text") .data(arcs) .join("text") .attr("dx", function(d, i) { return i < 2 || i > 4 ? -90 : 90; }) .attr("dy", function(d, i) { return i < 2 || i > 4 ? 100 : -90; }) .attr("font-size", "14px") .attr("fill", "#000") .append("textPath") .style("text-anchor", "middle") .attr("startOffset", "50%") .attr("xlink:href", (d, i) => `#arc_bio_${i}`) .text( d => (d.data === 1.00001 ? ' ?' : '')) ; svg .append("g") .selectAll("text") .data(arcs) .join("text") .attr("dy", function (d, i) { return i < 2 || i > 4 ? 7 : 0; }) .attr("dx", function (d, i) { return i < 2 || i > 4 ? -90 : 90; }) .attr("font-size", "14px") .attr("fill", function (d, i) { let r = Self.ceilingScale(d.data); return r > 187 ? "#fff" : "#000"; }) .append("textPath") .style("text-anchor", "middle") .attr("startOffset", "50%") .attr("xlink:href", (d, i) => `#arc_bio_${i}`) .text((d, i) => Self.bioLabels[i]) ; }, 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.socialLabelsShort.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", 83) .attr("dy", 12) .attr("font-size", '14px') .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.bioRadius).outerRadius(Self.bioRadius + 16); svg .selectAll("#bioboundaryarc") .data(function (d) { return pie_bio([Self.bioLabels.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", 200) .attr("dy", 12) .attr("font-size", "14px") .attr("fill", "#fff") .append("textPath") .attr("xlink:href", "#bioboundaryarc") .text(function (d) { return d; }) ; }, plotLine: function (svg, domain, palette, indexes, labels, units, enabled) { const Self = this; const adj = 90; let parent = svg.node().parentElement.parentElement; let bounds = parent.getBoundingClientRect(); const width = bounds.width; const height = bounds.width; const xScale = d3.scaleLinear([0, width]); xScale.domain([0, this.maxSequence]); const yScale = d3.scaleLinear([height, 0]); yScale.domain([Math.min(0, this.data[domain].min), this.data[domain].max]); const xStep = xScale(1); const pt = svg.node().createSVGPoint(); svg .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", "-" + (adj / 2) + " -" + (adj / 2) + " " + (width + (adj * 3)) + " " + (height + (adj * 2))) ; d3.select(svg.node().parentElement) .on("mousemove", function (d) { const bounds2 = svg.node().parentElement.getBoundingClientRect(); let rx = d.pageX - window.scrollX - bounds2.left; let ry = d.pageY - window.scrollY - bounds2.top; pt.x = d.clientX; pt.y = d.clientY; let showTooltip = false; let x = 0; let ptx = pt.matrixTransform(svg.node().getScreenCTM().inverse()).x; if (ptx >= 0) { x = Math.round(ptx / xStep); if (x > Self.maxSequence) { x = Self.maxSequence; } if (ptx <= xStep * Self.maxSequence) { showTooltip = true; } } d3 .select(`#${domain}_vertical_line`) .style("display", "none") ; d3 .select(`#${domain}_vertical_line`) .selectAll('circle') .remove() ; if (showTooltip) { d3 .select(`#${domain}_vertical_line`) .attr("transform", `translate(${xScale(x)},0)`) .style("display", "block") ; d3 .select(`#${domain}_vertical_line`) .selectAll('circle') .data(Self.computeVisibleIndexes(domain, indexes, x, enabled)) .enter() .append("circle") .attr("cx", 0) .attr("cy", function (d) { return yScale(Self.data[domain].series[d][x]); }) .attr("r", 5) .attr("stroke", d => palette[d]) .attr("fill", d => palette[d]) // .style("opacity", 0.8) ; d3 .select(`#${domain}_vertical_line`) .append('circle') .attr("cx", 0) .attr("cy", yScale(1)) .attr("r", 5) .attr("stroke", "green") .attr("fill", "green") .style("opacity", 0.8) ; d3 .select(`#${domain}_chart div`) .remove() ; let table = ``; table += ''; for (let i in indexes) { const id = indexes[i]; if (id !== 'H2OfootPerCap') { let v = id !== 'CO2footCum' ? Self.data[domain].values[id][x] : Math.round(Self.data[domain].values[id][x] / 1000); v = (v !== -1 ? v : ''); let t = id !== 'CO2footCum' ? Self.data[domain].thresholdBoundaries[id][x] : Math.round(Self.data[domain].thresholdBoundaries[id][x] / 1000); t = (t !== -1 ? t : ''); table += ``; } } table += ''; table += '

${x + 1992}	Value	Threshold	Unit
${labels[i]}	${v.toLocaleString()}	${t.toLocaleString()}	${units[id]}

'; d3 .select(`#${domain}_chart`) .append('div') .style("position", "absolute") //.style("left", `${rx}px`) .style("top", `${ry + 10}px`) .style("z-Index", "10000") .html(table) ; d3 .select(`#${domain}_chart div table`) .selectAll('td, th') .each(function () { d3 .select(this) .style('padding-left', '4px') .style('padding-right', '4px') .style('padding-top', '0') .style('padding-bottom', '0') .style('margin', '0') ; }) ; const bounds3 = d3.select(`#${domain}_chart div table`).node().getBoundingClientRect(); if (rx + bounds3.width > bounds2.width) { d3 .select(`#${domain}_chart div`) .style('left', `${bounds2.width - bounds3.width}px`) .style('width', `${bounds3.width}px`) ; d3 .select(`#${domain}_chart div table`) .style('width', `${bounds3.width}px`) ; } else { d3 .select(`#${domain}_chart div`) .style("left", `${rx}px`) ; } } }) .on("mouseout", function (d) { d3.select(`#${domain}_vertical_line`).style("display", " none"); d3.select(`#${domain}_chart div`).remove(); }) ; const xAxis = d3.axisBottom().tickFormat(x => `${(x + 1992)}`).tickValues([3, 8, 13, 18, 23]).scale(xScale); svg .append("g") .style("font-family", "sans-serif") .style("font-size", "1em") .attr("class", "axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("x", (width / 2) + "px") .attr("y", 60) .style("fill", "#333") .style("shape-rendering", "crispEdges") .style("font-family", "sans-serif") .style("font-size", "1.5em") .style("line-height", "100%") .style("text-anchor", "middle") .text("Year") ; const yAxis = d3.axisLeft().scale(yScale); svg .append("g") .style("font-family", "sans-serif") .style("font-size", "1em") .attr("class", "axis") .call(yAxis) ; const labelPositions = this.calculateLineLabelPositions(this.data[domain].series, yScale, null, enabled); let lines = svg .append("g") .attr("id", "path_" + domain + "_group") ; for (let label in labelPositions) { const i = labelPositions[label].id; const id = "path_" + domain + "_" + i; lines .selectAll("#" + id) .data([i]) .enter() .append("g") .attr("id", id) .attr("data-stroke", i === 'threshold' ? 'green' : palette[i]) .on('mouseover', function (d, e) { const g = this; d3 .select(this.parentElement) .selectAll("g:not(#path_social_threshold):not(#path_ecological_threshold)") .each(function () { const g2 = this; d3.select(this) .selectAll("*") .each(function () { const color = g !== g2 ? "#e0e0e0" : d3.select(g2).attr("data-stroke"); const opa = g !== g2 ? 0.4 : 0.8; d3 .select(this) .style("stroke", color) .style("opacity", opa); }) }) }) .on('mouseout', function (d, e) { const g = this; d3 .select(this.parentElement) .selectAll("g") .each(function () { const g2 = this; d3.select(this) .selectAll("*") .each(function () { const color = d3.select(g2).attr("data-stroke"); d3 .select(this) .style("stroke", color) .style("opacity", 0.8); ; }) }) }) .append("path") .attr("stroke-linejoin", "bevel") .attr("stroke-linecap", "round") .style("fill", "none") .style("stroke", i === 'threshold' ? 'green' : palette[i]) .style("stroke-width", 4) .style("opacity", 0.8) .style("cursor", "pointer") .attr("d", function (d) { let path = d3.path(); if (i !== 'threshold') { let moved = false; if (Self.data[domain].series[d][0] !== 1.00001) { path.moveTo( xScale(0), yScale(Self.data[domain].series[d][0]) ); moved = true; } for (let i = 1; i <= Self.maxSequence; i++) { if (Self.data[domain].series[d][i] !== 1.00001) { if (moved) { path.lineTo( xScale(i), yScale(Self.data[domain].series[d][i]) ); } else { path.moveTo( xScale(i), yScale(Self.data[domain].series[d][i]) ); moved = true; } } } } else { path.moveTo(xScale(0), yScale(1)); path.lineTo(xScale(Self.maxSequence), yScale(1)); } return path; }) .each(function () { const posData = labelPositions[label]; const posX = xScale(Self.maxSequence); d3 .select(this.parentElement) .append("path") .attr("stroke", d => i === 'threshold' ? 'green' : palette[i]) .attr("stroke-width", 1) .attr("d", `M${posX + 4},${posData.origin},${posX + 25},${posData.y - 5}`) .style("cursor", "pointer") ; d3 .select(this.parentElement) .append("text") .attr("x", posX + 28) .attr("y", posData.y) .attr("stroke", i === 'threshold' ? 'green' : palette[i]) .style("vertical-align", "middle") .style("cursor", "pointer") .text(i === 'threshold' ? Self.lineUnityLabels[domain] : labels[indexes.indexOf(i)]) ; }) ; } svg .append("g") .attr("id", domain + "_vertical_line") .attr("transform", `translate(${xScale(12)}, 0)`) .style("display", "none") .append("path") .attr("stroke-width", 2) .attr("stroke-dasharray", "4 4") .attr("stroke", "#aaa") .attr("d", `M0,0,0,${height}`) ; }, calculateLineLabelPositions: function (series, yScale, currentPosition, enabled) { const keys = Object.keys(series); if (!currentPosition) { let inserted = false; currentPosition = []; for (let i = 0; i < keys.length; i++) { const id = keys[i]; if (enabled[id]) { let y = series[id][this.maxSequence]; if (y < 1.0 && !inserted) { currentPosition.push({ 'id': 'threshold', 'origin': yScale(1), 'y': yScale(1) + 5 }); inserted = true; } currentPosition.push({ 'id': id, 'origin': yScale(series[id][this.maxSequence]), 'y': yScale(y) + 5 }); } } if (!inserted) { currentPosition.push({ 'id': 'threshold', 'origin': yScale(1), 'y': yScale(1) + 5 }); } currentPosition.sort((a, b) => a.y - b.y); } const max = currentPosition.length; let lastY = currentPosition[0].y; let lastP = 0; const gap = 24; let modified = false; for (let i = 1; i < max; i++) { let distance = (currentPosition[i].y + gap - lastY) / (i + 1 - lastP); if (distance >= gap || i + 1 === max) { if (lastP + 1 < i || (i + 1 === max && distance < gap)) { const items = (i + 1 === max && distance < gap) ? max - lastP : i - lastP; const topP = lastP + items - 1; const originSpace = currentPosition[topP].origin - currentPosition[lastP].origin; const requiredSpace = items * gap; let adjust = (requiredSpace - originSpace) / 2; let startY = (lastY - adjust) + (gap / 2); let step = gap; if (startY < 0) { startY = 0; } else if (lastP > 0 && startY < currentPosition[lastP - 1].y) { startY = currentPosition[lastP - 1].y + 1; } if (topP + 1 < max && (startY + requiredSpace) > currentPosition[topP + 1].y) { step = (currentPosition[i].y - startY - (gap / 2)) / items; } for (let j = lastP; j < lastP + items; j++) { currentPosition[j].y = startY; startY += step; } modified = true; } lastY = currentPosition[i].y; lastP = i; } } return modified ? this.calculateLineLabelPositions(series, yScale, currentPosition) : currentPosition; }, computeVisibleIndexes: function(domain, indexes, year, enabled) { const Self = this; let visibles = []; const shortDomain = (domain === 'ecological' ? 'bio' : 'social'); d3 .selectAll(`#${shortDomain}_dropdown_list input[type=checkbox]`) .each(function(d, e) { const key = this.value; if (indexes.indexOf(key) >= 0 && !this.disabled && this.checked && Self.data[domain].series[key][year] !== 1.00001 && enabled[key]) { visibles.push(key); } }) ; return visibles; }, plotBiophysical: function () { d3.select("#ecological_chart svg").remove(); this.biophysicalSVG = d3.select("#ecological_chart").append("svg"); this.plotLine( this.biophysicalSVG, "ecological", this.bioColors, this.bioIndexes, this.bioLabels, this.bioUnits, this.bioEnabled ); }, plotSocial: function () { d3.select("#social_chart svg").remove(); this.socialSVG = d3.select("#social_chart").append("svg"); this.plotLine( this.socialSVG, "social", this.socialColors, this.socialIndexes, this.socialLabels, this.socialUnits, this.socialEnabled ); }, plot: function () { this.getDataAndScales(); this.plotDoughnut(); this.plotBiophysical(); this.plotSocial(); }, createEncodedData: function () { let csvContent = "data:text/csv;charset=utf-8,country,iso3c,date,indicator,indicatorName,value,thresholdBoundary,ratio,unit\n"; for (let i = 0; i <= this.maxSequence; i++) { for (let j = 0; j < this.bioIndexes.length; j++) { let ind = this.bioIndexes[j]; if (ind !== 'H2OfootPerCap') { let value = ( ind === 'CO2footCum' ? Math.round(this.data.ecological.values[ind][i] / 1000) : this.data.ecological.values[ind][i] ); let threshold = ( ind === 'CO2footCum' ? Math.round(this.data.ecological.thresholdBoundaries[ind][i] / 1000) : this.data.ecological.thresholdBoundaries[ind][i] ); let line = '"' + this.data.country + '","' + this.data.iso3c + '",' + (i + 1992) + ',"' + ind + '","' + this.bioLabels[j] + '",' + (value === -1 ? '' : value) + ',' + (threshold === -1 ? '' : threshold) + ',' + (this.data.ecological.series[ind][i] === -1 ? '' : this.data.ecological.series[ind][i]) + ',' + '"' + this.bioUnits[ind] + '"' + "\n" ; csvContent += line; } } for (let j = 0; j < this.socialIndexes.length; j++) { let ind = this.socialIndexes[j]; let line = '"' + this.data.country + '","' + this.data.iso3c + '",' + (i + 1992) + ',"' + ind + '","' + this.socialLabels[j] + '",' + (this.data.social.values[ind][i] === -1 ? '' : this.data.social.values[ind][i]) + ',' + (this.data.social.thresholdBoundaries[ind][i] === -1 ? '' : this.data.social.thresholdBoundaries[ind][i]) + ',' + (this.data.social.series[ind][i] === -1 ? '' : this.data.social.series[ind][i]) + ',' + '"' + this.socialUnits[ind] + '"' + "\n" ; csvContent += line; } } return csvContent; } });33:T17b9,controls = ({ timer: null, timerInterval: 200, year: 2015, maxYear: 2015, chart: null, init: function (chart) { let Self = this; this.chart = chart; if (document.location.host === 'goodlife4allwithinpbs.static.observableusercontent.com') { d3.select('#main_block').attr("style", "min-height: " + width * 2 + "px; height: " + 2400 + "px;"); } d3.select("#yearRange").on("input", function () { Self.year = (this.value * 1) + 1992; 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(1992); d3.select("#yearRange").node().value = 0; Self.year = 1992; Self.chart.setYear(1992); Self.timer = d3.timer(function (duration) { let pos = 1992 + 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 - 1992; } }, Self.timerInterval * 1.8); }); d3 .selectAll("#bio_dropdown_list input[type=checkbox]") .on("input", function () { let Self = this; if (this.value === 'All') { d3 .selectAll("#path_ecological_group > g") .style("visibility", function() { return Self.checked || this.id === 'path_ecological_threshold' ? "visible" : "hidden"; }) ; d3 .selectAll("#bio_dropdown_list input[type=checkbox]") .each(function () { this.checked = Self.checked && (this.value === 'All' || chart.bioEnabled[this.value]); }) ; } else { let checkAll = d3.select("#bio_check_all").node(); d3 .select("#path_ecological_" + this.value) .style("visibility", this.checked ? "visible" : "hidden") ; let count1 = d3.selectAll("#bio_dropdown_list input[type=checkbox]").size() - 1; let count2 = d3.selectAll("#bio_dropdown_list input[type=checkbox]:checked").size() + (checkAll.indeterminate || !checkAll.checked ? 0 : -1) ; checkAll.checked = count2 > 0 && count2 >= count1; checkAll.indeterminate = count2 > 0 && count2 < count1; } }) ; d3 .selectAll("#social_dropdown_list input[type=checkbox]") .on("input", function () { let Self = this; if (this.value === 'All') { d3 .selectAll("#path_social_group > g") .style("visibility", function() { return Self.checked || this.id === 'path_social_threshold' ? "visible" : "hidden"; }) ; d3 .selectAll("#social_dropdown_list input[type=checkbox]") .each(function () { this.checked = Self.checked && (this.value === 'All' || chart.socialEnabled[this.value]); }) ; } else { let checkAll = d3.select("#social_check_all").node(); d3 .select("#path_social_" + this.value) .style("visibility", this.checked ? "visible" : "hidden") ; let count1 = d3.selectAll("#social_dropdown_list input[type=checkbox]").size() - 1; let count2 = d3.selectAll("#social_dropdown_list input[type=checkbox]:checked").size() + (checkAll.indeterminate || !checkAll.checked ? 0 : -1) ; checkAll.checked = count2 > 0 && count2 >= count1; checkAll.indeterminate = count2 > 0 && count2 < count1; } }) ; }, fillCountriesDropdown: function (countries) { let Self = this; let data = countries.map(elem => ( { country: elem.country, iso3c: elem.iso3c } )); let list = d3.select("#country_dropdown_menu") .selectAll("option") .data(data) .enter().append("option") .attr("class", "dropdown-item") .attr("id", d => "country_" + d.iso3c) .attr("value", d => d.iso3c) .text(d => d.country) .property("selected", function (d) { if (window.location.hash) { return d.iso3c === window.location.hash.substring(1); } else { return d.iso3c === 'GBR'; } }) ; $('#country_dropdown_menu') .on('change', function () { let key = $(this).val(); //let name = $(this).next().text(); //$('#country_dropdown_menu').text(name); Self.chart.setCountry(key); }); }, enablePanels: function() { $('#panels').removeClass('d-none'); this.resetLineChartSelectors(); $('#controls2').removeClass('d-none').addClass('d-flex'); $('#yearRange').removeAttr('disabled'); $('#playRange').removeAttr('disabled'); }, resetLineChartSelectors: function () { d3 .selectAll("#bio_dropdown_list input[type=checkbox]") .each(function () { this.checked = chart.bioEnabled[this.value] || this.value === 'All'; this.disabled = this.value !== 'All' && !chart.bioEnabled[this.value]; }) ; d3 .selectAll("#social_dropdown_list input[type=checkbox]") .each(function () { this.checked = chart.socialEnabled[this.value] || this.value === 'All'; this.disabled = this.value !== 'All' && !chart.socialEnabled[this.value]; }) ; }, fillDownloadDataButton: function () { let data = this.chart.createEncodedData(); d3.select("#download_data") .attr("href", encodeURI(data)) .attr("download", chart.data.country + " data-1992-2015.csv") ; } });34:[{"id":"baa8775a2b7cccf58f82063d8baef13d3e26b7dff362d862520c147eaaefb0c8029832a3ba1dc8edf8358215564800ff2e85c0caad0bdbb8c31d4c6e6a4ee009","href":"https://static.observableusercontent.com/files/baa8775a2b7cccf58f82063d8baef13d3e26b7dff362d862520c147eaaefb0c8029832a3ba1dc8edf8358215564800ff2e85c0caad0bdbb8c31d4c6e6a4ee009","name":"001_20251027_countryDoughnuts-missingToNum.json","type":"application/json","lastModified":1761571337959.558,"size":3741344}] 2f:{"id":"fe464a0ab041b1ee","slug":null,"title":"National Doughnuts - Trends","thumbnail":"67ec38c899a71520e41d6f312013230f1e25bad76be7119e3469b2912d70eed0","access_level":"public","create_time":"$D2025-10-25T13:21:20.768Z","update_time":"$D2026-09-17T08:32:49.339Z","view_time":null,"first_public_time":"$D2025-10-27T15:42:56.249Z","has_unpublished_edits":null,"fork":true,"stars":0,"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":389,"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":"team","id":"1374acedd7936e73","login":"859086386529af09","name":"Andrew Fanning","avatar_url":"https://avatars-next.observableusercontent.com/2e8918df2b34090068128ad4ef0a883e065d85ab3ef59083acf37b3f6c2368c6","tier":"starter_2024","role":"editor"},{"type":"individual","id":"859086386529af09","login":"859086386529af09","name":"Andrew Fanning","avatar_url":"https://avatars-next.observableusercontent.com/2e8918df2b34090068128ad4ef0a883e065d85ab3ef59083acf37b3f6c2368c6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"National Doughnuts - Trends","cells":[{"id":0,"value":"# National Doughnuts - Trends","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"play_chart = {\n $(document).ready(function() {\n chart.setControls(controls);\n \n controls.init(chart);\n controls.fillCountriesDropdown(countries);\n\n if (document.location.hash.length === 4) {\n chart.setCountry(document.location.hash.substr(1));\n } else {\n chart.setCountry('GBR');\n }\n //console.log(d3.select('#country_dropdown_menu').property(\"value\"));\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"countries = FileAttachment(\"001_20251027_countryDoughnuts-missingToNum.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$$ = require('jquery').then(jquery => {\n window.jquery = jquery;\n // return require('popper@1.16.1/index.js').catch(() => jquery);\n //require('popper@1.16.1/index.js');\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":8,"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"

Biophysical Indicators

Social Indicators