2b:["$","title",null,{"children":"Inequality in American cities | D3 | Observable"}] 30:T1094,chart = { const width = 928; const height = 640; const marginTop = 24; const marginRight = 10; const marginBottom = 34; const marginLeft = 40; const arrowId = DOM.uid("arrow"); const gradientIds = data.map(() => DOM.uid("gradient")); const x = d3.scaleLog() .domain(padLog(d3.extent(data.flatMap(d => [d.POP_1980, d.POP_2015])), 0.1)) .rangeRound([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain(padLinear(d3.extent(data.flatMap(d => [d.R90_10_1980, d.R90_10_2015])), 0.1)) .rangeRound([height - marginBottom, marginTop]); function padLinear([x0, x1], k) { const dx = (x1 - x0) * k / 2; return [x0 - dx, x1 + dx]; } function padLog(x, k) { return padLinear(x.map(Math.log), k).map(Math.exp); } 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.id) .attr("markerHeight", 10) .attr("markerWidth", 10) .attr("refX", 5) .attr("refY", 2.5) .attr("orient", "auto") .append("path") .attr("fill", endColor) .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", startColor).attr("stop-opacity", 0.5)) .call(g => g.append("stop").attr("offset", "100%").attr("stop-color", endColor)); 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-family", "sans-serif") .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:[{"id":"39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","href":"https://static.observableusercontent.com/files/39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","name":"metros.csv","type":"text/csv","lastModified":1575392660432.64,"size":15389}] 2e:{"id":"7ee8c541e2bf11af","slug":"inequality-in-american-cities","title":"Inequality in American cities","thumbnail":"8efef00416ea3ce12d350f6863f24c952f6a1ca47bb1280055d18d1d765a6707","access_level":"public","create_time":"$D2019-12-03T17:04:14.124Z","update_time":"$D2023-08-22T11:04:58.947Z","view_time":null,"first_public_time":"$D2019-12-03T18:41:01.256Z","fork":false,"stars":80,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":771,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":64,"collection":{"id":"1b0fbc3b1939d7fa","slug":"gallery","title":"Gallery","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"title":"Inequality in American cities","cells":[{"id":0,"value":"

Inequality in American cities

D3 › Gallery

\n\n# Inequality in American 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","author":"$undefined","summary":"$undefined"},{"id":603,"value":"legend = {\n const arrowId = DOM.uid(\"arrow\");\n const gradientId = DOM.uid(\"gradient\");\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"data = FileAttachment(\"metros.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":750,"value":"endColor = d3.schemeCategory10[3]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":748,"value":"startColor = d3.schemeCategory10[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":686,"value":"function arc(x1, y1, x2, y2) {\n const r = Math.hypot(x1 - x2, y1 - y2) * 2;\n return `M${x1},${y1} A${r},${r} 0,0,1 ${x2},${y2}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body" 2a:E{"digest":"NEXT_REDIRECT;replace;/@d3/inequality-in-american-cities;307;"}