2f:T5a7,chart = { const zoom = d3.zoom() .scaleExtent([1, 40]) .on("zoom", zoomed); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .on("click", reset); const g = svg.append("g"); g.selectAll("circle") .data(data) .join("circle") .attr("cx", ([x]) => x) .attr("cy", ([, y]) => y) .attr("r", radius) .attr("fill", (d, i) => d3.interpolateRainbow(i / 360)) .on("click", clicked); svg.call(zoom); function random() { const [x, y] = data[Math.floor(Math.random() * data.length)]; svg.transition().duration(2500).call( zoom.transform, d3.zoomIdentity.translate(width / 2, height / 2).scale(40).translate(-x, -y) ); } function reset() { svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function clicked(event, [x, y]) { event.stopPropagation(); svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity.translate(width / 2, height / 2).scale(40).translate(-x, -y), d3.pointer(event) ); } function zoomed({transform}) { g.attr("transform", transform); } return Object.assign(svg.node(), { zoomIn: () => svg.transition().call(zoom.scaleBy, 2), zoomOut: () => svg.transition().call(zoom.scaleBy, 0.5), zoomRandom: random, zoomReset: reset }); }30:[] 2d:{"title":"Programmatic Zoom","cells":[{"id":0,"value":"# Programmatic Zoom\n\n* Slide [Input Range](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) or circle to zoom in or out via [*zoom*.scaleBy](https://d3js.org/d3-zoom#zoom_scaleBy).\n\n* Prototype for: https://talk.observablehq.com/t/a-simple-zoom-slider/8585","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"{\n const form = html``;\n\n //form.in.onclick = () => chart.zoomIn();\n //form.out.onclick = () => chart.zoomOut();\n //form.random.onclick = () => chart.zoomRandom();\n //form.reset.onclick = () => chart.zoomReset();\n\n let previousValue = 0;\n form.zrange.addEventListener(\"input\", () => {\n if (form.zrange.value > previousValue) chart.zoomIn();\n else chart.zoomOut();\n previousValue = form.zrange.value;\n });\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 500 // Observable provides a responsive *width*","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"radius = 6","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"step = radius * 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = Array.from({length: 2000}, (_, i) => {\n const radius = step * Math.sqrt(i += 0.5), a = theta * i;\n return [\n width / 2 + radius * Math.cos(a),\n height / 2 + radius * Math.sin(a)\n ];\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"theta = Math.PI * (3 - Math.sqrt(5))","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}