31:T5b7,splom = { const svg = d3.create("svg") .attr("viewBox", [-padding, 0, w, w]) .style('flex', 1); 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) .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 => z(d.species)); cell.call(brush, circle); 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); return svg.node(); }32:T4ba,function brush(cell, circle) { 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() { console.log("brushstarted", brushCell === this); if (brushCell !== this) { d3.select(brushCell).call(brush.move, null); brushCell = this; } } // Highlight the selected circles. function brushed([i, j]) { if (d3.event.selection === null) return; const [[x0, y0], [x1, y1]] = d3.event.selection; let acc = []; circle.classed("hidden", d => { let outside = x0 > x[i](d[columns[i]]) || x1 < x[i](d[columns[i]]) || y0 > y[j](d[columns[j]]) || y1 < y[j](d[columns[j]]); if(!outside && !(acc.includes(d))){ acc.push(d); } return outside; }); mutable selection = acc; } // If the brush is empty, select all circles. function brushended() { if (d3.event.selection !== null) return; circle.classed("hidden", false); mutable selection = data; } }33:T52a,bars = svg``34:[] 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":258,"value":"dashboard({\n type: 'hbox',\n flex: 1,\n children: [{\n type: 'cell',\n content: 'splom',\n title: 'Correlation among dimensions',\n flex: 2\n },{\n type: 'vbox',\n flex: 1,\n children: [{\n type: 'cell',\n content: 'bars',\n title: 'Selected records counted by species',\n flex: 1\n },{\n type: 'cell',\n content: 'table',\n title: 'Selected records'\n }]\n }]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"viewof table = Table(selection, {\n height: 400,\n columns: ['species', 'sepalLength', 'sepalWidth', 'petalLength', 'petalWidth'],\n format: {\n species: x => html`${x}`,\n sepalLength: x => sparkbar(d3.max(data, d => d.sepalLength), x, oneDecimal),\n sepalWidth: x => sparkbar(d3.max(data, d => d.sepalWidth), x, oneDecimal),\n petalLength: x => sparkbar(d3.max(data, d => d.petalLength), x, oneDecimal),\n petalWidth: x => sparkbar(d3.max(data, d => d.petalWidth), x, oneDecimal)\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"function sparkbar(max, x, format) {\n let w = `${100 * x / max}%`\n return html`\n

\n ${format(x).toLocaleString(\"en\")}\n

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"oneDecimal = d3.format('.1f')","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"'setosa' in sel_by_species","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"bar_x = d3.scaleLinear()\n .domain([0, 50])\n .range([0, 480])","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"sel_by_species = d3.group(selection, d => d.species)","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"species = {\n let index = {}\n let acc = []\n data.forEach(d => {\n let s = d['species']\n if(!(s in index)) {\n index[s] = s\n acc.push(s)\n }\n })\n return acc\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"mutable selection = data","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"x = columns.map(c => d3.scaleLinear()\n .domain(d3.extent(data, d => d[c]))\n .rangeRound([padding / 2, size - padding / 2]))","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":79,"value":"z = d3.scaleOrdinal()\n .domain(data.map(d => d.species))\n .range(d3.schemeDark2)","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 = d3.csv(\"https://gist.githubusercontent.com/mbostock/b038321e2a8177baf9e6a547195da966/raw/6c8eb7f5c644be0394f7fc384e42de9fab41927f/iris.csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"columns = data.columns.filter(d => d !== \"species\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"w = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"size = (w - (columns.length + 1) * padding) / columns.length + padding","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"padding = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"import {dashboard} from '@nitaku/flex-dashboard'","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"d3 = require(\"d3@5\", 'd3-array')","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"import {Table} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}