27:null 28:["$","title",null,{"children":"ChronoMat_Xinyu Liang_Final | hower_teaching | Observable"}] 2d:Tded1,chart = { // Canvas size const width = 1700, height = 1100; // Create main svg const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "#FFFFFF"); svg.append("defs").append("style").text(` @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap'); `); // -------- let selectedZoneData = null; // currently selected district data let selectedZoneBuildings = []; // buildings in the currently selected district let selectedBuildingData = null; // currently selected building let detailImageVisible = false; // whether building layer image is visible let plannerMode = false; // whether planner icon is active let ownerMode = false; // whether owner icon is active let activeAction = null; // remembers last clicked action text let zoneDecisions = new Map(); // stores district decisions: begin / postpone let actionHistory = []; // Record each start/postpone operation for use in undoing the action let materialHistory = []; // Records material accumulation number for undo purposes let selectedBuildingClockIndex = null; // which clock should be highlighted let accumMat = [{mat:'brick',quant:0},{mat:'concrete',quant:0},{mat:'steel',quant:0},{mat:'wood',quant:0},{mat:'window',quant:0}] let introStep = 0; //console.log(accumMat) //draw the intial accumulated values //accumText(accumMat) console.log(accumMat[2].quant) let accumBrick = 0 //accumulated brick // Save original material values on first run, restore on re-run buildingdata.forEach(b => { if (b._orig) { b.brick = b._orig.brick; b.concrete = b._orig.concrete; b.steel = b._orig.steel; b.wood = b._orig.wood; b.window = b._orig.window; } else { b._orig = { brick: b.brick, concrete: b.concrete, steel: b.steel, wood: b.wood, window: b.window }; } }); // Zoom behavior const zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); //Point logic let totalPoints = 0; // running total score let placementCount = 0; // how many placements made so far const maxPlacements = 10; // total allowed placements let gameEnded = false; // flag to lock interactions after game ends // Target lifespan for each building layer (revised for realism) const layerTargetLife = { skin: 50, spaceplan: 20, stuff: 5 }; // Demand weight per layer (how much material volume each layer needs) const layerDemandWeight = { skin: 0.50, spaceplan: 0.40, stuff: 0.10 }; // Map material key to its remaining-life field in buildingdata const materialLifeKey = { brick: "brickremainlife", concrete: "conremainlife", steel: "steelremainlife", wood: "woodremainlife", window: "windremainlife" }; // Map projection var projection = d3 .geoMercator() .fitSize([width, height], boundingbox_web); // Offset for moving the map const mapOffsetX = 120; const mapOffsetY = 35; // Paths for qgis geometry var path = d3.geoPath().projection(projection); var path2 = d3.geoPath().projection(projection); var path3 = d3.geoPath().projection(projection); var path4 = d3.geoPath().projection(projection); var path5 = d3.geoPath().projection(projection); var keyY = 48; // used to move all parts of a key at once // Base selections var g = svg.selectAll("g").attr("id", "paths"); var c = svg.selectAll("circle"); var p = svg.selectAll("polyline"); var t = svg.selectAll("text"); var l = svg.selectAll("line"); //this loops through buildingdata spreadsheet const highlightFeatures = []; for (let i = 0; i < buildingdata.length; i++) { var footprints = bronxBuilding_web.features; //grab the qgis geojson building that matches the building data bbl for each row const match = footprints.find(p => p.properties.base_bbl === String(buildingdata[i].bbl)); //const match = footprints.find(p => p.properties.base_bbl === "2022600001"); //we want to take the geometry from match, and add it to the geometry of your building data spreadsheet column // buildingdata[i].geometry = match.geometry; if (match) { buildingdata[i].geometry = match.geometry; highlightFeatures.push(match); } } console.log("highlightFeatures count:", highlightFeatures.length); //bldgFootprints(path, buildingdata, sfill, sOpac, sW, stroke) // -------- DRAWING FUNCTIONS -------- //building footprints included in game function bldgFootprints(pathFn, data, sfill, sOpac, sW, stroke, clickable){ // g.enter().append("path") .data(data) .enter() .append("path") .attr("class", clickable ? "building-footprint" : "outlines") .attr("d", pathFn) .attr("transform", `translate(${mapOffsetX},${mapOffsetY})`) .attr("fill", sfill) .attr("fill-opacity", 1) .attr("stroke-opacity", sOpac) .attr("stroke-width", sW) .attr("stroke", stroke); // if (clickable) { svg.selectAll(".building-footprint") .style("cursor", "pointer") .on("mouseover", function() { d3.select(this).attr("fill", "#FFD27A"); }) .on("mouseout", function() { const isSelected = d3.select(this).classed("selected-building"); d3.select(this).attr("fill", isSelected ? "#8AA4CF" : sfill); }) .on("click", function(event, d) { const buildingRow = buildingdata.find(b => String(b.bbl) === String(d.properties.base_bbl)); if (!buildingRow) return; console.log("building clicked:", buildingRow.address); svg.selectAll(".building-footprint") .classed("selected-building", false) .attr("fill", sfill); d3.select(this) .classed("selected-building", true) .attr("fill", "#8AA4CF"); if (!selectedZoneData || buildingRow.nta2020 !== selectedZoneData.nta2020) return; selectedBuildingData = buildingRow; console.log("selected building data =", selectedBuildingData); updateMaterialPanel(selectedBuildingData); updateLifeLeftPanel(selectedBuildingData); const foundIndex = selectedZoneBuildings.findIndex(b => b.id === buildingRow.id); selectedBuildingClockIndex = foundIndex >= 0 ? foundIndex : null; updateClockPanel(selectedZoneBuildings); const clickedZone = zonedata.find(z => z.nta2020 == selectedZoneData.nta2020); const zoneFeatureForInfo = { properties: { nta2020: selectedZoneData.nta2020, ntaname: selectedZoneData.ntaname || buildingRow.nta2020 } }; showZoneDataset(zoneFeatureForInfo, clickedZone, selectedBuildingData); }); } } // Draw static polygon/line layers from qgis function staticLines(pathFn, data, sfill, sOpac, sW, stroke){ g.enter().append("path") .data(data) .enter() .append("path") .attr("class","outlines") .attr("d", pathFn) .attr("transform", `translate(${mapOffsetX},${mapOffsetY})`) .style("fill", sfill) .style("stroke-opacity", sOpac) .style("stroke-width", sW) .style("stroke", stroke); } // Draw centroid circles function staticCircles(data, r, sfill, sOpac, sWidth, stroke){ svg.append("g") .selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", function(d){ return path.centroid(d)[0]; }) .attr("cy", function(d){ return path.centroid(d)[1]; }) .attr("r", r) .attr("fill", sfill) .style("fill-opacity", sOpac) .style("stroke-width", sWidth) .style("stroke", stroke); } // Draw point layers from geojson coordinates function pointCircles(fc, r, sfill, sOpac, sWidth, stroke, circleClass = ""){ svg.append("g") .selectAll("circle") .data(fc.features) .enter() .append("circle") .attr("class", circleClass) .attr("cx", function(d){ return projection(d.geometry.coordinates)[0]; }) .attr("cy", function(d){ return projection(d.geometry.coordinates)[1]; }) .attr("r", r) .attr("transform", `translate(${mapOffsetX},${mapOffsetY})`) .attr("fill", sfill) .style("fill-opacity", sOpac) .style("stroke-width", sWidth) .style("stroke", stroke); } // Draw polylines from rhino data function polyline(data, sfill, sOpac, sW, stroke, dash, tform){ g.enter().append("polyline") .data(data) .enter() .append("polyline") .attr("class", function(d){ return d.name; }) .attr("points", function(d){ return d.pts; }) .attr("transform", tform) .style("fill", sfill) .style("stroke-opacity", sOpac) .style("stroke-width", sW) .style("stroke-dasharray", dash) .style("stroke", stroke); } // Write a single line of text function staticText(text, xVal, yVal, font, fSize, ffill, fWeight, fAnchor, fstyle, textClass){ svg .append("text") .attr("class", textClass) .attr("x", xVal) .attr("y", yVal) .attr("font-size", fSize) .attr("font-family", font) .attr("font-weight", fWeight) .attr("text-anchor", fAnchor) .style("fill", ffill) .style("font-style", fstyle) .text(text); } // Draw a single line function staticLine(x1l, y1l, x12, y12, lstroke, lwidth, ldash, lclass){ svg .append("line") .attr("class", lclass) .attr("x1", x1l) .attr("y1", y1l) .attr("x2", x12) .attr("y2", y12) .attr("stroke", lstroke) .attr("stroke-width", lwidth) .attr("stroke-dasharray", ldash); } // Convert lifespan value into 00:00 format function formatClockTime(value){ if (value == null || isNaN(value)) return "--:--"; const num = Math.max(0, Math.round(+value)); return String(num).padStart(2, "0") + ":00"; } const total = 8; // total number of clocks on the right panel const cols = 2; // number of clock columns // Update clock text values and highlight selected one function updateClockPanel(buildings){ const padded = Array.from({ length: total }, (_, i) => { const item = buildings[i] || null; if (!item) return null; return { ...item, clockIndex: i }; }); svg.selectAll(".clock-time") .data(padded) .text(d => d ? formatClockTime(d.remainlifespan2030) : "--:--") .attr("fill", d => { if (d && selectedBuildingClockIndex === d.clockIndex) return "#FBB03F"; return "#2F2F2F"; }); } //Material quantity panel list function updateMaterialPanel(building){ const materialValues = building ? [ building["brick"] ?? "", building["concrete"] ?? "", building["steel"] ?? "", building["wood"] ?? "", building["window"] ?? "" ] : ["", "", "", "", ""]; svg.selectAll(".material-existing-text") .data(materialValues) .text(d => d === null || d === undefined ? "" : String(d)); } //Material life panel list function updateLifeLeftPanel(building){ const lifeValues = building ? [ building["brickremainlife"] ?? "", building["conremainlife"] ?? "", building["steelremainlife"] ?? "", building["woodremainlife"] ?? "", building["windremainlife"] ?? "" ] : ["", "", "", "", ""]; svg.selectAll(".material-lifeleft-text") .data(lifeValues) .text(d => d === null || d === undefined ? "" : String(d)); } // Show dataset text for the clicked district + selected building function showZoneDataset(zoneFeature, clickedZone, clickedBuilding = null){ svg.selectAll("text.zoneText").remove(); // const padX = 50; const startY = 640; const lineH = 14; const sectionGap = 8; const labelColor = "#8A6A00"; const valueColor = "#1E1E1E"; const titleColor = "#2F2F2F"; const font = "Inter"; // let cy = startY; function row(label, value, opts = {}) { const labelSize = opts.labelSize || "10px"; const valueSize = opts.valueSize || "12px"; // label staticText(label, padX, cy, font, labelSize, labelColor, "600", "start", "normal", "zoneText"); // value staticText(String(value), padX + 320, cy, font, valueSize, valueColor, "500", "end", "normal", "zoneText"); cy += lineH; } function sectionTitle(text){ cy += sectionGap; staticText(text, padX, cy, font, "11px", titleColor, "700", "start", "normal", "zoneText"); cy += lineH; } // ----- DISTRICT----- if (clickedZone) { sectionTitle(zoneFeature.properties.ntaname || zoneFeature.properties.nta2020); row("Buildings", clickedZone.buildingcount); row("Housing", clickedZone.housingcount); row("Bldg sqft", Number(clickedZone.totalsqft).toLocaleString()); row("Housing sqft", Number(clickedZone.housing_sqft).toLocaleString()); row("Avg Lifespan", clickedZone.remainlifespan + " yrs"); row("Residential", clickedZone.residential + " %"); } // ----- BUILDING ----- if (clickedBuilding) { sectionTitle("BUILDING"); row("Address", clickedBuilding.address || "N/A"); row("Built", clickedBuilding.builtyear || "N/A"); row("Lifespan 2030", formatClockTime(clickedBuilding.remainlifespan2030)); row("Brick", clickedBuilding.brick || "N/A"); row("Concrete", clickedBuilding.concrete || "N/A"); row("Steel", clickedBuilding.steel || "N/A"); row("Wood", clickedBuilding.wood || "N/A"); row("Window", clickedBuilding.window || "N/A"); } } // Show temporary red highlight when clicking a district without a permanent decision yet function showTemporaryZoneHighlight(zoneElement, zoneFeature){ refreshZoneStyles(); const status = zoneDecisions.get(zoneFeature.properties.nta2020); if (!status) { d3.select(zoneElement) .attr("fill", "#E8A09A") .attr("fill-opacity", 0.45) .attr("stroke", plannerMode ? "#B7614F" : "#000000") .attr("stroke-width", 3); } } // Show building layer image + clocks only when owner mode is ON and decisions are ready function updateOwnerPanel(){ const beginCount = Array.from(zoneDecisions.values()).filter(v => v === "begin").length; const postponeCount = Array.from(zoneDecisions.values()).filter(v => v === "postpone").length; console.log("ownerMode =", ownerMode); console.log("beginCount =", beginCount, "postponeCount =", postponeCount); console.log("zoneDecisions =", Array.from(zoneDecisions.entries())); } // Reset the entire interface back to initial state function resetUIState(){ svg.selectAll(".actionText") .style("fill", "#1E1E1E"); svg.selectAll("text.zoneText").remove(); detailImageVisible = false; selectedZoneData = null; selectedZoneBuildings = []; selectedBuildingData = null; plannerMode = false; ownerMode = false; activeAction = null; zoneDecisions.clear(); actionHistory = []; selectedBuildingClockIndex = null; svg.selectAll(".building-footprint") .classed("selected-building", false) .style("fill", "#FBB03F"); updateClockPanel([]); updateMaterialPanel(null); updateLifeLeftPanel(null); refreshZoneStyles(); updateTimeSliderHighlight(); } // Refresh district colors based on planner mode and decisions function refreshZoneStyles(){ svg.selectAll(".nta") .attr("fill", function(d){ const status = zoneDecisions.get(d.properties.nta2020); if (status === "begin") return "#F3D77B"; if (status === "postpone") return "#BDBDBD"; return "#EDE2C6"; }) .attr("fill-opacity", function(d){ const status = zoneDecisions.get(d.properties.nta2020); if (status === "begin") return 0.55; if (status === "postpone") return 0.45; return 0.01; }) .attr("stroke", function(d){ const status = zoneDecisions.get(d.properties.nta2020); if (status === "begin") return "#8A6A00"; if (status === "postpone") return "#666666"; if (plannerMode) return "#B7614F"; return "#bbbcba"; }) .attr("stroke-width", function(d){ const status = zoneDecisions.get(d.properties.nta2020); if (status === "begin" || status === "postpone") return 3; return plannerMode ? 2.2 : 1.5; }); } // Zoom function function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } // -------- BACKGROUND + MAP LAYERS -------- // Background image svg.append("image") .attr("href", backgroundUrl) .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("preserveAspectRatio", "none"); // Static map layers staticLines(path5, bronx_web.features, "#F5EFE6", 1, 1.2, "#2F2F2F"); staticLines(path5, subway_web.features, "none", 0.9, 1.2, "#C04B6E"); staticLines(path5, bus_web.features, "none", 0.7, 0.5, "#BFA77A"); staticLines(path5, park_web.features, "none", 0.5, 0.4, "#4F6B4B"); staticLines(path5, facility_web.features, "#9BB66A", 1, 0.3, "#9BB66A"); staticLines(path5, bronxBuilding_web.features, "#6E6A63", 0.35, 0.05, "#6E6A63"); // Subway station points pointCircles(subwayStation_web, 2.6, "#D9A441", 1, 0.5, "#6B4A1E", "subwayPts"); // White panel shape svg.append("foreignObject") .attr("transform",(d,i)=> "translate(164,161)" ) .attr("width", 1400) .attr("height", 900) .append("xhtml:div") .attr("class", "textbox") .html(``); // Time slider background svg.append("foreignObject") .attr("transform",(d,i)=> "translate(175,180)" ) .attr("width", 1400) .attr("height", 900) .append("xhtml:div") .attr("class", "textbox") .html(` `); // Time slider number blocks svg.append("foreignObject") .attr("transform",(d,i)=> "translate(175,180)" ) .attr("width", 1400) .attr("height", 900) .append("xhtml:div") .attr("class", "textbox") .html(` `); // Year labels above time slider const yearLabels = [ { x: 1124, y: 985, text: "2026" }, { x: 1165, y: 985, text: "2030" }, { x: 1207, y: 985, text: "2034" }, { x: 1248, y: 985, text: "2038" }, { x: 1290, y: 985, text: "2042" } ]; yearLabels.forEach(d => { // each year use different class:year-2026、year-2030 staticText(d.text, d.x, d.y, "Anton", "13px", "#1E1E1E", "500", "middle", "normal", "yearText year-" + d.text); }); // Action text labels — CHANGED: STRUCTURE → SPACE PLAN, SPACE PLAN → STUFF const actionLabels = [ { y: 638, text: "BEGIN" }, { y: 705, text: "POSTPONE" }, { y: 775, text: "SKIN" }, { y: 842, text: "SPACE PLAN" }, { y: 911, text: "STUFF" } ]; actionLabels.forEach(d => { staticText(d.text, 1535, d.y, "Anton", "25px", "#1E1E1E", "600", "middle", "normal", "actionText"); }); // Clock icons on the right panel const iconSize = 130; const gapX = 110; const gapY = 60; const clockStartX = 1413; const clockStartY = 55; const clockSlots = []; for (let i = 0; i < total; i++) { const col = i % cols; const row = Math.floor(i / cols); const x = clockStartX + col * gapX; const y = clockStartY + row * gapY; clockSlots.push({ x, y, index: i }); svg.append("image") .attr("href", icon_clock) .attr("x", x) .attr("y", y) .attr("width", iconSize) .attr("height", iconSize); } // Clock text values svg.selectAll(".clock-time") .data(clockSlots) .join("text") .attr("class", "clock-time") .attr("x", d => d.x + 65) .attr("y", d => d.y + 66) .attr("font-family", "Arial") .attr("font-size", "18px") .attr("font-weight", "700") .attr("fill", "#2F2F2F") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("pointer-events", "none") .text("--:--"); // Material icons on the left const materialIcons = [icon_brick, icon_concrete, icon_steel, icon_wood, icon_window]; const materialClasses = ['brick','concrete','steel','wood','window']; const startX = 45; const startY = 165; const gap = 75; const iconOffsetY = 15; // Choose material, click button, accumulate let selectedMaterialIndex = null; // currently selected material index const accumulateActions = ["SKIN", "SPACE PLAN", "STUFF"]; materialIcons.forEach((icon, i) => { svg.append("image") .attr("href", icon) .attr("class", materialClasses[i]) .attr("x", startX) .attr("y", startY + i * gap + iconOffsetY) .attr("width", 110) .attr("height", 110) .style("cursor", "pointer") .on('pointerdown', function selectMaterial(){ console.log("clicked material:", materialClasses[i]); // Material selection only available in owner mode if (!ownerMode) { console.log("Switch to Owner mode first to select materials."); return; } if (!selectedBuildingData) { console.log("Please select a building first."); return; } // Click same icon again = deselect if (selectedMaterialIndex === i) { selectedMaterialIndex = null; d3.selectAll("image.brick, image.concrete, image.steel, image.wood, image.window") .style("filter", "none"); console.log("deselected"); } else { selectedMaterialIndex = i; d3.selectAll("image.brick, image.concrete, image.steel, image.wood, image.window") .style("filter", "none"); d3.select(this) .style("filter", "drop-shadow(0 0 8px #D4B04C)"); console.log("selected:", materialClasses[i]); } }); }); // Add accumulate logic to the three buttons svg.selectAll(".actionText") .each(function(){ const label = d3.select(this).text(); if (!accumulateActions.includes(label)) return; d3.select(this).on("click.accumulate", function(){ if (gameEnded) { console.log("Game ended. Click CLEAN to restart."); return; } // Accumulation only in owner mode if (!ownerMode) { console.log("Enter Owner mode to accumulate materials."); return; } if (selectedMaterialIndex === null) { console.log("Please click a material icon first."); return; } if (!selectedBuildingData) { console.log("Please select a building first."); return; } const idx = selectedMaterialIndex; const matKey = materialClasses[idx]; const qty = Number(selectedBuildingData[matKey]) || 0; if (qty === 0) { console.log(matKey + " has no quantity to accumulate."); return; } // Calculate placement score // Map button label to layer name — CHANGED to new layer names const layerMap = { "SKIN": "skin", "SPACE PLAN": "spaceplan", "STUFF": "stuff" }; const layerName = layerMap[label]; const lifeField = materialLifeKey[matKey]; const remainingLife = Number(selectedBuildingData[lifeField]) || 0; const earnedPoints = getMaterialPlacementScore(matKey, remainingLife, layerName); // Record this action for undo (include points and layer so back can subtract) materialHistory.push({ buildingId: selectedBuildingData.id, matIndex: idx, matKey: matKey, qty: qty, points: earnedPoints, layerName: layerName }); accumMat[idx].quant = accumMat[idx].quant + qty; selectedBuildingData[matKey] = 0; // Track layer accumulation for % display layerAccum[layerName] += qty; updateLayerPctDisplay(); // Add to total score totalPoints += earnedPoints; updatePointDisplay(); updateMaterialPanel(selectedBuildingData); accumText(accumMat); console.log(`Placement: ${matKey} on ${layerName}, life=${remainingLife}, earned=${earnedPoints}, total=${totalPoints}`); d3.selectAll("image.brick, image.concrete, image.steel, image.wood, image.window") .style("filter", "none"); selectedMaterialIndex = null; placementCount++; updatePlacementCounter(); // Show a final summary overlay when the game ends function showFinalResult(){ const avgScore = materialHistory.length > 0 ? materialHistory.reduce((sum, r) => sum + (r.points || 0), 0) / materialHistory.length : 0; const rating = getScoreRating(avgScore); // Semi-transparent overlay const overlay = svg.append("g") .attr("class", "finalOverlay") .style("pointer-events", "none"); overlay.append("rect") .attr("x", 0).attr("y", 0) .attr("width", width).attr("height", height) .attr("fill", "#000000") .attr("opacity", 0.55); // Card dimensions const cardW = 800; const cardH = 520; const cardX = width/2 - cardW/2; const cardY = height/2 - cardH/2; // Yellow outer border (larger, drawn FIRST so white card covers its center) const borderThickness = 14; overlay.append("rect") .attr("x", cardX - borderThickness) .attr("y", cardY - borderThickness) .attr("width", cardW + borderThickness * 2) .attr("height", cardH + borderThickness * 2) .attr("rx", 28) .attr("fill", "#E8B949") .attr("stroke", "#1E1E1E") .attr("stroke-width", 3); // White result card with black border (original) overlay.append("rect") .attr("x", cardX).attr("y", cardY) .attr("width", cardW).attr("height", cardH) .attr("rx", 20) .attr("fill", "#FFFFFF") .attr("stroke", "#1E1E1E") .attr("stroke-width", 4); // GAME OVER title overlay.append("text") .attr("x", width/2).attr("y", cardY + 100) .attr("font-family", "Anton") .attr("font-size", "56px") .attr("text-anchor", "middle") .attr("fill", "#1E1E1E") .text("GAME OVER"); // Total points overlay.append("text") .attr("x", width/2).attr("y", cardY + 190) .attr("font-family", "Anton") .attr("font-size", "36px") .attr("text-anchor", "middle") .attr("fill", "#555555") .text(`Total Points: ${totalPoints}`); // Average score overlay.append("text") .attr("x", width/2).attr("y", cardY + 245) .attr("font-family", "Anton") .attr("font-size", "30px") .attr("text-anchor", "middle") .attr("fill", "#555555") .text(`Average Score: ${Math.round(avgScore)}`); // Rating label overlay.append("text") .attr("x", width/2).attr("y", cardY + 360) .attr("font-family", "Anton") .attr("font-size", "56px") .attr("text-anchor", "middle") .attr("fill", rating.color) .text(rating.label); // Restart hint overlay.append("text") .attr("x", width/2).attr("y", cardY + 440) .attr("font-family", "Inter") .attr("font-size", "22px") .attr("text-anchor", "middle") .attr("fill", "#888888") .text("Click CLEAN icon to play again"); } if (placementCount >= maxPlacements) { gameEnded = true; showFinalResult(); } console.log("[" + label + "] accumulated " + matKey + " +" + qty); }); }); // ============================================================ // INTRO / TUTORIAL OVERLAY — updated layer descriptions // ============================================================ const introContent = [ { title: "GOAL", lines: [ "Follow redevelopment decisions from planners.", "Build a 6-floor CLT housing using recovered", "materials from existing buildings.", "", "Play through two roles — Planner and Developer —", "to select districts, recover materials, and", "match them to the appropriate layers", "of the new building.", "", "You have 10 placements. Make them count." ] }, { title: "PLANNER", lines: [ "Click a district on the map to view its data.", "", "Then decide:", "", " BEGIN — redevelop now", " POSTPONE — delay redevelopment", "", "Only districts marked BEGIN will be", "available in the Developer phase." ] }, { title: "DEVELOPER", lines: [ "Within selected districts, click highlighted", "buildings to choose available materials:", "", "BRICK · CONCRETE · STEEL · WOOD · WINDOW", "", "Select a material, then assign it to a layer:", "", " SKIN — facade (50 yrs)", " SPACE PLAN — interior (20 yrs)", " STUFF — furniture (5 yrs)", "", "Each placement contributes to the construction", "of the new housing. The longer a material can be", "reused across layer lifecycles, the higher your score." ] }, { title: "SCORING", lines: [ "Score = reuse cycles × layer demand.", "", "Materials with longer remaining lifespan placed", "on high-demand layers will score the highest.", "Durable materials reused across multiple cycles", "lead to the best outcomes.", "", " 40+ PERFECT MATCH", " 25+ GOOD REUSE", " 10+ ACCEPTABLE", " <10 POOR PLACEMENT", "", "Use BACK to undo. Use CLEAN to reset." ] } ]; function showIntro(){ svg.select(".introOverlay").remove(); const overlay = svg.append("g") .attr("class", "introOverlay"); // --- Card: taller to fit the OWNER step --- const cardW = 900; const cardH = 760; // was 620 — made taller const cardX = width/2 - cardW/2; const cardY = height/2 - cardH/2; overlay.append("rect") .attr("x", 0).attr("y", 0) .attr("width", width).attr("height", height) .attr("fill", "#000000") .attr("opacity", 0.55); const borderThickness = 14; overlay.append("rect") .attr("x", cardX - borderThickness) .attr("y", cardY - borderThickness) .attr("width", cardW + borderThickness * 2) .attr("height", cardH + borderThickness * 2) .attr("rx", 28) .attr("fill", "#FBB03F") .attr("stroke", "#1E1E1E") .attr("stroke-width", 3); overlay.append("rect") .attr("x", cardX).attr("y", cardY) .attr("width", cardW).attr("height", cardH) .attr("rx", 20) .attr("fill", "#FFFFFF") .attr("stroke", "#1E1E1E") .attr("stroke-width", 4); // --- Close (×) button --- const closeX = cardX + cardW - 45; const closeY = cardY + 45; const closeBtn = overlay.append("g") .style("cursor", "pointer") .on("click", function(){ svg.select(".introOverlay").remove(); }); closeBtn.append("circle") .attr("cx", closeX).attr("cy", closeY) .attr("r", 20) .attr("fill", "#EDEDED") .attr("stroke", "#1E1E1E") .attr("stroke-width", 2); closeBtn.append("text") .attr("x", closeX).attr("y", closeY + 8) .attr("text-anchor", "middle") .attr("font-family", "Anton") .attr("font-size", "26px") .attr("fill", "#1E1E1E") .text("×"); // --- Step indicator (tagged with class for easy update) --- overlay.append("text") .attr("class", "stepIndicator") .attr("x", cardX + 50).attr("y", cardY + 55) .attr("font-family", "Inter") .attr("font-size", "14px") .attr("font-weight", "600") .attr("fill", "#999999") .text(`STEP ${introStep + 1} / ${introContent.length}`); // --- Body group (re-rendered per step) --- const bodyGroup = overlay.append("g").attr("class", "introBody"); renderIntroBody(bodyGroup, cardX, cardY, cardW, cardH); // --- NEXT / START button (bottom-right) --- // Placed FIRST so we can reference it in other handlers const btnW = 160; const btnH = 50; const btnX = cardX + cardW - btnW - 40; const btnY = cardY + cardH - 80; const nextBtn = overlay.append("g") .attr("class", "introNextBtn") .style("cursor", "pointer"); nextBtn.append("rect") .attr("x", btnX).attr("y", btnY) .attr("width", btnW).attr("height", btnH) .attr("rx", 8) .attr("fill", "#1E1E1E"); nextBtn.append("text") .attr("class", "introNextLabel") .attr("x", btnX + btnW/2) .attr("y", btnY + btnH/2 + 7) .attr("font-family", "Anton") .attr("font-size", "22px") .attr("fill", "#FFFFFF") .attr("text-anchor", "middle") .text(introStep === introContent.length - 1 ? "START →" : "NEXT →"); nextBtn.on("click", function(){ if (introStep < introContent.length - 1) { introStep++; syncIntroUI(overlay, bodyGroup, cardX, cardY, cardW, cardH); } else { svg.select(".introOverlay").remove(); } }); // --- Progress dots (lowered and left-aligned so they don't collide with button) --- const dotsY = cardY + cardH - 55; // moved lower const dotCount = introContent.length; const dotGap = 30; const dotsTotalWidth = (dotCount - 1) * dotGap; const dotsStartX = cardX + 60; // left-aligned, away from the button for (let i = 0; i < dotCount; i++) { const dotGroup = overlay.append("g") .style("cursor", "pointer") .on("click", function(){ introStep = i; syncIntroUI(overlay, bodyGroup, cardX, cardY, cardW, cardH); }); dotGroup.append("circle") .attr("class", "introDot") .attr("cx", dotsStartX + i * dotGap) .attr("cy", dotsY) .attr("r", 8) .attr("fill", i === introStep ? "#FBB03F" : "#DDDDDD") .attr("stroke", "#1E1E1E") .attr("stroke-width", 1.5); } } // Single source of truth for updating intro UI after step change function syncIntroUI(overlay, bodyGroup, cardX, cardY, cardW, cardH){ renderIntroBody(bodyGroup, cardX, cardY, cardW, cardH); overlay.selectAll(".introDot") .attr("fill", (_, idx) => idx === introStep ? "#FBB03F" : "#DDDDDD"); overlay.select(".stepIndicator") .text(`STEP ${introStep + 1} / ${introContent.length}`); overlay.select(".introNextLabel") .text(introStep === introContent.length - 1 ? "START →" : "NEXT →"); } function renderIntroBody(bodyGroup, cardX, cardY, cardW, cardH){ bodyGroup.selectAll("*").remove(); const step = introContent[introStep]; // Title bodyGroup.append("text") .attr("x", cardX + cardW/2) .attr("y", cardY + 130) .attr("font-family", "Anton") .attr("font-size", "52px") .attr("text-anchor", "middle") .attr("fill", "#1E1E1E") .text(step.title); // Body lines const lineHeight = 30; const bodyStartY = cardY + 210; step.lines.forEach((line, i) => { bodyGroup.append("text") .attr("x", cardX + cardW/2) .attr("y", bodyStartY + i * lineHeight) .attr("font-family", "Inter") .attr("font-size", "18px") .attr("text-anchor", "middle") .attr("fill", "#1E1E1E") .text(line); }); } // Material number panels const slot1Width = 80; const slot2Width = 80; const slot3Width = 80; const slotHeight = 50; const col1X = startX + 125; const col2X = startX + 240; const col3X = startX + 355; const newConstReqItems = [ { label: "BRICK", value: "36,000 FT³" }, { label: "CONCRETE", value: "127,200 FT³" }, { label: "STEEL", value: "540 TON" }, { label: "WOOD", value: "2,520 FT³" }, { label: "WINDOW", value: "22,500 FT²" } ]; // Layer required quantities for 6F CLT housing const layerReqQty = { skin: 1800, spaceplan: 3000, stuff: 300 }; // Track accumulated quantity per layer (all materials combined) let layerAccum = { skin: 0, spaceplan: 0, stuff: 0 }; // Layer panel colors matching the screenshot const layerPanelColors = { skin: { dark: "#8B6AAD", light: "#B8A1CC" }, spaceplan: { dark: "#CC8B5E", light: "#D9AE8A" }, stuff: { dark: "#D4A94E", light: "#DBBF83" } }; // Draw the REQ. QTY (6F HOUSING) panel in left-bottom area const reqPanelX = 48; const reqPanelY = 945; const reqPanelW = 340; const reqPanelH = 105; const reqColW = 100; const reqHeaderH = 28; const reqRowH = 28; // Column headers: SKIN / SPACE PLAN / STUFF const layerCols = [ { key: "skin", label: "SKIN", x: reqPanelX + 8 }, { key: "spaceplan", label: "SPACE PLAN", x: reqPanelX + 8 + reqColW + 8 }, { key: "stuff", label: "STUFF", x: reqPanelX + 8 + (reqColW + 8) * 2 } ]; const headerY = reqPanelY + 4; layerCols.forEach(col => { // Header colored box svg.append("rect") .attr("x", col.x).attr("y", headerY) .attr("width", reqColW).attr("height", reqHeaderH) .attr("rx", 3) .attr("fill", layerPanelColors[col.key].dark); // Header label — thinner weight staticText(col.label, col.x + reqColW / 2, headerY + 17, "Inter", "11px", "#FFFFFF", "500", "middle", "normal", "reqPanelHeader"); }); // Row 2: Required numbers const numRowY = headerY + reqHeaderH + 4; layerCols.forEach(col => { svg.append("rect") .attr("x", col.x).attr("y", numRowY) .attr("width", reqColW).attr("height", reqRowH) .attr("rx", 3) .attr("fill", layerPanelColors[col.key].light).attr("fill-opacity", 0.5); const reqVal = layerReqQty[col.key]; const displayVal = reqVal >= 1000 ? Math.round(reqVal / 1000) + "K" : String(reqVal); staticText(displayVal, col.x + reqColW / 2, numRowY + 19, "Anton", "13px", "#3A3A3A", "500", "middle", "normal", "reqPanelNum"); }); // Row 3: Percentage accumulated (dynamic, updated during gameplay) const pctRowY = numRowY + reqRowH + 4; layerCols.forEach(col => { svg.append("rect") .attr("x", col.x).attr("y", pctRowY) .attr("width", reqColW).attr("height", reqRowH) .attr("rx", 3) .attr("fill", layerPanelColors[col.key].light).attr("fill-opacity", 0.3); svg.append("text") .attr("class", "layerPct layerPct-" + col.key) .attr("x", col.x + reqColW / 2) .attr("y", pctRowY + 19) .attr("text-anchor", "middle") .attr("font-family", "Anton") .attr("font-size", "13px") .attr("fill", "#3A3A3A") .text("0%"); }); // Update layer % display function updateLayerPctDisplay(){ ["skin", "spaceplan", "stuff"].forEach(key => { const pct = layerReqQty[key] > 0 ? Math.min(100, Math.round((layerAccum[key] / layerReqQty[key]) * 100)) : 0; svg.select(".layerPct-" + key).text(pct + "%"); }); } materialIcons.forEach((icon, i) => { const y = startY + i * gap + 40; // QTY slot (gray) svg.append("rect") .attr("class", "material-slot-existing") .attr("x", col1X) .attr("y", y) .attr("width", slot1Width) .attr("height", slotHeight) .attr("rx", 10) .attr("fill", "#EDEDED") .attr("stroke", "#777"); // QTY text (dynamic) svg.append("text") .attr("class", "material-existing-text") .attr("x", col1X + slot1Width / 2) .attr("y", y + slotHeight / 2 + 9) .attr("text-anchor", "middle") .attr("font-family", "Anton") .attr("font-size", "21px") .attr("fill", "#3A3A3A") .text(""); // LIFE LEFT slot (yellow) svg.append("rect") .attr("x", col2X) .attr("y", y) .attr("width", slot2Width) .attr("height", slotHeight) .attr("rx", 10) .attr("fill", "#E8B949") .attr("stroke", "#777"); // LIFE LEFT text (dynamic) svg.append("text") .attr("class", "material-lifeleft-text") .attr("x", col2X + slot2Width / 2) .attr("y", y + slotHeight / 2 + 9) .attr("text-anchor", "middle") .attr("font-family", "Anton") .attr("font-size", "21px") .attr("fill", "#3A3A3A") .text(""); // ACCUMULATED slot (blue) svg.append("rect") .attr("x", col3X) .attr("y", y) .attr("width", slot3Width) .attr("height", slotHeight) .attr("rx", 10) .attr("fill", "#7EA4D6") .attr("stroke", "#777"); }); function accumText(materials){ console.log(materials) svg.selectAll('text.accumMat').remove() t.enter().append("text") .data(materials) .enter() .append("text") .attr("class", "accumMat") .attr("x", 440) .attr("y", function(d,i){return 240 + (i * 75)}) .attr("text-anchor", "middle") .attr("font-family", "Anton") .attr("font-size", "21px") .attr("fill", "#3A3A3A") .text(function(d){return d.quant}); } // Layer REQ QTY panel is drawn above — old newConstReqItems panel removed // Score = reuse cycles × demand weight // Reuse cycles = how many times the material can serve one layer lifecycle function getMaterialPlacementScore(materialType, remainingLife, layerName){ const targetLife = layerTargetLife[layerName]; if (!targetLife || remainingLife <= 0) return 0; const cycles = remainingLife / targetLife; const cappedCycles = Math.min(cycles, 10); const baseScore = cappedCycles * 10; // 0-100 const demand = layerDemandWeight[layerName] || 0.1; return Math.round(baseScore * demand); } // Convert a score into a rating label — adjusted for demand-weighted scoring function getScoreRating(score){ if (score >= 35) return { label: "Perfect Match", color: "#4CAF50" }; if (score >= 20) return { label: "Good Reuse", color: "#A8C26A" }; if (score >= 8) return { label: "Acceptable but Inefficient", color: "#E8B949" }; return { label: "Poor Placement", color: "#C14B5F" }; } // -------- DISTRICT LAYER -------- const cds = g.append("g") .data(bronx_commuinfoclip.features) .join("path") .attr("class", "nta") .attr("d", path5) .attr("transform", `translate(${mapOffsetX},${mapOffsetY})`) .attr("fill", "#EDE2C6") .attr("fill-opacity", 0.01) .attr("stroke", "#bbbcba") .attr("stroke-width", 1.5) .style("cursor", "pointer") .style("pointer-events", "all") .on("pointerdown", function(event, d){ // Get bounds of the clicked district for zooming const [[x0, y0], [x1, y1]] = path5.bounds(d); event.stopPropagation(); // Zoom to clicked district svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height))) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), d3.pointer(event, svg.node()) ); // Match clicked district to spreadsheet data var clickedZone = zonedata.find(z => z.nta2020 == d.properties.nta2020); selectedZoneData = clickedZone || d.properties; // Store current district buildings selectedZoneBuildings = buildingdata.filter(b => b.nta2020 === d.properties.nta2020); selectedBuildingClockIndex = null; selectedBuildingData = null; updateMaterialPanel(null); updateLifeLeftPanel(null); // Immediately show clock times for this district updateClockPanel(selectedZoneBuildings); console.log(clickedZone); console.log("clicked", d.properties.ntaname); // Show district dataset in all modes showZoneDataset(d, clickedZone, null); // Show temporary red highlight if this district has no permanent decision yet showTemporaryZoneHighlight(this, d); }); bldgFootprints(path, highlightFeatures, "#FF8C00", 1, 5, "#C14B5F", true); // Remaining placements display (top right of map area) svg.append("text") .attr("class", "placementRemaining") .attr("x", 1375) .attr("y", 100) .attr("font-family", "Anton") .attr("font-size", "24px") .attr("fill", "#1E1E1E") .attr("text-anchor", "end") .text(`CHOICES LEFT: ${maxPlacements - placementCount} / ${maxPlacements}`); function updatePlacementCounter(){ svg.select("text.placementRemaining") .text(`CHOICES LEFT: ${maxPlacements - placementCount} / ${maxPlacements}`); } // Point score text svg.append("text") .attr("class", "pointText") .attr("x", 1455) .attr("y", 1010) .attr("font-family", "Anton") .attr("font-size", "42px") .attr("fill", "#FFFFFF") .attr("stroke", "#000000") .attr("stroke-width", 3) .attr("paint-order", "stroke") .attr("text-anchor", "start") .text(`POINT: ${totalPoints}`); // Helper to refresh the POINT display function updatePointDisplay(){ svg.select("text.pointText").text(`POINT: ${totalPoints}`); } // -------- ICONS -------- // Building layer image svg.append("image") .attr("href", buildinglayer0101) .attr("x", 1410) .attr("y", 360) .attr("width", 250) .attr("height", 250); // -------- GAME TITLE -------- // "CHRONOMAT" title in top-left black bar — click opens tutorial overlay svg.append("text") .attr("class", "game-title") .attr("x", 190) .attr("y", 82) .attr("font-family", "Anton") .attr("font-size", "52px") .attr("fill", "#1E1E1E") .attr("stroke", "#FBB03F") .attr("stroke-width", 5) .attr("paint-order", "stroke") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("letter-spacing", "3px") .style("cursor", "pointer") .text("CHRONOMAT") .on("mouseover", function() { d3.select(this).attr("opacity", 0.7); }) .on("mouseout", function() { d3.select(this).attr("opacity", 1); }) .on("click", function() { d3.select(this).attr("opacity", 0.45); setTimeout(() => { d3.select(this).attr("opacity", 1); }, 120); introStep = 0; showIntro(); }); // Info icon — preserved for future functionality svg.append("image") .attr("href", icon_info) .attr("x", 405) .attr("y", 35) .attr("width", 90) .attr("height", 90) .style("cursor", "pointer") .on("mouseover", function() { d3.select(this).attr("opacity", 0.7); }) .on("mouseout", function() { d3.select(this).attr("opacity", 1); }) .on("click", function() { d3.select(this).attr("opacity", 0.45); setTimeout(() => { d3.select(this).attr("opacity", 1); }, 120); // Ready for future functionality const tutorial = infoTutorial(svg, width, height); tutorial.show(); }); // Planner icon svg.append("image") .attr("class", "planner-icon") .attr("href", icon_plannar) .attr("x", 405) .attr("y", 605) .attr("width", 90) .attr("height", 90) .style("cursor", "pointer") .on("mouseover", function() { d3.select(this).attr("opacity", 0.7); }) .on("mouseout", function() { d3.select(this).attr("opacity", 1); }) .on("click", function() { d3.select(this).attr("opacity", 0.45); setTimeout(() => { d3.select(this).attr("opacity", 1); }, 120); plannerMode = !plannerMode; ownerMode = false; refreshZoneStyles(); updateOwnerPanel(); updateTimeSliderHighlight(); }); // Owner icon svg.append("image") .attr("class", "owner-icon") .attr("href", icon_owner) .attr("x", 405) .attr("y", 725) .attr("width", 90) .attr("height", 90) .style("cursor", "pointer") .on("mouseover", function() { d3.select(this).attr("opacity", 0.7); }) .on("mouseout", function() { d3.select(this).attr("opacity", 1); }) .on("click", function() { d3.select(this).attr("opacity", 0.45); setTimeout(() => { d3.select(this).attr("opacity", 1); }, 120); console.log("owner clicked"); ownerMode = true; plannerMode = false; refreshZoneStyles(); updateOwnerPanel(); updateTimeSliderHighlight(); // refresh timeslider }); // Back icon svg.append("image") .attr("href", icon_back) .attr("x", 405) .attr("y", 843) .attr("width", 90) .attr("height", 90) .style("cursor", "pointer") .on("mouseover", function() { d3.select(this).attr("opacity", 0.7); }) .on("mouseout", function() { d3.select(this).attr("opacity", 1); }) .on("click", function() { d3.select(this).attr("opacity", 0.45); setTimeout(() => { d3.select(this).attr("opacity", 1); }, 120); // Undo most recent material accumulation first if (materialHistory.length > 0) { const lastMat = materialHistory.pop(); // subtract from accumulated amount accumMat[lastMat.matIndex].quant -= lastMat.qty; // undo layer accumulation if (lastMat.layerName) { layerAccum[lastMat.layerName] -= lastMat.qty; updateLayerPctDisplay(); } // restore building material quantity const building = buildingdata.find(b => b.id === lastMat.buildingId); if (building) { building[lastMat.matKey] = lastMat.qty; // if it's the currently selected building, refresh the material panel if (selectedBuildingData && selectedBuildingData.id === lastMat.buildingId) { updateMaterialPanel(selectedBuildingData); } } // subtract earned points totalPoints -= (lastMat.points || 0); updatePointDisplay(); // decrement placement count if (placementCount > 0) placementCount--; gameEnded = false; svg.select(".finalOverlay").remove(); updatePlacementCounter(); accumText(accumMat); console.log("undid material accumulation:", lastMat.matKey, "+", lastMat.qty); return; } // Otherwise undo zone action if (actionHistory.length === 0) { console.log("nothing to undo"); return; } // latest action and redo const last = actionHistory.pop(); if (last.previousStatus === undefined) { // zoneDecisions.delete(last.nta2020); } else { // zoneDecisions.set(last.nta2020, last.previousStatus); } refreshZoneStyles(); updateTimeSliderHighlight(); console.log("undid action on", last.nta2020); }); // Clean icon svg.append("image") .attr("href", icon_clean) .attr("x", 406) .attr("y", 960) .attr("width", 90) .attr("height", 90) .style("cursor", "pointer") .on("mouseover", function() { d3.select(this).attr("opacity", 0.7); }) .on("mouseout", function() { d3.select(this).attr("opacity", 1); }) .on("click", function() { console.log("clean clicked"); d3.select(this).attr("opacity", 0.45); // Restore all buildings to original material values buildingdata.forEach(b => { if (b._orig) { b.brick = b._orig.brick; b.concrete = b._orig.concrete; b.steel = b._orig.steel; b.wood = b._orig.wood; b.window = b._orig.window; } }); // Reset everything resetUIState(); // Clear all accumulated material quantities accumMat.forEach(m => m.quant = 0); // Reset layer accumulation layerAccum = { skin: 0, spaceplan: 0, stuff: 0 }; updateLayerPctDisplay(); // Reset total score totalPoints = 0; updatePointDisplay(); accumText(accumMat); // Reset game state placementCount = 0; gameEnded = false; updatePlacementCounter(); // Remove final result overlay if it exists svg.select(".finalOverlay").remove(); // Clear material undo history materialHistory = []; // Clear selected material icon highlight selectedMaterialIndex = null; d3.selectAll("image.brick, image.concrete, image.steel, image.wood, image.window") .style("outline", "none") .style("filter", "none"); setTimeout(() => { d3.select(this).attr("opacity", 1); }, 120); }); // Update time slider year label highlights based on current state function updateTimeSliderHighlight(){ // default black svg.selectAll(".yearText").style("fill", "#1E1E1E"); if (plannerMode) { svg.selectAll(".year-2026").style("fill", "#C14B5F"); } if (ownerMode) { svg.selectAll(".year-2030").style("fill", "#C14B5F"); } } // -------- ACTION TEXT LOGIC -------- svg.selectAll(".actionText") .style("cursor", "pointer") .on("click", function(event, d){ const clickedLabel = d3.select(this).text(); activeAction = clickedLabel; // Reset all action text colors svg.selectAll(".actionText") .style("fill", "#1E1E1E"); // Temporary white flash for clicked action d3.select(this) .style("fill", "#FFFFFF"); setTimeout(() => { d3.select(this).style("fill", "#1E1E1E"); }, 180); if (!selectedZoneData) { console.log("Please select a zone first."); return; } // Begin decision if (clickedLabel === "BEGIN") { // record history, for back undo actionHistory.push({ nta2020: selectedZoneData.nta2020, previousStatus: zoneDecisions.get(selectedZoneData.nta2020) // undefined if no previous decision }); zoneDecisions.set(selectedZoneData.nta2020, "begin"); refreshZoneStyles(); updateTimeSliderHighlight(); } // Postpone decision if (clickedLabel === "POSTPONE") { actionHistory.push({ nta2020: selectedZoneData.nta2020, previousStatus: zoneDecisions.get(selectedZoneData.nta2020) }); zoneDecisions.set(selectedZoneData.nta2020, "postpone"); refreshZoneStyles(); updateTimeSliderHighlight(); } // Placeholder for later game logic if (clickedLabel === "SKIN" || clickedLabel === "SPACE PLAN" || clickedLabel === "STUFF") { console.log(clickedLabel + " clicked"); } }); // Initialize styles refreshZoneStyles(); updateTimeSliderHighlight(); // Activate zoom //svg.call(zoom); accumText(accumMat) // Wrap detail text if needed var wrap = svg.selectAll("text.staticdetail") .each(function(d, i) { wrap_text(d3.select(this), 50) }); return svg.node(); }2e:T2cfe,// ============================================================ // INFO TUTORIAL — step-by-step interface guide // Paste this in a NEW cel BEFORE the chart cell // ============================================================ infoTutorial = function(svg, width, height) { let infoStep = 0; // Each step: title, lines of text, and highlight box coords (x, y, w, h) const steps = [ { title: "THE MAP", highlight: { x: 525, y: 60, w: 858, h: 980 }, lines: [ "This is a section of the Bronx, where", "redevelopment is proposed to build new housing.", "", "Click any district to view its data.", "Buildings highlighted in pink can be selected", "to recover their materials." ] }, { title: "REMAINING LIFESPAN", highlight: { x: 1410, y: 38, w: 250, h: 300 }, lines: [ "Each clock represents the remaining lifespan", "of a building in the selected district.", "", "Assuming a 150-year total lifespan,", "the clock shows how many years are left.", "", "Click a highlighted building to see", "its corresponding clock light up." ] }, { title: "INFORMATION BOARD", highlight: { x: 38, y: 600, w: 350, h: 290 }, lines: [ "Displays detailed data for the selected", "district and building.", "", "District: Building count · Housing units ·", "Total sqft · Average lifespan · Residential %", "", "Building: Address · Year built ·", "Remaining lifespan · Material quantities" ] }, { title: "RECOVERED MATERIAL LIST", highlight: { x: 38, y: 120, w: 462, h: 470 }, lines: [ "When a building is selected,", "its materials appear here:", "BRICK · CONCRETE · STEEL · WOOD · WINDOW", "", "QTY — available quantity", "LIFE LEFT (yellow) — estimated remaining", " lifespan based on chemical properties", "ACCUMULATED (blue) — total collected so far", "", "Click a material to select it for reuse." ] }, { title: "REQ. QTY (6F HOUSING)", highlight: { x: 38, y: 900, w: 350, h: 160 }, lines: [ "The new 6-floor CLT housing requires", "materials across three building layers.", "", "As you place recovered materials,", "the percentage bars fill up — showing", "how much demand is met through reuse.", "", "This reveals the impact of reuse", "on reducing new material consumption." ] }, { title: "BUILDING LAYER", highlight: { x: 1410, y: 339, w: 250, h: 253 }, lines: [ "The new building is organized into layers", "with different lifespans:", "", " SKIN — facade (50 yrs)", " SPACE PLAN — interior (20 yrs)", " STUFF — furniture (5 yrs)", "", "Use this as a guide when assigning", "recovered materials to the new construction." ] }, { title: "PLANNER MODE", highlight: [{ x: 407, y: 602, w: 90, h: 99 }, { x: 1410, y: 600, w: 250, h: 120 }], lines: [ "Click the Planner icon to begin.", "", "As a planner, decide which districts", "to redevelop first:", "", " BEGIN — redevelop now", " POSTPONE — delay for later", "", "Only districts marked BEGIN will be", "available in the next phase." ] }, { title: "DEVELOPER MODE", highlight: [{ x: 407, y: 720, w: 90, h: 98 }, { x: 1410, y: 739, w: 250, h: 185 }], lines: [ "Click the Developer icon to continue.", "", "Assemble the new building using", "recovered materials:", " 1. Click a building for its materials", " 2. Select a material", " 3. Assign to SKIN / SPACE PLAN / STUFF", "", "Match material lifespan to layer lifespan", "for the best score." ] }, { title: "UNDO & RESTART", highlight: { x: 407, y: 836, w: 90, h: 220 }, lines: [ " BACK (top) — undo your last action", "", " CLEAN (bottom) — restart the entire game", "", "All materials and scores will be reset." ] }, { title: "CHOICES & SCORING", highlight: [{ x: 1410, y: 938, w: 250, h: 118 },{ x: 1180, y: 66, w: 200, h: 39 }], lines: [ "You have 10 placements per game.", "You can select materials from any", "highlighted building — not limited to one.", "", "Your score depends on how many reuse cycles", "each material can achieve in its assigned layer.", "After 10 placements, you'll receive a rating:", " PERFECT MATCH / GOOD REUSE /", " ACCEPTABLE / POOR PLACEMENT" ] } ]; function show() { svg.select(".infoOverlay").remove(); infoStep = 0; renderStep(); } function renderStep() { svg.select(".infoOverlay").remove(); const step = steps[infoStep]; // Normalize highlight to array (single or multiple regions) const hlArr = Array.isArray(step.highlight) ? step.highlight : [step.highlight]; const hl = hlArr[0]; // primary region for card positioning const overlay = svg.append("g") .attr("class", "infoOverlay"); // Dark overlay with cutouts for all highlight areas const maskId = "infoMask-" + infoStep; const defs = overlay.append("defs"); const mask = defs.append("mask").attr("id", maskId); mask.append("rect") .attr("x", 0).attr("y", 0) .attr("width", width).attr("height", height) .attr("fill", "white"); // Cut out each highlight region hlArr.forEach(h => { mask.append("rect") .attr("x", h.x - 4).attr("y", h.y - 4) .attr("width", h.w + 8).attr("height", h.h + 8) .attr("rx", 8) .attr("fill", "black"); }); overlay.append("rect") .attr("x", 0).attr("y", 0) .attr("width", width).attr("height", height) .attr("fill", "#000000") .attr("opacity", 0.65) .attr("mask", `url(#${maskId})`); // Highlight borders for all regions hlArr.forEach(h => { overlay.append("rect") .attr("x", h.x - 4).attr("y", h.y - 4) .attr("width", h.w + 8).attr("height", h.h + 8) .attr("rx", 8) .attr("fill", "none") .attr("stroke", "#FBB03F") .attr("stroke-width", 4); }); // Info card position — try to place opposite to highlight const cardW = 480; const cardH = 380; let cardX, cardY; // Place card on opposite side of highlight if (hl.x + hl.w / 2 < width / 2) { cardX = Math.min(hl.x + hl.w + 40, width - cardW - 20); } else { cardX = Math.max(hl.x - cardW - 40, 20); } cardY = Math.max(40, Math.min(hl.y, height - cardH - 40)); // Card yellow border const borderT = 10; overlay.append("rect") .attr("x", cardX - borderT).attr("y", cardY - borderT) .attr("width", cardW + borderT * 2).attr("height", cardH + borderT * 2) .attr("rx", 18) .attr("fill", "#FBB03F") .attr("stroke", "#1E1E1E") .attr("stroke-width", 2); // Card white body overlay.append("rect") .attr("x", cardX).attr("y", cardY) .attr("width", cardW).attr("height", cardH) .attr("rx", 12) .attr("fill", "#FFFFFF") .attr("stroke", "#1E1E1E") .attr("stroke-width", 3); // Step indicator overlay.append("text") .attr("x", cardX + 20).attr("y", cardY + 28) .attr("font-family", "Inter") .attr("font-size", "12px") .attr("font-weight", "600") .attr("fill", "#999999") .text(`${infoStep + 1} / ${steps.length}`); // Title overlay.append("text") .attr("x", cardX + cardW / 2).attr("y", cardY + 70) .attr("font-family", "Anton") .attr("font-size", "32px") .attr("text-anchor", "middle") .attr("fill", "#1E1E1E") .text(step.title); // Body text const lineH = 24; const bodyY = cardY + 110; step.lines.forEach((line, i) => { overlay.append("text") .attr("x", cardX + cardW / 2) .attr("y", bodyY + i * lineH) .attr("font-family", "Inter") .attr("font-size", "14px") .attr("text-anchor", "middle") .attr("fill", "#2F2F2F") .text(line); }); // --- Navigation buttons --- const btnY = cardY + cardH - 55; // PREV button (if not first step) if (infoStep > 0) { const prevBtn = overlay.append("g") .style("cursor", "pointer") .on("click", function() { infoStep--; renderStep(); }); prevBtn.append("rect") .attr("x", cardX + 20).attr("y", btnY) .attr("width", 50).attr("height", 36) .attr("rx", 6) .attr("fill", "#EDEDED") .attr("stroke", "#1E1E1E") .attr("stroke-width", 1.5); prevBtn.append("text") .attr("x", cardX + 45).attr("y", btnY + 24) .attr("font-family", "Anton") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "#1E1E1E") .text("←"); } // NEXT / CLOSE button const isLast = infoStep === steps.length - 1; const nextBtn = overlay.append("g") .style("cursor", "pointer") .on("click", function() { if (isLast) { svg.select(".infoOverlay").remove(); } else { infoStep++; renderStep(); } }); const nextBtnW = 50; const nextBtnX = cardX + cardW - nextBtnW - 20; nextBtn.append("rect") .attr("x", nextBtnX).attr("y", btnY) .attr("width", nextBtnW).attr("height", 36) .attr("rx", 6) .attr("fill", "#1E1E1E"); nextBtn.append("text") .attr("x", nextBtnX + nextBtnW / 2).attr("y", btnY + 24) .attr("font-family", "Anton") .attr("font-size", isLast ? "16px" : "20px") .attr("text-anchor", "middle") .attr("fill", "#FFFFFF") .text(isLast ? "✓" : "→"); // Close X button const closeBtn = overlay.append("g") .style("cursor", "pointer") .on("click", function() { svg.select(".infoOverlay").remove(); }); closeBtn.append("circle") .attr("cx", cardX + cardW - 25).attr("cy", cardY + 25) .attr("r", 16) .attr("fill", "#EDEDED") .attr("stroke", "#1E1E1E") .attr("stroke-width", 1.5); closeBtn.append("text") .attr("x", cardX + cardW - 25).attr("y", cardY + 32) .attr("text-anchor", "middle") .attr("font-family", "Anton") .attr("font-size", "20px") .attr("fill", "#1E1E1E") .text("×"); // Progress dots const dotsY = btnY + 14; const dotGap = 20; const dotsStartX = cardX + cardW / 2 - (steps.length - 1) * dotGap / 2; for (let i = 0; i < steps.length; i++) { const dotG = overlay.append("g") .style("cursor", "pointer") .on("click", function() { infoStep = i; renderStep(); }); dotG.append("circle") .attr("cx", dotsStartX + i * dotGap) .attr("cy", dotsY) .attr("r", 5) .attr("fill", i === infoStep ? "#FBB03F" : "#CCCCCC") .attr("stroke", "#1E1E1E") .attr("stroke-width", 1); } } return { show }; }2f:[{"id":"9a495c7672424b5199b9945ecb10532bbbbd2980bb25d083176299a2d3e15f316e1337d04bd170d38723f2a9b5deef2ee78dd0f551100ad878bc1a45aaf57134","href":"https://static.observableusercontent.com/files/9a495c7672424b5199b9945ecb10532bbbbd2980bb25d083176299a2d3e15f316e1337d04bd170d38723f2a9b5deef2ee78dd0f551100ad878bc1a45aaf57134","name":"buildinglayer-02-02@3.png","type":"image/png","lastModified":1777240190872.086,"size":26132},{"id":"1f4c00afdb1ac6d9e1a81d4d7b118f2269ada77a66794f276a7c65f6575b8e1f54f4c6dfb003ba78491167c11ae1e628d5ca0740aeb69ebf3af62dcfa93bf6c2","href":"https://static.observableusercontent.com/files/1f4c00afdb1ac6d9e1a81d4d7b118f2269ada77a66794f276a7c65f6575b8e1f54f4c6dfb003ba78491167c11ae1e628d5ca0740aeb69ebf3af62dcfa93bf6c2","name":"white_rect.txt","type":"text/plain","lastModified":1777178013151.236,"size":153},{"id":"4392eedd4de416fea4109eedceca0d9e9850804182350761ea9fbd4fe25ee6e47d4a990eca72a5ed8f0723b2598637b28ca0a03dc627db8cc4c7c27148e6355a","href":"https://static.observableusercontent.com/files/4392eedd4de416fea4109eedceca0d9e9850804182350761ea9fbd4fe25ee6e47d4a990eca72a5ed8f0723b2598637b28ca0a03dc627db8cc4c7c27148e6355a","name":"runs_new.txt","type":"text/plain","lastModified":1777178013151.236,"size":65607},{"id":"16ca64aae9d370cef645d4b73f41fa4277ecbb5005070e307163a5c8c205bf6a08e4efe8f2a8166671cbbe4748f9c5cc89c3c4ae697855fb48c61b82a972fd51","href":"https://static.observableusercontent.com/files/16ca64aae9d370cef645d4b73f41fa4277ecbb5005070e307163a5c8c205bf6a08e4efe8f2a8166671cbbe4748f9c5cc89c3c4ae697855fb48c61b82a972fd51","name":"bldgs.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":123475},{"id":"b42eea315bdf3d32019c5b2738314331a2d00063ec04253b45b5bc84f349bb3d208e71f5e69e6fb0a86e684ed61e775a910de0cf102560a9240d085e15defc07","href":"https://static.observableusercontent.com/files/b42eea315bdf3d32019c5b2738314331a2d00063ec04253b45b5bc84f349bb3d208e71f5e69e6fb0a86e684ed61e775a910de0cf102560a9240d085e15defc07","name":"bbox.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":493},{"id":"cfef49b55b633688af7b659d01bfd72bbf28c32f6d619c5580951ecbefe397114d0248c1ff41ba448b232ddcf428b55d92fd5a2431eb93c78ec3ae23cae85e22","href":"https://static.observableusercontent.com/files/cfef49b55b633688af7b659d01bfd72bbf28c32f6d619c5580951ecbefe397114d0248c1ff41ba448b232ddcf428b55d92fd5a2431eb93c78ec3ae23cae85e22","name":"parks.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":2989931},{"id":"8bdf83e46e71a8bdd8fc78a70b94da1e5c8f46a4f732760a7258b1937f900708e61302b3f79279f2755bf53116d84fd6bf1c82cf3fc77a8dc79bdcbae5922f15","href":"https://static.observableusercontent.com/files/8bdf83e46e71a8bdd8fc78a70b94da1e5c8f46a4f732760a7258b1937f900708e61302b3f79279f2755bf53116d84fd6bf1c82cf3fc77a8dc79bdcbae5922f15","name":"roads.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":303170},{"id":"dc311082c2389d07eb8edea1227e001753ffcd460f7cca69c730a7a4fdf1b093728f0a9eca9273c7fcdc0a5d4ba7cd34c6bf748ee18f415311a955a606e66ba8","href":"https://static.observableusercontent.com/files/dc311082c2389d07eb8edea1227e001753ffcd460f7cca69c730a7a4fdf1b093728f0a9eca9273c7fcdc0a5d4ba7cd34c6bf748ee18f415311a955a606e66ba8","name":"trails@1.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":249321},{"id":"7fcd13741411644c5a7b477f6b57022b8aa6017a77ec91921b59b36a84a3a453174367956e260cd6c6fbf14f98c7a2462fd3929734648ad5b16185e82e1f8a1b","href":"https://static.observableusercontent.com/files/7fcd13741411644c5a7b477f6b57022b8aa6017a77ec91921b59b36a84a3a453174367956e260cd6c6fbf14f98c7a2462fd3929734648ad5b16185e82e1f8a1b","name":"Park_web.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":870649},{"id":"e7a51605098a0b1dd45cc90d0690abbb3736cf62f3645a36b2c3a0ee7972ccca8266729ae2dc17f4ec1d4d14b97a6f2c036a4fc1b634150df0d5975459b6929e","href":"https://static.observableusercontent.com/files/e7a51605098a0b1dd45cc90d0690abbb3736cf62f3645a36b2c3a0ee7972ccca8266729ae2dc17f4ec1d4d14b97a6f2c036a4fc1b634150df0d5975459b6929e","name":"Subway station_web.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":31856},{"id":"fa83997a242e253c0f6ea23de313a78c9b6ae0e5f763ea0434541be5cc461ad6cb24c3a60889f515d43a9c3a20250cd9f818d9861280cb3da78cdbb0e765586f","href":"https://static.observableusercontent.com/files/fa83997a242e253c0f6ea23de313a78c9b6ae0e5f763ea0434541be5cc461ad6cb24c3a60889f515d43a9c3a20250cd9f818d9861280cb3da78cdbb0e765586f","name":"Subway_web.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":1118151},{"id":"21f14cfc6dcd363443f3301c9b733196be9629709aad34cbd930f5f689fc014a3ab4e626b4b4d6a9fad9e477a11ff36ad92a1e1af0db2b4f26f8f593dd6993e2","href":"https://static.observableusercontent.com/files/21f14cfc6dcd363443f3301c9b733196be9629709aad34cbd930f5f689fc014a3ab4e626b4b4d6a9fad9e477a11ff36ad92a1e1af0db2b4f26f8f593dd6993e2","name":"Bronx Building_web.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":38595363},{"id":"0874795544bdfb6fdf741cf87025a911be40e983c34959e4ee6ae8bc8163bcfd15d7f6ac75c78c267d7d45b42e3ec53e731d3ab91e087fba61922ffb46ca8de9","href":"https://static.observableusercontent.com/files/0874795544bdfb6fdf741cf87025a911be40e983c34959e4ee6ae8bc8163bcfd15d7f6ac75c78c267d7d45b42e3ec53e731d3ab91e087fba61922ffb46ca8de9","name":"Bus station_web.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":31853},{"id":"1a7b1906a74ac7a04be31c72e4713807c306d0902b1889e060931f60f72521326c641326459a72cffb28cedde01b4673a6544a5cb2308a00aeec47a20908c746","href":"https://static.observableusercontent.com/files/1a7b1906a74ac7a04be31c72e4713807c306d0902b1889e060931f60f72521326c641326459a72cffb28cedde01b4673a6544a5cb2308a00aeec47a20908c746","name":"Boundingbox_web.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":543},{"id":"ae026c840d4f30df8a7d8a74781983a9817e7674b26f9c60924cf01a9e8438cedc1524aa6aee2169a82b9f1963617a1b4eb6b9ca89d1a4cc229eb58639f20fcf","href":"https://static.observableusercontent.com/files/ae026c840d4f30df8a7d8a74781983a9817e7674b26f9c60924cf01a9e8438cedc1524aa6aee2169a82b9f1963617a1b4eb6b9ca89d1a4cc229eb58639f20fcf","name":"Facility_web.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":198920},{"id":"34efba4a5385cf1091b964063a3800a2e0a3497649783db13165d438a1ecebc1673c21e91a3e2d04fa5b6429c74dadea9527159dcad67b04aed400bb8d4255c3","href":"https://static.observableusercontent.com/files/34efba4a5385cf1091b964063a3800a2e0a3497649783db13165d438a1ecebc1673c21e91a3e2d04fa5b6429c74dadea9527159dcad67b04aed400bb8d4255c3","name":"Bus_web.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":48596310},{"id":"ba3fa626c733011110a5bf0b60349b9be8dce47a981208ca3b6f774dc09c9ce192d6c3073d6a1d1156a3a9e3b34bf9f27ff2f77e9b5e8e27dd04a0e6a325627f","href":"https://static.observableusercontent.com/files/ba3fa626c733011110a5bf0b60349b9be8dce47a981208ca3b6f774dc09c9ce192d6c3073d6a1d1156a3a9e3b34bf9f27ff2f77e9b5e8e27dd04a0e6a325627f","name":"Bronx_web.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":73068},{"id":"88fbc3ae6f67583e7e23b443cee4f5a1dd9302f60e0850997fdbe269579133653fa13dff6a4e26af8a6a66ea86fcd542edea497ea9a09b1edaefce6809de7a24","href":"https://static.observableusercontent.com/files/88fbc3ae6f67583e7e23b443cee4f5a1dd9302f60e0850997fdbe269579133653fa13dff6a4e26af8a6a66ea86fcd542edea497ea9a09b1edaefce6809de7a24","name":"Icon_Plannar.png","type":"image/png","lastModified":1777178013151.236,"size":341981},{"id":"f3e9d2d76d968f0c8c9ffe8837e0383909aafdac183a6a441ebd8af6d3f5e94fd72f9aee6f233a01f8e4a69e1282307bc1e24265fd151a75152bb045fa445826","href":"https://static.observableusercontent.com/files/f3e9d2d76d968f0c8c9ffe8837e0383909aafdac183a6a441ebd8af6d3f5e94fd72f9aee6f233a01f8e4a69e1282307bc1e24265fd151a75152bb045fa445826","name":"Icon_Owner.png","type":"image/png","lastModified":1777178013151.236,"size":316667},{"id":"8f115bc995fff645f67a43f33286bb6eab7e17a79fbc63035362dac3adb4e56f8edd83aa382791e0e9570e379269904e55dbabc72a911a40cba124d311320df8","href":"https://static.observableusercontent.com/files/8f115bc995fff645f67a43f33286bb6eab7e17a79fbc63035362dac3adb4e56f8edd83aa382791e0e9570e379269904e55dbabc72a911a40cba124d311320df8","name":"Icon_Back.png","type":"image/png","lastModified":1777178013151.236,"size":210194},{"id":"a08fd7ca16b8247b1a4440e7753970520cb7d820a61ddd4ac59df14d9cededa9bc664a92cd108938ce4fcff65e54fc31857a0443c8a17f466e7cc3fbde5bca3e","href":"https://static.observableusercontent.com/files/a08fd7ca16b8247b1a4440e7753970520cb7d820a61ddd4ac59df14d9cededa9bc664a92cd108938ce4fcff65e54fc31857a0443c8a17f466e7cc3fbde5bca3e","name":"Icon_Clean.png","type":"image/png","lastModified":1777178013151.236,"size":217673},{"id":"9487d01a0ea6bda98772cc3d98b766f7433dc806d9941fe88303b75818e5c7a46b250a6626471dbbbf9272923431dde6dc37283b84bbe08425c49e0926ca4fc1","href":"https://static.observableusercontent.com/files/9487d01a0ea6bda98772cc3d98b766f7433dc806d9941fe88303b75818e5c7a46b250a6626471dbbbf9272923431dde6dc37283b84bbe08425c49e0926ca4fc1","name":"Icon_Steel.png","type":"image/png","lastModified":1777178013151.236,"size":152155},{"id":"5314c9186a8a72b6c6c5eaa828d1b3cc4231943107dd550c2968504f8ae2c19a27f5bd45c1d07a74916191379f935b65f22d702b9c39f43f332a23c95ed0c411","href":"https://static.observableusercontent.com/files/5314c9186a8a72b6c6c5eaa828d1b3cc4231943107dd550c2968504f8ae2c19a27f5bd45c1d07a74916191379f935b65f22d702b9c39f43f332a23c95ed0c411","name":"Icon_Brick.png","type":"image/png","lastModified":1777178013151.236,"size":178027},{"id":"956e8840bb80a692db4bb3c37ab7e27f13a3c2c613f8f0590ddc5a58a2b1b4b294549dc30e8cccb391333deb5e99de49bfabd5fb330a6cf09e8933f703c0f821","href":"https://static.observableusercontent.com/files/956e8840bb80a692db4bb3c37ab7e27f13a3c2c613f8f0590ddc5a58a2b1b4b294549dc30e8cccb391333deb5e99de49bfabd5fb330a6cf09e8933f703c0f821","name":"Icon_Concrete.png","type":"image/png","lastModified":1777178013151.236,"size":143802},{"id":"a6698a81bd60dcd9570e6f90f4c615ad140df354b0416d4ad0644b034cdc12ebf22fb3e15c7fe39af398d2e3e8465d018207b9a98206bc1bbd3211e7c1537b62","href":"https://static.observableusercontent.com/files/a6698a81bd60dcd9570e6f90f4c615ad140df354b0416d4ad0644b034cdc12ebf22fb3e15c7fe39af398d2e3e8465d018207b9a98206bc1bbd3211e7c1537b62","name":"Icon_Window.png","type":"image/png","lastModified":1777178013151.236,"size":196789},{"id":"35e029219080c845491e38bf2fddb2546bc677582f9c37d2d06d2c0b563ddea0b19c74b5478468891efd0002ec517b00b292fddc74b99d31939761be4c0b2ea7","href":"https://static.observableusercontent.com/files/35e029219080c845491e38bf2fddb2546bc677582f9c37d2d06d2c0b563ddea0b19c74b5478468891efd0002ec517b00b292fddc74b99d31939761be4c0b2ea7","name":"Icon_Wood@1.png","type":"image/png","lastModified":1777178013151.236,"size":212130},{"id":"1edbd7ed16aa1a1922ab5b8966b072d256183cc24b6d3cf9e1e0f66842830429586ed3a32f95d92bda4596ff6e4719eff7e96be498120fe5d167221c9738e442","href":"https://static.observableusercontent.com/files/1edbd7ed16aa1a1922ab5b8966b072d256183cc24b6d3cf9e1e0f66842830429586ed3a32f95d92bda4596ff6e4719eff7e96be498120fe5d167221c9738e442","name":"Icon_Clock@3.png","type":"image/png","lastModified":1777178013151.236,"size":82444},{"id":"3bb9b98aff93b23d7e346cd37a3f73628826925d40a88a1d2984dbf316a232d544f69325cca7e4533d68b987ee5bcab27a0848f1d0d49f29ecaf529df5d29d45","href":"https://static.observableusercontent.com/files/3bb9b98aff93b23d7e346cd37a3f73628826925d40a88a1d2984dbf316a232d544f69325cca7e4533d68b987ee5bcab27a0848f1d0d49f29ecaf529df5d29d45","name":"Icon_Info@2.png","type":"image/png","lastModified":1777178013151.236,"size":194182},{"id":"d6552d95e6c9a9615e580ab237643b583b61a7de1701a62ca68cccaea1173bfcd466ced68636e1f6d5571ca94e4188248023e7221583b4f5c40585dda3600735","href":"https://static.observableusercontent.com/files/d6552d95e6c9a9615e580ab237643b583b61a7de1701a62ca68cccaea1173bfcd466ced68636e1f6d5571ca94e4188248023e7221583b4f5c40585dda3600735","name":"Conversation-01.png","type":"image/png","lastModified":1777178013151.236,"size":191317},{"id":"f71628c9683097b6103dc8395e1db4535695f30c82ea5b6ac45e83b92c69e2773bc90c569ba557b9bcecac9240d7a3133db518eee3e8c16e183d190d43c09560","href":"https://static.observableusercontent.com/files/f71628c9683097b6103dc8395e1db4535695f30c82ea5b6ac45e83b92c69e2773bc90c569ba557b9bcecac9240d7a3133db518eee3e8c16e183d190d43c09560","name":"Bronx_commuinfoclip.geojson","type":"application/geo+json","lastModified":1777178013151.236,"size":211056},{"id":"0b55bd58d378abbed8f7b4410b9a8b1dff6c623303e09b2d9c78eafddd0e3d8a6e93654ff23445558dd93f4e987accef184fad2f2bf8d50a5d00333a273d0a27","href":"https://static.observableusercontent.com/files/0b55bd58d378abbed8f7b4410b9a8b1dff6c623303e09b2d9c78eafddd0e3d8a6e93654ff23445558dd93f4e987accef184fad2f2bf8d50a5d00333a273d0a27","name":"GameBackground-01@1.png","type":"image/png","lastModified":1777479281136.129,"size":246075}] 2b:{"id":"5d63c00e5b5e7f3e","slug":null,"title":"ChronoMat_Xinyu Liang_Final","thumbnail":"2a695d36f2f29db0a86e81e5aab3d04b1423dc979ba613270f61ca855360cf8e","access_level":"public","create_time":"$D2026-04-26T04:33:33.151Z","update_time":"$D2026-04-29T16:18:15.112Z","view_time":null,"first_public_time":"$D2026-04-26T22:09:22.885Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"0db7c8d181c130e4","login":"howerteaching","name":"hower_teaching","avatar_url":"https://avatars-next.observableusercontent.com/c84680807127542e6943c4528de050d301ffcd4bf3ba76bd86d9acdec0397b29","tier":"education_2026"},"version":2777,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9a9f32600f5ebdba","login":"xinyu-liang","name":"Xinyu Liang","avatar_url":"https://avatars-next.observableusercontent.com/b373bd8332b69326efc7adc58edc5902f5cf46900ccae6e9520b45977ad423f6","tier":null}],"members":[{"type":"team","id":"0db7c8d181c130e4","login":"howerteaching","name":"hower_teaching","avatar_url":"https://avatars-next.observableusercontent.com/c84680807127542e6943c4528de050d301ffcd4bf3ba76bd86d9acdec0397b29","tier":"education_2026","role":"editor"},{"type":"individual","id":"9a9f32600f5ebdba","login":"xinyu-liang","name":"Xinyu Liang","avatar_url":"https://avatars-next.observableusercontent.com/b373bd8332b69326efc7adc58edc5902f5cf46900ccae6e9520b45977ad423f6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"ChronoMat_Xinyu Liang_Final","cells":[{"id":762,"value":"# ChronoMat_Xinyu Liang_Final","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1988,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2656,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2763,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2610,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"bbox_new = FileAttachment(\"bbox.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1625,"value":"roads = FileAttachment(\"roads.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"trails = FileAttachment(\"trails@1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"parks = FileAttachment(\"parks.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"runsdata_link = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTFJPqz7N_gBCiDhRHN4nbuKiFYsyv1CzrKE4LF5fze6zXpiOQBrZx6sNU90I0uKUL8v-bdgBxON48M/pub?output=csv'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1512,"value":"bldgs = FileAttachment(\"bldgs.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1523,"value":"recttxt = FileAttachment(\"white_rect.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1527,"value":"rect = rhinoGraphics(recttxt)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1533,"value":"runs_txt = FileAttachment(\"runs_new.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1536,"value":"runs = rhinoGraphics(runs_txt)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1525,"value":"function rhinoGraphics(t){\n\n\n let linesData = []\n\n for(let i = 0; i < t.length; i=i+2){\n\n //pfill, pOpac, sOpac, sWght, stroke,pclass,dash\n var lFill='0',fOpac='0',sOpac='0',sWght='0',stroke='none',lClass='none',lDash='0'\n\n\n\n linesData.push({pts:t[i][0],name:t[i+1][0]})\n\n }\n\n\n return linesData\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1572,"value":"projection = d3.geoMercator()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1585,"value":"d3 = require(\"d3@7\", \"d3-geo-scale-bar@1.2\", \"d3-tile@1\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1926,"value":"boundingbox_web = FileAttachment(\"Boundingbox_web.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1928,"value":"bronxBuilding_web = FileAttachment(\"Bronx Building_web.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1929,"value":"bronx_web = FileAttachment(\"Bronx_web.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1930,"value":"busStation_web = FileAttachment(\"Bus station_web.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1931,"value":"bus_web = FileAttachment(\"Bus_web.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1932,"value":"facility_web = FileAttachment(\"Facility_web.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1933,"value":"park_web = FileAttachment(\"Park_web.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1934,"value":"subway_web = FileAttachment(\"Subway_web.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1939,"value":"subwayStation_web = FileAttachment(\"Subway station_web.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1970,"value":"urbanminer_background01 = FileAttachment(\"GameBackground-01@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1984,"value":"backgroundUrl = await FileAttachment(\"GameBackground-01@1.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2079,"value":"icon_back = FileAttachment(\"Icon_Back.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2081,"value":"icon_clean = FileAttachment(\"Icon_Clean.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2082,"value":"icon_owner = FileAttachment(\"Icon_Owner.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2083,"value":"icon_plannar = FileAttachment(\"Icon_Plannar.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2123,"value":"icon_brick = FileAttachment(\"Icon_Brick.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2125,"value":"icon_concrete = FileAttachment(\"Icon_Concrete.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2126,"value":"icon_steel = FileAttachment(\"Icon_Steel.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2127,"value":"icon_window = FileAttachment(\"Icon_Window.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2128,"value":"icon_wood = FileAttachment(\"Icon_Wood@1.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2157,"value":"icon_info = FileAttachment(\"Icon_Info@2.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2168,"value":"icon_clock = FileAttachment(\"Icon_Clock@3.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2230,"value":"conversation01 = FileAttachment(\"Conversation-01.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2234,"value":"bronx_commuinfoclip = FileAttachment(\"Bronx_commuinfoclip.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2280,"value":"zonedatalink = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRiRIUlB4YqO8YtVZrY61ie36-514wvG4hxRdNm07t6ge9cOXkD_k2C84_j3BnK0-sFNs-zXXSTb13S/pub?output=csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2282,"value":"zonedata = d3.csv(zonedatalink, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2341,"value":"buildinglayer0101 = FileAttachment(\"buildinglayer-02-02@3.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2352,"value":"buildingdatalink = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vR2kJKFbmgocalIyrEFK9XNt1z4zj7IU9v9jdwUL90OUuz83uKbC4jBuiBsnnb1Az4pa6FAbM4Y5LNa/pub?output=csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2354,"value":"buildingdata = d3.csv(buildingdatalink, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2373,"value":"buildingdata.slice(0,3).map(d => d.remainlifespan2030)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2379,"value":"buildingdata.map(d => d.nta2020)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2381,"value":"zonedata.map(d => d.nta2020)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"