2d:null 2e:["$","title",null,{"children":"Country Comparisons - Time Series | mikaelpuurtinen | Observable"}] 33:T3b5f,html_struct = { return html `

`; }34:T80ee,chart = ({ mdb: null, 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: [ 'TE', 'El', 'Ra', 'Sa', 'Kö', 'En', 'Ko', 'So', 'De', 'Ta', 'Ty' ], socialLabels: [ 'Tyytyväisyys elämään', 'Elinajanodote', 'Ravitsemus', 'Sanitaatio', 'Köyhyys', 'Energian saatavuus', 'Koulutus', 'Sosiaalinen tuki', 'Demokraattisuus', 'Tasa-arvo', 'Työllisyys' ], 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 päästöt', 'Fosfori', 'Typpi', 'Makea vesi', 'Maaekosysteemit', 'Ekologinen jalanjälki', 'Luonnonvarojen käyttö' ], 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: { 'biophysical': 'Biophysical Boundary', 'social': 'Social Threshold' }, setMongoDB(mdb) { this.mdb = mdb; }, setControls(controls) { this.controls = controls; }, setCountry: function (iso3c) { let query = "doughnut_timeline(" + "query: {" + "data: {" + "iso3c: \\\"" + iso3c + "\\\"" + "}" + "}" + ") { " + "data { " + "country iso3c " + "biophysical { " + "min max " + "range { CO2footCum EFfootPerCap H2OfootPerCap MFfootPerCap NfootPerCap PfootPerCap ehanppPerCap } " + "series { CO2footCum EFfootPerCap H2OfootPerCap MFfootPerCap PfootPerCap ehanppPerCap NfootPerCap } " + "values { CO2footCum EFfootPerCap MFfootPerCap PfootPerCap ehanppPerCap NfootPerCap } " + "thresholdBoundaries { CO2footCum EFfootPerCap MFfootPerCap PfootPerCap ehanppPerCap NfootPerCap } " + "ratios { CO2footCum EFfootPerCap MFfootPerCap PfootPerCap ehanppPerCap NfootPerCap } " + "} " + "social { " + "min max " + "range { DQval EDval EMval ENval EQval INval LEval LSval NUval SAval SSval } " + "series { DQval EDval EMval ENval EQval INval LEval LSval NUval SAval SSval } " + "values { DQval EDval EMval ENval EQval INval LEval LSval NUval SAval SSval } " + "thresholdBoundaries { DQval EDval EMval ENval EQval INval LEval LSval NUval SAval SSval } " + "ratios { DQval EDval EMval ENval EQval INval LEval LSval NUval SAval SSval } " + "} " + "} " + "}" ; $('#yearRange').attr('disabled', 'disabled'); $('#panels').addClass('d-none'); $('#controls2').addClass('d-none').removeClass('d-flex'); this.mdb.query(query).then(d => { this.country = iso3c; this.data = d.doughnut_timeline.data; d3.select('#country_dropdown .dropdown-toggle').text(this.data.country); this.socialEnabled = this.calculateEnabledIndicators(this.data.social.series, this.socialIndexes); this.bioEnabled = this.calculateEnabledIndicators(this.data.biophysical.series, this.bioIndexes); this.controls.enablePanels(); this.plot(); if (iso3c === 'WLD') { this.controls.fillDownloadDataButton(null); } else { this.controls.fillDownloadDataButton(this.createEncodedData()); } if (document.location.host === 'goodlife.leeds.ac.uk' && document.location.hash != iso3c) { window.location = '#' + iso3c; } }); }, calculateEnabledIndicators: function(series, indexes) { let result = {}; for (const i in indexes) { const key = indexes[i]; for (const j in series[key]) { result[key] |= series[key][j] !== 1.00001; } } return result; }, setYear: function (year) { this.sequence = year - 1992; this.plot(); }, getDataAndScales: function () { this.yearData = { biophysical: [], social: [] }; for (let i in this.bioIndexes) { let index = this.bioIndexes[i]; this.yearData.biophysical.push(this.data.biophysical.series[index][this.sequence]); } for (let i in this.socialIndexes) { let index = this.socialIndexes[i]; this.yearData.social.push(this.data.social.series[index][this.sequence]); } this.socialScale = d3.scaleLinear(); this.socialScale.range([0, this.socialRadius]); this.socialScale.domain([0, 1]); this.ceilingScale = d3.scaleLinear(); this.ceilingScale.range([this.socialRadius + 16, this.bioRadius]); this.ceilingScale.domain([0, 1]); }, plotDoughnut: function () { d3.select("#doughnut svg").remove(); let svg = this.doughnutSVG = d3.select("#doughnut").append("svg"); let parent = svg.node().parentElement.parentElement; let bounds = parent.getBoundingClientRect(); const csrad = this.bioRadius * 1.75; const cbrad = this.ceilingScale(3.2); let topHeight = d3.max([ csrad, this.ceilingScale(this.data.biophysical.range.MFfootPerCap[1]) + 36, this.ceilingScale(this.data.biophysical.range.CO2footCum[1]) + 36 ]); let bottomHeight = d3.max([ cbrad, this.ceilingScale(this.data.biophysical.range.H2OfootPerCap[1]) + 36, (this.ceilingScale(this.data.biophysical.range.ehanppPerCap[1]) + 36) ]); let leftWidth = d3.max([ csrad, this.ceilingScale(this.data.biophysical.range.EFfootPerCap[1]) + 36, this.ceilingScale(this.data.biophysical.range.MFfootPerCap[1]) + 36 ]); let rightWidth = d3.max([ csrad, this.ceilingScale(this.data.biophysical.range.NfootPerCap[1]) + 36 ]); const width = bounds.width; const boxWidth = Math.max(leftWidth, rightWidth, width / 2); const height = (topHeight + bottomHeight) * bounds.width / (boxWidth * 2); svg .attr("width", bounds.width) .attr("height", height) .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", [-boxWidth, -topHeight, boxWidth * 2, topHeight + bottomHeight]) .append("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) ; this.drawSocialDoughnut(svg); this.drawBiophysicalDoughnut(svg); this.drawBoundaries(svg); }, drawSocialDoughnut: function (svg) { let Self = this; let pie = d3.pie() .startAngle(-Math.PI * 6 / this.yearData.social.length) .sort(null) .value(Math.PI * 2 / this.yearData.social.length) ; let arcs = pie(this.yearData.social); let arc_blue = d3.arc() .innerRadius( function () { return 0; } ) .outerRadius( function () { return Self.socialRadius; } ) ; let arc_red = d3.arc() .innerRadius( function (d) { return Self.socialScale(d.data > 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 "#d73027"; } }) .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.biophysical.length) ; let arcs = pie(this.yearData.biophysical); 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' : "#d73027"; }) .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', '#31a354') //#3182bd in NatSus .style("stroke-width", 1.5) .style("stroke", "#252525") ; svg .selectAll("#socarctext") .data(["Sosiaalinen perusta"]) .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", "#31a354") .style("stroke-width", 1.5) .style("stroke", "#252525") ; svg .selectAll("#bioarctext") .data(["Ekologinen katto"]) .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_biophysical_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 === 'biophysical' ? '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("#biophysical_chart svg").remove(); this.biophysicalSVG = d3.select("#biophysical_chart").append("svg"); this.plotLine( this.biophysicalSVG, "biophysical", 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.biophysical.values[ind][i] / 1000) : this.data.biophysical.values[ind][i] ); let threshold = ( ind === 'CO2footCum' ? Math.round(this.data.biophysical.thresholdBoundaries[ind][i] / 1000) : this.data.biophysical.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.biophysical.ratios[ind][i] === -1 ? '' : this.data.biophysical.ratios[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.ratios[ind][i] === -1 ? '' : this.data.social.ratios[ind][i]) + ',' + '"' + this.socialUnits[ind] + '"' + "\n" ; csvContent += line; } } return csvContent; } });35:T192b,controls = ({ mdb: null, 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_biophysical_group > g") .style("visibility", function() { return Self.checked || this.id === 'path_biophysical_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_biophysical_" + 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; } }) ; }, setMongoDB: function (mdb) { this.mdb = mdb; }, fillCountriesDropdown: function (countries) { let Self = this; let data = countries.slice().sort(function (a, b) { return a.data.iso3c === 'WLD' ? -1 : b.data.iso3c === 'WLD' ? 1 : d3.ascending(a, b); }); let list = d3.select("#country_dropdown .dropdown-menu") .selectAll(".dropdown-item") .data(data) .enter() .append("li") .attr("class", "dropdown-item") .append("div") .attr("class", "custom-control custom-radio") ; list.append("input") .attr("type", "radio") .attr("class", "custom-control-input") .attr("id", d => "country_" + d.data.iso3c) .attr("name", "country") .attr("value", d => d.data.iso3c) ; list.insert("label") .attr("class", "custom-control-label") .attr("for", d => "country_" + d.data.iso3c) .text(d => d.data.country) ; $('#country_dropdown .dropdown-toggle').dropdown(); $('#country_dropdown input[type="radio"]') .on('input', function () { let key = $(this).val(); let name = $(this).next().text(); $('#country_dropdown .dropdown-toggle').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") ; } });36:T67d,mdb = ({ app_id: "observable-gl4-lslmo", user_id: "60fb27bb7bb4c174faf8fd0f", api_key: "ErHorpSZbZcKj4MLrAUCdU8RYrPj9zW5LhSS8LJe6gvoPMvvSVd88E6BrkvNUd2E", app_target: null, gql_url: null, access_token: null, refresh_token: null, getAppTarget: async function() { const target_url = 'https://realm.mongodb.com/api/client/v2.0/app/' + this.app_id + '/location?key=' + this.user_id; const target_result = await d3.json(target_url, { headers: { "Content-Type": "application/json" }, async: false }); return target_result.hostname; }, getToken: async function() { const token_url = this.app_target + '/api/client/v2.0/app/' + this.app_id + '/auth/providers/api-key/login'; const token = await d3.json(token_url, { method: 'POST', headers: { 'Content-Type': "application/json", }, async: false, body: '{"key": "' + this.api_key + '"}' }); this.access_token = token.access_token; this.refresh_token = token.refresh_token; return this.access_token; }, query: async function(query) { const data = await d3.json(this.gql_url, { 'method': 'POST', body: '{"query": "{ ' + query + ' }", "variables": null }', headers: { "Authorization": "Bearer " + this.access_token, "Content-Type": "application/json" }, async: false }); return data.data; }, connect: async function() { this.app_target = await this.getAppTarget(); this.gql_url = this.app_target + '/api/client/v2.0/app/' + this.app_id + '/graphql'; await this.getToken(); return this; } }).connect()37:[] 31:{"id":"da5bb517d9bdf69a","slug":"fin_donitsi","title":"Country Comparisons - Time Series","thumbnail":"cfb63f33d87daab233c3baa615befc6b69446cf2dd33b9723df950e09b874897","access_level":"public","create_time":"$D2022-02-18T09:16:03.921Z","update_time":"$D2022-03-04T18:26:38.385Z","view_time":null,"first_public_time":"$D2022-03-04T17:18:05.445Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"a0d8e49d40604de2","login":"mikaelpuurtinen","name":"","avatar_url":null,"tier":"starter_2024"},"version":266,"publish_version":266,"role":null,"authored":false,"authors":[{"type":"individual","id":"adb53adaec1f9458","login":"mikaelpuurtinen","name":"","avatar_url":null,"tier":null}],"members":[{"type":"individual","id":"adb53adaec1f9458","login":"mikaelpuurtinen","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Country Comparisons - Time Series","cells":[{"id":0,"value":"# Country Comparisons - Time Series","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"play_chart = {\n $(document).ready(function() {\n controls.setMongoDB(mdb);\n chart.setMongoDB(mdb);\n chart.setControls(controls);\n \n controls.init(chart);\n controls.fillCountriesDropdown(countries);\n\n if (document.location.hash.length === 4) {\n console.log(document.location.hash.substr(1));\n chart.setCountry(document.location.hash.substr(1));\n } else {\n chart.setCountry('GBR');\n }\n d3.select('#country_dropdown .dropdown-toggle').text('United Kingdom');\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"countries = (await mdb.query(\"doughnut_timelines(limit: 0) { data { country iso3c } }\"))['doughnut_timelines'];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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('bootstrap@4.0');\n return jquery;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// bootstrap = require('bootstrap@4.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"

Biophysical Indicators

Social Indicators