2f:null 30:["$","title",null,{"children":"Final Project Part 3 - How far are we in achieving universal health coverage (UHC) | Vy | Observable"}] 35:T155e,barchart = { // based on https://observablehq.com/@john-guerra/reusable-charts return function barChart() { let svg, margin = { top: 40, right: 60, bottom: 25, left: 55 }, width = 50, height = 50; const x = d3.scaleBand().padding(0.4), y = d3.scaleLinear(); var colors = d3.scaleOrdinal() .domain(['All', 'Q1', 'Q2', 'Q3', 'Q4', 'Q5']) .range(['#d3d3d3'].concat(sequential_colors_quintile)) //['#d3d3d3', '#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6'] function chart(selection) { selection.each(function(data) { x .domain(data.map(d => d.quintile)) .rangeRound([0, width - margin.left - margin.right]); y // .domain([0, d3.max(data, d => d.average_value)]) .domain([0, d3.max(selected_indicator_scale)]) // .domain(d3.extent(data, d => d.average_value)) .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) + ")" // ); let yLabel = gEnter .append("g") .attr("class", "axis axis--y") .append("text") .attr('x', -150) .attr('y', -45) .attr("transform", "rotate(-90)") .attr('fill', 'black') .style("font-size", "12px") .attr('text-anchor', 'end') .text("Average value"); let xLabel = gEnter .append("g") .data(data) .attr("class", "axis axis--y") .append("text") .attr('x', (width - margin.left - margin.right) / 2) .attr('y', height - 45) .attr('fill', 'black') .style("font-size", "12px") .style("font-weight", "bold") .attr('text-anchor', 'middle') .text(d => `${d.income_group} countries`); let g = svgEnter .merge(svg) .data(data) .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) .tickFormat(y => healthIndicatorSelect.includes("%") ? `${y}%` : y) ) .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 bars = gEnter .merge(g) .selectAll(".bar") .data(data); bars .enter() .append("rect") .merge(bars) .attr("class", "bar") .attr('x', d => x(d.quintile)) .attr('y', d => y(d.average_value)) // .attr('stroke', "#fed9a6") // .attr('stroke-width', 2) .attr('fill', d => colors(d.quintile === "Q1 (poorest)" || d.quintile === "Q5 (richest)" ? d.quintile.split(" ")[0] : d.quintile)) //"#fed9a6" .attr("width", x.bandwidth()) .attr("height", d => height - margin.top - margin.bottom - y(d.average_value)) // .attr('r', 10) // .on('mouseenter', mouseEnter) // .on('mouseleave', mouseLeave); // bars // .enter() // .append("text") // .merge(bars) // .attr("class", "bar") // .attr('x', d => x(d.quintile)) // .attr('y', d => y(d.average_value) - 20) // .attr('fill', "black") // .style("font", "12px 'Helvetica Neue'") // .text(d => d.quintile === "Q1 (poorest)" || d.quintile === "Q5 (richest)" ? d.quintile.split(" ")[0] : d.quintile) bars .enter() .append("text") .merge(bars) .attr("class", "bar") .attr('x', d => x(d.quintile)) .attr('y', d => y(d.average_value) - 5) .attr('fill', "black") .style("font", "11px 'Helvetica Neue'") .text(d => healthIndicatorSelect.includes("%") ? `${d.average_value.toFixed(2)}` : d.average_value.toFixed(2)) bars.exit().remove(); }); } 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:Tfb7,barchart_3 = { // based on https://observablehq.com/@john-guerra/reusable-charts return function barChart2() { let svg, margin = { top: 40, right: 40, bottom: 25, left: 55 }, width = 50, height = 50; const x = d3.scaleBand().padding(0.4), y = d3.scaleLinear(); var colors = d3.scaleOrdinal() .domain(['All', 'Q1', 'Q2', 'Q3', 'Q4', 'Q5']) .range(['#d3d3d3'].concat(sequential_colors_quintile)) function chart(selection) { selection.each(function(data) { x .domain(data.map(d => d.quintile)) .rangeRound([0, width - margin.left - margin.right]); y .domain([0, d3.max(selected_indicator_scale_papsmear)]) .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"); let yLabel = gEnter .append("g") .attr("class", "axis axis--y") .append("text") .attr('x', -150) .attr('y', -45) .attr("transform", "rotate(-90)") .attr('fill', 'black') .style("font-size", "12px") .attr('text-anchor', 'end') .text("Average value"); let xLabel = gEnter .append("g") .data(data) .attr("class", "axis axis--y") .append("text") .attr('x', (width - margin.left - margin.right) / 2) .attr('y', height - 45) .attr('fill', 'black') .style("font-size", "12px") .style("font-weight", "bold") .attr('text-anchor', 'middle') .text(d => `${d.income_group} countries`); let g = svgEnter .merge(svg) .data(data) .attr("width", width) .attr("height", height) .select("g") .attr( "transform", "translate(" + margin.left + "," + margin.top + ")" ); gEnter.select(".axis--y") .call(d3.axisLeft(y) .ticks(5) .tickFormat(y => `${y}%`) ) .style("font-size", "12px"); let bars = gEnter .merge(g) .selectAll(".bar") .data(data); bars .enter() .append("rect") .merge(bars) .attr("class", "bar") .attr('x', d => x(d.quintile)) .attr('y', d => y(d.average_value)) .attr('fill', d => colors(d.quintile === "Q1 (poorest)" || d.quintile === "Q5 (richest)" ? d.quintile.split(" ")[0] : d.quintile)) .attr("width", x.bandwidth()) .attr("height", d => height - margin.top - margin.bottom - y(d.average_value)) // bars // .enter() // .append("text") // .merge(bars) // .attr("class", "bar") // .attr('x', d => x(d.quintile)) // .attr('y', d => y(d.average_value) - 20) // .attr('fill', "black") // .style("font", "12px 'Helvetica Neue'") // .text(d => d.quintile === "Q1 (poorest)" || d.quintile === "Q5 (richest)" ? d.quintile.split(" ")[0] : d.quintile) bars .enter() .append("text") .merge(bars) .attr("class", "bar") .attr('x', d => x(d.quintile)) .attr('y', d => y(d.average_value) - 5) .attr('fill', "black") .style("font", "11px 'Helvetica Neue'") .text(d => `${d.average_value.toFixed(2)}`) bars.exit().remove(); }); } chart.width = function(_) { if (!arguments.length) return width; width = _; return chart; }; chart.height = function(_) { if (!arguments.length) return height; height = _; return chart; }; return chart; }; }37:Tfb8,barchart_2 = { // based on https://observablehq.com/@john-guerra/reusable-charts return function barChart2() { let svg, margin = { top: 40, right: 40, bottom: 25, left: 55 }, width = 50, height = 50; const x = d3.scaleBand().padding(0.4), y = d3.scaleLinear(); var colors = d3.scaleOrdinal() .domain(['All', 'Q1', 'Q2', 'Q3', 'Q4', 'Q5']) .range(['#d3d3d3'].concat(sequential_colors_quintile)) function chart(selection) { selection.each(function(data) { x .domain(data.map(d => d.quintile)) .rangeRound([0, width - margin.left - margin.right]); y .domain([0, d3.max(selected_indicator_scale_inpatient)]) .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"); let yLabel = gEnter .append("g") .attr("class", "axis axis--y") .append("text") .attr('x', -150) .attr('y', -45) .attr("transform", "rotate(-90)") .attr('fill', 'black') .style("font-size", "12px") .attr('text-anchor', 'end') .text("Average value"); let xLabel = gEnter .append("g") .data(data) .attr("class", "axis axis--y") .append("text") .attr('x', (width - margin.left - margin.right) / 2) .attr('y', height - 45) .attr('fill', 'black') .style("font-size", "12px") .style("font-weight", "bold") .attr('text-anchor', 'middle') .text(d => `${d.income_group} countries`); let g = svgEnter .merge(svg) .data(data) .attr("width", width) .attr("height", height) .select("g") .attr( "transform", "translate(" + margin.left + "," + margin.top + ")" ); gEnter.select(".axis--y") .call(d3.axisLeft(y) .ticks(5) .tickFormat(y => `${y}%`) ) .style("font-size", "12px"); let bars = gEnter .merge(g) .selectAll(".bar") .data(data); bars .enter() .append("rect") .merge(bars) .attr("class", "bar") .attr('x', d => x(d.quintile)) .attr('y', d => y(d.average_value)) .attr('fill', d => colors(d.quintile === "Q1 (poorest)" || d.quintile === "Q5 (richest)" ? d.quintile.split(" ")[0] : d.quintile)) .attr("width", x.bandwidth()) .attr("height", d => height - margin.top - margin.bottom - y(d.average_value)) // bars // .enter() // .append("text") // .merge(bars) // .attr("class", "bar") // .attr('x', d => x(d.quintile)) // .attr('y', d => y(d.average_value) - 20) // .attr('fill', "black") // .style("font", "12px 'Helvetica Neue'") // .text(d => d.quintile === "Q1 (poorest)" || d.quintile === "Q5 (richest)" ? d.quintile.split(" ")[0] : d.quintile) bars .enter() .append("text") .merge(bars) .attr("class", "bar") .attr('x', d => x(d.quintile)) .attr('y', d => y(d.average_value) - 5) .attr('fill', "black") .style("font", "11px 'Helvetica Neue'") .text(d => `${d.average_value.toFixed(2)}`) bars.exit().remove(); }); } 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:T405,### T2. Compare how countries in different income groups fare differently in 8 selected health service coverages (Compare, Distribution) **How?** * Marks: * Lines/Bars (bar chart) * Areas (radar chart) * Channels: * Verticle positions to represent values, color hues to represent categories (bar chart) * Angles/arcs to represent values, color hues to represent categories (radar chart) **Insights** **Note:** Full Immunization and Diarrhea Treatment indicators are missing for High income countries in the original dataset, resulting in a less comprehensive comparison * Unsurprisingly, countries with higher income levels have higher coverage levels. With the exception of two cancer screening indices, high income countries have practically achieved universal health coverage (UHC) on all but the two cancer screening indicators (Mammography and Pap Smear) * Within each income level, the areas that have the greatest coverage are acute respiratory infection (ARI) treatment, antenatal care, and skilled births39:T162c,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/stacked-bar-chart function StackedBarChart(data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text marginTop = 120, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [left, right] xPadding = 0.1, // amount of x-range to reserve to separate bars yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] zDomain, // array of z-values offset = d3.stackOffsetDiverging, // stack offset method order = d3.stackOrderNone, // stack order method yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis colors = d3.schemeTableau10, // array of colors } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); // Compute default x- and z-domains, and unique them. if (xDomain === undefined) xDomain = X; if (zDomain === undefined) zDomain = Z; xDomain = new d3.InternSet(xDomain); zDomain = new d3.InternSet(zDomain); // Omit any data not present in the x- and z-domains. const I = d3.range(X.length).filter(i => xDomain.has(X[i]) && zDomain.has(Z[i])); // Compute a nested array of series where each series is [[y1, y2], [y1, y2], // [y1, y2], …] representing the y-extent of each stacked rect. In addition, // each tuple has an i (index) property so that we can refer back to the // original data point (data[i]). This code assumes that there is only one // data point for a given unique x- and z-value. const series = d3.stack() .keys(zDomain) .value(([x, I], z) => Y[I.get(z)]) .order(order) .offset(offset) (d3.rollup(I, ([i]) => i, i => X[i], i => Z[i])) .map(s => s.map(d => Object.assign(d, {i: d.data[1].get(s.key)}))); // Compute the default y-domain. Note: diverging stacks can be negative. if (yDomain === undefined) yDomain = d3.extent(series.flat(2)); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).paddingInner(xPadding); const yScale = yType(yDomain, yRange); const color = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).tickSize(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const chartTitle = svg.append("g") .attr("class", "chart-title") // .attr("transform", `translate(${-width / 4}, ${(-height / 2) - 23})`) .append("foreignObject") .attr("width", 500) .attr("height", 420) // .append("xhtml:body") .style("font", "18px 'Helvetica Neue'") chartTitle.html(`

Higher-income countries are on track to achieve Universal Health Coverage
How countries fare on the 8 selected health service coverages

`) // let div = html`

In low-income countries, it is the rich who are more likely to be admitted to hospital, while in high-income countries it is the poor
// Inpatient care use in last 12 months (% of population 18+) //

`; // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `${X[i]}\n${Z[i]}\n${formatValue(Y[i])}%`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .style("font", "12px 'Helvetica Neue'") .call(yAxis) .call(g => g.select(".domain").remove()) // .call(g => g.selectAll(".tick line").clone() // .attr("x2", width - marginLeft - marginRight) // .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", marginTop) .attr("fill", "currentColor") .attr("text-anchor", "start") .style("font", "13px 'Helvetica Neue'") .text(yLabel)); const bar = svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", ([{i}]) => color(Z[i])) .selectAll("rect") .data(d => d) .join("rect") .attr("x", ({i}) => xScale(X[i])) .attr("y", ([y1, y2]) => Math.min(yScale(y1), yScale(y2))) .attr("height", ([y1, y2]) => Math.abs(yScale(y1) - yScale(y2))) .attr("width", xScale.bandwidth() - 15); if (title) bar.append("title") .text(({i}) => title(i)); svg.append("g") .attr("transform", `translate(-10,${yScale(0) + 10})`) .style("font", "bold 12px 'Helvetica Neue'") .call(xAxis) .call(g => g.select(".domain").remove()); return Object.assign(svg.node(), {scales: {color}}); }3a:T1226,// https://vega.github.io/vega/examples/radar-chart/ radar = embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A radar chart example, showing multiple dimensions in a radial layout.", "width": 600, "height": 600, "padding": 31, "autosize": {"type": "none", "contains": "padding"}, "signals": [ {"name": "radius", "update": "width / 2"} ], "data": [ { "name": "table", "values": service_coverage }, { "name": "keys", "source": "table", "transform": [ { "type": "aggregate", "groupby": ["key"] } ] } ], "scales": [ { "name": "angular", "type": "point", "range": {"signal": "[-PI, PI]"}, "padding": 0.5, "domain": {"data": "table", "field": "key"} }, { "name": "radial", "type": "linear", "range": {"signal": "[0, radius]"}, "zero": true, "nice": false, "domain": {"data": "table", "field": "value"}, "domainMin": 0 }, { "name": "color", "type": "ordinal", "domain": {"data": "table", "field": "category"}, "range": {"scheme": "yellowgreenblue"}, } ], "encode": { "enter": { "x": {"signal": "radius"}, "y": {"signal": "radius"} } }, // "legends": [ // {"stroke": "color", "symbolType": "stroke"} // ], "marks": [ { "type": "group", "name": "categories", "zindex": 1, "from": { "facet": {"data": "table", "name": "facet", "groupby": ["category"]} }, "marks": [ { "type": "line", "name": "category-line", "from": {"data": "facet"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "scale('radial', datum.value) * cos(scale('angular', datum.key))"}, "y": {"signal": "scale('radial', datum.value) * sin(scale('angular', datum.key))"}, "stroke": {"scale": "color", "field": "category"}, "strokeWidth": {"value": 5}, "fill": {"scale": "color", "field": "category"}, "fillOpacity": {"value": 0.1} } } }, // { // "type": "text", // "name": "value-text", // "from": {"data": "category-line"}, // "encode": { // "enter": { // "x": {"signal": "datum.x"}, //datum.x // "y": {"signal": "datum.y"}, // "text": {"signal": "datum.datum.value"}, // "align": {"value": "center"}, // "baseline": {"value": "middle"}, // "fill": {"value": "black"} // } // } // } ] }, { "type": "rule", "name": "radial-grid", "from": {"data": "keys"}, "zindex": 0, "encode": { "enter": { "x": {"value": 0}, "y": {"value": 0}, "x2": {"signal": "radius * cos(scale('angular', datum.key))"}, "y2": {"signal": "radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "text", "name": "key-label", "from": {"data": "keys"}, "zindex": 1, "encode": { "enter": { "x": {"signal": "(radius + 5) * cos(scale('angular', datum.key))"}, "y": {"signal": "(radius + 5) * sin(scale('angular', datum.key))"}, "text": {"field": "key"}, "align": [ { "test": "abs(scale('angular', datum.key)) > PI / 2", "value": "center" //right }, { "value": "center" //left } ], "baseline": [ { "test": "scale('angular', datum.key) > 0", "value": "top" }, { "test": "scale('angular', datum.key) == 0", "value": "middle" }, { "value": "bottom" } ], "fill": {"value": "black"}, "fontSize": {"value": "12"}, // "fontWeight": {"value": "bold"} } } }, { "type": "line", "name": "outer-line", "from": {"data": "radial-grid"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"field": "x2"}, "y": {"field": "y2"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } } ] })3b:Td6b,// https://observablehq.com/@berkeleyvis/d3-radar-chart-starter radar_old = { const margin = { left: 40, top: 30, bottom: 30, right: 40 }; const svg = d3 .create("svg") .attr("viewBox", [-width / 4, -height / 2, width, height]); const chartTitle = svg.append("g") .attr("class", "chart-title") .attr("transform", `translate(${-width / 4}, ${(-height / 2) - 23})`) .append("foreignObject") .attr("width", 700) .attr("height", 420) .append("xhtml:body") .style("font", "18px 'Helvetica Neue'") chartTitle.html(`

How ${radarIncomeSelect.toLowerCase()} countries fare on the 8 service health coverages

`) // Your marks here svg .selectAll(".arc") .data(arcs) .join("path") .attr("class", "arc") .attr("fill", d => color(d.data[0])) .attr("d", a => arc(a)) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave); // Your marks here svg .selectAll(".label") .data(arcs) .join("text") .attr("class", "label") .attr("fill", "#333") .attr("transform", a => `translate(${arc.centroid(a)})`) .style("text-anchor", "middle") // a => arc.centroid(a)[0] > 0 ? "start" : "end" .style("font-family", "sans-serif") .call(text => text .append("tspan") .style("font-size", "10pt") .style("font-weight", "bold") .attr("x", 0) .text(a => a.data[1] > 30 ? a.data[0] : "") ) .call(text => text .append("tspan") .style("font-size", "9pt") .attr("x", 0) .attr("y", "1em") .text(a => a.data[1] > 30 ? `${a.data[1].toFixed(2)}%` : "") ) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave); svg .selectAll(".axis") .data(d3.range(...r.domain(), radius / 8)) .join("circle") .attr("class", "axis") .attr("r", d => r(d)) .attr("stroke", "#aaaa") .attr("stroke-dasharray", "2 5") .attr("fill", "none"); svg .selectAll(".axisText") .data(d3.range(...r.domain(), 30)) //Math.floor(d3.max(arcs, d => d.data[1]) / 10) * 10) .join("text") .attr("class", "axisText") .attr("y", d => r(d) - 2) .attr("fill", "#aaaa") .style("font-size", "10pt") .style("cursor", "default") .text(d => `${d}%`); function mouseEnter(event, d) { d3.select(this) .style("cursor", "default") tooltipText.html(`

${d.data[0]}
${d.data[1].toFixed(2)}%

`) const labelWidth = 120; tooltipRect.attr('width', labelWidth); const xPos = event.pageX - 290; const yPos = event.pageY - 3180; // const xPos = a => arc.centroid(a); // const yPos = a => arc.centroid(a); tooltip.attr('transform', `translate(${xPos},${yPos})`).attr('visibility', 'visible').raise(); } function mouseLeave(event, d) { d3.select(this) tooltip.attr('visibility', 'hidden'); } const tooltip = svg.append('g') .attr('visibility', 'hidden'); const tooltipRect = tooltip.append('rect') .attr('fill', 'white') .attr('stroke', 'black') .attr('height', 50); const tooltipText = tooltip .append("foreignObject") .attr("width", 200) .attr("height", 200) .append("xhtml:body") .style("font", "11px 'Helvetica Neue'") return svg.node(); }3c:T46b,data_availability = html`

`3d:T993,selected_indicator_grouped_papsmear = { const selected_indicator = data_hefpi.filter(d => d['Indicator Name'].includes("Pap smear in last 5 years (% of females 30-49)") && d['Income group'] !== "") .reduce((all, curr) => { const contains_quintile = curr['Indicator Name'].includes("Q1") || curr['Indicator Name'].includes('Q2') || curr['Indicator Name'].includes('Q3') || curr['Indicator Name'].includes('Q4') || curr['Indicator Name'].includes('Q5') const quintile = contains_quintile ? curr['Indicator Name'].split(": ")[1] : "All"; let isElemExist = all.findIndex(item => { return item.income_group === curr['Income group'] && item.quintile === quintile; }) if (isElemExist === -1) { let obj = {}; obj.income_group = curr['Income group']; obj.indicator = contains_quintile ? curr['Indicator Name'].split(": ")[0] : curr['Indicator Name']; obj.quintile = contains_quintile ? curr['Indicator Name'].split(": ")[1] : "All"; obj.value = parseFloat(curr['Value'])*100; obj.count = 1.0; all.push(obj) } else { all[isElemExist].value += (parseFloat(curr['Value'])*100); all[isElemExist].count += 1.0; } return all; }, []) .reduce((all, curr) => { let obj = {}; obj.income_group = curr.income_group; obj.indicator = curr.indicator; obj.quintile = curr.quintile; obj.average_value = parseFloat((curr.value / curr.count).toFixed(2)); all.push(obj) return all; }, []) const sort_order = ["Low income", "Lower middle income", "Upper middle income", "High income"]; let groups = Array.from(new Set(selected_indicator.map(d => d.income_group))).sort((a, b) => (sort_order.indexOf(a) - sort_order.indexOf(b))); groups = [groups[0], groups[groups.length-1]] const selected_indicator_grouped_papsmear = groups.map((income) => { let income_filtered = selected_indicator.filter(item => item.income_group === income) let curr_object = income_filtered .reduce((all, curr) => { let obj = {}; obj.income_group = curr.income_group; obj.indicator = curr.indicator; obj.quintile = curr.quintile; obj.average_value = curr.average_value; all.push(obj) return all; }, []) return curr_object; }) return selected_indicator_grouped_papsmear; }3e:T998,selected_indicator_grouped_inpatient = { const selected_indicator = data_hefpi.filter(d => d['Indicator Name'].includes("Inpatient care use in last 12 months (% of population 18+)") && d['Income group'] !== "") .reduce((all, curr) => { const contains_quintile = curr['Indicator Name'].includes("Q1") || curr['Indicator Name'].includes('Q2') || curr['Indicator Name'].includes('Q3') || curr['Indicator Name'].includes('Q4') || curr['Indicator Name'].includes('Q5') const quintile = contains_quintile ? curr['Indicator Name'].split(": ")[1] : "All"; let isElemExist = all.findIndex(item => { return item.income_group === curr['Income group'] && item.quintile === quintile; }) if (isElemExist === -1) { let obj = {}; obj.income_group = curr['Income group']; obj.indicator = contains_quintile ? curr['Indicator Name'].split(": ")[0] : curr['Indicator Name']; obj.quintile = contains_quintile ? curr['Indicator Name'].split(": ")[1] : "All"; obj.value = parseFloat(curr['Value']); obj.count = 1.0; all.push(obj) } else { all[isElemExist].value += parseFloat(curr['Value']); all[isElemExist].count += 1.0; } return all; }, []) .reduce((all, curr) => { let obj = {}; obj.income_group = curr.income_group; obj.indicator = curr.indicator; obj.quintile = curr.quintile; obj.average_value = parseFloat((curr.value / curr.count).toFixed(2)); all.push(obj) return all; }, []) const sort_order = ["Low income", "Lower middle income", "Upper middle income", "High income"]; let groups = Array.from(new Set(selected_indicator.map(d => d.income_group))).sort((a, b) => (sort_order.indexOf(a) - sort_order.indexOf(b))); groups = [groups[0], groups[groups.length-1]] const selected_indicator_grouped_inpatient = groups.map((income) => { let income_filtered = selected_indicator.filter(item => item.income_group === income) let curr_object = income_filtered .reduce((all, curr) => { let obj = {}; obj.income_group = curr.income_group; obj.indicator = curr.indicator; obj.quintile = curr.quintile; obj.average_value = curr.average_value; all.push(obj) return all; }, []) return curr_object; }) return selected_indicator_grouped_inpatient; }3f:T9d4,selected_indicator_grouped = { const selected_indicator = data_hefpi.filter(d => d['Indicator Name'].includes(healthIndicatorSelect) && d['Income group'] !== "") .reduce((all, curr) => { const contains_quintile = curr['Indicator Name'].includes("Q1") || curr['Indicator Name'].includes('Q2') || curr['Indicator Name'].includes('Q3') || curr['Indicator Name'].includes('Q4') || curr['Indicator Name'].includes('Q5') const quintile = contains_quintile ? curr['Indicator Name'].split(": ")[1] : "All"; let isElemExist = all.findIndex(item => { return item.income_group === curr['Income group'] && item.quintile === quintile; }) let special_value = healthIndicatorSelect === "Pap smear in last 5 years (% of females 30-49)" || healthIndicatorSelect === "Immunization, full (% of children ages 15-23 months)" ? parseFloat(curr['Value'])*100 : parseFloat(curr['Value']) if (isElemExist === -1) { let obj = {}; obj.income_group = curr['Income group']; obj.indicator = contains_quintile ? curr['Indicator Name'].split(": ")[0] : curr['Indicator Name']; obj.quintile = contains_quintile ? curr['Indicator Name'].split(": ")[1] : "All"; obj.value = special_value; obj.count = 1.0; all.push(obj) } else { all[isElemExist].value += special_value; all[isElemExist].count += 1.0; } return all; }, []) .reduce((all, curr) => { let obj = {}; obj.income_group = curr.income_group; obj.indicator = curr.indicator; obj.quintile = curr.quintile; obj.average_value = parseFloat((curr.value / curr.count).toFixed(3)); all.push(obj) return all; }, []) let groups = Array.from(new Set(selected_indicator.map(d => d.income_group))).sort((a, b) => (income_groups.indexOf(a) - income_groups.indexOf(b))); groups = [groups[0], groups[groups.length-1]] const selected_indicator_grouped = groups.map((income) => { let income_filtered = selected_indicator.filter(item => item.income_group === income) let curr_object = income_filtered .reduce((all, curr) => { let obj = {}; obj.income_group = curr.income_group; obj.indicator = curr.indicator; obj.quintile = curr.quintile; obj.average_value = curr.average_value; all.push(obj) return all; }, []) return curr_object; }) return selected_indicator_grouped; }40:T9a0,service_coverage_old = { const selected_indicator = data_hefpi.filter(d => main_services.includes(d['Indicator Name']) && d['Income group'] !== "" && d['Income group'] === radarIncomeSelect) .reduce((all, curr) => { let indicator_name = curr['Indicator Name'].split(": ")[0]; let shortened_indicator_name = curr['Indicator Name'] === "Pregnant women receiving prenatal care of at least four visits (% of pregnant women)" ? "Antenatal care" : curr['Indicator Name'] === "Immunization, full (% of children ages 15-23 months)" ? "Full immunization" : curr['Indicator Name'] === "Mammography in last 2 years, (% of females 50-69)" ? "Mammography" : curr['Indicator Name'] === "Pap smear in last 5 years (% of females 30-49)" ? "Pap smear" : curr['Indicator Name'] === "Births attended by skilled health staff (% of total)" ? "Skilled births" : curr['Indicator Name'] === "Acute respiratory infections treated (% of children under 5 with cough and rapid breathing)" ? "ARI treament" : curr['Indicator Name'] === "Diarrhea treatment (% of children under 5 who received ORS)" ? "Diarrhea treatment" : curr['Indicator Name'] === "Inpatient care use in last 12 months (% of population 18+)" ? "Inpatient care use" : indicator_name let isElemExist = all.findIndex(item => { return item.category === curr['Income group'] && item.key === shortened_indicator_name; }) let special_value = shortened_indicator_name === "Pap smear" || shortened_indicator_name === "Full immunization" ? parseFloat(curr['Value'])*100 : parseFloat(curr['Value']) if (isElemExist === -1) { let obj = {}; obj.category = curr['Income group']; obj.key = shortened_indicator_name; obj.value = special_value; obj.count = 1.0; all.push(obj) } else { all[isElemExist].value += special_value; all[isElemExist].count += 1.0; } return all; }, []) .reduce((all, curr) => { let obj = [curr.key, parseFloat((curr.value / curr.count).toFixed(3))]; // obj.category = curr.category; // obj.key = curr.key; // obj.value = parseFloat((curr.value / curr.count).toFixed(3)); all.push(obj) return all; }, [])//.sort((a, b) => (services_order_old.indexOf(a.key) - services_order_old.indexOf(b.key))); return selected_indicator; }41:T9a9,service_coverage = { const selected_indicator = data_hefpi.filter(d => main_services.includes(d['Indicator Name']) && d['Income group'] !== "") //&& d['Income group'] === radarIncomeSelect .reduce((all, curr) => { let indicator_name = curr['Indicator Name'].split(": ")[0]; let shortened_indicator_name = curr['Indicator Name'] === "Pregnant women receiving prenatal care of at least four visits (% of pregnant women)" ? "Antenatal care" : curr['Indicator Name'] === "Immunization, full (% of children ages 15-23 months)" ? "Full immunization" : curr['Indicator Name'] === "Mammography in last 2 years, (% of females 50-69)" ? "Mammography" : curr['Indicator Name'] === "Pap smear in last 5 years (% of females 30-49)" ? "Pap smear" : curr['Indicator Name'] === "Births attended by skilled health staff (% of total)" ? "Skilled births" : curr['Indicator Name'] === "Acute respiratory infections treated (% of children under 5 with cough and rapid breathing)" ? "ARI treament" : curr['Indicator Name'] === "Diarrhea treatment (% of children under 5 who received ORS)" ? "Diarrhea treatment" : curr['Indicator Name'] === "Inpatient care use in last 12 months (% of population 18+)" ? "Inpatient care use" : indicator_name let special_value = shortened_indicator_name === "Pap smear" || shortened_indicator_name === "Full immunization" ? parseFloat(curr['Value'])*100 : parseFloat(curr['Value']) let isElemExist = all.findIndex(item => { return item.category === curr['Income group'] && item.key === shortened_indicator_name; }) if (isElemExist === -1) { let obj = {}; obj.category = curr['Income group']; obj.key = shortened_indicator_name; obj.value = special_value; obj.count = 1.0; all.push(obj) } else { all[isElemExist].value += special_value; all[isElemExist].count += 1.0; } return all; }, []).sort((a, b) => (income_groups.indexOf(a.category) - income_groups.indexOf(b.category))) .reduce((all, curr) => { let obj = {}; obj.category = curr.category; obj.key = curr.key; obj.value = parseFloat((curr.value / curr.count).toFixed(3)); all.push(obj) return all; }, []).sort((a, b) => (services_order.indexOf(a.key) - services_order.indexOf(b.key))); return selected_indicator; }42:[{"id":"1045db9f7588c4491195d18754077542d185199fb4c76585253b607b3d759f34e04fbe6c80fe46393dd559cd10db898477372e299679cdab09d01b5b1d24bad7","href":"https://static.observableusercontent.com/files/1045db9f7588c4491195d18754077542d185199fb4c76585253b607b3d759f34e04fbe6c80fe46393dd559cd10db898477372e299679cdab09d01b5b1d24bad7","name":"hefpi_cleaned@3.csv","type":"text/csv","lastModified":1649309476974.309,"size":2951292},{"id":"43c5ea5a1902ce23d31eb46a92a42e5f34fff17026b693b3e098d02740217704e32ae177d3ac113450611580b215a4a99be88bbfcd96da821d5150d409ec0470","href":"https://static.observableusercontent.com/files/43c5ea5a1902ce23d31eb46a92a42e5f34fff17026b693b3e098d02740217704e32ae177d3ac113450611580b215a4a99be88bbfcd96da821d5150d409ec0470","name":"hefpi_cleaned@4.csv","type":"text/csv","lastModified":1651344183933.318,"size":2955430}] 33:{"id":"52ab21eca1f27764","slug":"measuring-progress-towards-universal-health-coverage","title":"Final Project Part 3 - How far are we in achieving universal health coverage (UHC)","thumbnail":"a4ce75466fd98a7311227ddf622392f7dc0610f9841b14341e1f5b065c4ce209","access_level":"public","create_time":"$D2022-04-05T07:12:12.834Z","update_time":"$D2022-05-05T22:16:00.553Z","view_time":null,"first_public_time":"$D2022-04-28T17:36:09.352Z","has_unpublished_edits":null,"fork":{"id":"5a4f8779ce9bfcdd","slug":"change-in-global-health-inequities-over-time-project","title":"Final Project Part 2 - Change in global health inequities 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":4365,"publish_version":4365,"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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 3 - How far are we in achieving universal health coverage (UHC)","cells":[{"id":0,"value":"# Final Project Part 3 - How far are we in achieving universal health coverage (UHC)\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:** The poorest group in both lower-income and higher-income countries have the lowest rate of PAP smear procedures done. Even the richest in lower-income countries have almost 50% less than the poorest in higher-income countries.\n \n* **Possible insight 2:** There are high percentages of births attended by skilled health staff across countries with varying levels of income, whereas the rates in other areas of health are more disproportional depending on how poor/rich a country is.","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 how countries in the lowest vs highest available income groups fare differently in different health indicators (Compare, Distribution)\n\n**T2.** Compare how countries in different income groups fare differently in 8 selected health service coverages (Compare, Distribution)","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 how countries in the lowest vs highest available income groups fare differently in different health indicators (Compare, Distribution)\n\n**How?**\n* Marks: Lines\n* Channels: Verticle position, color hues\n \n**Insights**\n* In low-income countries, it is the rich who are more likely to be admitted to hospital, while in high-income countries it is the poor\n * Higher value does not necessarily mean better health in tracking progress towards UHC","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3285,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2548,"value":"viewof healthIndicatorSelect = Inputs.select(health_indicators, {value: \"Mortality rate, children under 5 (per 1,000)\", label: \"Select indicator:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3874,"value":"healthIndicatorSelect","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2588,"value":"barcharts = {\n let div = html`

${healthIndicatorSelect}
\n Comparison between the lowest and highest available income groups\n

`;\n let chart = barchart().width(350).height(400); //.width(420)\n \n d3.select(div)\n\t.selectAll(\"svg\")\n\t.data(selected_indicator_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":2650,"value":"quintiles_swatches = Swatches(d3.scaleOrdinal(quintiles, ['#d3d3d3'].concat(sequential_colors_quintile))) //['#d3d3d3', '#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2589,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4314,"value":"barcharts_3 = {\n let div = html`

The poorest quintile in both low-income and high-income countries has the lowest rates of Pap smear procedures done
\n Pap smear in last 5 years (% of females 30-49)\n

`;\n let chart = barchart_3().width(350).height(400); // width(420)\n \n d3.select(div)\n\t.selectAll(\"svg\")\n\t.data(selected_indicator_grouped_papsmear)\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":4338,"value":"quintiles_swatches_3 = Swatches(d3.scaleOrdinal(quintiles, ['#d3d3d3'].concat(sequential_colors_quintile)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4324,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2984,"value":"barcharts_2 = {\n let div = html`

In low-income countries, it is the rich who are more likely to be admitted to hospital, while in high-income countries it is the poor
\n Inpatient care use in last 12 months (% of population 18+)\n

`;\n let chart = barchart_2().width(350).height(400); // width(420)\n \n d3.select(div)\n\t.selectAll(\"svg\")\n\t.data(selected_indicator_grouped_inpatient)\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":3007,"value":"quintiles_swatches_2 = Swatches(d3.scaleOrdinal(quintiles, ['#d3d3d3'].concat(sequential_colors_quintile)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2997,"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":3160,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3913,"value":"stacked_barchart = StackedBarChart(service_coverage, {\n x: d => d.category,\n y: d => d.value,\n z: d => d.key,\n xDomain: income_groups,\n yLabel: \"Value (%)\",\n zDomain: main_services_shortened,\n colors: d3.schemePastel1,\n width: 550,\n height: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3995,"value":"stacked_barchart_swatches = Swatches(stacked_barchart.scales.color, {title: \"Health indicator\", columns: \"150px\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3926,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4152,"value":"radar_title = html`How countries fare on the 8 selected health service coverages`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3090,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3189,"value":"income_swatches = Swatches(d3.scaleOrdinal(income_groups, d3.schemeYlGnBu[income_groups.length]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3378,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3154,"value":"## Idiom iterations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3119,"value":"viewof radarIncomeSelect = Inputs.select(income_groups, {label: \"Income group:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3397,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3569,"value":"service_swatches = Swatches(color, {title: \"Service Coverage\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3394,"value":"arcs = d3\n .pie()\n .padAngle(0.01)\n .value(d => 1)(service_coverage_old)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3400,"value":"radius = Math.min(width / 2, height / 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3401,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3406,"value":"color = d3.scaleOrdinal(d3.schemePastel1).domain(main_services_shortened)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3412,"value":"r = d3\n .scaleSqrt()\n .domain([0, d3.max(arcs, d => d.data[1])])\n .range([0, radius])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3410,"value":"arc = d3\n .arc()\n .innerRadius(0)\n .outerRadius(d => r(d.data[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3545,"value":"d3.range(...r.domain(), radius / 8)","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":1766,"value":"## Data Abstraction\n\n* Data source: [World Bank HEFPI](https://datacatalog.worldbank.org/search/dataset/0038633) and [World Bank Income Groups](https://datahelpdesk.worldbank.org/knowledgebase/articles/906519-world-bank-country-and-lending-groups) (joined)\n* Dataset type: Table - Static\n\nHEFPI and Income Groups tables were joined in order to map countries to classified income groups.\n\n**Attributes**\n\n* **region**:\n * Type: Categorical\n \n* **income_group**:\n * Type: Ordered - Ordinal\n * Orientation: Sequential\n\n* **country**:\n * Type: Categorical\n \n* **indicator**:\n * Type: Categorical\n \n* **quintile** (derived): Q1 (lowest) - Q5 (richest) -> extracted from original indicator names \n * Type: Ordered - Ordinal\n * Orientation: Sequential\n \n* **latest_year** (derived):\n * Type: Ordered - Ordinal\n * Orientation: Sequential\n \n* **value** (derived):\n * Type: Ordered - Quantitative\n * Orientation: Sequential\n \n* **average_value** (derived):\n * Type: Ordered - Quantitative\n * Orientation: Sequential","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4299,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4300,"value":"{\n data_availability;\n var divElement = document.getElementById('viz1651734521721'); var vizElement = divElement.getElementsByTagName('object')[0]; if ( divElement.offsetWidth > 800 ) { vizElement.style.width='800px';vizElement.style.height='1027px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='800px';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":2366,"value":"**[Data cleaning on Google Colab](https://colab.research.google.com/drive/1bDEZHbEMhnj1rAsaE32USqDV_Gdtle6j?usp=sharing)**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2435,"value":"health_indicators = Array.from(new Set(data_hefpi.map(d => d[\"Indicator Name\"])))\n .filter(ind => !ind.includes(\"Q1\") && !ind.includes('Q2') && !ind.includes('Q3') && !ind.includes('Q4') && !ind.includes('Q5') && !ind == \"\")\n .sort((a, b) => (a > b) ? 1 : -1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4333,"value":"selected_indicator_scale_papsmear = Array.from(new Set(selected_indicator_grouped_papsmear.flat().map(d => d.average_value)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4316,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2994,"value":"selected_indicator_scale_inpatient = Array.from(new Set(selected_indicator_grouped_inpatient.flat().map(d => d.average_value)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2990,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2772,"value":"selected_indicator_scale = Array.from(new Set(selected_indicator_grouped.flat().map(d => d.average_value)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2516,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3075,"value":"main_services = [\"Pregnant women receiving prenatal care of at least four visits (% of pregnant women)\",\n \"Immunization, full (% of children ages 15-23 months)\",\n \"Mammography in last 2 years, (% of females 50-69)\",\n \"Pap smear in last 5 years (% of females 30-49)\",\n \"Births attended by skilled health staff (% of total)\",\n \"Acute respiratory infections treated (% of children under 5 with cough and rapid breathing)\",\n \"Diarrhea treatment (% of children under 5 who received ORS)\",\n \"Inpatient care use in last 12 months (% of population 18+)\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3674,"value":"main_services_shortened = [\"Antenatal care\", \"Full immunization\", \"Mammography\", \"Pap smear\", \"Skilled births\", \"ARI treament\", \"Diarrhea treatment\", \"Inpatient care use\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3383,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3064,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3276,"value":"services_order = [\"Inpatient care use\", \"Mammography\", \"Pap smear\", \"Antenatal care\", \"Full immunization\", \"Skilled births\", \"ARI treament\", \"Diarrhea treatment\" ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3198,"value":"income_groups = [\"Low income\", \"Lower middle income\", \"Upper middle income\", \"High income\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"quintiles = [\"All\", \"Q1 (poorest)\", \"Q2\", \"Q3\", \"Q4\", \"Q5 (richest)\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2345,"value":"Inputs.table(data_hefpi)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2339,"value":"data_hefpi = FileAttachment(\"hefpi_cleaned@4.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":2464,"value":"import {select} from \"@jashkenas/inputs\"","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":2646,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","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":3095,"value":"embed = require(\"vega-embed@6\")","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":3294,"value":"sequential_colors_quintile = ['#f8f3c5', '#ece6b6', '#dad39d', '#bdb77a', '#999359']","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"}],"files":"$W42","stdlib":"1","titling":"auto"}} 34:"$33:body"