33:T9ab,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 steps = [...new Set(data.map(d => d.year))]; const x = d3.scalePoint() .domain(steps) .range([marginLeft, width - marginRight]) .padding(0.5); const y = d3.scaleLinear() .domain(d3.extent(data.map(d => d.survival))) .range([height - marginBottom, marginTop]); const line = d3.line() .x(d => x(d.year)) .y(d => y(d.survival)); 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;"); // Create the x axis. svg.append("g") .attr("text-anchor", "middle") .selectAll("g") .data(steps) .join("g") .attr("transform", (d) => `translate(${x(d)},20)`) .call(g => g.append("text").text((d) => d)) .call(g => g.append("line").attr("y1", 3).attr("y2", 9).attr("stroke", "currentColor")); // Create a line for each name. svg.append("g") .attr("fill", "none") .attr("stroke", "currentColor") .selectAll("path") .data(d3.group(data, d => d.name)) .join("path") .attr("d", ([, values]) => line(values)); // Create a group of labels for each year. svg.append("g") .selectAll("g") .data(d3.group(data, d => d.year)) .join("g") .attr("transform", ([step]) => `translate(${x(step) + ( step === "20 Year" ? padding : step === "5 Year" ? -padding : 0 )},0)`) .attr("text-anchor", ([step]) => step === "5 Year" ? "end" : step === "20 Year" ? "start" : "middle") .selectAll("text") .data(([step, values]) => d3.zip( values.map( step === "20 Year" ? (d) => `${formatNumber(d.survival)} ${d.name}` : step === "5 Year" ? (d) => `${d.name} ${formatNumber(d.survival)}` : (d) => `${formatNumber(d.survival)}`), dodge(values.map(d => y(d.survival))))) .join("text") .attr("y", ([, y]) => y) .attr("dy", "0.35em") .text(([text]) => text) .attr("fill", "currentColor") .attr("stroke", "white") .attr("stroke-width", 5) .attr("paint-order", "stroke"); return svg.node(); }34:[{"id":"9eae943a4aff55ee78362020f649f8b87d6f20aac5576e06ce8d4af894dd14aaedade6e662c39a20dbef856bd2a288c9c323f68c7b4c376a29fe7221de8dc8d2","href":"https://static.observableusercontent.com/files/9eae943a4aff55ee78362020f649f8b87d6f20aac5576e06ce8d4af894dd14aaedade6e662c39a20dbef856bd2a288c9c323f68c7b4c376a29fe7221de8dc8d2","name":"cancer.csv","type":"text/csv","lastModified":1688221096109.284,"size":2315}] 32:{"title":"Cancer survival rates","cells":[{"id":0,"value":"

Cancer survival rates

D3 › Gallery

\n\n# Cancer survival rates\n\nA [slope chart](/@d3/slope-chart/3), with additional intermediate steps. The values here are survival rate (in percents) for various cancers. 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":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = FileAttachment(\"cancer.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: Cancer survival rates](/@observablehq/plot-cancer-survival-rates) notebook for a similar chart made with [Observable Plot](/plot/)’s concise API.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"}