2b:null 2c:["$","title",null,{"children":"Pan & Zoom Axes | D3 | Observable"}] 31:T45c,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append(defs); const view = svg.append("rect") .attr("class", "view") .attr("x", 0.5) .attr("y", 0.5) .attr("width", width - 1) .attr("height", height - 1); const gX = svg.append("g").attr("class", "axis axis--x").call(xAxis); const gY = svg.append("g").attr("class", "axis axis--y").call(yAxis); const zoom = d3.zoom() .scaleExtent([1, 40]) .translateExtent([[-100, -100], [width + 90, height + 100]]) .filter(filter) .on("zoom", zoomed); return Object.assign(svg.call(zoom).node(), {reset}); function zoomed({ transform }) { view.attr("transform", transform); gX.call(xAxis.scale(transform.rescaleX(x))); gY.call(yAxis.scale(transform.rescaleY(y))); } function reset() { svg.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity); } // prevent scrolling then apply the default filter function filter(event) { event.preventDefault(); return (!event.ctrlKey || event.type === 'wheel') && !event.button; } }32:[] 2f:{"id":"5c50edae4ce13290","slug":"pan-zoom-axes","title":"Pan & Zoom Axes","thumbnail":"816b52fefd44e484da81b7d3a3c60083c64eb269600760dabe9b530b971118e4","access_level":"public","create_time":"$D2022-05-25T13:52:41.289Z","update_time":"$D2023-10-24T17:02:38.824Z","view_time":null,"first_public_time":"$D2022-06-02T10:22:33.298Z","fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":96,"publish_version":null,"role":null,"authored":false,"authors":[],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"},{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":45,"collection":{"id":"0aa89a77ae1b7b5d","slug":"d3-zoom","title":"d3-zoom","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"title":"Pan & Zoom Axes","cells":[{"id":0,"value":"# Pan & Zoom Axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":56,"value":"This example demonstrates using [d3-zoom](https://d3js.org/d3-zoom) to drive changes to scales’ domains via [*transform*.rescaleX](https://d3js.org/d3-zoom#transform_rescaleX) and [*transform*.rescaleY](https://d3js.org/d3-zoom#transform_rescaleY). The transformed scales are used to draw [axes](https://d3js.org/d3-axis). The transform is also applied [via SVG transform](https://observablehq.com/@d3/zoom) to the colorful rainbow rect. (The colors are from [Nadieh Bremer](http://www.visualcinnamon.com/)’s lovely [SVG gradient tutorial](http://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient.html).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":24,"value":"Inputs.button(\"Reset\", {reduce: chart.reset})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"defs = () => svg`\n \n\n \n \n \n \n \n \n \n \n \n \n \n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"x = d3.scaleLinear()\n .domain([-1, width + 1])\n .range([-1, width + 1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"y = d3.scaleLinear()\n .domain([-1, height + 1])\n .range([-1, height + 1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"xAxis = d3.axisBottom(x)\n .ticks(((width + 2) / (height + 2)) * 10)\n .tickSize(height)\n .tickPadding(8 - height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"yAxis = d3.axisRight(y)\n .ticks(10)\n .tickSize(width)\n .tickPadding(8 - width)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"