29:null 2a:["$","title",null,{"children":"Scatterplot | ARussell-23 | Observable"}] 2f:T5c7,# Scatterplot ## Multi-Series with Retinal Variable Controls ### With Anscombe's Quartet! This notebook plots one or more data series on a scatter plot with full control over the retinal variables of each series — color, shape, and fill. It ships with Anscombe's Quartet as sample data — four datasets with nearly identical summary statistics that look completely different when visualized. **Anscombe's Quartet summary statistics (all four datasets):** - Mean x ≈ 9.0, Mean y ≈ 7.5 - Variance x ≈ 11.0, Variance y ≈ 4.12 - Correlation ≈ 0.816 Despite identical statistics, the four datasets have very different structures. Always plot your data. This notebook works with any CSV that follows the structure below — Anscombe is just the sample data. ## How to use this notebook 1. Create your CSV with exactly these three column names: * series — the name of each data series (e.g. "Control", "Treatment A") * x — numeric value for the horizontal axis * y — numeric value for the vertical axis 2. Click the Upload CSV button below and select your file 3. Use the controls to set the number of series, axis labels, and visual encoding per series **Note:** series names in the CSV must exactly match the names entered in the settings cell — including capitalization. Please choose colors that are visually accessible, test your colors against each other for differentiation with the following tool: https://projects.susielu.com/viz-palette30:T21a5,// Creates the scatter plot as a single SVG // plots all active series with individual retinal variable encoding chart = { // ---- STEP 1: FIXED DIMENSIONS ---- const svgWidth = 620; const svgHeight = 560; const marginTop = 50; const marginRight = 40; const marginBottom = 60; const marginLeft = 70; const plotWidth = svgWidth - marginLeft - marginRight; const plotHeight = svgHeight - marginTop - marginBottom; // ---- STEP 2: SCALES ---- // find the range of x and y values across all active series // only include data rows that belong to an active series const activeNames = seriesSettings.map(s => s.name); const activeData = data.filter(d => activeNames.includes(d.series)); // add 10% padding so dots don't touch the edges const xVals = activeData.map(d => d.x); const yVals = activeData.map(d => d.y); const xPad = (d3.max(xVals) - d3.min(xVals)) * 0.1; const yPad = (d3.max(yVals) - d3.min(yVals)) * 0.1; const xMin = d3.min(xVals) - xPad; const xMax = d3.max(xVals) + xPad; const yMin = d3.min(yVals) - yPad; const yMax = d3.max(yVals) + yPad; const x = val => marginLeft + plotWidth * ((val - xMin) / (xMax - xMin)); const y = val => marginTop + plotHeight * (1 - (val - yMin) / (yMax - yMin)); // ---- STEP 3: SHAPE GENERATOR ---- // d3.symbol() generates SVG path strings for different shapes // the size argument controls the area of the shape in square pixels // we multiply dotSize by itself to convert radius-like size to area const symbolSize = chartSettings.dotSize * chartSettings.dotSize * 3; // map shape names to d3 symbol types const shapeMap = { "circle": d3.symbolCircle, "square": d3.symbolSquare, "triangle": d3.symbolTriangle, "diamond": d3.symbolDiamond, "cross": d3.symbolCross }; // ---- STEP 4: CREATE SVG ---- const svg = d3.create("svg") .attr("width", svgWidth) .attr("height", svgHeight) .style("background", "white") .style("font-family", "sans-serif") .style("font-size", "12px"); // ---- STEP 5: DRAW GRID LINES ---- d3.ticks(xMin, xMax, 6).forEach(val => { svg.append("line") .attr("x1", x(val)).attr("x2", x(val)) .attr("y1", marginTop).attr("y2", marginTop + plotHeight) .attr("stroke", "#e0e0e0").attr("stroke-width", 1); }); d3.ticks(yMin, yMax, 6).forEach(val => { svg.append("line") .attr("x1", marginLeft).attr("x2", marginLeft + plotWidth) .attr("y1", y(val)).attr("y2", y(val)) .attr("stroke", "#e0e0e0").attr("stroke-width", 1); }); // ---- STEP 6: DRAW Y AXIS ---- svg.append("line") .attr("x1", marginLeft).attr("y1", marginTop) .attr("x2", marginLeft).attr("y2", marginTop + plotHeight) .attr("stroke", "#333").attr("stroke-width", 1); d3.ticks(yMin, yMax, 6).forEach(val => { svg.append("line") .attr("x1", marginLeft - 5).attr("x2", marginLeft) .attr("y1", y(val)).attr("y2", y(val)) .attr("stroke", "#333").attr("stroke-width", 1); svg.append("text") .attr("x", marginLeft - 8).attr("y", y(val)) .attr("dominant-baseline", "middle") .attr("text-anchor", "end") .attr("fill", "#333") .text(val); }); // rotated y axis label svg.append("text") .attr("transform", `rotate(-90) translate(${-(marginTop + plotHeight / 2)}, ${marginLeft - 45})`) .attr("text-anchor", "middle") .attr("fill", "#333") .attr("font-size", "13px") .text(chartSettings.yLabel); // ---- STEP 7: DRAW X AXIS ---- svg.append("line") .attr("x1", marginLeft).attr("x2", marginLeft + plotWidth) .attr("y1", marginTop + plotHeight).attr("y2", marginTop + plotHeight) .attr("stroke", "#333").attr("stroke-width", 1); d3.ticks(xMin, xMax, 6).forEach(val => { svg.append("line") .attr("x1", x(val)).attr("x2", x(val)) .attr("y1", marginTop + plotHeight).attr("y2", marginTop + plotHeight + 5) .attr("stroke", "#333").attr("stroke-width", 1); svg.append("text") .attr("x", x(val)).attr("y", marginTop + plotHeight + 18) .attr("text-anchor", "middle") .attr("fill", "#333") .text(val); }); svg.append("text") .attr("x", marginLeft + plotWidth / 2) .attr("y", svgHeight - 8) .attr("text-anchor", "middle") .attr("fill", "#333") .attr("font-size", "13px") .text(chartSettings.xLabel); // ---- STEP 8: DRAW TREND LINES ---- // one linear regression line per active series // drawn after dots so they sit on top // slightly transparent so overlapping lines are still readable seriesSettings.forEach(s => { const seriesData = data.filter(d => d.series === s.name); // linear regression using least squares method // finds the line y = slope * x + intercept that best fits the data const n = seriesData.length; const sumX = d3.sum(seriesData, d => d.x); const sumY = d3.sum(seriesData, d => d.y); const sumXY = d3.sum(seriesData, d => d.x * d.y); const sumXX = d3.sum(seriesData, d => d.x * d.x); // slope formula: (n * sumXY - sumX * sumY) / (n * sumXX - sumX^2) const slope = (n * sumXY - sumX * sumY) / (n * sumXX - sumX * sumX); // intercept formula: (sumY - slope * sumX) / n const intercept = (sumY - slope * sumX) / n; // calculate y values at the left and right edges of the plot // this draws the line across the full plot width const x1Val = xMin; const x2Val = xMax; const y1Val = slope * x1Val + intercept; const y2Val = slope * x2Val + intercept; // draw the trend line svg.append("line") .attr("x1", x(x1Val)) .attr("y1", y(y1Val)) .attr("x2", x(x2Val)) .attr("y2", y(y2Val)) .attr("stroke", s.color) .attr("stroke-width", 2) // opacity makes overlapping lines visible through each other .attr("stroke-opacity", 0.5) // change "none" to "6,3" to make line dashed .attr("stroke-dasharray", "none"); }); // ---- STEP 9: DRAW DATA POINTS ---- // loop over each active series // for each series, draw all its data points using the selected retinal variables seriesSettings.forEach(s => { // get all data rows belonging to this series const seriesData = data.filter(d => d.series === s.name); // get the d3 symbol type for this series shape const symbolType = shapeMap[s.shape] || d3.symbolCircle; // create a symbol generator for this series // d3.symbol() returns an SVG path string for the chosen shape and size const symbol = d3.symbol() .type(symbolType) .size(symbolSize); // draw one symbol per data point seriesData.forEach(d => { svg.append("path") // symbol() generates the path string — a shape centered on 0,0 .attr("d", symbol()) // translate moves the shape to the correct x,y position // this is how d3 symbols are positioned — draw at origin then move .attr("transform", `translate(${x(d.x)}, ${y(d.y)})`) // fill controls whether the shape is solid or hollow // if fill is true use the series color, if false use none .attr("fill", s.fill ? s.color : "none") // stroke is always the series color so hollow shapes are still visible .attr("stroke", s.color) .attr("stroke-width", 1.5); }); }); // ---- STEP 10: DRAW LEGEND ---- // one entry per active series showing shape and name const legendX = marginLeft + 10; const legendStartY = marginTop + 15; const legendSpacing = 24; seriesSettings.forEach((s, i) => { const itemY = legendStartY + i * legendSpacing; const symbolType = shapeMap[s.shape] || d3.symbolCircle; // draw the series symbol in the legend const legendSymbol = d3.symbol().type(symbolType).size(60); svg.append("path") .attr("d", legendSymbol()) .attr("transform", `translate(${legendX + 8}, ${itemY})`) .attr("fill", s.fill ? s.color : "none") .attr("stroke", s.color) .attr("stroke-width", 1.5); // series name label svg.append("text") .attr("x", legendX + 20) .attr("y", itemY) .attr("dominant-baseline", "middle") .attr("font-size", "12px") .attr("fill", "#333") .text(s.name); }); // ---- STEP 11: CHART TITLE ---- svg.append("text") .attr("x", marginLeft + plotWidth / 2) .attr("y", marginTop - 20) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "#333") .text(chartSettings.title); // ---- STEP 12: RETURN THE SVG ---- return svg.node(); }31:T572,// ---- ALT TEXT GENERATOR ---- altText = { // build one sentence per series describing its visual encoding and trend const seriesDescriptions = seriesSettings.map(s => { const seriesData = data.filter(d => d.series === s.name); const n = seriesData.length; const sumX = d3.sum(seriesData, d => d.x); const sumY = d3.sum(seriesData, d => d.y); const sumXY = d3.sum(seriesData, d => d.x * d.y); const sumXX = d3.sum(seriesData, d => d.x * d.x); const slope = ((n * sumXY - sumX * sumY) / (n * sumXX - sumX * sumX)).toFixed(2); const intercept = ((sumY - slope * sumX) / n).toFixed(2); return `Series "${s.name}" is shown as ${s.fill ? "filled" : "hollow"} ${s.shape}s with a trend line slope of ${slope} and intercept of ${intercept}.`; }).join(" "); const text = `Scatter plot showing ${seriesCount} data series. The horizontal axis shows ${chartSettings.xLabel} and the vertical axis shows ${chartSettings.yLabel}. Each series uses a distinct color, shape, and fill. Linear trend lines are shown for each series. ${seriesDescriptions}`; return html`

