3e:null 3f:["$","title",null,{"children":"Scatterplot tour | kbnsafoah's Workspace | Observable"}] 45: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); } }); }46:[] 43:{"id":"57ce6ca4649c7d5d","slug":null,"title":"Scatterplot tour","thumbnail":"de915c3ee8d97a7fc80c230ef45d45c75f6740ebe1447a2b43e85822e1e5b5ce","access_level":"public","create_time":"$D2023-11-12T03:38:53.926Z","update_time":"$D2023-11-12T03:38:53.926Z","view_time":null,"first_public_time":"$D2023-11-12T03:38:53.926Z","has_unpublished_edits":null,"fork":{"id":"f79e753129e696f0","slug":"scatterplot-tour","title":"Scatterplot tour","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9781e1ce4baf1500","login":"kbnsafoah-ws","name":"kbnsafoah's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/6de0230ec0e31d9cda17133cc66a053bbd566315eede544df69259f9f43d4380","tier":"starter_2024","bio":"","following":false},"version":178,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1b9c904990750f93","login":"kbnsafoah","name":"kbnsafoah","avatar_url":"https://avatars-next.observableusercontent.com/2286b3b4b18db029b23fd7573f8d4d9c89470ee6111ab061199b896d9c8cf2d2","tier":null,"bio":"Masters Student reading Geo-Spatial Science at Bowling Green State University, Ohio","following":false}],"members":[{"type":"individual","id":"1b9c904990750f93","login":"kbnsafoah","name":"kbnsafoah","avatar_url":"https://avatars-next.observableusercontent.com/2286b3b4b18db029b23fd7573f8d4d9c89470ee6111ab061199b896d9c8cf2d2","tier":null,"role":"editor"},{"type":"team","id":"9781e1ce4baf1500","login":"kbnsafoah-ws","name":"kbnsafoah's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/6de0230ec0e31d9cda17133cc66a053bbd566315eede544df69259f9f43d4380","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"chart.update(transform)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"k = height / width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"