2a:null 2b:["$","title",null,{"children":"Scatterplot tour | D3 | Observable"}] 30:T508,chart = { const color = d3.scaleOrdinal() .domain(data.map(d => d[2])) .range(d3.schemeCategory10); const zoom = d3.zoom() .on("zoom", zoomed); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const g = svg.append("g") .attr("fill", "none") .attr("stroke-linecap", "round"); g.selectAll("path") .data(data) .join("path") .attr("d", d => `M${x(d[0])},${y(d[1])}h0`) .attr("stroke", d => color(d[2])); const gx = svg.append("g") .attr("transform", `translate(0,${height})`); const xAxis = (g, x) => g .call(d3.axisTop(x).ticks(12)) .call(g => g.select(".domain").attr("display", "none")); const gy = svg.append("g"); const yAxis = (g, y) => g .call(d3.axisRight(y).ticks(12 * k)) .call(g => g.select(".domain").attr("display", "none")); svg.call(zoom.transform, viewof transform.value); function zoomed({transform}) { g.attr("transform", transform).attr("stroke-width", 5 / transform.k); gx.call(xAxis, transform.rescaleX(x)); gy.call(yAxis, transform.rescaleY(y)); } return Object.assign(svg.node(), { update(transform) { svg.transition() .duration(1500) .call(zoom.transform, transform); } }); }31:[] 2e:{"id":"f79e753129e696f0","slug":"scatterplot-tour","title":"Scatterplot tour","thumbnail":"de376ebb054b691c381709ee58587b805ebd5157637bafff8130c12a64d95ab5","access_level":"public","create_time":"$D2020-04-03T18:39:41.401Z","update_time":"$D2023-08-01T13:45:55.032Z","view_time":null,"first_public_time":"$D2020-04-03T20:15:42.633Z","fork":false,"stars":52,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":178,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":232,"collection":{"id":"0aa89a77ae1b7b5d","slug":"d3-zoom","title":"d3-zoom","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"title":"Scatterplot tour","cells":[{"id":0,"value":"

Scatterplot tour

D3 › Gallery

\n\n# Scatterplot tour\n\nThis notebook implements an animated tour of a scatterplot using zoom transitions. The tour zooms in on each cluster’s [bounding box](/@d3/zoom-to-bounding-box) in succession before zooming back out to the overview. To improve rendering performance, the circles are drawn as zero-length strokes with round caps.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":94,"value":"viewof transform = {\n const form = html``;\n const timeout = setInterval(() => {\n form.value = transforms[form.radio.value = (+form.radio.value + 1) % transforms.length][1];\n form.dispatchEvent(new CustomEvent(\"input\"));\n }, 2500);\n form.onchange = () => form.dispatchEvent(new CustomEvent(\"input\")); // Safari\n form.oninput = event => { \n if (event.isTrusted) clearInterval(timeout), form.onchange = null;\n form.value = transforms[form.radio.value][1];\n };\n form.value = transforms[form.radio.value][1];\n invalidation.then(() => clearInterval(timeout));\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"chart.update(transform)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"data = {\n const random = d3.randomNormal(0, 0.2);\n const sqrt3 = Math.sqrt(3);\n return [].concat(\n Array.from({length: 300}, () => [random() + sqrt3, random() + 1, 0]),\n Array.from({length: 300}, () => [random() - sqrt3, random() + 1, 1]),\n Array.from({length: 300}, () => [random(), random() - 1, 2])\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"transforms = [[\"Overview\", d3.zoomIdentity]].concat(d3.groups(data, d => d[2]).map(([key, data]) => {\n const [x0, x1] = d3.extent(data, d => d[0]).map(x);\n const [y1, y0] = d3.extent(data, d => d[1]).map(y);\n const k = 0.9 * Math.min(width / (x1 - x0), height / (y1 - y0));\n const tx = (width - k * (x0 + x1)) / 2;\n const ty = (height - k * (y0 + y1)) / 2;\n return [`Cluster ${key}`, d3.zoomIdentity.translate(tx, ty).scale(k)];\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"x = d3.scaleLinear()\n .domain([-4.5, 4.5])\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"y = d3.scaleLinear()\n .domain([-4.5 * k, 4.5 * k])\n .range([height, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"k = height / width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"