Alt text:

`; }32:[] 2d:{"id":"b752374a5eb9b2ba","slug":null,"title":"Scatterplot","thumbnail":"3b7302fd0dd6ea30f5cbdf78098a02b62be7cb794c23ce922b573860c1038623","access_level":"public","create_time":"$D2026-06-26T19:05:33.834Z","update_time":"$D2026-06-27T03:16:28.743Z","view_time":null,"first_public_time":"$D2026-06-27T03:16:36.916Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e6c86544478da089","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":"starter_2024"},"version":75,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"20e4cf6ac4650492","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":null}],"members":[{"type":"individual","id":"20e4cf6ac4650492","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":null,"role":"editor"},{"type":"team","id":"e6c86544478da089","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Scatterplot","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"// Creates a file upload button\nviewof csvFile = Inputs.file({ label: \"Upload CSV\", accept: \".csv\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"// Creates a variable named 'data' for other cells to reference\n// Reads the uploaded CSV and converts it to a javascript array\ndata = {\n if (csvFile === null) return [];\n const text = await csvFile.text();\n return d3.csvParse(text, d3.autoType);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// Creates a dropdown to select how many series to plot\n// drives how many series controls appear in the settings cell below\nviewof seriesCount = Inputs.select([2, 3, 4], {\n label: \"Number of series\",\n value: 4\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// Series 1 settings\nviewof series0 = Inputs.form({\n name: Inputs.text({ label: \"Name\", value: \"I\" }),\n color: Inputs.color({ label: \"Color\", value: d3.color(d3.interpolateWarm(0.1)).formatHex() }),\n shape: Inputs.select([\"circle\", \"square\", \"triangle\", \"diamond\", \"cross\"], { label: \"Shape\", value: \"circle\" }),\n fill: Inputs.toggle({ label: \"Filled\", value: true })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// Series 2 settings\nviewof series1 = Inputs.form({\n name: Inputs.text({ label: \"Name\", value: \"II\" }),\n color: Inputs.color({ label: \"Color\", value: d3.color(d3.interpolateWarm(0.35)).formatHex() }),\n shape: Inputs.select([\"circle\", \"square\", \"triangle\", \"diamond\", \"cross\"], { label: \"Shape\", value: \"square\" }),\n fill: Inputs.toggle({ label: \"Filled\", value: true })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"// Series 3 settings\nviewof series2 = Inputs.form({\n name: Inputs.text({ label: \"Name\", value: \"III\" }),\n color: Inputs.color({ label: \"Color\", value: d3.color(d3.interpolateWarm(0.65)).formatHex() }),\n shape: Inputs.select([\"circle\", \"square\", \"triangle\", \"diamond\", \"cross\"], { label: \"Shape\", value: \"triangle\" }),\n fill: Inputs.toggle({ label: \"Filled\", value: true })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"// Series 4 settings — only used when seriesCount is 4\nviewof series3 = Inputs.form({\n name: Inputs.text({ label: \"Name\", value: \"IV\" }),\n color: Inputs.color({ label: \"Color\", value: d3.color(d3.interpolateWarm(0.9)).formatHex() }),\n shape: Inputs.select([\"circle\", \"square\", \"triangle\", \"diamond\", \"cross\"], { label: \"Shape\", value: \"diamond\" }),\n fill: Inputs.toggle({ label: \"Filled\", value: true })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"// Global chart settings — applies to the whole chart\nviewof chartSettings = Inputs.form({\n\n // chart title\n title: Inputs.text({ label: \"Chart title\", value: \"Anscombe's Quartet\" }),\n\n // x axis label\n xLabel: Inputs.text({ label: \"X axis label\", value: \"X\" }),\n\n // y axis label\n yLabel: Inputs.text({ label: \"Y axis label\", value: \"Y\" }),\n\n // dot size in pixels — same for all series\n dotSize: Inputs.number({ label: \"Dot size (px)\", value: 7, min: 3, max: 20 })\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// Collects only the active series based on seriesCount\n// series3 is ignored when seriesCount is 2 or 3\nseriesSettings = [series0, series1, series2, series3].slice(0, seriesCount)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"// Creates a download button for the chart\nDOM.download(\n () => new Blob(\n [new XMLSerializer().serializeToString(chart)],\n { type: \"image/svg+xml\" }\n ),\n \"scatter_plot.svg\",\n \"Download chart as SVG\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"// ---- CAPTION GENERATOR ----\ncaption = {\n\n // build a list of active series with their shape encoding\n const seriesList = seriesSettings.map(s =>\n `\"${s.name}\" (${s.fill ? \"filled\" : \"hollow\"} ${s.shape})`\n ).join(\", \");\n\n const boldSentence = `Scatter plot of ${seriesCount} data series — ${seriesList} — with linear trend lines.`;\n\n const regularSentence = `Trend lines are calculated using ordinary least squares linear regression.`;\n\n return html`\n

${boldSentence} ${regularSentence}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"