2c:null 2d:["$","title",null,{"children":"Slope Chart | Sam Vickars | Observable"}] 32:T116d,chart = { const svg = d3.select(DOM.svg(w, h)) .style("font", "12px sans-serif"), g = svg.append("g"); g.append("g") .attr("id", "X Axis") .selectAll("text") .data(data.columns) .join("text") .attr("transform", (d, i) => `translate(${x(i)}, 20)`) .style("text-anchor", (d, i) => i === 0 ? "start" : i === n - 1 ? "end" : "middle") .style("fill", stroke) .text(d => d); g.append("g") .attr("id", "Y Axis") .call(yAxis); const dataG = g.append("g").attr("id", "Data"); dataG.append("g") .attr("id", "Middle Data") .selectAll("path") .data(middleData) .join("path") .attr("d", d => line(d.values)) .style("fill", "none") .style("stroke", stroke) .style("stroke-width", strokeWidth) .style("stroke-linecap", "round"); dataG.append("g") .attr("id", "Middle Dots") .selectAll("g") .data(middleData) .join("g") .selectAll("circle") .data(d => d.values) .join("circle") .attr("cx", (d, i) => x(i)) .attr("cy", (d, i) => y(d)) .attr("r", r) .style("fill", stroke); dataG.append("g") .attr("id", "Bottom Data") .selectAll("path") .data(bottomData) .join("path") .attr("d", d => line(d.values)) .style("fill", "none") .style("stroke", bottomColor) .style("stroke-width", strokeWidth) .style("stroke-linecap", "round"); dataG.append("g") .attr("id", "Bottom Dots") .selectAll("g") .data(bottomData) .join("g") .selectAll("circle") .data(d => d.values) .join("circle") .attr("cx", (d, i) => x(i)) .attr("cy", (d, i) => y(d)) .attr("r", r) .style("fill", bottomColor); dataG.append("g") .attr("id", "Top Data") .selectAll("path") .data(topData) .join("path") .attr("d", d => line(d.values)) .style("fill", "none") .style("stroke", topColor) .style("stroke-width", strokeWidth) .style("stroke-linecap", "round"); dataG.append("g") .attr("id", "Top Dots") .selectAll("g") .data(topData) .join("g") .selectAll("circle") .data(d => d.values) .join("circle") .attr("cx", (d, i) => x(i)) .attr("cy", (d, i) => y(d)) .attr("r", r) .style("fill", topColor); dataG.append("g") .attr("id", "Highlighted Data") .selectAll("path") .data(highlightedData) .join("path") .attr("d", d => line(d.values)) .style("fill", "none") .style("stroke", highlightColor) .style("stroke-width", highlightWidth) .style("stroke-linecap", "round"); dataG.append("g") .attr("id", "Highlighted Dots") .selectAll("g") .data(highlightedData) .join("g") .selectAll("circle") .data(d => d.values) .join("circle") .attr("cx", (d, i) => x(i)) .attr("cy", (d, i) => y(d)) .attr("r", highlightR) .style("fill", highlightColor); const labelG = g.append("g").attr("id", "Labels"); labelG.append("g") .attr("id", "Middle Labels") .selectAll("text") .data(middleData) .join("text") .attr("transform", d => `translate(${x(n - 1)}, ${y(d.values[n - 1])})`) .attr("dy", 4) .attr("dx", 8) .style("fill", stroke) .text(d => `${d.name} (${formatDiff(d.values[n - 1], d.values[0])})`); labelG.append("g") .attr("id", "Bottom Labels") .selectAll("text") .data(bottomData) .join("text") .attr("transform", d => `translate(${x(n - 1)}, ${y(d.values[n - 1])})`) .attr("dy", 4) .attr("dx", 8) .style("fill", bottomColor) .text(d => `${d.name} (${formatDiff(d.values[n - 1], d.values[0])})`); labelG.append("g") .attr("id", "Top Labels") .selectAll("text") .data(topData) .join("text") .attr("transform", d => `translate(${x(n - 1)}, ${y(d.values[n - 1])})`) .attr("dy", 4) .attr("dx", 8) .style("fill", topColor) .text(d => `${d.name} (${formatDiff(d.values[n - 1], d.values[0])})`); labelG.append("g") .attr("id", "Highlighted Labels") .selectAll("text") .data(highlightedData) .join("text") .attr("transform", d => `translate(${x(n - 1)}, ${y(d.values[n - 1])})`) .attr("dy", 4) .attr("dx", 8) .style("fill", highlightColor) .style("font-weight", "bold") .text(d => `${d.name} (${formatDiff(d.values[n - 1], d.values[0])})`); return svg.node() }33:[] 30:{"id":"89860bd3e3f17ac1","slug":"slope-chart","title":"Slope Chart","thumbnail":"7329129ac7abe820b87cf20425fbb346d5ef2b513291349ba33d6b5bbbc1cfa8","access_level":"public","create_time":"$D2021-02-26T00:31:56.806Z","update_time":"$D2021-03-16T22:58:34.005Z","view_time":null,"first_public_time":"$D2021-02-26T02:23:57.053Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d96b3dded2417b4f","login":"samvickars","name":"Sam Vickars","avatar_url":"https://avatars-next.observableusercontent.com/2b9cb115a929f81d60e2433bb62545dfcf81b54bb8f2904d816d516cb3f4ce19","tier":"starter_2024"},"version":919,"publish_version":919,"role":null,"authored":false,"authors":[{"type":"individual","id":"35f96ee4a0f826e2","login":"samvickars","name":"Sam Vickars","avatar_url":"https://avatars-next.observableusercontent.com/2b9cb115a929f81d60e2433bb62545dfcf81b54bb8f2904d816d516cb3f4ce19","tier":null}],"members":[{"type":"individual","id":"35f96ee4a0f826e2","login":"samvickars","name":"Sam Vickars","avatar_url":"https://avatars-next.observableusercontent.com/2b9cb115a929f81d60e2433bb62545dfcf81b54bb8f2904d816d516cb3f4ce19","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"b8579aa6a8eb8b77","slug":"charts","title":"Charts","owner":{"id":"d96b3dded2417b4f","login":"samvickars","name":"Sam Vickars"}},"type":"notebook","body":{"titling":"auto","title":"Slope Chart","cells":[{"id":0,"value":"md`# Slope Chart\nBased on [Slope Chart](https://observablehq.com/@d3/slope-chart)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"viewof rawData = csvInput({\n initialUrl: \"https://raw.githubusercontent.com/svickars/sampleData/main/government-receipts-of-gdp.csv\",\n label: \"Import CSV Data\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"viewof highlighted = text({title: \"Highlighted Categories\", value: \"\", description: \"comma separated list, please!\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof w = slider({\n min: 100, \n max: 1000, \n step: 25, \n value: 750,\n title: \"Width\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"viewof rowH = slider({\n min: 4, \n max: 40, \n step: 4, \n value: 12,\n title: \"Row Height\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"viewof stroke = color({title: \"Stroke Colour\", value: \"#aeaeae\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"viewof topN = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 3,\n title: \"Highlight Top N\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"viewof bottomN = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 3,\n title: \"Highlight Bottom N\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"viewof topColor = color({title: \"Top Colour\", value: \"#228b22\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"viewof bottomColor = color({title: \"Bottom Colour\", value: \"#000080\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"viewof highlightColor = color({title: \"Highlight Colour\", value: \"#F2C94C\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"viewof strokeWidth = slider({title: \"Stroke Width\", min:1, max: 8, step: 1, value: 2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"viewof highlightWidth = slider({title: \"Highlight Stroke Width\", min:1, max: 8, step: 1, value: 3})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"viewof r = slider({title: \"Dot Radius\", min:1, max: 8, step: 1, value: 3})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"viewof highlightR = slider({title: \"Highlighted Dot Radius\", min:1, max: 8, step: 1, value: 4})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"DOM.download(await serialize(chart), null, 'Download as SVG')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"data = {\n return Object.assign(rawData.slice(1).map(([name, ...values]) => ({name, values: values.map(x => +x)})), {\n columns: rawData[0].slice(1)})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"formattedData = data.map(d => {\n d.diff = d.values[n - 1] - d.values[0];\n return d;\n}).sort((a, b) => d3.descending(a.diff, b.diff))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"highlightedData = formattedData.filter(d => highlighted.indexOf(d.name) > -1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"topData = formattedData.filter(d => highlighted.indexOf(d.name) < 0).slice(0, topN)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"bottomData = formattedData.filter(d => highlighted.indexOf(d.name) < 0).slice(formattedData.length - bottomN, formattedData.length).sort((a, b) => d3.ascending(a.diff, b.diff))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"middleData = formattedData.filter(d => highlighted.indexOf(d.name) < 0).slice(topN, formattedData.length - bottomN)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"n = data.columns.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"x = d3.scalePoint()\n .domain(d3.range(n))\n .range([margin.left, w - margin.right])\n // .padding(0.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"y = d3.scaleLinear()\n .domain(d3.extent(formattedData.flatMap(d => d.values)))\n .range([h - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"line = d3.line()\n .x((d, i) => x(i))\n .y(y)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\")\n .attr(\"stroke\", \"#ddd\")\n .attr(\"stroke-dasharray\", \"2, 2\")\n .attr(\"x1\", 0 - r)\n .attr(\"x2\", w - margin.right - margin.left)\n )\n .call(g => g.selectAll(\"text\")\n .attr(\"x\", 0 - r)\n .attr(\"y\", -8)\n .attr(\"text-anchor\", \"start\")\n .attr(\"fill\", \"#121212\")\n )\n // .call(g => g.append(\"text\")\n // .attr(\"x\", 100)\n // .attr(\"y\", 100)\n // .attr(\"fill\", \"#ddd\")\n // .attr(\"text-anchor\", \"start\")\n // .text(data.y)\n // )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"h = (d3.max(formattedData.flatMap(d => d.values)) - d3.min(formattedData.flatMap(d => d.values))) * rowH","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"margin = ({top: 32, right: 200, bottom: 16, left: 16})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"function formatDiff(a, b) {\n const diff = a - b;\n return `${diff > 0 ? \"+\" : \"\"}${d3.format(\".3n\")(diff)}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {rasterize,serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import {slider, text, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"function csvInput({initialUrl, init, accept = \".csv\", label = \"\"}) {\n return fileInput({\n initialUrl,\n accept,\n load(url) {\n return fetch(url, init).then(function(response) {\n return response.ok ? response.text() : Promise.reject(response.status);\n }).then(function(text) {\n return d3.csvParseRows(text, d3.autoType);\n });;\n },\n label\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function fileInput({\n initialUrl, // e.g., \"https://example.com/file.txt\"\n accept, // e.g., \".txt,.md\"\n load = value => value, // A function to specify which value is exposed.\n label = \"\"\n}) {\n let file = null;\n const form = html`

${label}\n ${Object.assign(html``, {value: initialUrl})}\n \n ${Object.assign(html``, {accept})}\n`;\n form.onsubmit = event => {\n form.value = load(form.url.value);\n form.dispatchEvent(new CustomEvent(\"input\"));\n event.preventDefault();\n };\n form.url.oninput = event => {\n event.stopPropagation();\n };\n form.file.oninput = () => {\n if (file !== null) URL.revokeObjectURL(file);\n file = URL.createObjectURL(form.file.files[0]);\n form.value = load(form.url.value = file);\n };\n if (initialUrl !== undefined) {\n form.value = load(initialUrl);\n }\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"