2f:null 30:["$","title",null,{"children":"Final Project Part 2 - Change in global health inequities over time | Vy | Observable"}] 35:T19f7,dotplot = { // based on https://observablehq.com/@john-guerra/reusable-charts return function dotPlot() { let svg, margin = { top: 20, right: 40, bottom: 30, left: 40 }, width = 50, height = 50; const x = d3.scaleBand(), y = d3.scaleLinear(); function chart(selection) { selection.each(function(data) { x .domain(data.map(d => d.wealth)) .rangeRound([0, width - margin.left - margin.right]); y .domain([-2.5, 4.0]) // .domain(d3.extent(data, d => d.change)) .rangeRound([height - margin.top - margin.bottom, 0]) .nice(); var colors = d3.scaleOrdinal() .domain(quintiles) .range(sequential_colors) //['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6'] var colors_highlighted = d3.scaleOrdinal() .domain(quintiles) .range(['#d16f67', '#4484b9', '#8ead86', '#ae7ebd', '#c99b5c']) svg = d3 .select(this) .selectAll("svg") .data([data]); // if the svg exists reuse it, otherwise create it let svgEnter = svg.enter().append("svg"); let gEnter = svgEnter.append("g"); gEnter .append("g") .attr("class", "axis axis--x") .attr( "transform", "translate(0," + (height - margin.top - margin.bottom) + ")" ); gEnter .append("g") .attr("class", "axis axis--y") .append("text") .attr('x', -150) .attr('y', -30) .attr("transform", "rotate(-90)") .attr('fill', 'black') .style("font-size", "12px") .attr('text-anchor', 'end') .text("Annual absolute change"); let g = svgEnter .merge(svg) .attr("width", width) .attr("height", height) .select("g") .attr( "transform", "translate(" + margin.left + "," + margin.top + ")" ); gEnter.select(".axis--x") .call(d3.axisBottom(x) .tickSize(0) .tickFormat(x => { return x == "Quintile 1" ? "Quintile 1 (poorest)" : x == "Quintile 5" ? "Quintile 5 (richest)" : x; }) ) .style("font-size", "12px") .style("font-weight", "bold") .call(gEnter => gEnter.select('.domain').remove()); gEnter.select(".axis--y") .call(d3.axisLeft(y) .ticks(5) ) .style("font-size", "12px"); g.append("line") .attr("x1", 0) .attr("x2", width - margin.left - margin.right) .attr("y1", d => y(0)) .attr("y2", d => y(0)) .attr("stroke", '#aaaa') .attr('stroke-dasharray', '3, 3') // .attr("stroke-width", 1) let dots = gEnter .merge(g) .selectAll(".dot") .data(data); dots .enter() .append("circle") .merge(dots) .attr("class", "dot") .attr('cx', d => x(d.wealth) + margin.left + margin.right) .attr('cy', d => y(d.change)) .attr('stroke', d => colors(d.wealth)) //"#fed9a6" .attr('stroke-width', 2) .attr('fill', "none") .attr('r', 10) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave); let highlightedDots = gEnter .merge(g) .selectAll(".highlightedDots") .data(data.filter(d => countriesSelect.includes(d.country))); highlightedDots .enter() .append("circle") .merge(dots) .attr("class", "dot") .attr('cx', d => x(d.wealth) + margin.left + margin.right) .attr('cy', d => y(d.change)) .attr('stroke', '#871A1A') // #bd6840 d => colors_highlighted(d.wealth) // 9aa071 .attr('stroke-width', 3) .attr('fill', "none") .attr('r', 10) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave_highlight); highlightedDots .enter() .append("text") .attr('x', d => x(d.wealth) + margin.left + margin.right + 15) .attr('y', d => y(d.change) + 4) .text(d => d.country) .style("font-size", "12px") dots.exit().remove(); // create tooltip // https://observablehq.com/@nyuvis/interaction const tooltip = gEnter.append('g') .attr('visibility', 'hidden'); const tooltipHeight = 24; // add a text element to the tooltip to contain the label const tooltipText = tooltip .append("foreignObject") .attr("width", 400) .attr("height", 420) .append("xhtml:body") .style("font", "12px 'Helvetica Neue'") // handle hovering over a circle function mouseEnter(event, d) { d3.select(this) .attr('stroke', '#871A1A') // #bd6840 d => colors_highlighted(d.wealth)d => colors_highlighted(d.wealth) .raise() // update the label's text tooltipText.html(`

${d.country} (${d.wealth})
Annual absolute change: ${d.change.toFixed(2)}
${d.oldest_year} CCI: ${d.oldest_cci}%
${d.latest_year} CCI: ${d.latest_cci}%

`); // make the tooltip visible const xPos = 0; const yPos = -10; tooltip.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } // handle leaving a circle function mouseLeave(event, d) { // reset the size of the circle d3.select(this) .attr('stroke', d => colors(d.wealth)) // .attr('fill', "none") .lower() // make the tooltip invisible tooltip .attr('visibility', 'hidden'); } function mouseLeave_highlight(event, d) { d3.select(this) tooltip .attr('visibility', 'hidden'); } }); } chart.width = function(_) { if (!arguments.length) return width; width = _; return chart; }; chart.height = function(_) { if (!arguments.length) return height; height = _; return chart; }; return chart; }; }36:T44f,cci_change = html`

`37:T464,cci_change_usability = html`

`38:T2125,slopechart2 = { // based on https://observablehq.com/@didoesdigital/28-july-2020-d3-slope-chart-with-highlight-color-and-gray-con const margin = { left: 80, top: 100, bottom: 30, right: 150 }; //right: 400 const padding = { left: -12, top: 12, bottom: 12, right: -12 }; const height = 620; let n = average_cci_comparison_decades.columns.length var colors = d3.scaleOrdinal() .domain(average_cci_comparison_decades.map(d => d.wealth)) .range(sequential_colors) //['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6'] let x = d3.scalePoint() .domain(d3.range(n)) .range([margin.left, width - margin.left - margin.right]) let y = d3.scaleLinear() .domain(d3.extent(average_cci_comparison_decades.flatMap(d => d.ccis))) .range([height - margin.bottom, margin.top]) .nice() let line = d3.line() .x((d, i) => x(i)) .y(y) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "#ffffff"); const chartTitle = svg.append("g") .attr("class", "chart-title") .attr("transform", `translate(0, 0)`) .append("foreignObject") .attr("width", 700) .attr("height", 420) .append("xhtml:body") .style("font", "18px 'Helvetica Neue'") chartTitle.html(`

The poorest wealth group achieved the fastest rate of improvement in health indicators, growing 2x faster than other wealth groups
Average Composite Coverage Index % in each decade

`) // const chartTitle = svg.append("g") // .attr("class", "chart-title") // .attr("transform", `translate(10, 5)`) // .append("text") // .attr("id", "title") // .style("font", "17px 'Helvetica Neue'") // .style("font-weight", "bold") // // .attr("text-anchor", "middle") // .attr("x", 0) // .attr("y", 0) // .attr("dy", "1em") // .text("The poorest wealth group achieved the fastest growth rate compared to others, and took 3 decades to catch up with the 3rd richest"); // svg.append("g") // .attr("class", "insight") // .attr("transform", `translate(10, 5)`) // .append("text") // .attr("id", "title") // .style("font", "15px 'Helvetica Neue'") // // .attr("text-anchor", "middle") // .attr("x", 0) // .attr("y", 0) // .attr("dy", "2.5em") // .style("font-weight", 400) // .text(`Average Composite Coverage Index % in each decade`); svg.append("g") .attr("class", "y-axis-title") .attr("transform", "rotate(-90)") .append("text") .style("font", "15px 'Helvetica Neue'") .attr('x', -240) .attr('y', margin.left - 55) .attr('fill', 'black') .attr('text-anchor', 'end') .text("Average CCI %"); svg.append("g") .attr("id", "axis") .attr("text-anchor", "middle") .selectAll("g") .data(average_cci_comparison_decades.columns) .join("g") .attr("transform", (d, i) => `translate(${x(i)},${height - margin.bottom + 20})`) .call(g => g.append("text") .attr("transform", (d, i) => `translate(${i === 0 ? -padding.left : i === 1 ? 3 : padding.right},0)`) .text(d => d) .style("font", "15px 'Helvetica Neue'") .style("font-weight", "bold") .attr("text-anchor", "middle") ); svg.append("g") .attr("class", "axis axis--y") .call( d3.axisLeft(y) .ticks(5) .tickSizeInner(0) ) .style("font", "15px 'Helvetica Neue'") .attr( "transform", "translate(" + (margin.left - 10) + ", 0)" ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll('.tick line') .clone() .attr('stroke-dasharray', '3, 3') .attr('stroke', "#d3d3d3") .attr('x1', 0) .attr('x2', width - (margin.left * 2) - margin.right + 10) ) svg.append("line") // .attr("transform", `translate(${margin.left}, 5)`) .attr("x1", d => x(0)) .attr("x2", d => x(0)) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("stroke", '#d3d3d3') .attr("stroke-width", 1) .clone(true) .attr("x1", d => x(1)) .attr("x2", d => x(1)) .clone(true) .attr("x1", d => x(2)) .attr("x2", d => x(2)) svg.append("g") .attr("id", "lines") .attr("fill", "none") .attr("stroke", "#767676") .selectAll("path") .data(average_cci_comparison_decades) .join("path") // .attr("stroke", "#9aa071") .attr("stroke", d => colors(d)) // .attr("stroke-width", 2) // .attr("opacity", 1) .attr("stroke-width", 10) .attr("opacity", 0.5) .attr("d", d => line(d.ccis)) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave) // .clone(true) // .attr("stroke-width", 10) // .attr("opacity", 0.5) // .on('mouseenter', mouseEnter) // .on('mouseleave', mouseLeave) const gCircles = svg.append("g") .attr("id", "data-points") .selectAll("g") .data(average_cci_comparison_decades) .join("g") gCircles.attr("class", "dot_group") .append("circle") .attr("fill", d => colors(d)) .attr("cx", d => x(0)) .attr("cy", d => y(d.ccis[0])) .attr("r", 7) .attr("opacity", 1) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave) .clone(true) .attr("cx", d => x(1)) .attr("cy", d => y(d.ccis[1])) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave) .clone(true) .attr("cx", d => x(2)) .attr("cy", d => y(d.ccis[2])) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave) gCircles.append("circle") .attr("class", "Legend") .attr("r", 7) .attr("cx", width - margin.right - 30) .attr("cy", d => y(d.ccis[0])) .attr("fill", d => colors(d)) .attr("opacity", 1) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave) gCircles.append("text") .attr("class", "Legend") .text(d => {return d.wealth == "Quintile 1" ? "Quintile 1 (poorest)" : d.wealth == "Quintile 5" ? "Quintile 5 (richest)" : d.wealth}) .style("font", "15px 'Helvetica Neue'") .attr("x", width - margin.right - 15) .attr("y", d => y(d.ccis[0]) + 5) // create tooltip const tooltip = svg.append('g') .attr('visibility', 'hidden'); const tooltipHeight = 24; // add a text element to the tooltip to contain the label const tooltipText = tooltip .append("foreignObject") .attr("width", 400) .attr("height", 420) .append("xhtml:body") .style("font", "15px 'Helvetica Neue'") // handle hovering over function mouseEnter(event, d) { d3.select(this) .attr("opacity", d3.select(this).attr("opacity") == 1 ? 1 : 0.7) .raise() tooltipText.html(`

${d.wealth}
${average_cci_comparison_decades.columns[0]}: ${d.ccis[0].toFixed(2)}% avg. of ${d.counts[0]} countries
${average_cci_comparison_decades.columns[1]}: ${d.ccis[1].toFixed(2)}% avg. of ${d.counts[1]} countries
${average_cci_comparison_decades.columns[2]}: ${d.ccis[2].toFixed(2)}% avg. of ${d.counts[2]} countries

`); const xPos = margin.left; const yPos = margin.top; tooltip.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } // handle leaving function mouseLeave(event, d) { d3.select(this) .attr("opacity", d3.select(this).attr("opacity") == 1 ? 1 : 0.5) .lower() tooltip .attr('visibility', 'hidden'); } // gCircles.append("text") // // Left axis // .attr("x", d => x(0) - padding.left) // .attr("y", d => y(d.ccis[0])) // .attr("dy", "0.35em") // .text(d => d.ccis[0].toFixed(2)) // // .attr("opacity", d => highlightCondition(d) ? 1 : 0) // // .attr("aria-hidden", d => highlightCondition(d) ? "false" : "true") // .attr("text-anchor", "end") // .style("font", "15px 'Helvetica Neue'") // // Right axis // .clone(true) // .attr("text-anchor", "start") // .attr("x", d => x(1) + padding.right) // .attr("y", d => y(d.ccis[1])) // .text(d => d.ccis[1].toFixed(2)); return svg.node(); }39:T2054,slopechart2_usability = { // based on https://observablehq.com/@didoesdigital/28-july-2020-d3-slope-chart-with-highlight-color-and-gray-con const margin = { left: 80, top: 100, bottom: 30, right: 400 }; const padding = { left: -12, top: 12, bottom: 12, right: -12 }; const height = 620; let n = average_cci_comparison_decades.columns.length var colors = d3.scaleOrdinal() .domain(average_cci_comparison_decades.map(d => d.wealth)) .range(sequential_colors) //['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6'] let x = d3.scalePoint() .domain(d3.range(n)) .range([margin.left, width - margin.left - margin.right]) let y = d3.scaleLinear() .domain(d3.extent(average_cci_comparison_decades.flatMap(d => d.ccis))) .range([height - margin.bottom, margin.top]) .nice() let line = d3.line() .x((d, i) => x(i)) .y(y) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "#ffffff"); const chartTitle = svg.append("g") .attr("class", "chart-title") .attr("transform", `translate(0, 0)`) .append("foreignObject") .attr("width", 700) .attr("height", 420) .append("xhtml:body") .style("font", "18px 'Helvetica Neue'") chartTitle.html(`

Average Composite Coverage Index % in each decade

`); const xPos = margin.left; const yPos = margin.top; tooltip.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } // handle leaving function mouseLeave(event, d) { d3.select(this) .attr("opacity", d3.select(this).attr("opacity") == 1 ? 1 : 0.5) .lower() tooltip .attr('visibility', 'hidden'); } // gCircles.append("text") // // Left axis // .attr("x", d => x(0) - padding.left) // .attr("y", d => y(d.ccis[0])) // .attr("dy", "0.35em") // .text(d => d.ccis[0].toFixed(2)) // // .attr("opacity", d => highlightCondition(d) ? 1 : 0) // // .attr("aria-hidden", d => highlightCondition(d) ? "false" : "true") // .attr("text-anchor", "end") // .style("font", "15px 'Helvetica Neue'") // // Right axis // .clone(true) // .attr("text-anchor", "start") // .attr("x", d => x(1) + padding.right) // .attr("y", d => y(d.ccis[1])) // .text(d => d.ccis[1].toFixed(2)); return svg.node(); }3a:T1cef,slopechart = { // based on https://observablehq.com/@didoesdigital/28-july-2020-d3-slope-chart-with-highlight-color-and-gray-con const margin = { left: 80, top: 100, bottom: 30, right: 150 }; // right: 450 const padding = { left: -12, top: 12, bottom: 12, right: -12 }; const height = 550; let n = average_cci_comparison.columns.length var colors = d3.scaleOrdinal() // .domain(quintiles) .domain(average_cci_comparison.map(d => d.wealth)) .range(sequential_colors) let x = d3.scalePoint() .domain(d3.range(n)) .range([margin.left, width - margin.left - margin.right]) // .padding(0.1) let y = d3.scaleLinear() .domain(d3.extent(average_cci_comparison.flatMap(d => d.ccis))) .range([height - margin.bottom, margin.top]) .nice() let line = d3.line() .x((d, i) => x(i)) .y(y) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "#ffffff"); const chartTitle = svg.append("g") .attr("class", "chart-title") .append("foreignObject") .attr("width", 700) .attr("height", 420) .append("xhtml:body") .style("font", "18px 'Helvetica Neue'") chartTitle.html(`

In most cases, there was an improvement in health indicators across all wealth groups between 2 given years
Average Composite Coverage Index % in ${yearsSelect[0]} vs. ${yearsSelect[1]}

`) svg.append("g") .attr("class", "y-axis-title") .attr("transform", "rotate(-90)") .append("text") .style("font", "15px 'Helvetica Neue'") .attr('x', -240) .attr('y', margin.left - 55) .attr('fill', 'black') .attr('text-anchor', 'end') .text("Average CCI %"); svg.append("g") .attr("id", "axis") .attr("text-anchor", "middle") .selectAll("g") .data(average_cci_comparison.columns) .join("g") .attr("transform", (d, i) => `translate(${x(i)},${height - margin.bottom + 20})`) .call(g => g.append("text") .attr("transform", (d, i) => `translate(${i === 0 ? -padding.left : padding.right},0)`) .text(d => d) .style("font", "15px 'Helvetica Neue'") .style("font-weight", "bold") .attr("text-anchor", "middle") ); svg.append("g") .attr("class", "axis axis--y") .call( d3.axisLeft(y) .ticks(5) .tickSizeInner(0) ) .style("font", "15px 'Helvetica Neue'") .attr( "transform", "translate(" + (margin.left - 10) + ", 0)" ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll('.tick line') .clone() .attr('stroke-dasharray', '3, 3') .attr('stroke', "#d3d3d3") .attr('x1', 0) .attr('x2', width - (margin.left * 2) - margin.right + 10) ) svg.append("line") // .attr("transform", `translate(${margin.left}, 5)`) .attr("x1", d => x(0)) .attr("x2", d => x(0)) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("stroke", '#d3d3d3') .attr("stroke-width", 1) .clone(true) .attr("x1", d => x(1)) .attr("x2", d => x(1)) svg.append("g") .attr("id", "lines") .attr("fill", "none") .attr("stroke", "#767676") .selectAll("path") .data(average_cci_comparison) .join("path") // .attr("stroke", "#9aa071") .attr("stroke", d => colors(d)) // .attr("stroke-width", 2) // .attr("opacity", 1) .attr("stroke-width", 10) .attr("opacity", 0.5) .attr("d", d => line(d.ccis)) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave) // .clone(true) // .attr("stroke-width", 10) // .attr("opacity", 0.5) // .on('mouseenter', mouseEnter) // .on('mouseleave', mouseLeave) const gCircles = svg.append("g") .attr("id", "data-points") .selectAll("g") .data(average_cci_comparison) .join("g") gCircles.attr("class", "dot_group") // .attr("opacity", d => highlightCondition(d) ? 1 : 0.5) // .style("mix-blend-mode", d => highlightCondition(d) ? "initial" : "multiply") .append("circle") // .attr("class", d => highlightCondition(d) ? "dot dot--highlight dot--before" : "dot dot--before") // .attr("fill", "#9aa071") .attr("fill", d => colors(d)) .attr("cx", d => x(0)) .attr("cy", d => y(d.ccis[0])) .attr("r", 7) .attr("opacity", 1) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave) .clone(true) // .attr("class", d => highlightCondition(d) ? "dot dot--highlight dot--after" : "dot dot--after") .attr("cx", d => x(1)) .attr("cy", d => y(d.ccis[1])) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave) gCircles.append("circle") .attr("class", "Legend") .attr("r", 7) .attr("cx", width - margin.right - 30) .attr("cy", d => y(d.ccis[0])) .attr("fill", d => colors(d)) .attr("opacity", 1) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave) gCircles.append("text") .attr("class", "Legend") .text(d => {return d.wealth == "Quintile 1" ? "Quintile 1 (poorest)" : d.wealth == "Quintile 5" ? "Quintile 5 (richest)" : d.wealth}) .style("font", "15px 'Helvetica Neue'") .attr("x", width - margin.right - 15) .attr("y", d => y(d.ccis[0]) + 5) // create tooltip const tooltip = svg.append('g') .attr('visibility', 'hidden'); const tooltipHeight = 24; // add a text element to the tooltip to contain the label const tooltipText = tooltip .append("foreignObject") .attr("width", 400) .attr("height", 420) .append("xhtml:body") .style("font", "15px 'Helvetica Neue'") // handle hovering over function mouseEnter(event, d) { d3.select(this) .attr("opacity", d3.select(this).attr("opacity") == 1 ? 1 : 0.7) .raise() tooltipText.html(`

${d.wealth}
${average_cci_comparison.columns[0]}: ${d.ccis[0].toFixed(2)}% avg. of ${d.counts[0]} countries
${average_cci_comparison.columns[1]}: ${d.ccis[1].toFixed(2)}% avg. of ${d.counts[1]} countries

`); const xPos = margin.left; const yPos = margin.top; tooltip.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } // handle leaving function mouseLeave(event, d) { d3.select(this) .attr("opacity", d3.select(this).attr("opacity") == 1 ? 1 : 0.5) .lower() tooltip .attr('visibility', 'hidden'); } // gCircles.append("text") // // Left axis // .attr("x", d => x(0) - padding.left) // .attr("y", d => y(d.ccis[0])) // .attr("dy", "0.35em") // .text(d => d.ccis[0].toFixed(2)) // // .attr("opacity", d => highlightCondition(d) ? 1 : 0) // // .attr("aria-hidden", d => highlightCondition(d) ? "false" : "true") // .attr("text-anchor", "end") // .style("font", "15px 'Helvetica Neue'") // // Right axis // .clone(true) // .attr("text-anchor", "start") // .attr("x", d => x(1) + padding.right) // .attr("y", d => y(d.ccis[1])) // .text(d => d.ccis[1].toFixed(2)); return svg.node(); }3b:T1c35,slopechart_usability = { // based on https://observablehq.com/@didoesdigital/28-july-2020-d3-slope-chart-with-highlight-color-and-gray-con const margin = { left: 80, top: 100, bottom: 30, right: 450 }; const padding = { left: -12, top: 12, bottom: 12, right: -12 }; const height = 550; let n = average_cci_comparison.columns.length var colors = d3.scaleOrdinal() // .domain(quintiles) .domain(average_cci_comparison.map(d => d.wealth)) .range(sequential_colors) let x = d3.scalePoint() .domain(d3.range(n)) .range([margin.left, width - margin.left - margin.right]) // .padding(0.1) let y = d3.scaleLinear() .domain(d3.extent(average_cci_comparison.flatMap(d => d.ccis))) .range([height - margin.bottom, margin.top]) .nice() let line = d3.line() .x((d, i) => x(i)) .y(y) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "#ffffff"); const chartTitle = svg.append("g") .attr("class", "chart-title") .append("foreignObject") .attr("width", 700) .attr("height", 420) .append("xhtml:body") .style("font", "18px 'Helvetica Neue'") chartTitle.html(`

Average Composite Coverage Index % in ${yearsSelect[0]} vs. ${yearsSelect[1]}

`); const xPos = margin.left; const yPos = margin.top; tooltip.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } // handle leaving function mouseLeave(event, d) { d3.select(this) .attr("opacity", d3.select(this).attr("opacity") == 1 ? 1 : 0.5) .lower() tooltip .attr('visibility', 'hidden'); } // gCircles.append("text") // // Left axis // .attr("x", d => x(0) - padding.left) // .attr("y", d => y(d.ccis[0])) // .attr("dy", "0.35em") // .text(d => d.ccis[0].toFixed(2)) // // .attr("opacity", d => highlightCondition(d) ? 1 : 0) // // .attr("aria-hidden", d => highlightCondition(d) ? "false" : "true") // .attr("text-anchor", "end") // .style("font", "15px 'Helvetica Neue'") // // Right axis // .clone(true) // .attr("text-anchor", "start") // .attr("x", d => x(1) + padding.right) // .attr("y", d => y(d.ccis[1])) // .text(d => d.ccis[1].toFixed(2)); return svg.node(); }3c:T431,ranged_dotplot = { const base = vl .markText({ align: "right" }) .encode( vl.y().fieldN("wealth").title("Wealth Quintile").sort("-x"), vl.x().fieldQ("ccis").title("Average CCI %").scale({ zero: false }), ) .title({ text: `Average Composite Coverage Index % in ${yearsSelect[0]} vs. ${yearsSelect[1]}`, anchor: "start" }) const lines = base .markLine({ color: "#fbb4ae", size: 11, opacity: 0.5 }) .encode( vl.detail().fieldN("wealth"), // vl.color().fieldN("wealth").scale({ range: ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6'] }) ) const dots = base .markPoint({ tooltip: true, filled: true, size: 205, opacity: 1} ) .encode( vl.color().fieldO("year").title("Year").scale({range: ["#fbb4ae", "#b15e57"]}), vl.tooltip([{title: "Wealth", field: "wealth"}, {title: "Year", field: "year"}, {title: "Average CCI %", field: "ccis", format: ".2f"} ]) ) return vl .layer(base, lines, dots) .data(average_cci_comparison_vega) .width(700) .height(250) .render(); }3d:T4a1,data_availability = html`

`3e:T50c,average_cci_comparison_vega = data_cleaned.filter(d => d.year == yearsSelect[0] || d.year == yearsSelect[1]) .reduce((all, curr) => { let isElemExist = all.findIndex(item => { return item.wealth === curr.wealth && item.year === curr.year; }) if (isElemExist === -1) { let obj = {}; obj.count_old = curr.year === yearsSelect[0] ? 1 : 0; obj.count_recent = curr.year === yearsSelect[1] ? 1 : 0; obj.wealth = curr.wealth; obj.year = curr.year; obj.average_cci_old = curr.year === yearsSelect[0] ? curr.cci : 0; obj.average_cci_recent = curr.year === yearsSelect[1] ? curr.cci : 0; all.push(obj) } else { all[isElemExist].count_old += curr.year === yearsSelect[0] ? 1 : 0; all[isElemExist].count_recent += curr.year === yearsSelect[1] ? 1 : 0; all[isElemExist].average_cci_old += curr.year === yearsSelect[0] ? curr.cci : 0; all[isElemExist].average_cci_recent += curr.year === yearsSelect[1] ? curr.cci : 0; } return all; }, []) .reduce((all, curr) => { let obj = {}; obj.wealth = curr.wealth; obj.year = curr.year; obj.ccis = curr.average_cci_old != 0 ? curr.average_cci_old / curr.count_old : curr.average_cci_recent / curr.count_recent; all.push(obj) return all; }, []).sort((a, b) => (a.wealth > b.wealth) ? 1 : -1)3f:T5e4,average_cci_comparison_decades_base = data_cleaned .reduce((all, curr) => { let decade_90s = curr.year >= 1990 && curr.year <= 1999 let decade_2000s = curr.year >= 2000 && curr.year <= 2009 let decade_2010s = curr.year >= 2010 && curr.year <= 2019 let isElemExist = all.findIndex(item => { return item.wealth === curr.wealth; }) if (isElemExist === -1) { let obj = {}; obj.count_90s = decade_90s ? 1 : 0; obj.count_2000s = decade_2000s ? 1 : 0; obj.count_2010s = decade_2010s ? 1 : 0; obj.wealth = curr.wealth; obj.average_cci_90s = decade_90s ? curr.cci : 0; obj.average_cci_2000s = decade_2000s ? curr.cci : 0; obj.average_cci_2010s = decade_2010s ? curr.cci : 0; all.push(obj) } else { all[isElemExist].count_90s += decade_90s ? 1 : 0; all[isElemExist].count_2000s += decade_2000s ? 1 : 0; all[isElemExist].count_2010s += decade_2010s ? 1 : 0; all[isElemExist].average_cci_90s += decade_90s ? curr.cci : 0; all[isElemExist].average_cci_2000s += decade_2000s ? curr.cci : 0; all[isElemExist].average_cci_2010s += decade_2010s ? curr.cci : 0; } return all; }, []) .reduce((all, curr) => { let obj = {}; obj.wealth = curr.wealth; obj.ccis = [curr.average_cci_90s / curr.count_90s, curr.average_cci_2000s / curr.count_2000s, curr.average_cci_2010s / curr.count_2010s]; obj.counts = [curr.count_90s, curr.count_2000s, curr.count_2010s]; all.push(obj) return all; }, []).sort((a, b) => (a.wealth > b.wealth) ? 1 : -1)40:T4d8,average_cci_comparison_base = data_cleaned.filter(d => d.year == yearsSelect[0] || d.year == yearsSelect[1]) .reduce((all, curr) => { let isElemExist = all.findIndex(item => { return item.wealth === curr.wealth; }) if (isElemExist === -1) { let obj = {}; obj.count_old = curr.year === yearsSelect[0] ? 1 : 0; obj.count_recent = curr.year === yearsSelect[1] ? 1 : 0; obj.wealth = curr.wealth; obj.average_cci_old = curr.year === yearsSelect[0] ? curr.cci : 0; obj.average_cci_recent = curr.year === yearsSelect[1] ? curr.cci : 0; all.push(obj) } else { all[isElemExist].count_old += curr.year === yearsSelect[0] ? 1 : 0; all[isElemExist].count_recent += curr.year === yearsSelect[1] ? 1 : 0; all[isElemExist].average_cci_old += curr.year === yearsSelect[0] ? curr.cci : 0; all[isElemExist].average_cci_recent += curr.year === yearsSelect[1] ? curr.cci : 0; } return all; }, []) .reduce((all, curr) => { let obj = {}; obj.wealth = curr.wealth; obj.ccis = [curr.average_cci_old / curr.count_old, curr.average_cci_recent / curr.count_recent]; obj.counts = [curr.count_old, curr.count_recent]; all.push(obj) return all; }, []).sort((a, b) => (a.wealth > b.wealth) ? 1 : -1)41:T48e,annual_absolute_change = data_cleaned .reduce((all, curr) => { let isElemExist = all.findIndex(item => { return item.country === curr.country && item.wealth === curr.wealth; }) if (isElemExist === -1) { let oldest_year = years_lookup.filter(item => item.country === curr.country)[0].oldest_year; let oldest_cci = data_cleaned .filter(item => item.country === curr.country && item.year === oldest_year) .filter(item => item.wealth === curr.wealth)[0].cci; let latest_year = years_lookup.filter(item => item.country === curr.country)[0].latest_year; let latest_cci = data_cleaned .filter(item => item.country === curr.country && item.year === latest_year) .filter(item => item.wealth === curr.wealth)[0].cci; // if (oldest_year != latest_year) { let obj = {}; obj.country = curr.country; obj.wealth = curr.wealth; obj.change = (latest_cci - oldest_cci) / (latest_year - oldest_year || 1) obj.oldest_year = oldest_year; obj.oldest_cci = oldest_cci; obj.latest_year = latest_year; obj.latest_cci = latest_cci; all.push(obj) // } } return all; }, [])42:[{"id":"1d698472366693869e16d69a9247cfa4187d0b4b59711a49ed3932ff4302c72020da2d2070665f0dbb4a4442deea6512fb28e5adeb75f0cc4216e229835b6044","href":"https://static.observableusercontent.com/files/1d698472366693869e16d69a9247cfa4187d0b4b59711a49ed3932ff4302c72020da2d2070665f0dbb4a4442deea6512fb28e5adeb75f0cc4216e229835b6044","name":"data@1.csv","type":"text/csv","lastModified":1649139437431.791,"size":327190}] 33:{"id":"5a4f8779ce9bfcdd","slug":"change-in-global-health-inequities-over-time-project","title":"Final Project Part 2 - Change in global health inequities over time","thumbnail":"af7df22ddf62f867e1c6f5510ba71af33d0450ee8d2db8ebf9f636e0eda63629","access_level":"public","create_time":"$D2022-04-05T06:17:17.431Z","update_time":"$D2022-05-05T23:53:09.519Z","view_time":null,"first_public_time":"$D2022-04-28T17:36:47.079Z","has_unpublished_edits":null,"fork":{"id":"55a16fba2ce2a7c9","slug":"change-in-global-health-inequity-over-time","title":"Change in global health inequity over time","owner":{"id":"70a28fc0926865c6","login":"incakoala","name":"Vy"}},"stars":0,"starred":false,"owner":{"type":"team","id":"70a28fc0926865c6","login":"incakoala","name":"Vy","avatar_url":"https://avatars-next.observableusercontent.com/5d008ae093fa8b024defa3485b161456bc6ba621b7c21ef65061c11f7ca7dd98","tier":"starter_2024"},"version":2748,"publish_version":2748,"role":null,"authored":false,"authors":[{"type":"individual","id":"ded1682d7fdbac61","login":"incakoala","name":"Vy","avatar_url":"https://avatars-next.observableusercontent.com/5d008ae093fa8b024defa3485b161456bc6ba621b7c21ef65061c11f7ca7dd98","tier":null}],"members":[{"type":"individual","id":"ded1682d7fdbac61","login":"incakoala","name":"Vy","avatar_url":"https://avatars-next.observableusercontent.com/5d008ae093fa8b024defa3485b161456bc6ba621b7c21ef65061c11f7ca7dd98","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"800f1f5954fc5c7e","slug":"data-visualization-spring-2022","title":"Data Visualization Spring 2022 – Final Project","owner":{"id":"70a28fc0926865c6","login":"incakoala","name":"Vy"}},"type":"notebook","body":{"title":"Final Project Part 2 - Change in global health inequities over time","cells":[{"id":0,"value":"# Final Project Part 2 - Change in global health inequities over time\n\n* *NEU's [Data Visualization course](https://johnguerra.co/classes/data_visualization_spring_2022/) by John Alexis Guerra Gómez*\n* Part of the final project: [Part 1](https://observablehq.com/@incakoala/inequality-in-composite-health-across-countries) | **[Part 2](https://observablehq.com/@incakoala/change-in-global-health-inequities-over-time-project)** | [Part 3](https://observablehq.com/@incakoala/measuring-progress-towards-universal-health-coverage) | [Final Demo](https://amdaccache9.wixsite.com/publichealthinequity)\n* [Tweet](https://twitter.com/anthuriumcryst/status/1522316076788322304) | [Video](https://www.youtube.com/watch?v=PSUtLatCjOo)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2287,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1763,"value":"## Hypotheses\n\n* **Possible insight 1:** Over time, the poorest wealth groups in most countries experienced a 2x improvement in health and access to healthcare, compared to a 1x improvement for the richest (an ideal situation)\n \n* **Possible insight 2:** Compared to the 1990s, the 2010s saw at least a 10% increase in global quality of health and access to healthcare, with the poorest wealth group doing particularly well.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2196,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2276,"value":"## Tasks\n\n**T1.** Compare the pace of change in health inequality of **each country** over time (Compare, trends)\n\n**T2.** Compare/emphasize the magnitude of change in health inequality of **each wealth group** over time (Compare, trends)\n * Over decades\n * Over 2 given years","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2200,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1769,"value":"### T1. Compare the rate of change in health inequality for countries depending on their income levels (Compare/Summarize, trends)\n\n**How?**\n* Marks: Point\n* Channels: Vertical position\n \n**Insights**\n* The poorest wealth groups (Quintile 1-2) saw relatively more improvement in health indicators over time, compared to the richest wealth group (Quintile 5)\n* The magnitude of improvement in poorer quintiles is also greater than in the richer quintiles\n * e.g. for Cambodia: +2.81 in Quintile 1 vs. +1.04 in Quintile 5\n* Algeria saw a worsening situation across all wealth groups, with an average of -1.3% decline in CCI% in 2018 compared to 2012.\n* Thailand saw negative changes in both Quintile 1-2 and Quintile 5, but positive changes in Quintile 3-4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2228,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"viewof countriesSelect = multiAutoSelect({\n options: countries,\n value: \"Ethiopia\",\n placeholder: \"Search for a country . . .\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"dotplots = { \n let div = html`

The poorest wealth groups saw the most improvement in health indicators over time
\n Annual absolute change in CCI % of each country over time\n

Positive values indicate an improvement in the situation over time. Negative values indicate a worsening situation.\n

`;\n let chart = dotplot().width(230).height(500);\n \n d3.select(div)\n\t.selectAll(\"svg\")\n \n\t.data(annual_absolute_change_grouped_filtered)\n\t.join(\"div\")\n .style(\"background\", \"#ffffff\")\n\t\t.call(chart)\n \n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2579,"value":"viewof quintilesSelected = Inputs.checkbox(quintiles, {label: \"Quintiles to display:\", value: [\"Quintile 1\", \"Quintile 5\"], disabled: [\"Quintile 1\", \"Quintile 5\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2553,"value":"note = html`

Note: Because of inconsistent data availability, some countries that only had 1 year's worth of data resulted in a change value of 0.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2614,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2597,"value":"## Usability study version","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2508,"value":"dotplots_usability = {\n let div = html`

Annual absolute change in CCI % of each country over time
\n

Positive values indicate an improvement in the situation over time. Negative values indicate a worsening situation.\n

`;\n let chart = dotplot().width(230).height(500);\n \n d3.select(div)\n\t.selectAll(\"svg\")\n \n\t.data(annual_absolute_change_grouped)\n\t.join(\"div\")\n .style(\"background\", \"#ffffff\")\n\t\t.call(chart)\n \n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2650,"value":"**How?**\n* Marks: Line/bar\n* Channels: Horizontal position, color hues to represent income groups\n\n**Insights**\n* Sierra Leone had the most total improvement in health over time (13.15x), while Algeria had the most decline (-8.53x)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2642,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2643,"value":"{\n cci_change;\n var divElement = document.getElementById('viz1651515283743'); var vizElement = divElement.getElementsByTagName('object')[0]; if ( divElement.offsetWidth > 800 ) { vizElement.style.width='1000px';vizElement.style.height='827px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='1000px';vizElement.style.height='827px';} else { vizElement.style.width='100%';vizElement.style.height='727px';} var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2626,"value":"## Usability study version","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1567,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"{\n cci_change_usability;\n var divElement = document.getElementById('viz1648846388092'); var vizElement = divElement.getElementsByTagName('object')[0]; if ( divElement.offsetWidth > 800 ) { vizElement.style.width='1000px';vizElement.style.height='827px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='1000px';vizElement.style.height='827px';} else { vizElement.style.width='100%';vizElement.style.height='727px';} var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2204,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1775,"value":"### T2. Compare/emphasize the change in health inequality of each wealth group over time (Compare, trends)\n\n**How?**\n* Marks: Points and connected Lines\n* Channels: Horizontal region/area, color\n \n**Insights**\n* All wealth groups saw an improvement in their health indicators (CCI) over the course of 3 decades\n* The poorest wealth group (Quintile 1) achieved the fastest growth rate compared to others, growing almost 2x faster than other wealth groups\n * Quintile 1 took 3 decades to catch up with the 3rd richest, whereas Quintile 2-3-4 each took about 2 decades to catch up with the next respective group\n * Quintile 5 achieved the least amount of growth, with a 5% increase in average CCI% in the 2010s compared to the 1990s","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1622,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2606,"value":"## Usability study version","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2511,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2269,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2178,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2169,"value":"Additionally, we can manually select 2 different years for comparison in the slope chart below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2184,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1184,"value":"viewof yearsSelect_slider = rangeSlider({\n min: 1993,\n max: 2019,\n // Default value. Note that values must be specified as array of length 2.\n value: [2000, 2019],\n format: 'd',\n title: `Select two years for comparison`,\n // description: 'The optional description.',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2610,"value":"## Usability study version","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2513,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2192,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2744,"value":"## Idiom iterations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1389,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2743,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1766,"value":"## Data Abstraction\n\n* Data source: [WHO – Health equity monitor: Reproductive, maternal, newborn and child health interventions (RMNCH), combined](https://www.who.int/data/gho/data/themes/topics/topic-details/GHO/health-equity-monitor-reproductive-maternal-newborn-and-child-health-interventions-%28rmnch%29-combined)\n* Dataset type: Table - Static\n\n**Attributes**\n \n* **country**:\n * Type: Categorical\n* **wealth**: from quintile 1 (poorest) to quintile 5 (richest)\n * Type: Ordered - Ordinal\n * Orientation: Sequential\n* **cci**: Composite coverage index (CCI) %\n * Type: Ordered - Quantitative\n * Orientation: Sequential\n* **year**:\n * Type: Temporal\n \n**Derived attributes**\n * **change**: change in a country's CCI over time\n * ``(latest CCI - oldest CCI ) / years between latest and oldest``\n * Type: Ordered - Quantitative\n * Orientation: Diverging","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2720,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2721,"value":"{\n data_availability;\n var divElement = document.getElementById('viz1651733519883'); var vizElement = divElement.getElementsByTagName('object')[0]; if ( divElement.offsetWidth > 800 ) { vizElement.style.width='1000px';vizElement.style.height='1027px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='1000px';vizElement.style.height='1027px';} else { vizElement.style.width='100%';vizElement.style.height='727px';} var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2188,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1798,"value":"## Data processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1404,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1611,"value":"average_cci_comparison_decades = {\n let dataObjectTarget = average_cci_comparison_decades_base;\n \n const extraPropertiesSource = {\n columns: [\"1990s\", \"2000s\", \"2010s\"]\n };\n \n return Object.assign(dataObjectTarget, extraPropertiesSource);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1608,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"average_cci_comparison = {\n let dataObjectTarget = average_cci_comparison_base;\n \n const extraPropertiesSource = {\n columns: [yearsSelect[0], yearsSelect[1]]\n };\n \n return Object.assign(dataObjectTarget, extraPropertiesSource);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2568,"value":"annual_absolute_change_grouped_filtered = \n quintilesSelected.map((wealth) => {\n let wealth_filtered = annual_absolute_change.filter(item => item.wealth === wealth)\n let curr_object = wealth_filtered\n .reduce((all, curr) => {\n let obj = {};\n obj.wealth = curr.wealth;\n obj.country = curr.country;\n obj.change = curr.change;\n obj.oldest_year = curr.oldest_year;\n obj.oldest_cci = curr.oldest_cci;\n obj.latest_year = curr.latest_year;\n obj.latest_cci = curr.latest_cci;\n all.push(obj)\n return all;\n }, []).sort((a, b) => (a.change > b.change) ? -1 : 1)\n return curr_object;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"annual_absolute_change_grouped = \n quintiles.map((wealth) => {\n let wealth_filtered = annual_absolute_change.filter(item => item.wealth === wealth)\n let curr_object = wealth_filtered\n .reduce((all, curr) => {\n let obj = {};\n obj.wealth = curr.wealth;\n obj.country = curr.country;\n obj.change = curr.change;\n obj.oldest_year = curr.oldest_year;\n obj.oldest_cci = curr.oldest_cci;\n obj.latest_year = curr.latest_year;\n obj.latest_cci = curr.latest_cci;\n all.push(obj)\n return all;\n }, []).sort((a, b) => (a.change > b.change) ? -1 : 1)\n return curr_object;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2224,"value":"Inputs.table(annual_absolute_change)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"countries = Array.from(new Set(data_cleaned.map(d => d.country)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"quintiles = [\"Quintile 1\", \"Quintile 2\", \"Quintile 3\", \"Quintile 4\", \"Quintile 5\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"years_lookup = data_cleaned\n.reduce((all, curr) => {\n let isElemExist = all.findIndex(item => {\n return item.country === curr.country;\n })\n if (isElemExist === -1) {\n let obj = {};\n obj.country = curr.country;\n \n let all_items = data_cleaned.filter(item => item.country == obj.country);\n obj.oldest_year = Math.min.apply(Math, all_items.map(function(o) { return o.year; }))\n obj.latest_year = Math.max.apply(Math, all_items.map(function(o) { return o.year; }))\n all.push(obj)\n }\n return all;\n}, [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2061,"value":"Inputs.table(data_cleaned)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data_cleaned = data\n.reduce((all, curr) => {\n let obj = {};\n obj.country = curr.Location;\n obj.region = curr.ParentLocation;\n obj.wealth = `Quintile ${curr.Dim1ValueCode[curr.Dim1ValueCode.length - 1]}`;\n obj.cci = parseFloat(curr.FactValueNumeric);\n obj.year = parseInt(curr.Period);\n all.push(obj)\n return all;\n}, []).sort((a, b) => (a.country > b.country) ? 1 : -1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2667,"value":"DOM.download(serialize(data_cleaned), \"data_quintile_all_years_cleaned\", \"Download JSON\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2679,"value":"data_availability_by_year = d3.rollups(data_cleaned.sort((a, b) => a.year > b.year ? 1 : -1).filter(d => d.wealth === \"Quintile 1\"), v => d3.count(v, d => d.year), d => d.year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = FileAttachment(\"data@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1793,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1185,"value":"import {rangeSlider} from '@mootari/range-slider@1312'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"import {multiAutoSelect} from \"@john-guerra/multi-auto-select\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2076,"value":"import {navio} from \"@john-guerra/navio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1385,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"yearsSelect = [Math.round(yearsSelect_slider[0]), Math.round(yearsSelect_slider[1])]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2419,"value":"sequential_colors = ['#f1ecc4', '#ece6b6', '#dad39d', '#bdb77a', '#9e9968'] //#f8f3c5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2663,"value":"import {serialize} from \"@palewire/saving-json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W42","stdlib":"1","titling":"auto"}} 34:"$33:body"