31: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(); }32: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); } }33:[] 2f:{"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"},{"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"},{"id":250,"value":"Legend(z, {title: keyz})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"selection","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":34,"value":"y = x.map(x => x.copy().range([size - padding / 2, padding / 2]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"keys = data.columns.slice(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"z = d3.scaleSequential(xScale.get(keyz).domain(), t => d3.interpolateBrBG(1 - t))","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":295,"value":"margin = ({top: 20, right: 10, bottom: 20, left: 10})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":3,"value":"data = cars","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"dataFiltered = data","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"columns = data.columns.filter(d => typeof data[0][d] === \"number\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"size = (width - (columns.length + 1) * padding) / columns.length + padding","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"padding = 28","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}