2f: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" } } ]30: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(); }31: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]}

`; }32:[{"id":"85a53278f226a53e96a7b7aa66667235e6af1411a1ed5e5cd50c2abf521bc90518726d4fbf39b1b52932b2de9c4c85adff005cd43ccfabfce078fb35f78ff740","href":"https://static.observableusercontent.com/files/85a53278f226a53e96a7b7aa66667235e6af1411a1ed5e5cd50c2abf521bc90518726d4fbf39b1b52932b2de9c4c85adff005cd43ccfabfce078fb35f78ff740","name":"image.png","type":"image/png","lastModified":1776110217982.463,"size":604755}] 2d:{"title":"","cells":[{"id":5,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"html = htl.html","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof currentLayer = {\n const select = html``;\n return select;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"mutable selectedZone = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"layout = html`\n

${viewof currentLayer}

${mapView}

${infoPanel}

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