29:null 2a:["$","title",null,{"children":"Urban Tree Density vs. Air Quality | dduyg | Observable"}] 2f:Tbf6,viewof ecoSizeMode = { const radio = Inputs.radio(["Fixed Zone", "Tree Density"], { value: "Fixed Zone" }); const container = html`

Circle Area Represents

${radio}

Zone Air Quality (AQI)

Good

Moderate

Unhealthy

Danger

`; container.addEventListener("input", (e) => { e.stopPropagation(); container.value = radio.value; container.dispatchEvent(new CustomEvent("input")); }); container.value = radio.value; return container; }30:T92e,{ const chartWidth = width; const chartHeight = width < 500 ? 400 : 500; const context = DOM.context2d(chartWidth, chartHeight); const canvas = context.canvas; canvas.style.background = "#fafafa"; const colors = ["#6B5ACD", "#81007F", "#FF00FE", "#FF8B00"]; // 1. Data Generation const data = d3.range(120).map((i) => ({ id: i, color: colors[Math.floor(Math.random() * colors.length)], treeCount: Math.random() * 40 + 10, fixedRadius: width < 500 ? 7 : 10, x: Math.random() * chartWidth, y: Math.random() * chartHeight })); const currentMode = typeof ecoSizeMode !== "undefined" ? ecoSizeMode : "Fixed Zone"; const getRadius = (d) => currentMode === "Fixed Zone" ? d.fixedRadius : d.treeCount / 2.5; // 2. Simulation const simulation = d3 .forceSimulation(data) .force("charge", d3.forceManyBody().strength(width < 500 ? 5 : 10)) .force("center", d3.forceCenter(chartWidth / 2, chartHeight / 2)) .force( "collide", d3.forceCollide((d) => getRadius(d) + 2) ) .on("tick", drawScene); // Boundary Force simulation.force("boundary", () => { for (let d of data) { const r = getRadius(d); d.x = Math.max(r, Math.min(chartWidth - r, d.x)); d.y = Math.max(r, Math.min(chartHeight - r, d.y)); } }); // 3. Draw Function function drawScene() { context.clearRect(0, 0, chartWidth, chartHeight); context.fillStyle = "#fafafa"; context.fillRect(0, 0, chartWidth, chartHeight); data.forEach((d) => { const r = getRadius(d); context.beginPath(); context.fillStyle = d.color; context.arc(d.x, d.y, r, 0, 2 * Math.PI); context.fill(); context.strokeStyle = "white"; context.lineWidth = 1.5; context.stroke(); }); } d3.select(canvas).call( d3 .drag() .subject((event) => simulation.find(event.x, event.y, 30)) .on("start", (e) => { if (!e.active) simulation.alphaTarget(0.3).restart(); e.subject.fx = e.subject.x; e.subject.fy = e.subject.y; }) .on("drag", (e) => { e.subject.fx = e.x; e.subject.fy = e.y; }) .on("end", (e) => { if (!e.active) simulation.alphaTarget(0); e.subject.fx = null; e.subject.fy = null; }) ); return canvas; }31:[] 2d:{"id":"36713e87d24ee7c6","slug":"urban-tree-density-vs-air-quality","title":"Urban Tree Density vs. Air Quality","thumbnail":"e5a5e46d31bf1353f411216c0ed527c0ead545ccc19da70df52c5b49e84f2b7f","access_level":"public","create_time":"$D2026-05-15T00:05:39.074Z","update_time":"$D2026-05-16T14:56:48.223Z","view_time":null,"first_public_time":"$D2026-05-15T00:05:39.074Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024"},"version":37,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null}],"members":[{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024","role":"editor"},{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Urban Tree Density vs. Air Quality","cells":[{"id":0,"value":"# Urban Tree Density vs. Air Quality\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"