2d:null 2e:["$","title",null,{"children":"Day 9: Historical | Priya | Observable"}] 33:T4a0,html`

Understanding the Charts of Income Inequality

To visualize how wealth is shared across a society, a Lorenz Curve shows the distrubution of wealth in comparison to a Line of Equality . The larger the gap is between these two lines, the more inequally wealth is spread.

The Gini Coefficient simplifies the Lorenz Curve chart into a single number ranging from 0 (perfect equality) to 100 (maximal inequality).

${svg()}

**There are some issues surrounding the Gini Coefficient, which you can read more about here

`34:T2423,function svg() { var svg = d3.create("svg"); // set the dimensions and margins of the graph const margin = { top: 12, right: 0, bottom: 8, left: 60 }, width = 660 - margin.left - margin.right, height = 600 - margin.top - margin.bottom; svg .attr("width", +300 + width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // data const prettyEqual = [ { population: 0, income: 0 }, { population: 10, income: 1 }, { population: 20, income: 5 }, { population: 30, income: 19 }, { population: 40, income: 28 }, { population: 50, income: 39 }, { population: 60, income: 50 }, { population: 70, income: 60 }, { population: 80, income: 74 }, { population: 90, income: 84 }, { population: 100, income: 100 } ]; const veryUnequal = [ { population: 0, income: 0 }, { population: 10, income: 1 }, { population: 20, income: 2 }, { population: 30, income: 4 }, { population: 40, income: 7 }, { population: 50, income: 9 }, { population: 60, income: 13 }, { population: 70, income: 16 }, { population: 80, income: 24 }, { population: 90, income: 55 }, { population: 100, income: 100 } ]; const maximalUnequal = [ { population: 0, income: 0 }, { population: 10, income: 0 }, { population: 20, income: 0 }, { population: 30, income: 0 }, { population: 40, income: 0 }, { population: 50, income: 0 }, { population: 60, income: 0 }, { population: 70, income: 0 }, { population: 80, income: 0 }, { population: 90, income: 0 }, { population: 100, income: 100 } ]; const equalityData = [ { population: 0, income: 0 }, { population: 10, income: 10 }, { population: 20, income: 20 }, { population: 30, income: 30 }, { population: 40, income: 40 }, { population: 50, income: 50 }, { population: 60, income: 60 }, { population: 70, income: 70 }, { population: 80, income: 80 }, { population: 90, income: 90 }, { population: 100, income: 100 } ]; //Read the data d3.csv( "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/connectedscatter.csv", // When reading the csv, I must format variables: (d, i) => { return { date: (i + 1) * 10, value: (i + 1) * 10 }; } ).then( // Now I can use this dataset: function (data) { // Add X axis const x = d3.scaleLinear().domain([0, 100]).range([margin.left, width]); // Add Y axis const y = d3 .scaleLinear() .domain([0, 100]) .range([height - margin.top, margin.top]); svg .append("text") .attr("x", x(35)) .attr("y", y(-5)) .style("font-size", "16px") .style("font-weight", "800") .text("% of population"); const newtext = svg .append("text") .attr("x", x(-5)) .attr("y", y(50)) .style("font-size", "16px") .style("font-weight", "600") .attr("transform", `rotate(-90, ${x(-5)}, ${y(50)})`) .attr("text-anchor", `middle`) .text("cumulative share of income earned"); //add the area of equality svg .append("path") .datum(equalityData) .attr("fill", "#FCDDEC") .attr( "d", d3 .area() .x(function (d) { return x(d.population); }) .y0(y(0)) .y1(function (d) { return y(d.income); }) ); // Add the line of equality svg .append("path") .datum(equalityData) .attr("fill", "none") .attr("stroke", "#F178B6") .attr("stroke-width", 2) .attr( "d", d3 .line() // .curve(d3.curveBasis) // Just add that to have a curve instead of segments .x((d) => x(d.population)) .y((d) => y(d.income)) ); //add the Lorenz Curve const lorenzCurve = svg .append("path") .attr("class", "lorenzcurve") .datum(prettyEqual) .attr("fill", "#D1D1FA") .attr( "d", d3 .area() // .curve(d3.curveBasis) // Just add that to have a curve instead of segments .x(function (d) { return x(d.population); }) .y0(y(0)) .y1(function (d) { return y(d.income); }) ); // Add the Lorenz line const lorenzLine = svg .append("path") .datum(prettyEqual) .attr("fill", "none") .attr("stroke", "#5D5FEF") .attr("stroke-width", 2) .attr( "d", d3 .line() // .curve(d3.curveBasis) // Just add that to have a curve instead of segments .x((d) => x(d.population)) .y((d) => y(d.income)) ); // create a tooltip const Tooltip = d3 .select("#viz-holder") .append("div") .style("opacity", 0) .attr("class", "tooltip") .style("position", "absolute") .style("background-color", "#FAFAFA") .style("border", "solid") .style("border-width", "2px") .style("border-radius", "5px") .style("box-shadow", "4px 4px 4px rgba(0,0,0,.2)") .style("padding", "5px") .style("max-width", "128px"); // Three function that change the tooltip when user hover / move / leave a cell const mouseover = function (event, d) { Tooltip.style("opacity", 1); }; const mousemove = function (event, d) { d3.select(event.target).attr("r", 8); Tooltip.html( "" + d.population + "% of the population controls " + d.income + "% of the income" ) .style("top", `${this.getBBox().y + 300}px`) .style("left", `${event.x}px`); }; const mouseleave = function (event, d) { Tooltip.style("opacity", 0); d3.select(event.target).attr("r", 1); }; // Add the points const dots = svg .append("g") .selectAll("dot") .data(prettyEqual) .join("circle") .attr("class", "myCircle") .attr("cx", (d) => x(d.population)) .attr("cy", (d) => y(d.income)) .attr("r", 1) .attr("opacity", 1) .attr("stroke", "#5D5FEF") .attr("stroke-width", 3) .attr("fill", "white") .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseleave); svg .append("g") .attr("transform", `translate(${0}, ${height - margin.top + 2})`) .call( d3 .axisBottom(x) .tickFormat((interval, i) => { return i % 10 !== 0 ? " " : i * 10; }) .tickSize(-height + 22) ); svg .append("g") .attr("transform", `translate(${margin.left - 0},${0})`) .call( d3 .axisLeft(y) .tickFormat((interval, i) => { return i % 10 !== 0 ? " " : i * 10; }) .tickSize(-width + margin.right + margin.left) ); function update(num) { const transitionTime = 1000; // var u = svg.selectAll("myCircle"); const dataToChange = num === 1 ? equalityData : num === 2 ? prettyEqual : num === 3 ? veryUnequal : maximalUnequal; dots .data(dataToChange) .transition() .duration(transitionTime) .attr("cx", (d) => x(d.population)) .attr("cy", (d) => y(d.income)); lorenzCurve .datum(dataToChange) .transition() .duration(transitionTime) .attr( "d", d3 .area() // .curve(d3.curveBasis) // Just add that to have a curve instead of segments .x(function (d) { return x(d.population); }) .y0(y(0)) .y1(function (d) { return y(d.income); }) ); lorenzLine .datum(dataToChange) .transition() .duration(transitionTime) .attr( "d", d3 .line() // .curve(d3.curveBasis) // Just add that to have a curve instead of segments .x((d) => x(d.population)) .y((d) => y(d.income)) ); } let btn = document.getElementById("equal"); btn.addEventListener("click", () => update(1)); btn = document.getElementById("prettyequal"); btn.addEventListener("click", () => update(2)); btn = document.getElementById("veryunequal"); btn.addEventListener("click", () => update(3)); btn = document.getElementById("maximalunequal"); btn.addEventListener("click", () => update(4)); } ); return html`${svg.node()}`; }35:T601,36:[] 31:{"id":"48f5f117bb75e425","slug":"day-9-historical","title":"Day 9: Historical","thumbnail":"1afa86069e21d4d30387c474ebe47af60ac1ae008607fb40248d069b9430a8e0","access_level":"public","create_time":"$D2022-04-24T19:24:34.352Z","update_time":"$D2022-04-28T18:52:15.130Z","view_time":null,"first_public_time":"$D2022-04-25T06:36:40.579Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"55e4f5b506df3eb3","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":"starter_2024"},"version":741,"publish_version":741,"role":null,"authored":false,"authors":[{"type":"individual","id":"bfd761aeef223349","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":null}],"members":[{"type":"individual","id":"bfd761aeef223349","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9c8233b3741da0d0","slug":"2022-thirty-day-chart-challenge","title":"2022 Thirty Day Chart Challenge","owner":{"id":"55e4f5b506df3eb3","login":"pmisner","name":"Priya"}},"type":"notebook","body":{"title":"Day 9: Historical","cells":[{"id":0,"value":"# Day 9: Historical","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"The goal for this visualization was to explain how to read a Lorenz Curve and how it and the Gini Coefficient serve as a rough measure of income inequality for a population. I ran out of time, but if I were to continue this project I would try to show the Lorenz curve for the USA over the last 100 years (to more effectively tie into to theme) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"Note: I based much of my understanding off of wikipedia articles and other Lorenz Curve graphics. I want to emphasize that this visualization should be used as a **reference** but the exact numbers and wording should be taken with a healthy dose of skepticism. For me, this was more of a platform to practice coding than nailing the concepts 100%","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"