2e:null 2f:["$","title",null,{"children":"Change in global health inequity over time | Vy | Observable"}] 34:T410,## Hypotheses * **(Selected)** **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) * To test this, I will need to derive the annual absolute change in the health composite coverage index (CCI) per country (quantitative). Specifically, for each country, this is calculated by subtracting the estimate for the oldest time point from that for the most recent time point, and then dividing by the number of years between them. * **(Selected)** **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. * To test this, I need to aggregate the data into 5 wealth groups from Quintile 1-5 (ordinal), each with data points for 3 separate decades (1990s, 2000s, and 2010s) (ordinal).35:T64c,## Abstraction ### Users * Policymakers and health care professionals who want to craft solutions to establish better health equity ### Data * 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) * Dataset type: Table - Static Complete technical notes by WHO can be found [here](https://cdn.who.int/media/docs/default-source/gho-documents/health-equity/health-equity-interactive-viz-rmnch-technical-notes-vaugust2021.pdf?sfvrsn=66e0688d_3) **Attributes used:** * **country**: * Type: Categorical * **wealth**: represents 5 subgroups: quintile 1 (poorest), quintile 2, quintile 3, quintile 4, quintile 5 (richest) * Type: Ordered - Ordinal * Orientation: Sequential * **cci**: Composite coverage index% (CCI) representing the combined reproductive, maternal, newborn and child health indicators of those surveyed * Type: Ordered - Quantitative * Orientation: Sequential * **year**: * Type: Temporal **Derived attributes:** * **change**: change in a country's CCI over time. Calculated by subtracting the estimate for the oldest time point from that for the most recent time point, and then dividing by the number of years between them. Positive values indicate an improvement in the situation over time. Negative values indicate a worsening situation * Type: Ordered - Quantitative * Orientation: Diverging36:T47c,### T1. Compare the pace of change in health inequality of each country over time (Compare, trends) **How?** * Marks: Point * Channels: * Separated vertically (by annual absolute change) * Each Point represents a country and is aligned on a common scale (absolute change) -> Most effective for ordered attributes * Also helpful for negative, diverging values * Side-by-side views of all wealth groups allow for easy comparison **Insights** * The poorest wealth groups (Quintile 1-2) saw relatively more improvement in health indicators over time, compared to the richest wealth group (Quintile 5) * The magnitude of improvement in poorer quintiles is also greater than in the richer quintiles * e.g. for Cambodia: +2.81 in Quintile 1 vs. +1.04 in Quintile 5 * Algeria saw a worsening situation across all wealth groups, with an average of -1.3% decline in CCI% in 2018 compared to 2012. * Thailand saw negative changes in both Quintile 1-2 and Quintile 5, but positive changes in Quintile 3-4 *Note:* Because of inconsistent data availability, some countries that only had 1 year's worth of data resulted in a change value of 0 37:T16e2,dotchart = { // based on https://observablehq.com/@john-guerra/reusable-charts return function dotChart() { 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(); 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", '#d3d3d3') .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', "#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', "#9aa071") .attr('stroke-width', 3) .attr('fill', "none") .attr('r', 10) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave_highlight); 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', '#9aa071') .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', '#fed9a6') .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; }; }38:T425,### T2. Compare/emphasize the change in health inequality of each wealth group over time (Compare, trends) **How?** * Idiom: Line/slope chart * Marks: Points and connected Lines * Channels: * Aligned lengths to express quant value (average CCI %) * Separated and ordered by key attribute (decades) into horizontal regions * Colors represent ordinal attribute values (wealth quintile) * Connected lines emphasize the ordering of the 3 decades by explicitly showing the relationship between one decade and the next **Insights** * All wealth groups saw an improvement in their health indicators (CCI) over the course of 3 decades * The poorest wealth group (Quintile 1) achieved the fastest growth rate compared to others, growing almost 2x faster than other wealth groups * 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 * Quintile 5 achieved the least amount of growth, with a 5% increase in average CCI% in the 2010s compared to the 1990s39:T20de,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: 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(['#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]); 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(); }3a:T1ce1,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: 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(['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6']) 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]); 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

