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:{"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"},{"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"},{"id":20,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"chart.update(transform)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":11,"value":"x = d3.scaleLinear()\n .domain([-4.5, 4.5])\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"y = d3.scaleLinear()\n .domain([-4.5 * k, 4.5 * k])\n .range([height, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"k = height / width","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}