29:null 2a:["$","title",null,{"children":"Global Poverty | Luca Picci | Observable"}] 2f:T10db,{ const yearsToFilter = getYearList(data.filter(d => d.entity === entity && d.poverty_line === povLine )); const plotData = data.filter(d => d.entity === entity && d.poverty_line === povLine && yearsToFilter.includes(d.year) ) const minYear = d3.min(plotData, d => d.year); const maxYear = d3.max(plotData, d => d.year); const maxPov = d3.max(plotData, d => d.pov_rate); const zoomGap = 0.02*maxPov; //Gap is 2% of the max poverty value const randomData = genRandArray((zoom ? maxPov: 1), zoomGap, minYear, maxYear, 0.01*maxPov, 0.005*maxPov) // get x axis tick lables and positions const values = []; for (let value = 0; value <= 100; value++) { if (value % 20 === 0) { values.push({"x": value/100, "y": minYear -5, "text": `${value}%`}); } } const xAxis = getXAxis(zoom ? maxPov: 1, minYear); var entityLabel = "" if (entity === "World") { entityLabel = "THE WORLD" }else { entityLabel = entity.toUpperCase() } return Plot.plot({ height: 700, width: 600, marginLeft: 100, marginRight: 50, marginBottom: 50, title: htl.html`

POVERTY IN ${entityLabel}

`, caption: htl.html`

Data: World Bank PIP
Inspired by W.E.B Du Bois
Chart by Luca Picci @lpicci96

POVERTY IN ${entityLabel}

`, caption: htl.html`

Data: World Bank PIP
Inspired by W.E.B Du Bois
Chart by Luca Picci @lpicci96

`, style: { fontSize: "13px", fontFamily: "Public Sans, sans-serif", color: "#958475", }, marks: [ //plot the data Plot.rectY([{}], {x1: 0, x2: (maxPov === 0 ? 1: (zoom ? maxPov + zoomGap: 1)), y1: minYear, y2: maxYear, fill: "#111111"}), //#c3213e Plot.areaX(plotData, {y: "year", x: "pov_rate", fill: "#c3213e", //#111111 tip: true, title: d =>`In ${d.year}\napproximately ${(d.pov_rate*100).toFixed(1)}% of the population in ${d.entity == "World" ? "the ": ""}${d.entity} lived on less that $${d.poverty_line} per day.` }), Plot.line(plotData, {x: "pov_rate", y: "year", stroke: "#e2d0be", strokeWidth: 1}), (maxPov === 0 ? [] : (zoom ? [Plot.areaX(randomData, {y: "y", x1: "x1", x2: "x2", fill: "#111111", stroke: "#111111"}), Plot.line(randomData, {y: "y", x: "x1", stroke: "#111111", strokeWidth: 0.5})] : [])), // gridlines Plot.ruleY(yearsToFilter, {x1: 0, x2: (maxPov === 0 ? 1: zoom ? maxPov + zoomGap: 1), stroke: "#e2d0be"}), // value labels on right Plot.textY(plotData, {x: (maxPov === 0 ? -0.15 : (zoom ? 0 - (maxPov + zoomGap)*0.15 : -0.15)), y: "year", text: d => d.year === minYear || d.year === maxYear ? `${(d.pov_rate*100).toFixed(1)}%`: `${(d.pov_rate*100).toFixed(1)}` }), // value label heading Plot.text([{x: (maxPov === 0 ? -0.15 : (zoom ? 0 - (maxPov + zoomGap)*0.15 : -0.15)), y: minYear - 4, text: "PEOPLE"}], {x: "x",y: "y",text: "text"}), Plot.text([{x: (maxPov === 0 ? -0.15 : (zoom ? 0 - (maxPov + zoomGap)*0.15 : -0.15)), y: minYear - 3, text: "LIVING BELOW"}], {x: "x",y: "y",text: "text"}), Plot.text([{x: (maxPov === 0 ? -0.15 : (zoom ? 0 - (maxPov + zoomGap)*0.15 : -0.15)), y: minYear - 2, text: `$${povLine} A DAY`}], {x: "x",y: "y",text: "text"}), // x axis Plot.text(xAxis, {x: "x", y: minYear-1, text: "text"}), Plot.ruleX(xAxis, {x: "x", y1: minYear, y2: minYear - 0.5, stroke: "#958475"}) ], y: { reverse: true, ticks: yearsToFilter, tickFormat: ".0f", tickPadding: 30, tickSize: 0, label: null }, x: { domain: [(maxPov === 0 ? -0.15 : (zoom ? 0 - (maxPov + zoomGap)*0.15 : -0.15)), (maxPov === 0? 1 : zoom ? maxPov + zoomGap: 1)], reverse: true, axis: "top", tickFormat: ".0%", tickSize: 5, label: null, ticks: values } }) }31:T51b,// function for X axis labels function getXAxis(minX, minY) { minX = minX *100 function loopValues(arr, increment, mod) { for (let value = 0; value <= minX; value = value + increment) { if (value % mod === 0) { arr.push({"x": value/100, "y": minY -5, "text": `${value}%`}) } } } const values = []; if (minX >= 40) { loopValues(values, 1, 20); }else if (minX >= 20) { loopValues(values, 1, 10); }else if (minX >= 10) { loopValues(values, 1, 5); }else if (minX >= 5) { loopValues(values, 1, 2); }else if (minX >= 2) { loopValues(values, 1, 1); } else if (minX >= 1) { minX = minX*10 for (let value = 0; value <= minX; value = value + 5) { if (value % 5 === 0) { values.push({"x": value/1000, "y": minY -5, "text": `${value/10}%`}) } } }else if (minX >= 0.5) { minX = minX*10 for (let value = 0; value <= minX; value = value + 1) { if (value % 2 === 0) { values.push({"x": value/1000, "y": minY -5, "text": `${value/10}%`}) } } }else { minX = minX*10 for (let value = 0; value <= minX; value = value + 1) { if (value % 1 === 0) { values.push({"x": value/1000, "y": minY -5, "text": `${value/10}%`}) } } } return values }32:T4d2, Styling for toggle 33:[{"id":"192b7aed7ef52588963832ae77d1c92844b6338eace9a559c13d847ba93b2c78506a83d573afc1ba8d0fbdcc395351d3cc0b17c12417f894111235a11262b0f0","href":"https://static.observableusercontent.com/files/192b7aed7ef52588963832ae77d1c92844b6338eace9a559c13d847ba93b2c78506a83d573afc1ba8d0fbdcc395351d3cc0b17c12417f894111235a11262b0f0","name":"original-plate-12.jpg","type":"image/jpeg","lastModified":1708094983797.593,"size":163995},{"id":"3b4b63896b6fe90b4f39b54a71fd3ce37cf610d576946acb73b91e908d316ff4e61ad2b3cb16bdd473cae4e0a97b7f0b30512f16d3c5112c20198628c88983b6","href":"https://static.observableusercontent.com/files/3b4b63896b6fe90b4f39b54a71fd3ce37cf610d576946acb73b91e908d316ff4e61ad2b3cb16bdd473cae4e0a97b7f0b30512f16d3c5112c20198628c88983b6","name":"data.csv","type":"text/csv","lastModified":1708337289740.131,"size":724741}] 2d:{"id":"38bd95681cf4c0df","slug":null,"title":"Global Poverty","thumbnail":"6820e2cd7d4fd77fb8f73742f80ea032422775c8312d4999aa40315c639dfdb0","access_level":"public","create_time":"$D2024-02-13T14:36:15.149Z","update_time":"$D2024-07-03T21:27:25.602Z","view_time":null,"first_public_time":"$D2024-02-13T14:36:15.149Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6b9e80fc1c575ea7","login":"lucapicci","name":"Luca Picci","avatar_url":"https://avatars-next.observableusercontent.com/28b920a132d1ed0807bf09d347ff062ed53c9ef1139a3f9c49810051cba058f5","tier":"starter_2024"},"version":1390,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"41d521a445df67f0","login":"lpicci96","name":"Luca Picci","avatar_url":"https://avatars-next.observableusercontent.com/ba6585f4cae72924b1dcc452b6fb1923fcec5bcb72959fa7b5f07090711ce6ca","tier":null}],"members":[{"type":"individual","id":"41d521a445df67f0","login":"lpicci96","name":"Luca Picci","avatar_url":"https://avatars-next.observableusercontent.com/ba6585f4cae72924b1dcc452b6fb1923fcec5bcb72959fa7b5f07090711ce6ca","tier":null,"role":"editor"},{"type":"team","id":"6b9e80fc1c575ea7","login":"lucapicci","name":"Luca Picci","avatar_url":"https://avatars-next.observableusercontent.com/28b920a132d1ed0807bf09d347ff062ed53c9ef1139a3f9c49810051cba058f5","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Global Poverty","cells":[{"id":1233,"value":"# Global Poverty","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1213,"value":"Explore in __Duboisian style__ how __poverty has changed in the world__ in recent decades.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1144,"value":"\n\n

\n Select a country/region\n ${viewof entity}\n

\n Select a poverty level ($ 2017 PPP)\n ${viewof povLine}\n

\n\n

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1028,"value":"// code to generate toggle\n\n{\n const container = document.createElement(\"div\");\n container.className = \"container\";\n\n const containerText = document.createElement(\"div\");\n containerText.innerHTML = \"Zoom in\";\n containerText.className = \"container-text\";\n\n \n const toggleContainer = document.createElement(\"div\");\n toggleContainer.className = \"toggle-container\";\n\n const label = document.createElement(\"label\");\n label.className = \"toggle-label\";\n \n const input = document.createElement(\"input\");\n input.type = \"checkbox\";\n input.checked = true;\n input.className = \"zoom-input\";\n // Handle toggle switch change event\n input.addEventListener(\"change\", () => {\n mutable zoom = input.checked;\n });\n\n const span = document.createElement(\"span\");\n span.className = \"slider\";\n\n label.appendChild(input);\n label.appendChild(span);\n toggleContainer.appendChild(label);\n\n\n container.appendChild(containerText);\n container.appendChild(toggleContainer);\n return container\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1086,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1263,"value":"The world has made tremendous progress in reducing the amount of people living in poverty. Only a few decades ago close to half the world's population lived in poverty. By 2019 poverty fell to 1 in 10 people. However, that is still 700 million people living in poverty, and progress has not been equal across all regions and countries, and over time. In W.E.B Du Bois style, this tool lets you explore these inequalities and find out how much more work is needed for the world to be free from poverty.\n\nThis tool was inspired by W.E.B Du Bois' poster \"Slave and Free Negroes\" showcased at the 1900 Paris Exposition (shown below) and the [#DuBoisChallenge2024](https://github.com/ajstarks/dubois-data-portraits/tree/master/challenge). Poverty data is from the [World Bank Poverty and Inequality Platform (PIP)](https://pip.worldbank.org/home). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1269,"value":"**A note on the data**: Values shown are percent of the population living in households with consumption or income per person below different poverty thresholds measured in 2017 international prices. Values are interpolated estimates to allow comparisons over time. The international poverty threshold used on this page is $2.15, in line with the current International Poverty Line used by the World Bank. Additionally, 2 other poverty thresholds are shown - $3.65 and $6.85 - also used by the World Bank.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1275,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":487,"value":"The original W.E.B Du Bois poster","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":481,"value":"{\n // Load the image from the attachment\n const imgSrc = await FileAttachment(\"original-plate-12.jpg\").url();\n \n // Create an HTML snippet that includes the image with custom dimensions\n const htmlContent = html`\n

\n $\"Custom$ \n

\n `;\n \n // Optionally, you can directly set width and height in the style attribute above\n // For example, style=\"width: 200px; height: 150px;\" for fixed dimensions\n \n return htmlContent;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1382,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1380,"value":"## Find below the code to render the chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1370,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1384,"value":"To generate the torn paper effect I use randomness - creating an array of random numbers within a range. For each random number generated, the next random number must fall above or below the previous number within a smaller range than the overall range","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1386,"value":"// function to generate random number array for page break\n\nfunction genRandArray(baseValue, gap, startY, endY, range, fluctuationRange) {\n\n const tornPaperData = [];\n const minValue = baseValue + gap;\n const yIncrement = 0.1;\n \n const maxValue = minValue + range\n \n let previousX = Math.random() * range + minValue; // Initial random number\n\n for (let y = startY; y <= endY; y = y+ yIncrement) {\n let newX = previousX + (Math.random() - 0.5) * 2 * fluctuationRange;\n newX = Math.max(minValue, Math.min(newX, maxValue)); // Ensure newX stays within bounds\n \n tornPaperData.push({ x1: newX, y: y, x2: minValue });\n previousX = newX; // Update previousX for the next iteration\n }\n\n return tornPaperData\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":460,"value":"

\n

Appendix

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":452,"value":"viewof entity = Inputs.select(new Set(data.map(d => d.entity)), {value: \"World\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1163,"value":"viewof povLine = Inputs.select(new Set(data.map(d => d.poverty_line)), {value:\"2.15\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":466,"value":"// display image of original viz\n\nfunction originalPalette() {return FileAttachment(\"original-plate-12.jpg\").image()}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":601,"value":"// read data\n\ndata = FileAttachment(\"data.csv\").csv()\n .then(data => data.map(row => ({\n ...row,\n pov_rate: +row.pov_rate,\n year: +row.year\n })));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":605,"value":"// function to get years for y axis\n\nfunction getYearList(data) {\n\n const maxYear = d3.max(data, d => d.year);\n const minYear = d3.min(data, d => d.year);\n\n const yearList = [] //to fill with years\n\n for (let year = minYear; year <= maxYear; year++) {\n if (year === minYear || year === maxYear) {\n yearList.push(year)\n }else {\n if ((year % 5 === 0) \n && year - minYear >3 \n && maxYear - year >3\n && data.some(d => d.year === year)\n ) {\n yearList.push(year)\n }\n }\n }\n\n return yearList\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":633,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1289,"value":"\nStyling for plot\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1065,"value":"\nStyling for page\n\n\n\n\n\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":956,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":990,"value":"// mutable toggleState = true;\nmutable zoom = true;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1342,"value":"import { showMe } from \"@observablehq/show-me\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"