28:null 29:["$","title",null,{"children":"Brushable scatterplot | Gordon Tu | Observable"}] 2e:Tb2d,viewof selection = { const height = 600; const marginTop = 0; const marginRight = 0; const marginBottom = 0; const marginLeft = 0; console.log("rendered"); // Create the scales const x = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d[xVariable])]) .nice() .range([marginLeft, width - marginRight]); const y = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d[yVariable])]) .nice() .range([height - marginBottom, marginTop]); // Set up canvas const canvas = DOM.canvas(width, height); const ctx = canvas.getContext("2d"); canvas.style.display = "block"; canvas.style.maxWidth = "100%"; canvas.style.margin = "auto"; // Add 'brushed' and 'radius' properties to each data point data.forEach((d) => { d.brushed = 0; d.radius = 3; }); // Function to draw all points function drawPoints() { ctx.clearRect(0, 0, width, height); data.forEach((d) => { // ctx.globalCompositeOperation = "multiply"; ctx.globalAlpha = 0.5; ctx.beginPath(); ctx.arc(x(d[xVariable]), y(d[yVariable]), d.radius, 0, 2 * Math.PI); ctx.fillStyle = colorScale(d[colorVariable]); ctx.fill(); }); } // Initial draw drawPoints(); // Set up GSAP ticker to redraw points gsap.ticker.add(drawPoints); // Create the SVG overlay for the brush const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("position", "absolute") .style("top", marginTop + "px") .style("left", marginLeft + "px") .style("width", "100%") .style("height", "100%") .style("pointer-events", "none"); // Append brush to SVG const brush = d3 .brush() .extent([ [marginLeft, marginTop], [width - marginRight, height - marginBottom] ]) .on("start brush end", brushed); svg .append("g") .attr("class", "brush") .style("pointer-events", "all") .call(brush); // Brushed function function brushed(event) { const selection = event.selection; if (selection) { const [[x0, y0], [x1, y1]] = selection; data.forEach((d) => { const isBrushed = x0 <= x(d[xVariable]) && x(d[xVariable]) <= x1 && y0 <= y(d[yVariable]) && y(d[yVariable]) <= y1; if (isBrushed) { } gsap.to(d, { brushed: isBrushed ? 1 : 0, radius: isBrushed ? 6 : 3, // Animate radius between 3 and 6 duration: 0.1, ease: "power2.inOut" }); }); } else { // If brush is cleared, animate all points back to unbrushed state gsap.to(data, { brushed: 0, radius: 3, duration: 3, ease: "power2.inOut" }); } } return htl.html`

${canvas} ${svg.node()}

`; }2f:[{"id":"53c407ee531bab128477148c9e28c49dd06bf83a93ae317e58dbb9fc819db0d4f6c4fb9646fa2fe20faad76addee20cfc360eab2362eeaec3340a5e4655b9996","href":"https://static.observableusercontent.com/files/53c407ee531bab128477148c9e28c49dd06bf83a93ae317e58dbb9fc819db0d4f6c4fb9646fa2fe20faad76addee20cfc360eab2362eeaec3340a5e4655b9996","name":"cars-2.csv","type":"application/octet-stream","lastModified":1725131235800.157,"size":20140},{"id":"c9481f1f03767bad869935517250c042e0ec10ba5fc674926bc22131e5cd89104c2cd1186527330dcc6d4f229de3d1ce7773d1819a413f01dff0ea8bcccbe299","href":"https://static.observableusercontent.com/files/c9481f1f03767bad869935517250c042e0ec10ba5fc674926bc22131e5cd89104c2cd1186527330dcc6d4f229de3d1ce7773d1819a413f01dff0ea8bcccbe299","name":"data.csv","type":"text/csv","lastModified":1725131240192.784,"size":525837}] 2c:{"id":"b07536bdc809315f","slug":null,"title":"Brushable scatterplot","thumbnail":"d87c41ab932a19100fd9fbce1eafbeb95444121fc818fa00f1067073b6a00a0d","access_level":"public","create_time":"$D2024-08-31T19:07:15.800Z","update_time":"$D2024-09-02T03:46:58.968Z","view_time":null,"first_public_time":"$D2024-08-31T19:07:15.800Z","has_unpublished_edits":null,"fork":{"id":"589f9a25112ad1c2","slug":"brushable-scatterplot","title":"Brushable scatterplot","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"95a475743860b9ed","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":"starter_2024"},"version":366,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9589da0a366d19b2","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":null}],"members":[{"type":"individual","id":"9589da0a366d19b2","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":null,"role":"editor"},{"type":"team","id":"95a475743860b9ed","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Brushable scatterplot","cells":[{"id":1,"value":"

Brushable scatterplot

D3 › Gallery

\n\n# Brushable Canvas scatterplot \n\nThis chart shows the inverse relationship between engine power (*y*-axis) and fuel efficiency (*x*-axis) in ${data.length} cars from 1970–1982. Brushing this scatterplot will show the selected data points.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"xVariable = \"xValue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"yVariable = \"yValue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"colorVariable = \"gap\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"colorScale = {\n const redColors = [\"#b91c1c\", \"#dc2626\", \"#ef4444\", \"#f87171\", \"#fca5a5\"];\n const grayColors = [\"#12375A\", \"#4E6C8A\", \"#7590AB\", \"#A7BDD3\", \"#D2E4F6\"];\n const positiveThreshold = d3\n .scaleThreshold()\n .domain([0.2, 0.4, 0.6, 0.8, 1])\n .range(redColors);\n\n const negativeThreshold = d3\n .scaleThreshold()\n .domain([-0.8, -0.6, -0.4, -0.2, 0])\n .range(grayColors.slice().reverse());\n\n return (value) => {\n if (value >= 0) {\n return positiveThreshold(value);\n } else {\n return negativeThreshold(value);\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"// data = FileAttachment(\"cars-2.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"Thanks to [John Alexis Guerra Gómez](/@john-guerra) for suggestions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":290,"value":"data = await FileAttachment(\"data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data","database":"$undefined"},{"id":308,"value":"gsapAll = import('https://unpkg.com/gsap@3.12.5/index.js?module')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"gsap = gsapAll.gsap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1"}} 2d:"$2c:body"