22:null 23:["$","title",null,{"children":"Slope chart | D3 | Observable"}] 28: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(); }29:[{"id":"1f3a7284ee0057fb10c882c6348cb22a8633a1454de1ab7eec14971c1f212b61d120f213b836b82cf9336d91dbf5a955aa9f5dce81660c4cf42d7661e5b403d3","href":"https://static.observableusercontent.com/files/1f3a7284ee0057fb10c882c6348cb22a8633a1454de1ab7eec14971c1f212b61d120f213b836b82cf9336d91dbf5a955aa9f5dce81660c4cf42d7661e5b403d3","name":"government-receipts-of-gdp.csv","type":"text/csv","lastModified":1688130106763.146,"size":291}] 26:{"id":"4969319cf4b9cd24","slug":"slope-chart/3","title":"Slope chart","thumbnail":"5115ed02fe57397b460bd035c66069159ef3e96f0b8697f116f0c28eca27cbf2","access_level":"public","create_time":"$D2023-06-30T13:01:46.763Z","update_time":"$D2023-08-01T14:28:16.480Z","view_time":null,"first_public_time":"$D2023-07-01T13:08:07.856Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","bio":"Bring your data to life."},"version":243,"publish_version":null,"role":null,"authored":false,"authors":[],"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":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":22,"collection":{"id":"1b0fbc3b1939d7fa","slug":"gallery","title":"Gallery","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"$28","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = FileAttachment(\"government-receipts-of-gdp.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W29","stdlib":"1"}} 27:"$26:body"