2f:Td65,chart = { // Specify the chart’s dimensions. const width = 928; const height = width; const padding = 28; const columns = data.columns.filter(d => typeof data[0][d] === "number"); const size = (width - (columns.length + 1) * padding) / columns.length + padding; // Define the horizontal scales (one for each row). const x = columns.map(c => d3.scaleLinear() .domain(d3.extent(data, d => d[c])) .rangeRound([padding / 2, size - padding / 2])) // Define the companion vertical scales (one for each column). const y = x.map(x => x.copy().range([size - padding / 2, padding / 2])); // Define the color scale. const color = d3.scaleOrdinal() .domain(data.map(d => d.species)) .range(d3.schemeCategory10); // Define the horizontal axis (it will be applied separately for each column). const axisx = d3.axisBottom() .ticks(6) .tickSize(size * columns.length); const xAxis = g => g.selectAll("g").data(x).join("g") .attr("transform", (d, i) => `translate(${i * size},0)`) .each(function(d) { return d3.select(this).call(axisx.scale(d)); }) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#ddd")); // Define the vertical axis (it will be applied separately for each row). const axisy = d3.axisLeft() .ticks(6) .tickSize(-size * columns.length); const yAxis = g => g.selectAll("g").data(y).join("g") .attr("transform", (d, i) => `translate(0,${i * size})`) .each(function(d) { return d3.select(this).call(axisy.scale(d)); }) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#ddd")); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-padding, 0, width, height]); svg.append("style") .text(`circle.hidden { fill: #000; fill-opacity: 1; r: 1px; }`); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const cell = svg.append("g") .selectAll("g") .data(d3.cross(d3.range(columns.length), d3.range(columns.length))) .join("g") .attr("transform", ([i, j]) => `translate(${i * size},${j * size})`); cell.append("rect") .attr("fill", "none") .attr("stroke", "#aaa") .attr("x", padding / 2 + 0.5) .attr("y", padding / 2 + 0.5) .attr("width", size - padding) .attr("height", size - padding); cell.each(function([i, j]) { d3.select(this).selectAll("circle") .data(data.filter(d => !isNaN(d[columns[i]]) && !isNaN(d[columns[j]]))) .join("circle") .attr("cx", d => x[i](d[columns[i]])) .attr("cy", d => y[j](d[columns[j]])); }); const circle = cell.selectAll("circle") .attr("r", 3.5) .attr("fill-opacity", 0.7) .attr("fill", d => color(d.species)); // Ignore this line if you don't need the brushing behavior. cell.call(brush, circle, svg, {padding, size, x, y, columns}); svg.append("g") .style("font", "bold 10px sans-serif") .style("pointer-events", "none") .selectAll("text") .data(columns) .join("text") .attr("transform", (d, i) => `translate(${i * size},${i * size})`) .attr("x", padding) .attr("y", padding) .attr("dy", ".71em") .text(d => d); svg.property("value", []) return Object.assign(svg.node(), {scales: {color}}); }30:T520,function brush(cell, circle, svg, {padding, size, x, y, columns}) { const brush = d3.brush() .extent([[padding / 2, padding / 2], [size - padding / 2, size - padding / 2]]) .on("start", brushstarted) .on("brush", brushed) .on("end", brushended); cell.call(brush); let brushCell; // Clear the previously-active brush, if any. function brushstarted() { if (brushCell !== this) { d3.select(brushCell).call(brush.move, null); brushCell = this; } } // Highlight the selected circles. function brushed({selection}, [i, j]) { let selected = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; circle.classed("hidden", d => x0 > x[i](d[columns[i]]) || x1 < x[i](d[columns[i]]) || y0 > y[j](d[columns[j]]) || y1 < y[j](d[columns[j]])); selected = data.filter( d => x0 < x[i](d[columns[i]]) && x1 > x[i](d[columns[i]]) && y0 < y[j](d[columns[j]]) && y1 > y[j](d[columns[j]])); } svg.property("value", selected).dispatch("input"); } // If the brush is empty, select all circles. function brushended({selection}) { if (selection) return; svg.property("value", []).dispatch("input"); circle.classed("hidden", false); } }31:[{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1742061294096.175,"size":13506}] 2d:{"title":"Brushable scatterplot matrix","cells":[{"id":0,"value":"

Brushable scatterplot matrix

D3 › Gallery

\n\n# Brushable scatterplot matrix\n\nThe [scatterplot matrix](/@d3/splom/2) (SPLOM) shows pairwise correlations for multi-dimensional data; each cell is a scatterplot where *x* encodes the column’s dimension and *y* encodes the row’s dimension. This matrix shows Kristen Gorman’s data on penguins near Palmer Station in Antarctica. The implementation allows brushing to select data points in one cell, and highlight them across all other cells.","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"swatches({color: chart.scales.color})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"selection = Generators.input(chart) // or use viewof selection = chart","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = FileAttachment(\"penguins.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}