31:T21fe,connectedScatter = { // Chart dimensions and scaling const [w, h] = [940, 550]; const margin = { left: 60, right: w - 330, top: 15, bottom: h - 40 }; const year = Math.floor(yearMonth); const maxY = Math.min(1300, 130 * maxRatios[year - 1961]); const xSc = d3 .scaleLinear() .domain([0, 130]) .range([margin.left, margin.right]); const yScFixed = d3 .scaleLinear() .domain([0, 1300]) .range([margin.top, margin.bottom]); const yScTemp = d3 .scaleLinear() .domain([0, maxY]) .range([ margin.bottom - (margin.bottom - margin.top) * (maxY / 1300), margin.bottom ]); const fillColour = d3 .scaleLinear() .domain([4, 12]) .range(["#fdfffd", "#c0c9c0"]); const drawGuide = (r, ratio, label, fill = false) => { r.push().strokeWidth(0.2); let [x1, y1] = [130, 130 * ratio]; let [x0, y0] = [130, 130 * (ratio - 1)]; if (ratio <= 10) { if (fill) { r.stroke() .fill(fillColour(ratio)) .polygon([ [0, 0], [x0, y0], [x1, y1] ]); } r.stroke("#666") .line([ [0, 0], [x1, y1] ]) .textBaseline("middle") .textAlign("left"); } else { [x1, y1] = [1300 / ratio, 1300]; [x0, y0] = [1300 / (ratio - 1), 1300]; if (fill) { r.stroke() .fill(fillColour(ratio)) .polygon([ [0, 0], [x0, y0], [x1, y1] ]); } r.stroke("#202020") .line([ [0, 0], [x1, y1] ]) .textBaseline("bottom") .textAlign("middle"); } r.stroke().textSize(12).fill("#666"); if (label) { r.text(ratio + "×:", x1 + 1, y1); for (let row = 0; row < label.length; row++) { r.push() .translate(30, row * 18) .text(label[row], x1, y1) .pop(); } } else { r.text(ratio + "×", x1 + 1, y1); } return r.pop(); }; const r = new Renderer(w, h, "svg").flipY().setScales(xSc, yScFixed); // Guides drawGuide(r, 1, ["Equality of income."]); drawGuide( r, 5, [ "Richest 5% of households have 5 times", "more income than the poorest 5%." ], true ); drawGuide(r, 4, ["Richest 4 times more income than poorest."]); for (let ratio = 6; ratio <= maxRatios[year - 1961]; ratio++) { drawGuide(r, ratio, null, true); } r.stroke("").fill("white").ellipse(0, 0, 1.5, 15); // Data const numYears = year - 1960; const numMonths = yearMonth * 12 - 1961 * 12; const bottom5pc = dataTbl.array("5pcIncome"); const top5pc = dataTbl.array("95pcIncome"); const allPts = map2(bottom5pc, top5pc, (x, y) => [x, y]); const pts = allPts.slice(0, numYears); const allSmoothPts = bezierLineCoords(allPts, { nPerVertex: 12 }); const smoothPts = allSmoothPts.slice(0, numMonths); const party = dataTbl.array("Party"); const pm = dataTbl.array("PrimeMinister"); r.push().fill(); let start = 0; for (let y = 1961; y <= year; y++) { const partyColour = party[y - 1961] === "Labour" ? "firebrick" : "steelBlue"; // Line to current year r.stroke(partyColour) .strokeWidth(2.5) .line(smoothPts.slice(start, start + 13)) // .strokeWidth(15) .points([pts[y - 1961]]); // Highlight latest value const latest = smoothPts.length == 0 ? allSmoothPts[0] : smoothPts[smoothPts.length - 1]; r.strokeWidth(8) .stroke("black") .points([latest]) .strokeWidth(6) .stroke(partyColour) .points([latest]); start += 12; } r.pop(); // Axes r.stroke("grey") .fill("grey") .axisBottom( xSc, yScTemp, null, null, "Poorest 5% (inflation-adjusted £ income per week)" ) .axisLeft(xSc, yScTemp, null, null, "Richest 5% (£ income per week)"); // Titles and annotation let offset = 310; if (year >= 2005) { offset = 40; } else if (year >= 1991) { offset = 170; } else if (year >= 1989) { offset = 300; } r.push() .textSize(60) .stroke() .fill("#c0c9c0") .textAlign("left") .textBaseline("top") .text( year + "-" + String((year + 1) % 100).padStart(2, "0"), 5, maxY + offset ) .textSize(18) .fill(party[year - 1961] === "Labour" ? "firebrick" : "steelBlue") .text("Prime Minister: " + pm[year - 1961], 5, maxY + offset - 180) .textSize(14) .text(party[year - 1961], 5, maxY + offset - 250); r.textSize(12).fill("black"); const leftMargin = -14; const topMargin = 1330; const lineSpacing = 69; if (year === 1961) { r.text( "In 1961, under Conservative Prime Minister Harold McMillan, the richest 3 milllion", leftMargin, topMargin ) .text( "people have a weekly income around 5 times that of the poorest 3 million.", leftMargin, topMargin - 1 * lineSpacing ) .text( "The blue dot shows that the poorest 5% of households receive an income averaging", leftMargin, topMargin - 2 * lineSpacing ) .text( "around £70 per week (inflation adjusted) while the richest 5% receive around", leftMargin, topMargin - 3 * lineSpacing ) .text( "£350 per week after housing costs are taken into account.", leftMargin, topMargin - 4 * lineSpacing ); } else if (year < 1980) { r.text( "During the 1960s, income of both the richest and poorest tend to increase, but the", leftMargin, topMargin ).text( "ratio between their incomes is reasonably stable between 4 and 5.", leftMargin, topMargin - 1 * lineSpacing ); if (year >= 1970) { r.text( "Throughout the 1970s, which sees the economic shock of the oil crisis, several", leftMargin, topMargin - 2.5 * lineSpacing ).text( "changes in government and significant inflation, income inequality is broadly static.", leftMargin, topMargin - 3.5 * lineSpacing ); } } else if (year < 1987) { r.text( "In the early years of the Thatcher government monetarism leads to a rise in unemployment,", leftMargin, topMargin ).text( "but this doesn't yet show in national income distributions.", leftMargin, topMargin - 1 * lineSpacing ); } if (year >= 1984 && year <= 1993) { r.text( "Sustained unemployment, reduction in top-rate income tax", 5, maxY + offset - 350 ) .text( "and increases in indirect taxation accelerate", 5, maxY + offset - 350 - lineSpacing ) .text("income inequality.", 5, maxY + offset - 350 - 2 * lineSpacing); } if (year >= 1997 && year <= 2003) { r.text( "New minimum wage and tax credits help to boost", 5, maxY + offset - 350 ) .text( "poorest incomes but have little effect on", 5, maxY + offset - 350 - lineSpacing ) .text( "overall inequality as incomes of", 5, maxY + offset - 350 - 2 * lineSpacing ) .text("richest also increase.", 5, maxY + offset - 350 - 3 * lineSpacing); } if (year >= 2004 && year <= 2010) { r.text( "Income falls for the poorest but continues", 5, maxY + offset - 350 ).text( "to be buoyant for the very richest.", 5, maxY + offset - 350 - lineSpacing ); } if (year >= 2008 && year <= 2010) { r.text( "Financial crash of 2008 ushers", 5, maxY + offset - 350 - 2.5 * lineSpacing ).text( "austerity in public services.", 5, maxY + offset - 350 - 3.5 * lineSpacing ); } if (year >= 2011 && year <= 2019) { r.text( "Austerity in public services and wage", 5, maxY + offset - 350 ).text("stagnation.", 5, maxY + offset - 350 - lineSpacing); } if (year >= 2020) { r.text("Covid pandemic.", 5, maxY + offset - 350) .text( "Large government intervention via", 5, maxY + offset - 350 - 1.5 * lineSpacing ) .text( "furlough support temporarily", 5, maxY + offset - 350 - 2.5 * lineSpacing ) .text( "cushons impact largely on", 5, maxY + offset - 350 - 3.5 * lineSpacing ) .text("lower half of income", 5, maxY + offset - 350 - 4.5 * lineSpacing) .text("distribution.", 5, maxY + offset - 350 - 5.5 * lineSpacing); } r.pop(); return r.render(); }32:T49d,Plot.plot({ height: 360, insetRight: 100, x: { tickFormat: "d" }, y: { label: "% change in inflation-adjusted weekly income since 1960" }, marks: [ Plot.line(data, { x: "year", y: (d) => d.poorIncome / data[0].poorIncome, strokeWidth: 3, stroke: "purple", curve: "catmull-rom" }), Plot.line(data, { x: "year", y: (d) => d.richIncome / data[0].richIncome, strokeWidth: 3, stroke: "orange", curve: "catmull-rom" }), Plot.text( [ { year: 2020, y: data[data.length - 1].poorIncome / data[0].poorIncome, txt: "Poorest 5%" } ], { x: "year", y: "y", text: "txt", textAnchor: "start", dx: 8, fill: "purple", fontSize: 14 } ), Plot.text( [ { year: 2020, y: data[data.length - 1].richIncome / data[0].richIncome, txt: "Richest 5%" } ], { x: "year", y: "y", text: "txt", textAnchor: "start", dx: 8, fill: "orange", fontSize: 14 } ) ] })33:[] 2f:{"title":"Income Inequality in Britain","cells":[{"id":0,"value":"# Income Inequality in Britain","pinned":false,"hidden":false,"mode":"md"},{"id":529,"value":"Consider 6 million people living in Britain. Or more precisely the 3 million people living in households with the lowest weekly income and the 3 million people with the highest weekly income after housing costs. How do the incomes of these two groups of people compare?","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"viewof yearMonth = {\n const month = (y) => {\n const ms = [];\n for (let m = 0; m < 12; m++) {\n ms.push(y + m / 12);\n }\n return ms;\n };\n return Scrubber(dataTbl.array(\"Year\").map(month).flat(), {\n format: (y) => Math.floor(y),\n autoplay: false,\n loop: false,\n delay: 80\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"## Design Note\n\nDoes this form of visual representation make sense? It is a form of _connected scatterplot_, and Nick Desbarats [makes a strong argument](https://nightingaledvs.com/connected-scatterplots-make-me-feel-dumb/) that they rarely provide inisght you couldn't gather more effectively with a separate pair of line charts.\n\nHere are the same data as a pair of stacked line charts:","pinned":false,"hidden":false,"mode":"md"},{"id":923,"value":"Plot.plot({\n height: 360,\n x: { tickFormat: \"d\" },\n y: { label: \"Poorest 5% (inflation-adjusted £ income per week)\" },\n color: {\n domain: [\"Conservative\", \"Labour\", \"Con-LD Coalition\"],\n range: [\"steelblue\", \"firebrick\", \"steelblue\"]\n },\n marks: [\n Plot.line(data, {\n x: \"year\",\n y: \"poorIncome\",\n stroke: \"party\",\n z: \"run\",\n strokeWidth: 3,\n curve: \"catmull-rom\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"Plot.plot({\n height: 360,\n x: { tickFormat: \"d\" },\n y: { label: \"Richest 5% (inflation-adjusted £ income per week)\" },\n color: {\n domain: [\"Conservative\", \"Labour\", \"Con-LD Coalition\"],\n range: [\"steelblue\", \"firebrick\", \"steelblue\"]\n },\n marks: [\n Plot.line(data, {\n x: \"year\",\n y: \"richIncome\",\n stroke: \"party\",\n z: \"run\",\n strokeWidth: 3,\n curve: \"catmull-rom\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"We see that both the richest and poorest 5% see a general increase in income over time. But is it so obvious that it was the period 1983-1997 which saw the greatest change in inequality between the two groups? Or that the period between 2008-2020 saw a fluctuation in inequality?\n\nPerhaps it would be easier to make the inequality comparison if we produced an indexed chart where we look at the % change for the two groups relative to the 1960 baseline:","pinned":false,"hidden":false,"mode":"md"},{"id":961,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"This presents a clearer picture of the period in which inequality increased and when it was stable or fluctuating. But I'd argue this requires a little more cognitive effort to understand though. We have to compare the gradients of the two lines over time, which themselves are increasingly separated adding a small extra effort. I'd argue the original connected scatterplot provides a more intuitive picture of when inequality increases (trajectory moves towards darker bands) and when it does not (trajectory stays within a band or moves to a lighter one).","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"---\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"import { Renderer, bezierLineCoords } from \"@jwolondon/renderer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"dataTbl = await aq.loadCSV(\n \"https://gicentre.github.io/data/incomeInequality2021.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"dataTbl.view({ height: 120 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"data = {\n const d = dataTbl.array(\"Year\").map((year, i) => ({\n year: year,\n poorIncome: dataTbl.array(\"5pcIncome\")[i],\n richIncome: dataTbl.array(\"95pcIncome\")[i],\n party: dataTbl.array(\"Party\")[i]\n }));\n let run = 1;\n let prevParty = \"Conservative\";\n const numYears = d.length;\n for (let i = 0; i < numYears; i++) {\n if (d[i].party !== prevParty) {\n run++;\n prevParty = d[i].party;\n d.push({ ...d[i - 1], run: run });\n }\n d[i] = { ...d[i], run: run };\n }\n return d.sort((a, b) => a.year - b.year);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"maxRatios = [\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 5,\n 6,\n 6,\n 7,\n 7,\n 8,\n 8,\n 9,\n 9,\n 9,\n 9,\n 9,\n 9,\n 9,\n 9,\n 9,\n 9,\n 9,\n 9,\n 9,\n 9,\n 10,\n 11,\n 11,\n 12,\n 12,\n 12,\n 12,\n 12,\n 12,\n 12,\n 12,\n 12,\n 12,\n 12,\n 12,\n 12\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"### Lens Style Functions","pinned":false,"hidden":false,"mode":"md"},{"id":867,"value":"function general(txt) {\n return md`${txt}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"function design(txt) {\n return md`${txt}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"function analytic(txt) {\n return md`${txt}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"function technical(txt) {\n return md`${txt}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"### Utility Functions","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"function map2(xs, ys, fn) {\n const arr = [];\n for (let i = 0; i < Math.min(xs.length, ys.length); i++) {\n arr.push(fn(xs[i], ys[i]));\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}