31:T799,md`This is an interactive notebook version of one [central visualisation](https://ourworldindata.org/poverty-minimum-growth-needed#most-people-in-the-world-live-in-countries-in-which-more-than-80-live-on-less-than-30-per-day) of the excellent article [How much economic growth is necessary to reduce global poverty substantially?](https://ourworldindata.org/poverty-minimum-growth-needed) by Max Roser at [Our World in Data](https://ourworldindata.org/). In the article, the visualisation is presented as an image, calculated at a poverty threshold of 30 USD. I wanted to see what the same visualisation would look like for different thresholds or years. This notebook is my attempt at doing so in an interactive way. Below you can set the **poverty threshold in US dollars** (normalized to 2011 USD at PPP) and the year to retrieve the data for. The chart shows all countries as bars with the width proportional to the population size and the **height of the red bars showing the percentage of the population living below the given poverty threshold**. You can then hover over the bars below to see the name of the country and the precise percentage of the population below the currently selected poverty line. The X axis is sized to the size of the population for each country. The data is retrieved live from the great [PovCalNet](http://iresearch.worldbank.org/PovcalNet/home.aspx) project by the World Bank. If you have questions about the data please refer to Max Rosers original post or the PovCalNet website, especially the [User guide](http://iresearch.worldbank.org/PovcalNet/docs/introduction_to_povcalnet.pdf) This is my first D3 visualisation and work in progress. If you have any suggestions for improvements please let me know on [twitter](https://twitter.com/danyx23) or via [other means](https://danielbachler.de/about.html). After changing the sliders below clicke the recalculate button to fetch new data from the API. `32:T19e1,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // Prepare the info box that shows the country level details const infoBox = html`

Hover over a box to see details for this country

`; // This function renders the content of the info box given a datum const renderInfoBox = datum => { return `

Above poverty line: ${( 100 - datum.HeadCount * 100 ).toFixed(1)}%
Below poverty line: ${( datum.HeadCount * 100 ).toFixed(1)}%
Population (in Million): ${datum.ReqYearPopulation.toFixed(1)}

`; }; const globalBox = html`

of the world population lived
on less than ${povertyThresholdInput} USD/day in ${yearInput}

`; const legendBox = colorCodeContinents ? (html`

Color legend

Asia
Africa
Europe
North America
South America
Oceania