`3c:T420,{ 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: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)3e: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)3f: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)40: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; }, [])41:[{"id":"1d698472366693869e16d69a9247cfa4187d0b4b59711a49ed3932ff4302c72020da2d2070665f0dbb4a4442deea6512fb28e5adeb75f0cc4216e229835b6044","href":"https://static.observableusercontent.com/files/1d698472366693869e16d69a9247cfa4187d0b4b59711a49ed3932ff4302c72020da2d2070665f0dbb4a4442deea6512fb28e5adeb75f0cc4216e229835b6044","name":"data@1.csv","type":"text/csv","lastModified":1648516160882.711,"size":327190}] 32:{"id":"55a16fba2ce2a7c9","slug":"change-in-global-health-inequity-over-time","title":"Change in global health inequity over time","thumbnail":"77fc65f9cf2cfefc74c217f556efb77d044a4624d48427e7f7c45f8bf8123a20","access_level":"public","create_time":"$D2022-03-29T00:21:16.047Z","update_time":"$D2022-04-04T18:31:31.058Z","view_time":null,"first_public_time":"$D2022-04-04T06:55:01.975Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"70a28fc0926865c6","login":"incakoala","name":"Vy","avatar_url":"https://avatars-next.observableusercontent.com/5d008ae093fa8b024defa3485b161456bc6ba621b7c21ef65061c11f7ca7dd98","tier":"starter_2024"},"version":2257,"publish_version":2257,"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":1,"collection":null,"type":"notebook","body":{"title":"Change in global health inequity over time","cells":[{"id":0,"value":"# Change in global health inequity over time\n\n* *Part of NEU's [Data Visualization course](https://johnguerra.co/classes/data_visualization_spring_2022/) by John Alexis Guerra Gómez*\n* [Data source](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* [Tweet](https://twitter.com/anthuriumcryst/status/1510874746430263299) | [Video](https://www.youtube.com/watch?v=yy-QnkxW9Wo)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2105,"value":"Socioeconomic inequity leaves marginalized populations behind when evaluating global health outcomes. A population can be considered 'inequitable' on the basis of their economic status, education, place of residence as well as age and sex, ie. factors that prevent one from gaining equal access to resources that they deserve. This particularly affects our most vulnerable populations including women and children. In this notebook, I will explore how wealth as a dimension of inequity that affects health outcomes has changed over time.\n\nThe dataset I'm going to work on is from the [WHO's Health Equity Monitor Database](https://www.who.int/data/gho/health-equity), and contains data collected through standardized, face-to-face interviews with women aged 15–49 years in especially low- and middle-income countries regarding their reproductive, maternal, newborn and child health indicators. The resulted data reveals information about each country's level of health inequity and how that changes over the years.","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":1763,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2192,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1766,"value":"$35","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":"$36","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 placeholder: \"Search for a country . . .\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"{\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 = dotchart().width(230).height(500);\n \n d3.select(div)\n\t.selectAll(\"svg\")\n\t.data(annual_absolute_change_grouped)\n\t.enter().append(\"div\")\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":108,"value":"$37","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":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1622,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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. Note that some years have limited data points available, making direct comparisons less accurate. For future improvements, it might be helpful to eliminate those with low sample sizes.","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":2188,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1803,"value":"## Other idioms","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2215,"value":"This horizontal bar chart with diverging values can be complementary to the first dot plot, as the key values are more scalable and viewable. However it might be harder to separate the marks by an ordered attribute (wealth group), currently the bars only show the combined value of all wealth groups in a country. It's also harder to spot any distribution/pattern and outliers.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1567,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2208,"value":"This horizontally-aligned dot plot is very similar to the line/slope charts above and is more useful in showing the values of the quantitative attribute on a scale. However this version in my opinion is slightly less effective in emphasizing the rate of change between the ordered attributes compared to the slope chart.","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":1798,"value":"## Data processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1404,"value":"$3d","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":"$3e","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":"$3f","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":"$40","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.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":2080,"value":"navio(data)","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":119,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"{\n tableau_chart;\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":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"}],"files":"$W41","stdlib":"1","titling":"auto"}} 33:"$32:body"