28:null 29:["$","title",null,{"children":"Slope chart | Catherine Deal's Workspace | Observable"}] 2f:T7bd,chart = { // Specify the chart’s dimensions. const width = 928; const height = 600; const marginTop = 40; const marginRight = 50; const marginBottom = 10; const marginLeft = 50; const padding = 3; // Prepare the positional scales. const x = d3.scalePoint() .domain([0, 1]) .range([marginLeft, width - marginRight]) .padding(0.5); const y = d3.scaleLinear() .domain(d3.extent(data.flatMap(d => [d[1970], d[1979]]))) .range([height - marginBottom, marginTop]); const line = d3.line() .x((d, i) => x(i)) .y(y); const formatNumber = y.tickFormat(100); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // Append the x axis. svg.append("g") .attr("text-anchor", "middle") .selectAll("g") .data([0, 1]) .join("g") .attr("transform", (i) => `translate(${x(i)},20)`) .call(g => g.append("text").text((i) => i ? 1979 : 1970)) .call(g => g.append("line").attr("y1", 3).attr("y2", 9).attr("stroke", "currentColor")); // Create a line for each country. svg.append("g") .attr("fill", "none") .attr("stroke", "currentColor") .selectAll("path") .data(data) .join("path") .attr("d", (d) => line([d[1970], d[1979]])); // Create a group of labels for each year. svg.append("g") .selectAll("g") .data([0, 1]) .join("g") .attr("transform", (i) => `translate(${x(i) + (i ? padding : -padding)},0)`) .attr("text-anchor", (i) => i ? "start" : "end") .selectAll("text") .data((i) => d3.zip( data.map(i ? (d) => `${formatNumber(d[1979])} ${d.country}` : (d) => `${d.country} ${formatNumber(d[1970])}`), dodge(data.map(d => y(d[i ? 1979 : 1970]))))) .join("text") .attr("y", ([, y]) => y) .attr("dy", "0.35em") .text(([text]) => text); return svg.node(); }30:[{"id":"1f3a7284ee0057fb10c882c6348cb22a8633a1454de1ab7eec14971c1f212b61d120f213b836b82cf9336d91dbf5a955aa9f5dce81660c4cf42d7661e5b403d3","href":"https://static.observableusercontent.com/files/1f3a7284ee0057fb10c882c6348cb22a8633a1454de1ab7eec14971c1f212b61d120f213b836b82cf9336d91dbf5a955aa9f5dce81660c4cf42d7661e5b403d3","name":"government-receipts-of-gdp.csv","type":"text/csv","lastModified":1698784409944.914,"size":291}] 2c:{"id":"215d19a34b1cd205","slug":null,"title":"Slope chart","thumbnail":"dcb68a4eeb4baf0cbcd222471fa4c94f9955c14f1e0e452688a5c9bde3cac88f","access_level":"public","create_time":"$D2023-10-31T20:33:29.944Z","update_time":"$D2023-10-31T20:33:29.944Z","view_time":null,"first_public_time":"$D2023-10-31T20:33:29.944Z","fork":{"id":"4969319cf4b9cd24","slug":"slope-chart/3","title":"Slope chart","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f78043483f179305","login":"catherine-deal-ws","name":"Catherine Deal's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/4ec4a3f2b854476d7515e919a7797cce5de900ff54ad61af93e94e1d4bea24c3","tier":"starter_2024"},"version":243,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f2ee2f1935931d21","login":"catherine-deal","name":"Catherine Deal","avatar_url":"https://avatars-next.observableusercontent.com/bf2916f2279ef122e5fe796d142137e4d94f582b39b634b55f4526e7964b4374","tier":null}],"members":[{"type":"individual","id":"f2ee2f1935931d21","login":"catherine-deal","name":"Catherine Deal","avatar_url":"https://avatars-next.observableusercontent.com/bf2916f2279ef122e5fe796d142137e4d94f582b39b634b55f4526e7964b4374","tier":null,"role":"editor"},{"type":"team","id":"f78043483f179305","login":"catherine-deal-ws","name":"Catherine Deal's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/4ec4a3f2b854476d7515e919a7797cce5de900ff54ad61af93e94e1d4bea24c3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Slope chart","cells":[{"id":0,"value":"

Slope chart

D3 › Gallery

\n\n# Slope chart\n\nAlso known as a *slopegraph*, this chart shows change between two (or a few) discrete points in time. An iterative *dodge* method avoids label overlap. The values here are government receipts as a percentage of GDP. Based on [Tufte](https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0003nk).","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = FileAttachment(\"government-receipts-of-gdp.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"function dodge(positions, separation = 10, maxiter = 10, maxerror = 1e-1) {\n positions = Array.from(positions);\n let n = positions.length;\n if (!positions.every(isFinite)) throw new Error(\"invalid position\");\n if (!(n > 1)) return positions;\n let index = d3.range(positions.length);\n for (let iter = 0; iter < maxiter; ++iter) {\n index.sort((i, j) => d3.ascending(positions[i], positions[j]));\n let error = 0;\n for (let i = 1; i < n; ++i) {\n let delta = positions[index[i]] - positions[index[i - 1]];\n if (delta < separation) {\n delta = (separation - delta) / 2;\n error = Math.max(error, delta);\n positions[index[i - 1]] -= delta;\n positions[index[i]] += delta;\n }\n }\n if (error < maxerror) break;\n }\n return positions;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"See the [Plot: Slope chart](/@observablehq/plot-slope-chart) notebook for a similar chart made with [Observable Plot](/plot/)’s concise API.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"