31:Te03,md`# Country income distribution and global poverty This notebook shows a visualisation of the number of people living in poverty in 105 countries. It was inspired by the great 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/). For the article above I created [an interactive version](https://observablehq.com/@danyx/share-of-population-in-each-country-living-on-less-than-x-usd) of one of the central graphs. After showing this to a few people, [@royalts](https://twitter.com/RoyalTS/) suggested a horizon plot as an alternative visualisation. This is what this notebook attempts. A **word of caution** before I go any further: to the best of my knowledge there is no data source that comes even close to what you would want for a plot like this, which is a global survey that uses the same methodology in every country to take a large sample of the population and get a clean distribution of the income of all people in this country. The best approximate data source that I could easily find was in another, exellent notebook by [Boris Yakubchik](https://income-inequality.info/) that I very much recommend you read. In his article, he used data from Tomas Hellebrandt and Paolo Mauro in [*The Future of Worldwide Income Distribution*](https://www.piie.com/publications/working-papers/future-worldwide-income-distribution) and from *Branko Milanovic*'s [World Income Distribution Dataset](https://www.gc.cuny.edu/Page-Elements/Academics-Research-Centers-Initiatives/Centers-and-Institutes/Stone-Center-on-Socio-Economic-Inequality/Core-Faculty,-Team,-and-Affiliated-LIS-Scholars/Branko-Milanovic/Datasets). This dataset contains income ventiles (quantiles of 5% increments) for 105 countries, representing ${( coveredPopulation / 1000000000 ).toFixed( 1 )} Billion people. The data is for the year 2011 and all currency amounts are USD at Purchase Power Parity. Crucially, the data **excludes the lowest and highest 2.5%** of the population of each country due to the way it was collected. Boris Yakubchik has this note on the data collection that I think captures the essence quite well: > Data collection is challenging in numerous ways, and the process of aggregating and comparing incomes results in final measures that are inexact. Measurements may be collected as income or as consumption; since the graph includes all people on earth, parents' income is split evenly across dependents in a household; data from nearby years may be substituted when a year's data is not available; inflation might inflate or deflate some incomes; etc. For a further discussion and data source information see [data sources and methodology](https://income-inequality.info/more.html). Even though this plot only covers a bit more than half the population of the planet and comes with various shortcomings, I find this a very interesting way to visualize it. Below you can drag a poverty threshold slider that gives you a red marker in the graph below. The X axis is linear by default with a range of 0 to 80.000 USD. For each country an area plot shows you the income ventiles. If you hover over an area you will see an infobox showing you more data. Below the chart you can select from a list of 105 countries - the initial seleciton only includes a few. 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). `32:Tf98,chart3 = { const svg = d3 .select(DOM.svg(width, height)) .style("font", "10px sans-serif"); const infoBox = html`

Hover over an area plot to see details for this country

`; // Function to update the input box (data for new country, mouse position) const updateInfoBox = (datum, mouseX, mouseY) => { return `

Population (in Million): ${( datum.Population / 1000000 ).toFixed(0)}
Below poverty line: approx. ${datum.ppp_2011.filter( ventile => ventile < povertyThreshold ).length * 5}%
Income quantiles:
2.5%: ${datum.ppp_2011[0].toFixed(0)}$
50%: ${datum.ppp_2011[10].toFixed(0)}$
97.5%: ${datum.ppp_2011[19].toFixed(0)}$

`; }; // The main data join that sets up the groups for each country and distributes them on the y axis const g = svg .append("g") .selectAll("g") .data(grouped2) .enter() .append("g") .attr( "transform", (d, i) => `translate(0,${i * (step * (1 - overlap)) + margin.top})` ); // Clip paths for each country. Probably don't neet this anymore, this is from the horizon plot example g.append("clipPath") .attr("id", d => (d.clip = DOM.uid("clip")).id) .append("rect") .attr("width", width) .attr("height", step * heightMultiplier); // Area plots for each country g.append("defs") .append("path") .attr("id", d => (d.path = DOM.uid("path")).id) .attr("d", d => { const heightRatios = calculateHeightRatios(d.ppp_2011); const countryData = _.zipWith( d.ppp_2011, heightRatios, (ppp, heightRatio) => ({ ventileHeight: heightRatio, ppp_2011: ppp }) ); return area(countryData); }); // Partly attribute setting, partly leftover code from the horizon plot that can mirror the plot along the x axis g.append("g") .attr("clip-path", d => d.clip) .selectAll("use") .data(d => Array.from({ length: 1 }, (_, i) => Object.assign({ index: i < 1 ? -i - 1 : i - 1 }, d) ) ) .enter() .append("use") .attr("fill", d => "steelblue") .attr("opacity", 0.8) .attr("stroke", d => "white") .on("mouseover", function(d) { // Get the data associated with this rect and update the infobox const element = d3.select(this); const datum = element.datum(); mutable highlightedCountry = datum.contcod; console.log(d.offsetX, d.offsetY); console.log(element.clientLeft, element.clientTop); infoBox.innerHTML = updateInfoBox(datum, d.offsetX, d.offsetY); }) //.attr("transform", d => `translate(0,${d.index * step})`) .attr("xlink:href", d => d.path.href); // Country name labels g.append("text") .attr("x", 4) .attr("y", step * heightMultiplier) .text(d => d["Country Name"].substring(0, Math.min(d["Country Name"].length, 15)) ); // 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("Per capita income in USD at PPP"); // Add y-axis label // Red poverty line indicator marker svg .append("rect") .datum(povertyThreshold) .attr("class", "marker") .attr("x", d => x(d)) .attr("width", 1) .attr("y", margin.top) .attr("height", height - margin.bottom) .attr("fill", "red"); svg.append("g").call(xAxis); return html`

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

`; }33:T4f4,myTable = { const div = d3.select(html`

d) .enter() .append("td") .attr("class", d => selectedCountries.find(element => element === d.contcod) ? "country-selected" : "country-unselected" ) .text(d => d["Country Name"]) .on("click", d => { console.log("d", d); const item = d3.select(d.target); console.log("item", item); const datum = item.datum(); console.log("datum", datum); if (selectedCountries.find(element => element === datum.contcod)) { mutable selectedCountries = mutable selectedCountries.filter( country => country != datum.contcod ); } else { mutable selectedCountries = [ datum.contcod, ...mutable selectedCountries ]; } }); return div.node(); }34:T8dd,md`# Data sources ### Income ventile data The main data file (attached to this notebook) is data on income ventiles in 2011 for 105 countries as compiled by Boris Yakubchik ([see his github notebooks for details](https://github.com/whyboris/Global-Income-Distribution)). It was compiled from the following original data sources: *figure5data.csv* - manually copied from figure 5 data in the dataset provided by Tomas Hellebrandt and Paolo Mauro in [*The Future of Worldwide Income Distribution*](https://www.piie.com/publications/working-papers/future-worldwide-income-distribution) - found in *Our World In Data* - [Global Economic Inequality](https://ourworldindata.org/global-economic-inequality) *ventile_2011_for_release_LCU.dta* - comes from *Branko Milanovic*'s [World Income Distribution Dataset](https://www.gc.cuny.edu/Page-Elements/Academics-Research-Centers-Initiatives/Centers-and-Institutes/Stone-Center-on-Socio-Economic-Inequality/Core-Faculty,-Team,-and-Affiliated-LIS-Scholars/Branko-Milanovic/Datasets) - found in the excellent [The Haves and the Have-Nots](https://economix.blogs.nytimes.com/2011/01/31/the-haves-and-the-have-nots/) by [Branko Milanovic](https://twitter.com/BrankoMilan) *ppp.csv* - renamed from _API_PA.NUS.PPP_DS2_en_csv_v2_10578402.csv_ - comes from [World Bank](https://data.worldbank.org/indicator/PA.NUS.PPP) - downloaded as CSV - top 3 rows were removed from the original file manually as they did not contain data *iso2_iso3.csv* - renamed from _countries_codes_and_coordinates.csv_ - comes from [tadast](https://gist.github.com/tadast/8827699) on GitHub - dataset to convert ISO2 and ISO3 country codes and names Note: there seems to be an issue with the data for Austria (first few ventiles are much lower than for all other European countries which seems implausible) ### Population data for 2011 The population data is from the world bank via https://datahub.io/core/population#data ## Thank you Thanks a lot to Max Roser and Boris Yakubchik for their work and the publishing of the data, Tobias Schmidt and Timo Zöller for their feedback, Mike Bostokc for D3, this notebook system and the many excellent D3 tutorials and the UW team for creating Arquero, the new JS dataframe library this notebook uses. `35:[{"id":"85783eeb19b74f1ac04acd6b9e9445effee3fef40eead293b688dd6e0cc3193e1d80962ed1bfe5d5bca1df9f5f0fe80f417b9af0314f5070049c18b3371eeeb7","href":"https://static.observableusercontent.com/files/85783eeb19b74f1ac04acd6b9e9445effee3fef40eead293b688dd6e0cc3193e1d80962ed1bfe5d5bca1df9f5f0fe80f417b9af0314f5070049c18b3371eeeb7","name":"wid_countries_x_y.csv","type":"text/csv","lastModified":1616247878205.191,"size":231243},{"id":"e260c08c71a33126ffc3d5510d2f7380897affba1d2445d2c8c9e0df55522381635148ce51e05bb577bebae329040b2ba30812efd1498a073963838872440494","href":"https://static.observableusercontent.com/files/e260c08c71a33126ffc3d5510d2f7380897affba1d2445d2c8c9e0df55522381635148ce51e05bb577bebae329040b2ba30812efd1498a073963838872440494","name":"population_csv.csv","type":"text/csv","lastModified":1616322978955.241,"size":487991}] 2f:{"title":"Country income distribution and global poverty","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"viewof povertyThresholdDay = Range([1, 50], {\n value: 30,\n step: 1,\n label: \"Poverty threshold per day indicator line\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`A poverty treshold of ${povertyThresholdDay} USD per day equals ${povertyThreshold} USD per year`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"viewof heightMultiplier = Range([1, 4], {value: 2, step: 0.25, label: \"Country height slider\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"viewof useLinearScale = Toggle({ label: \"Use a linear scale\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"md`## Click a country below to show/hide`","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`# Source code`","pinned":true,"hidden":false,"mode":"ojs"},{"id":464,"value":"mutable selectedCountries = [\"ALB\", \"BEN\", \"USA\", \"GBR\", \"UKR\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"step = oneCountryChartHeight","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"povertyThreshold = povertyThresholdDay * 365","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"coveredPopulation = grouped2.rollup({ population: r => op.sum(r.Population) }).get(\"population\", 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"overlap = 0.0","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"data = aq.fromCSV(await FileAttachment(\"wid_countries_x_y.csv\").text(), { header: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"mutable highlightedCountry = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"populationData2011 = aq.fromCSV(await FileAttachment(\"population_csv.csv\").text(), { header: true}).filter(row => row.Year == 2011)","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"grouped2 = data\n .groupby(\"contcod\")\n .params({ selectedCountries: selectedCountries })\n .filter((row, $) => op.includes($.selectedCountries, row.contcod))\n .rollup({\n ppp_2011: d => op.array_agg(d.ppp_2011),\n income_mean: d => op.mean(d.ppp_2011)\n })\n .derive({ income_median: d => d.ppp_2011[10] })\n .join_left(populationData2011, [\"contcod\", \"Country Code\"])\n .relocate({ Value: \"Population\" }, { after: \"Year\" })\n .ungroup()\n .orderby(row => row.income_median)","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"grouped2.view(200)","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"countries = data\n .filter(row => row.ventile == 1)\n .select(\"contcod\")\n .join_left(populationData2011, [\"contcod\", \"Country Code\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"countries.view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"belowColor = \"#F0B8B6\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"curve = d3.curveBasis","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"area = d3.area()\n .curve(curve)\n .x(d => x(d.ppp_2011))\n .y0(y(0))\n .y1(d => y(d.ventileHeight))","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"calculateHeightRatios = values => {\n const differences = d3.pairs([0, ...values], (a, b) => b - a)\n const min = d3.min(differences)\n return differences.map(item => min / item)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x)\n .ticks(width / 80, useLinearScale ? null : [5, \"~g\"])\n .tickSizeOuter(0)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"y = d3.scaleLinear()\n .domain([0, 1.0])\n .range([oneCountryChartHeight * heightMultiplier, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"x = (useLinearScale\n ? d3.scaleLinear().domain([0, 80000])\n : d3.scaleLog().domain([d3.min(grouped2.columnArray(\"ppp_2011\")[0]), 80000])\n)\n .nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"oneCountryChartHeight = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"height = margin.top +\n margin.bottom +\n oneCountryChartHeight * grouped2.numRows() +\n oneCountryChartHeight * heightMultiplier","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"margin = ({ top: 20, right: 20, bottom: 40, left: 90 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { aq, op, desc } from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"import {Select, Range, Toggle} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"_ = require(\"lodash\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":509,"value":"html = htl.html","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"htl = require(\"htl@0.2.5/dist/htl.min.js\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}

${datum["Country Name"]}