2d:null 2e:["$","title",null,{"children":"Brushable Scatterplot Matrix | Observable | Observable"}] 33:T5d7,viewof selection = { const svg = d3.create("svg") .attr("viewBox", [-padding, 0, width, width]); svg.append("style") .text(`circle.hidden { fill: #aaa; 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(dataFiltered) .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", 2) .attr("fill-opacity", 0.7) .attr("fill", d => z(d[keyz])); cell.call(brush, circle, svg); 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 svg.node(); }34:T500,function brush(cell, circle, svg) { 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); } }35:[] 31:{"id":"a6d9a3cdfea357ff","slug":"brushable-scatterplot-matrix-cars","title":"Brushable Scatterplot Matrix","thumbnail":"74dcba54b17a7bb8e3ecb908bab545fd2060457ac309f664a3fa7d7a73056496","access_level":"public","create_time":"$D2023-06-14T16:38:33.919Z","update_time":"$D2023-06-14T17:49:18.154Z","view_time":null,"first_public_time":"$D2023-06-14T21:22:35.056Z","has_unpublished_edits":null,"fork":{"id":"4710d9b97a7416b3","slug":"brushable-scatterplot-matrix","title":"Brushable scatterplot matrix","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":4,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":348,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce771552211c04ab","login":"rkosara","name":"Robert Kosara","avatar_url":"https://avatars-next.observableusercontent.com/105903f7d3ac285a1489b547eecce8f57bd15052862a307c4c2242f847d44a67","tier":null}],"members":[{"type":"individual","id":"4530d0072aa49b47","login":"erinn","name":"Erinn Wong","avatar_url":"https://avatars-next.observableusercontent.com/9119ac38e4f1c92d50b28822c47306212f06e085b7d1416e851a1c397194e2d4","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Brushable Scatterplot Matrix","cells":[{"id":0,"value":"md`# Brushable Scatterplot Matrix\n\nThis [scatterplot matrix](/@d3/scatterplot-matrix) allows brushing to select data points in one cell, and highlight them across all other cells.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"viewof keyz = {\n const form = html`

${Object.assign(html``, {value: \"weight (lb)\"})} color encoding`;\n form.select.onchange = () => (form.value = form.select.value, form.dispatchEvent(new CustomEvent(\"input\")));\n form.select.onchange();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"Legend(z, {title: keyz})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"selection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"x = columns.map(c => d3.scaleLinear()\n .domain(d3.extent(data, d => d[c])).clamp(true)\n .rangeRound([padding / 2, size - padding / 2])\n .nice(5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"y = x.map(x => x.copy().range([size - padding / 2, padding / 2]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"keys = data.columns.slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"z = d3.scaleSequential(xScale.get(keyz).domain(), t => d3.interpolateBrBG(1 - t))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"xScale = new Map(Array.from(keys, key => [key, d3.scaleLinear(d3.extent(data, d => d[key]), [margin.left, width - margin.right])]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"margin = ({top: 20, right: 10, bottom: 20, left: 10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"xAxis = {\n const axis = d3.axisBottom()\n .ticks(6)\n .tickSize(size * columns.length);\n return g => g.selectAll(\"g\").data(x).join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * size},0)`)\n .each(function(d) { return d3.select(this).call(axis.scale(d)); })\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").attr(\"stroke\", \"#ddd\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"yAxis = {\n const axis = d3.axisLeft()\n .ticks(6)\n .tickSize(-size * columns.length);\n return g => g.selectAll(\"g\").data(y).join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * size})`)\n .each(function(d) { return d3.select(this).call(axis.scale(d)); })\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").attr(\"stroke\", \"#ddd\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = cars","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"dataFiltered = data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"dataFiltered","database":"$undefined"},{"id":6,"value":"columns = data.columns.filter(d => typeof data[0][d] === \"number\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"size = (width - (columns.length + 1) * padding) / columns.length + padding","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"padding = 28","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"