2f:T49c,legend = { const arrowId = DOM.uid("arrow"); const gradientId = DOM.uid("gradient"); const startColor = d3.schemeCategory10[2]; const endColor = d3.schemeCategory10[4]; function arc(x1, y1, x2, y2) { const r = Math.hypot(x1 - x2, y1 - y2) * 2; return `M${x1},${y1} A${r},${r} 0,0,1 ${x2},${y2}`; } return svg``; }30:T10bf,chart = { const width = 1300; const height = 640; const marginTop = 24; const marginRight = 40; const marginBottom = 34; const marginLeft = 40; const arrowId = "O-arrow-1"; const gradientIds = data.map(() => DOM.uid("gradient")); const x = d3 .scaleLog() .domain(d3.extent(data.flatMap((d) => [d.POP_1980, d.POP_2015]))) .rangeRound([marginLeft, width - marginRight]); const y = d3 .scaleLinear() .domain(d3.extent(data.flatMap((d) => [d.R90_10_1980, d.R90_10_2015]))) .rangeRound([height - marginBottom, marginTop]); function arc(x1, y1, x2, y2) { const r = Math.hypot(x1 - x2, y1 - y2) * 2; return `M${x1},${y1} A${r},${r} 0,0,1 ${x2},${y2}`; } const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg .append("defs") .append("marker") .attr("id", arrowId) .attr("markerHeight", 10) .attr("markerWidth", 10) .attr("refX", 5) .attr("refY", 2.5) .attr("orient", "auto") .append("path") .attr("fill", d3.schemeCategory10[4]) .attr("d", "M0,0v5l7,-2.5Z"); svg .append("defs") .selectAll() .data(data) .join("linearGradient") .attr("id", (d, i) => gradientIds[i].id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", (d) => x(d.POP_1980)) .attr("x2", (d) => x(d.POP_2015)) .attr("y1", (d) => y(d.R90_10_1980)) .attr("y2", (d) => y(d.R90_10_2015)) .call((g) => g .append("stop") .attr("stop-color", d3.schemeCategory10[2]) .attr("stop-opacity", 0.3) ) .call((g) => g .append("stop") .attr("offset", "100%") .attr("stop-color", d3.schemeCategory10[4]) ); svg .append("g") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.1) .call((g) => g .append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("x1", (d) => 0.5 + x(d)) .attr("x2", (d) => 0.5 + x(d)) .attr("y1", marginTop) .attr("y2", height - marginBottom) ) .call((g) => g .append("g") .selectAll("line") .data(y.ticks()) .join("line") .attr("y1", (d) => 0.5 + y(d)) .attr("y2", (d) => 0.5 + y(d)) .attr("x1", marginLeft) .attr("x2", width - marginRight) ); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80, ".1s")) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", width) .attr("y", marginBottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text("Population →") ); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ Inequality") ); svg .append("g") .attr("fill", "none") .selectAll() .data(data) .join("path") .attr("stroke", (d, i) => gradientIds[i]) .attr("marker-end", arrowId) .attr("d", (d) => arc(x(d.POP_1980), y(d.R90_10_1980), x(d.POP_2015), y(d.R90_10_2015)) ); svg .append("g") .attr("fill", "currentColor") .selectAll() .data(data) .join("circle") .attr("r", 1.75) .attr("cx", (d) => x(d.POP_1980)) .attr("cy", (d) => y(d.R90_10_1980)); svg .append("g") .attr("fill", "currentColor") .attr("text-anchor", "middle") .attr("font-size", 10) .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("stroke-width", 4) .attr("paint-order", "stroke fill") .selectAll() .data(data.filter((d) => d.highlight)) .join("text") .attr("dy", (d) => (d.R90_10_1980 > d.R90_10_2015 ? "1.2em" : "-0.5em")) .attr("x", (d) => x(d.POP_2015)) .attr("y", (d) => y(d.R90_10_2015)) .text((d) => d.nyt_display); return svg.node(); }31:T86e,32:[{"id":"39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","href":"https://static.observableusercontent.com/files/39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","name":"metros.csv","type":"text/csv","lastModified":1722591763775.1,"size":15389},{"id":"3dd1f1af47bc9c6655ff4e1e274cbaa0c9bca7d588d58a659b4083d0bddb7b531f7c7c5a57d8a3a990ce1b30d484c1c3d019d5b5d8ecbe32014dfad41038ab29","href":"https://static.observableusercontent.com/files/3dd1f1af47bc9c6655ff4e1e274cbaa0c9bca7d588d58a659b4083d0bddb7b531f7c7c5a57d8a3a990ce1b30d484c1c3d019d5b5d8ecbe32014dfad41038ab29","name":"data_all2.csv","type":"text/csv","lastModified":1722963007329.238,"size":593781}] 2d:{"title":"INEQUALITY IN US CITIES","cells":[{"id":0,"value":"# INEQUALITY IN US CITIES\n\nBased on a graphic by [Emily Badger and Kevin Quealy](https://www.nytimes.com/2019/12/02/upshot/wealth-poverty-divide-american-cities.html), this chart shows the change from 1980 to 2015 of the ratio of 90th-percentile wages to 10th-percentile wages, along with population, in 195 metro areas. I prefer the static display to [animation](/@mbostock/inequality-in-american-cities/2).","pinned":false,"hidden":false,"mode":"md"},{"id":603,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = FileAttachment(\"metros.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"data2 = FileAttachment(\"data_all2.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"data.map(() => DOM.uid(\"gradient\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"DOM.uid(\"arrow\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"$31","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}