2f:Tf2a,mapView = { const width = 800; const height = 600; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("display", "block"); const defs = svg.append("defs"); defs.append("filter") .attr("id", "soft-blur") .append("feGaussianBlur") .attr("stdDeviation", 10); defs.append("filter") .attr("id", "strong-blur") .append("feGaussianBlur") .attr("stdDeviation", 18); svg.append("image") .attr("href", await FileAttachment("image.png").url()) .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); // subtle veil svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "rgba(255,255,255,0.04)"); // layer graphics if (currentLayer === "optimization") { svg.append("path") .attr("d", "M260,390 C340,360 430,300 540,210") .attr("fill", "none") .attr("stroke", "#6f8dff") .attr("stroke-width", 4) .attr("stroke-linecap", "round") .attr("stroke-opacity", 0.55) .attr("pointer-events", "none"); } if (currentLayer === "density") { svg.append("circle") .attr("cx", 495) .attr("cy", 205) .attr("r", 95) .attr("fill", "rgba(255,70,70,0.16)") .attr("filter", "url(#soft-blur)") .attr("pointer-events", "none"); svg.append("circle") .attr("cx", 545) .attr("cy", 185) .attr("r", 52) .attr("fill", "rgba(255,150,80,0.2)") .attr("filter", "url(#soft-blur)") .attr("pointer-events", "none"); } if (currentLayer === "feeling") { const fg = svg.append("g") .attr("pointer-events", "none") .attr("font-family", "sans-serif") .attr("font-size", 13) .attr("font-weight", 600) .attr("fill", "rgba(255,255,255,0.88)"); fg.append("text").attr("x", 300).attr("y", 310).text("hesitation / transition"); fg.append("text").attr("x", 430).attr("y", 125).text("intensity / overstimulation"); fg.append("text").attr("x", 500).attr("y", 155).text("intimacy / immersion"); } // glow layer 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"); // interactive layer 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; }); // zone names svg.selectAll("text.zone-label") .data(zoneData) .join("text") .attr("class", "zone-label") .attr("x", d => d.id === "station" ? 315 : d.id === "kabukicho" ? 430 : 500) .attr("y", d => d.id === "station" ? 315 : d.id === "kabukicho" ? 125 : 155) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("font-weight", 600) .attr("fill", "rgba(255,255,255,0.72)") .attr("pointer-events", "none") .text(d => d.name); return svg.node(); }30: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" } } ]31:T96d,mutable selectedZone = null infoPanel = { if (!selectedZone) { return html`

Click a zone to explore its structure of feeling

`; } const zone = selectedZone; return html`

Selected Zone

${zone.name}

${zone.description}

Feeling

${f}

Rules

${r}

Current Layer

${zone.label[currentLayer]}

`; }32:[{"id":"6d8312261b91d2e059319c0fb957f9d1a6d43b753817b74504215e26b1af5c3851af38bdd517c367394e5ec20286ca57da994f6cf29080d5e08563d79374b7ee","href":"https://static.observableusercontent.com/files/6d8312261b91d2e059319c0fb957f9d1a6d43b753817b74504215e26b1af5c3851af38bdd517c367394e5ec20286ca57da994f6cf29080d5e08563d79374b7ee","name":"image.png","type":"image/png","lastModified":1775066747016.229,"size":603899}] 2d:{"title":"Map01","cells":[{"id":0,"value":"# Map01","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"viewof currentLayer = {\n const container = html`

`;\n const layers = [\"optimization\", \"deviation\", \"density\", \"feeling\"];\n let value = \"optimization\";\n\n const render = () => {\n container.innerHTML = \"\";\n for (const layer of layers) {\n const btn = html``;\n\n btn.onclick = () => {\n value = layer;\n render();\n container.value = value;\n container.dispatchEvent(new CustomEvent(\"input\"));\n };\n\n container.append(btn);\n }\n };\n\n render();\n container.value = value;\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"selectedZone = mutable selectedZone","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"layout = html`\n

${mapView}

${infoPanel}

\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}