`) : html`` // This d3 call chain constructs the below poverty threshold rectangles const belowRects = svg .append("g") .selectAll("rect.belowThreshold") // select all existing rects with the belowThreshold class (initially none) .data(processedData) // join the data so we have the association between svg rects and data rows .join("rect") // join the data points and rects .attr("class", d => "belowThreshold country-" + d.CountryCode + (d.continent && colorCodeContinents ? " continent-" + d.continent.replace(" ", "-") : "")) // add the belowThreshold class so we can easily select just those rects .attr("x", d => x(d.PopulationCumSum)) .attr("y", d => y(d.HeadCount)) .attr("height", d => y(0) - y(d.HeadCount)) .attr("width", d => x(d.ReqYearPopulation) - x(0)) .on("mouseover", function(d) { // Get the data associated with this rect and update the infobox const element = d3.select(this); const datum = element.datum(); const classes = element.attr("class").split(" "); const countryClass = classes.find(item => item.startsWith("country-")); console.log("Country class", countryClass); const countryElements = d3.selectAll("." + countryClass); console.log("Selected countries: ", countryElements); // Change the fill by getting the current one and making it brighter countryElements.classed("highlighted", true); infoBox.innerHTML = renderInfoBox(datum); }) .on("mouseout", function(d, i) { const element = d3.select(this); const datum = element.datum(); const classes = element.attr("class").split(" "); const countryClass = classes.find(item => item.startsWith("country-")); const countryElements = d3.selectAll("." + countryClass); countryElements.classed("highlighted", false); }); // This d3 call chain constructs the below poverty threshold rectangles const aboveRects = svg .append("g") .selectAll("rect.aboveThreshold") // select all existing rects with the aboveThreshold class (initially none) .data(processedData) // join the data so we have the association between svg rects and data rows .join("rect") // join the data points and rects .attr("class", d => "aboveThreshold country-" + d.CountryCode + (d.continent && colorCodeContinents ? " continent-" + d.continent.replace(" ", "-") : "")) // add the belowThreshold class so we can easily select just those rects .attr("x", d => x(d.PopulationCumSum)) .attr("y", d => margin.top) .attr("height", d => y(d.HeadCount) - margin.top) .attr("width", d => x(d.ReqYearPopulation) - x(0)) .on("mouseover", function(d) { // Get the data associated with this rect and update the infobox const element = d3.select(this); const datum = element.datum(); const classes = element.attr("class").split(" "); const countryClass = classes.find(item => item.startsWith("country-")); console.log("Country class", countryClass); const countryElements = d3.selectAll("." + countryClass); console.log("Selected countries: ", countryElements); // Change the fill by getting the current one and making it brighter countryElements.classed("highlighted", true); infoBox.innerHTML = renderInfoBox(datum); }) .on("mouseout", function(d, i) { const element = d3.select(this); const datum = element.datum(); const classes = element.attr("class").split(" "); const countryClass = classes.find(item => item.startsWith("country-")); const countryElements = d3.selectAll("." + countryClass); countryElements.classed("highlighted", false); }); // Add the x axis ticks svg.append("g").call(xAxis); // Add the x axis label svg .append('text') .attr('x', (width - margin.right - margin.left) / 2 + margin.left) .attr('y', height - 5) .attr('text-anchor', 'middle') .style('font-family', 'sans-serif') .text("Population size (in million)"); // Add y-axis label // Add the y axis ticks svg.append("g").call(yAxis); // Add the y axis label svg .append('text') .attr('text-anchor', 'middle') .attr( 'transform', 'translate(15,' + ((height - margin.bottom - margin.top) / 2 + margin.top) + ')rotate(-90)' ) .style('font-family', 'sans-serif') .text(`% of Population on less than ${povertyThreshold} USD`); // return a new html literal that creates a div with relative positioning so we can do an // absolute positioning of the infoBox relative to it and then inside the svg that // d3 built for us and the infoBox return html`

${svg.node()} ${legendBox} ${globalBox} ${infoBox}

