27:null 28:["$","title",null,{"children":"Map 02 | Wenji Pu | Observable"}] 2d:T830,zoneData = [ { id: "station", name: "Station Edge", points: "300,320 420,300 455,380 330,410", description: "A threshold between optimized commuter flow and urban deviation.", feeling: ["hesitation", "transition"], rules: [ "signal → efficiency", "clarity → flow" ], layerStyle: { optimization: "rgba(80,120,255,0.22)", deviation: "rgba(120,160,255,0.18)", density: "rgba(100,140,255,0.16)", feeling: "rgba(120,160,255,0.22)" }, label: { optimization: "optimized flow", deviation: "decision point", density: "transitional density", feeling: "hesitation / transition" } }, { id: "kabukicho", name: "Kabukicho", points: "360,120 575,110 610,255 430,275", description: "A dense nightlife zone where attraction disrupts optimized movement.", feeling: ["intensity", "overstimulation"], rules: [ "media → spectacle", "density → intensity", "urban stigmergy → amplified attraction" ], layerStyle: { optimization: "rgba(255,120,120,0.10)", deviation: "rgba(255,90,90,0.20)", density: "rgba(255,70,70,0.26)", feeling: "rgba(255,80,80,0.24)" }, label: { optimization: "secondary route", deviation: "deviation field", density: "high density hotspot", feeling: "intensity / overstimulation" } }, { id: "golden-gai", name: "Golden Gai", points: "500,165 570,160 585,225 515,235", description: "A compressed microclimate of slow movement and close sensory engagement.", feeling: ["intimacy", "immersion"], rules: [ "compression → immersion", "micro scale → intimacy" ], layerStyle: { optimization: "rgba(255,190,120,0.12)", deviation: "rgba(255,170,90,0.20)", density: "rgba(255,150,70,0.24)", feeling: "rgba(255,170,90,0.26)" }, label: { optimization: "minor route", deviation: "micro deviation", density: "compressed density", feeling: "intimacy / immersion" } } ]2e:T148f,mapView = { const width = 800; const height = 600; const svg = d3.create("svg") .attr("width", width) .attr("height", height); const defs = svg.append("defs"); defs.append("filter") .attr("id", "soft-blur") .append("feGaussianBlur") .attr("stdDeviation", 10); svg.append("image") .attr("href", await FileAttachment("image.png").url()) .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); svg.selectAll("polygon.zone-glow") .data(zoneData) .join("polygon") .attr("class", "zone-glow") .attr("points", d => d.points) .attr("fill", d => d.layerStyle[currentLayer]) .attr("stroke", "none") .attr("filter", "url(#soft-blur)") .attr("opacity", 0.9) .attr("pointer-events", "none"); svg.selectAll("polygon.zone-main") .data(zoneData) .join("polygon") .attr("class", "zone-main") .attr("points", d => d.points) .attr("fill", d => d.layerStyle[currentLayer]) .attr("stroke", d => selectedZone?.id === d.id ? "rgba(255,255,255,0.95)" : "rgba(255,255,255,0.18)") .attr("stroke-width", d => selectedZone?.id === d.id ? 2.5 : 1) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke", "rgba(255,255,255,0.95)") .attr("stroke-width", 2.4); }) .on("mouseout", function(event, d) { d3.select(this) .attr("stroke", selectedZone?.id === d.id ? "rgba(255,255,255,0.95)" : "rgba(255,255,255,0.18)") .attr("stroke-width", selectedZone?.id === d.id ? 2.5 : 1); }) .on("click", function(event, d) { mutable selectedZone = d; }); if (currentLayer === "optimization") { const flowData = [ { path: "M280,420 Q400,300 520,220" }, { path: "M300,440 Q420,330 560,260" } ]; svg.selectAll("path.flow") .data(flowData) .join("path") .attr("d", d => d.path) .attr("fill", "none") .attr("stroke", "rgba(120,170,255,0.6)") .attr("stroke-width", 2) .attr("stroke-dasharray", "6,6") .attr("opacity", 0.7) .attr("stroke-linecap", "round"); } if (currentLayer === "density") { const densityPoints = [ { x: 470, y: 210, r: 120 }, { x: 520, y: 180, r: 80 }, { x: 430, y: 240, r: 90 }, { x: 500, y: 220, r: 60 }, { x: 450, y: 190, r: 70 } ]; const defs = svg.select("defs"); defs.append("filter") .attr("id", "density-blur") .append("feGaussianBlur") .attr("stdDeviation", 25); const circles = svg.selectAll("circle.density") .data(densityPoints) .join("circle") .attr("class", "density") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.r) .attr("fill", d => `rgba(255,80,80,${0.1 + Math.random()*0.15})`) .attr("filter", "url(#density-blur)") .attr("opacity", 0.6); // animation circles.transition() .duration(2000) .attr("r", d => d.r * 1.2) .attr("opacity", 0.9) .transition() .duration(2000) .attr("r", d => d.r) .attr("opacity", 0.6) .on("end", function repeat() { d3.select(this) .transition() .duration(2000) .attr("r", d => d.r * 1.2) .attr("opacity", 0.9) .transition() .duration(2000) .attr("r", d => d.r) .attr("opacity", 0.6) .on("end", repeat); }); } if (currentLayer === "feeling") { svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "rgba(0,0,0,0.25)"); }const feelingTexts = zoneData.flatMap(zone => zone.feeling.map((f, i) => { const [x, y] = zone.points.split(" ")[i].split(","); return { text: f, x: +x + 10, y: +y + 10 }; }) ); svg.selectAll("text.feeling") .data(feelingTexts) .join("text") .attr("class", "feeling") .attr("x", d => d.x) .attr("y", d => d.y) .text(d => d.text) .attr("fill", "white") .attr("font-size", 14) .attr("opacity", 0.8); svg.selectAll("text.feeling") .transition() .duration(2000) .attr("y", d => d.y - 5) .transition() .duration(2000) .attr("y", d => d.y + 5) .on("end", function repeat() { d3.select(this) .transition() .duration(2000) .attr("y", d => d.y - 5) .transition() .duration(2000) .attr("y", d => d.y + 5) .on("end", repeat); }); if (currentLayer === "deviation") { const deviationPaths = [ "M300,420 Q380,350 450,300 T550,250", "M320,440 Q400,360 470,310 T580,270" ]; svg.selectAll("path.deviation") .data(deviationPaths) .join("path") .attr("d", d => d) .attr("fill", "none") .attr("stroke", "rgba(255,120,120,0.7)") .attr("stroke-width", 2) .attr("stroke-dasharray", "3,6") .attr("opacity", 0.8) .attr("stroke-linecap", "round"); } svg.selectAll("path.deviation") .transition() .duration(1200) .attr("stroke-dashoffset", 20) .transition() .duration(1200) .attr("stroke-dashoffset", 0) .on("end", function repeat() { d3.select(this) .transition() .duration(1200) .attr("stroke-dashoffset", 20) .transition() .duration(1200) .attr("stroke-dashoffset", 0) .on("end", repeat); }); return svg.node(); }2f:T424,infoPanel = { if (!selectedZone) { return html`

Click a zone to explore

`; } const zone = selectedZone; return html`

${zone.name}

${zone.description}

Feeling

${f}

Rules

${r}

Current Layer

${zone.label[currentLayer]}

`; }30:[{"id":"85a53278f226a53e96a7b7aa66667235e6af1411a1ed5e5cd50c2abf521bc90518726d4fbf39b1b52932b2de9c4c85adff005cd43ccfabfce078fb35f78ff740","href":"https://static.observableusercontent.com/files/85a53278f226a53e96a7b7aa66667235e6af1411a1ed5e5cd50c2abf521bc90518726d4fbf39b1b52932b2de9c4c85adff005cd43ccfabfce078fb35f78ff740","name":"image.png","type":"image/png","lastModified":1776110197447.959,"size":604755}] 2b:{"id":"0d54ce077fcfd590","slug":null,"title":"Map 02","thumbnail":"b6b00884878c174a0a01593cdb144b924731fa52b05a12e2340c909528925bf1","access_level":"public","create_time":"$D2026-04-13T19:56:37.447Z","update_time":"$D2026-04-13T19:56:37.447Z","view_time":null,"first_public_time":"$D2026-04-13T19:56:49.111Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"cdd0c02601c5cdd1","login":"wendypu666","name":"Wenji Pu","avatar_url":"https://avatars-next.observableusercontent.com/19da113d6998a3c44558ba9c223f40592ce9fe7a3fb68b78397bf30461920c53","tier":"starter_2024"},"version":40,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f106a78b7587b48b","login":"wendypu666","name":"Wenji Pu","avatar_url":"https://avatars-next.observableusercontent.com/19da113d6998a3c44558ba9c223f40592ce9fe7a3fb68b78397bf30461920c53","tier":null}],"members":[{"type":"individual","id":"f106a78b7587b48b","login":"wendypu666","name":"Wenji Pu","avatar_url":"https://avatars-next.observableusercontent.com/19da113d6998a3c44558ba9c223f40592ce9fe7a3fb68b78397bf30461920c53","tier":null,"role":"editor"},{"type":"team","id":"cdd0c02601c5cdd1","login":"wendypu666","name":"Wenji Pu","avatar_url":"https://avatars-next.observableusercontent.com/19da113d6998a3c44558ba9c223f40592ce9fe7a3fb68b78397bf30461920c53","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Map 02","cells":[{"id":0,"value":"# Map 02","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"html = htl.html","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"image = FileAttachment(\"image.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof currentLayer = {\n const select = html``;\n return select;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"mutable selectedZone = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"layout = html`\n

${viewof currentLayer}

${mapView}

${infoPanel}

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2c:"$2b:body"