40:null 41:["$","title",null,{"children":"Programmatic Zoom | Harry Smolker | Observable"}] 47: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 }); }48:[] 45:{"id":"0ad8b82c7fb4d7a4","slug":null,"title":"Programmatic Zoom","thumbnail":"580624e0a4d9f0202c9c90fe42c9df4c473aedbf5c29c9f99253172b0be3b3e1","access_level":"public","create_time":"$D2023-02-21T05:04:34.702Z","update_time":"$D2023-02-21T05:04:34.702Z","view_time":null,"first_public_time":"$D2023-02-21T05:04:34.702Z","has_unpublished_edits":null,"fork":{"id":"fb6de040c21f3136","slug":"programmatic-zoom","title":"Programmatic Zoom","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"fe9086bcf94ddff1","login":"hasmolker","name":"Harry Smolker","avatar_url":"https://avatars-next.observableusercontent.com/6c93f431309548e5fcf2c728f805c0891c3a61d2bccea6211ab2b841240e8ad3","tier":"starter_2024","bio":"","following":false},"version":212,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1a19e885e93069ed","login":"hasmolker","name":"Harry Smolker","avatar_url":"https://avatars-next.observableusercontent.com/6c93f431309548e5fcf2c728f805c0891c3a61d2bccea6211ab2b841240e8ad3","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"1a19e885e93069ed","login":"hasmolker","name":"Harry Smolker","avatar_url":"https://avatars-next.observableusercontent.com/6c93f431309548e5fcf2c728f805c0891c3a61d2bccea6211ab2b841240e8ad3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Programmatic Zoom","cells":[{"id":0,"value":"md`# Programmatic Zoom\n\nClick a button or circle to zoom in or out via [*zoom*.scaleBy](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleBy).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"{\n const form = html``;\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 return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"radius = 6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"step = radius * 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"theta = Math.PI * (3 - Math.sqrt(5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 46:"$45:body"