`; }33:T88b,html``34:[] 2f:{"title":"Share of population in each country living on less than X USD per day","cells":[{"id":0,"value":"md`# Share of population in each country living on less than X USD per day`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"viewof povertyThresholdInput = Range([1, 50], {value: 30, step: 1, label: \"Poverty Threshold in USD\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`A threshold of ${povertyThreshold}$ a day equals ${povertyThreshold * 30}$ a month or ${povertyThreshold * 365}$ a year`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"viewof yearInput = Range([1981, 2017], {value: 2015, step: 1, label: \"Year to calculate poverty data for\"}) // The world bank has data until 2019 but the last two years of data are incomplete so to avoid user confusion I only allow selections until 2017","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"// The button has an onclick handler that mutates the target. Since\n// in this case the target is an array we make a copy, add the current newItemInput \n// value and set the items array to the new value\nupdate = {\n const button = html``;\n button.onclick = () => {\n mutable year = yearInput\n mutable povertyThreshold = povertyThresholdInput\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"viewof colorCodeContinents = Toggle({label: \"Color continents differently\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"viewof visitedStates = Select(processedData.orderby(\"CountryName\").objects(), {\n label: \"Highlight countries\",\n multiple: true,\n format: (d => d.CountryName),\n valueof: (d => d.CountryCode)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"md`# Data view\n\nThis is a primitive tabular view of the currently shown data, sorted by poverty rate descending.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"processedData.view(200)","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"md`# Todo ideas\n\nThese are ideas for improvements that I might want to investigate:\n* More country level info\n* better text layout of info box\n* comparision between two graphs\n* alternative view: horizon plots for countries (tip of hat to Tobias)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`# Code\n\nBelow is the code to retrieve the data and do minor filtering and ordering.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"test = {\n for (let i=1981; i<=2017; i++) {\n let bla = await Promises.delay(3000)\n yield i\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"globalPercentBelowThreshold = processedData.rollup({sum: d => op.sum(d.WeightedPopulationHeadcount)}).get(\"sum\", 0)/summedPopulation\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"mutable year = 2015","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"mutable povertyThreshold = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"belowColor = \"#F0B8B6\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"aboveColor = \"#C2E2ED\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"{\n let clearPreviousSelector = \"\"\n if (visitedStates.length > 0) {\n clearPreviousSelector = \".countryFinder:not(\" + visitedStates.map(item => \".country-\" + item).toString() + \")\"\n d3.selectAll(visitedStates.map(item => \".country-\" + item).toString()).classed(\"countryFinder\", true)\n }\n else {\n clearPreviousSelector = \".countryFinder\"\n }\n d3.selectAll(clearPreviousSelector).classed(\"countryFinder\", false)\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"processedData = \n data\n .filter(d => d.CoverageType === \"N\" || d.CoverageType === \"A\") // China, India and Indonesia have Rural and City level data as well, use only National or Aggregated to avoid double counting\n .lookup(arqueroCountryCodeContinents, [\"CountryCode\", \"iso_code\"], \"continent\")\n .orderby(aq.desc(\"HeadCount\"))\n .derive({WeightedPopulationHeadcount: aq.rolling( d => d.ReqYearPopulation * d.HeadCount)})\n .derive({PopulationCumSum : aq.rolling(d => op.lag(d.ReqYearPopulation, 1, 0)) })\n .derive({PopulationCumSum : aq.rolling(d => op.sum(d.PopulationCumSum)) }) \n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"processedData.objects()[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"all = `PovertyLine=${povertyThreshold}&Countries=all&YearSelected=${year}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"md`This is the URL to retrieve the data for from the PovCalNet API at the World Bank. PovCalNet does not seem to serve CORS headers correctly so I set up a proxy at heroku that solves this problem (many thanks to [Alex Garcia](https://observablehq.com/@asg017) for the [great template](https://observablehq.com/@asg017/cors-anywhere-for-observables for doing so) . If you want to fork this notebook you will have to follow Alex' instructions to set up your own proxy because only my notebooks subdomain is whitelistet there`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"url = `https://povcalnet-cors-proxy.herokuapp.com/http://iresearch.worldbank.org/PovcalNet/PovcalNetAPI.ashx?${all}&display=C&format=csv`","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"md`This is the main Aquero call that fetches the data and parses the CSV data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = aq.fromCSV(await fetch(url).then(res => res.text()), { header: true }) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"summedPopulation = processedData.rollup({ PopulationSum: op.sum('ReqYearPopulation') }).get(\"PopulationSum\", 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"%\"))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"x = d3.scaleLinear()\n .domain([0, 7500])\n .rangeRound([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(processedData.columnArray(\"HeadCount\"))])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"margin = ({top: 100, right: 0, bottom: 40, left: 50})","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"countryFetchArgs = ({\n \"columns\": [\"iso_code\", \"continent\", \"date\"],\n \"condition\": {\n \"and\": [\n {\n \"eq\": [\n {\n \"column\": [\n \"date\"\n ]\n },\n \"2021-03-01\"\n ]\n }\n ]\n },\n \"includeAggregations\": true,\n \"aggregationFilters\": [],\n \"offset\": 0,\n \"limit\": null,\n \"orderBy\":\n []\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"getDataFiltered = function(query) { \n const encodedQuery = JSON.stringify(query)\n let url = new URL(\"https://api.edelweissdata.com/datasets/b55b229d-6338-4e41-a507-0cf4d3297b54/versions/315/data\")\n url.searchParams.append('query', encodedQuery);\n return fetch(url).then(response => response.json()).then(data => data.results.map(row => row.data))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"countryCodeContinents = getDataFiltered(countryFetchArgs)","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"arqueroCountryCodeContinents = aq.from(countryCodeContinents)","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"arqueroCountryCodeContinents.view()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":472,"value":"new Set(arqueroCountryCodeContinents.columnArray(\"continent\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"md`# Imports\n\nDefinition of all the libraries that are used`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"import {Range, Table, Select, Toggle} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"import {debounce} from \"@mbostock/debouncing-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { aq, op, desc } from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}

${datum.CountryName}

${(globalPercentBelowThreshold*100).toFixed(0)}%

Color legend