2b:null 2c:["$","title",null,{"children":"Buildings Engineering | 🪦 dis-2025-fall | Observable"}] 31:T617,viewof county2 = { const input = Inputs.select( Array.from(new Set(employment.map(d => d.county))), { label: "County" } ); // Outer box to match your other controls const box = document.createElement("div"); box.style.padding = "12px 14px"; box.style.marginBottom = "8px"; box.style.borderRadius = "8px"; box.style.background = "#f5f5f8"; box.style.border = "1px solid #ccc"; box.style.display = "inline-block"; box.style.fontFamily = "system-ui, sans-serif"; // Label (clearer text) const label = document.createElement("label"); label.textContent = "County (click to change)"; label.style.fontSize = "16px"; label.style.fontWeight = "600"; label.style.display = "block"; label.style.marginBottom = "6px"; // Style the internal select a bit const select = input.querySelector("select"); if (select) { select.style.fontSize = "15px"; select.style.padding = "6px 8px"; select.style.borderRadius = "6px"; select.style.border = "2px solid #444"; select.style.cursor = "pointer"; select.style.minWidth = "220px"; } box.append(label); box.append(input); // Make the box behave like a proper viewof Object.defineProperty(box, "value", { get() { return input.value; } }); // Forward events so dependents update input.addEventListener("input", () => { box.dispatchEvent(new InputEvent("input", { bubbles: true })); }); input.addEventListener("change", () => { box.dispatchEvent(new InputEvent("input", { bubbles: true })); }); return box; }32:T992,viewof year5 = { const years = [2003, 2013, 2023]; const scrub = Scrubber(years, { format: d => d, autoplay: false, loop: false, delay: 1330 }); // Play button (same style family as year4) const playBtn = scrub.querySelector("button"); if (playBtn) { playBtn.style.fontSize = "18px"; playBtn.style.padding = "8px 16px"; playBtn.style.borderRadius = "6px"; playBtn.style.border = "2px solid #444"; playBtn.style.background = "#111827"; playBtn.style.color = "#f9fafb"; playBtn.style.cursor = "pointer"; } // Year text (same ~26px size we settled on) const YEAR_SIZE = "26px"; function resizeText(node) { if (!node) return; node.querySelectorAll("span").forEach(s => { s.style.fontSize = YEAR_SIZE; s.style.fontWeight = "700"; s.style.padding = "2px 6px"; s.style.display = "inline-block"; }); node.querySelectorAll("output").forEach(o => { o.style.fontSize = YEAR_SIZE; o.style.fontWeight = "700"; o.style.padding = "2px 6px"; o.style.display = "inline-block"; }); node.childNodes.forEach(n => { if (n.nodeType === Node.TEXT_NODE && /\d{4}/.test(n.textContent)) { const wrap = document.createElement("span"); wrap.textContent = n.textContent; wrap.style.fontSize = YEAR_SIZE; wrap.style.fontWeight = "700"; wrap.style.padding = "2px 6px"; wrap.style.display = "inline-block"; n.replaceWith(wrap); } }); } resizeText(scrub); // Outer box styled like your other controls const box = document.createElement("div"); box.style.padding = "12px 14px"; box.style.marginBottom = "8px"; box.style.borderRadius = "8px"; box.style.background = "#f5f5f8"; box.style.border = "1px solid #ccc"; box.style.display = "inline-block"; box.style.fontFamily = "system-ui, sans-serif"; const label = document.createElement("label"); label.textContent = "Year (press play or scroll)"; label.style.fontSize = "16px"; label.style.fontWeight = "600"; label.style.display = "block"; label.style.marginBottom = "6px"; box.append(label); box.append(scrub); // viewof wiring: forward value + events Object.defineProperty(box, "value", { get() { return scrub.value; } }); scrub.addEventListener("input", () => { box.dispatchEvent(new InputEvent("input", { bubbles: true })); }); return box; }33:T3a05,buildingsChart = { const { width, height } = dims; const svg = d3.create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .attr("width", width) .attr("height", height) .style("background", palette.bg); const groundY = height - 30; const buildingW = width / 8; const spacing = width / 18; const buildings = [ { name: "Power Plant", industry: "Manufacturing", color: palette.power }, { name: "Hospital", industry: "Health", color: palette.hospital }, { name: "Tech / Info", industry: "Information", color: palette.tech }, { name: "Finance", industry: "Finance", color: palette.skyscraper } ]; const tip = d3.select(tooltip); // ------------------------------------------------- // FIXED SCALE ACROSS ALL YEARS FOR THIS COUNTY // ------------------------------------------------- const allVals = years5.flatMap(y => buildings.map(b => getValue(county2, b.industry, y)) ); const globalMax = d3.max( allVals.filter(v => v != null && !isNaN(v)) ) || 1; const maxBuildingH = height * 0.65; const localScale = d3.scaleLinear() .domain([0, globalMax]) .range([0, maxBuildingH]); // --------- SIGN HELPERS --------- function addGenericSign(g, w, label, opts = {}) { const { bg = "#020617", fg = "#e5e7eb", dy = 10 } = opts; const signW = w * 0.9; const signH = 26; const sx = (w - signW) / 2; const sy = -signH - dy; g.append("rect") .attr("x", sx) .attr("y", sy) .attr("width", signW) .attr("height", signH) .attr("rx", 10) .attr("fill", bg) .attr("stroke", palette.outlines) .attr("stroke-width", 2); g.append("text") .attr("x", sx + signW / 2) .attr("y", sy + signH / 2 + 4) .attr("text-anchor", "middle") .attr("fill", fg) .attr("font-size", 11) .attr("font-family", "system-ui, sans-serif") .attr("font-weight", 700) .text(label); } function addHospitalSign(g, w) { const signW = w * 0.9; const signH = 30; const sx = (w - signW) / 2; const sy = -signH - 12; g.append("rect") .attr("x", sx) .attr("y", sy) .attr("width", signW) .attr("height", signH) .attr("rx", 10) .attr("fill", "#ffffff") .attr("stroke", palette.outlines) .attr("stroke-width", 2); const crossSize = 14; const cx = sx + 10; const cy = sy + signH / 2 - 1; g.append("rect") .attr("x", cx - crossSize / 2) .attr("y", cy - 3) .attr("width", crossSize) .attr("height", 6) .attr("fill", "#ef4444"); g.append("rect") .attr("x", cx - 3) .attr("y", cy - crossSize / 2) .attr("width", 6) .attr("height", crossSize) .attr("fill", "#ef4444"); g.append("text") .attr("x", sx + signW - 2) .attr("y", sy + signH / 2 + 4) .attr("text-anchor", "end") .attr("fill", "#ef4444") .attr("font-size", 11) .attr("font-family", "system-ui, sans-serif") .attr("font-weight", 700) .text("HEALTHCARE"); } function addTechSign(g, w) { const signW = w * 0.7; const signH = 26; const sx = (w - signW) / 2; const sy = -signH - 12; g.append("rect") .attr("x", sx) .attr("y", sy) .attr("width", signW) .attr("height", signH) .attr("rx", 10) .attr("fill", "#020617") .attr("stroke", palette.outlines) .attr("stroke-width", 2); g.append("text") .attr("x", sx + signW / 2) .attr("y", sy + signH / 2 + 4) .attr("text-anchor", "middle") .attr("fill", "#93c5fd") .attr("font-size", 11) .attr("font-family", "system-ui, sans-serif") .attr("font-weight", 700) .text("🧑‍💻 TECH / INFO"); } function addFinanceSign(g, w) { const signW = w * 0.6; const signH = 26; const sx = (w - signW) / 2; const sy = -signH - 10; g.append("rect") .attr("x", sx) .attr("y", sy) .attr("width", signW) .attr("height", signH) .attr("rx", 10) .attr("fill", "#eab308") .attr("stroke", palette.outlines) .attr("stroke-width", 2); g.append("text") .attr("x", sx + signW / 2) .attr("y", sy + signH / 2 + 4) .attr("text-anchor", "middle") .attr("fill", "#1e293b") .attr("font-size", 11) .attr("font-family", "system-ui, sans-serif") .attr("font-weight", 700) .text("💵FINANCE"); } // --------------------- // Layout and buildings // --------------------- const totalWidth = buildings.length * buildingW + (buildings.length - 1) * spacing; const leftX = (width - totalWidth) / 2; let rightmost = null; const smokePuffs = []; buildings.forEach((b, i) => { const currVal = getValue(county2, b.industry, year5); // in thousands const facadeH = localScale(currVal); const x = leftX + i * (buildingW + spacing); const y = groundY - facadeH; const g = svg.append("g") .attr("transform", `translate(${x},${y})`); // main building g.append("rect") .attr("width", buildingW) .attr("height", facadeH) .attr("fill", b.color) .attr("stroke", palette.outlines) .attr("stroke-width", 3) .attr("rx", 6); // windows const cols = 4; const winW = 16, winH = 22; const padX = (buildingW - cols * winW) / (cols + 1); const padY = 12; const topMargin = 18; const rows = Math.floor((facadeH - topMargin - 12) / (winH + padY)); const winG = g.append("g"); for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { winG.append("rect") .attr("x", padX + c * (winW + padX)) .attr("y", topMargin + r * (winH + padY)) .attr("width", winW) .attr("height", winH) .attr("rx", 3) .attr("fill", palette.windowOn); } } // per-type details if (b.name === "Power Plant") { const chimneyW = buildingW * 0.12; const chimneyH = 60; const offsets = [buildingW * 0.3, buildingW * 0.6]; offsets.forEach(xc => { g.append("rect") .attr("x", xc) .attr("y", -chimneyH) .attr("width", chimneyW) .attr("height", chimneyH) .attr("fill", "#6b7280"); g.append("circle") .attr("cx", xc + chimneyW / 2) .attr("cy", -chimneyH - 10) .attr("r", 8) .attr("fill", "rgba(209,213,219,0.8)"); const smokeGroup = g.append("g"); for (let k = 0; k < 3; k++) { const puff = smokeGroup.append("circle") .attr("cx", xc + chimneyW / 2) .attr("cy", -chimneyH - 24 - k * 14) .attr("r", 10 - k * 2) .attr("fill", "rgba(209,213,219,0.85)") .attr("opacity", 0.9 - k * 0.2); smokePuffs.push({ node: puff, baseX: xc + chimneyW / 2, baseY: -chimneyH - 24 - k * 14, phase: Math.random() * Math.PI * 2 }); } }); addGenericSign(g, buildingW, "MANUFACTURING"); } if (b.name === "Hospital") { addHospitalSign(g, buildingW); } if (b.name === "Tech / Info") { addTechSign(g, buildingW); const dishX = buildingW * 0.99; const dishY = -16; g.append("rect") .attr("x", dishX - 3) .attr("y", dishY) .attr("width", 6) .attr("height", 14) .attr("fill", "#0f172a"); g.append("path") .attr("d", d3.arc()({ innerRadius: 0, outerRadius: 16, startAngle: -Math.PI * 0.2, endAngle: Math.PI * 0.6 })) .attr("transform", `translate(${dishX}, ${dishY}) rotate(-25)`) .attr("fill", "#e5e7eb"); g.append("line") .attr("x1", dishX + 8) .attr("y1", dishY - 6) .attr("x2", dishX + 16) .attr("y2", dishY - 12) .attr("stroke", "#93c5fd") .attr("stroke-width", 2); } if (b.name === "Finance") { addFinanceSign(g, buildingW); const antennaH = 70; [buildingW * 0.18, buildingW * 0.82].forEach(ax => { g.append("rect") .attr("x", ax - 2) .attr("y", -antennaH) .attr("width", 4) .attr("height", antennaH) .attr("fill", "#111827"); g.append("circle") .attr("cx", ax) .attr("cy", -antennaH) .attr("r", 5) .attr("fill", "#facc15"); }); } // label under building g.append("text") .attr("x", buildingW / 2) .attr("y", facadeH + 18) .attr("text-anchor", "middle") .attr("fill", "#111827") .attr("font-size", 13) .attr("font-family", "system-ui, sans-serif") .text(b.name); // tooltip g.on("pointerenter pointermove", (event) => { const rawBase = getValue(county2, b.industry, 2003); const rawCurr = getValue(county2, b.industry, year5); const baseVal = rawBase * 1000; const currVal = rawCurr * 1000; let pctDisplay = "N/A"; let pctColor = "#6b7280"; if (rawBase && year5 !== 2003) { const pct = rawCurr / rawBase - 1; pctDisplay = fmtPct(pct); pctColor = pct >= 0 ? "#16a34a" : "#dc2626"; } tip .style("opacity", 1) .style("transform", `translate(${event.clientX + 12}px, ${event.clientY + 12}px)`) .style("white-space", "normal") .style("max-width", "240px") .html(`

${b.industry}

${county2}

${year5}: ${fmtMoney(currVal)}

Growth since 2003: ${pctDisplay}

`); }); g.on("pointerleave", () => { tip.style("opacity", 0).style("transform", "translate(-9999px,-9999px)"); }); if (i === buildings.length - 1) { rightmost = { x, facadeH }; } }); // smoke animation const smokeTimer = d3.timer(t => { smokePuffs.forEach((p, i) => { const wiggle = Math.sin(t / 600 + p.phase) * 4; const rise = (t / 1400 + i * 0.3) % 18; p.node .attr("cx", p.baseX + wiggle) .attr("cy", p.baseY - rise); }); }); if (invalidation) invalidation.then(() => smokeTimer.stop()); // ground line svg.append("rect") .attr("x", 0) .attr("y", groundY) .attr("width", width) .attr("height", 4) .attr("fill", "#111827"); // ----------------------------------------- // BOTH BRACKETS: black + red unit bracket // ----------------------------------------- if (rightmost) { const bx = rightmost.x + buildingW + spacing * 0.4; const yTop = groundY - rightmost.facadeH; const yBot = groundY; // ---- BLACK HEIGHT BRACKET: "Height = Industry Size" ---- const br = svg.append("g").attr("class", "height-bracket"); br.append("line") .attr("x1", bx) .attr("y1", yTop) .attr("x2", bx) .attr("y2", yBot) .attr("stroke", "#111827") .attr("stroke-width", 3) .attr("stroke-linecap", "round"); br.append("line") .attr("x1", bx - 12) .attr("y1", yTop) .attr("x2", bx) .attr("y2", yTop) .attr("stroke", "#111827") .attr("stroke-width", 3); br.append("line") .attr("x1", bx - 12) .attr("y1", yBot) .attr("x2", bx) .attr("y2", yBot) .attr("stroke", "#111827") .attr("stroke-width", 3); const label = br.append("text") .attr("x", bx + 18) .attr("y", (yTop + yBot) / 2 - 14) .attr("fill", "#111827") .attr("font-family", "system-ui, sans-serif") .attr("font-size", 14) .attr("font-weight", 600); label.append("tspan") .attr("x", bx + 18) .attr("dy", 0) .text("Height ="); label.append("tspan") .attr("x", bx + 18) .attr("dy", 16) .text("Industry"); label.append("tspan") .attr("x", bx + 18) .attr("dy", 16) .text("Size"); // ---- RED SCALE BRACKET: closer to the building ---- const unitGroup = svg.append("g").attr("class", "unit-bracket"); // Finance as reference const financeThousands = getValue(county2, "Finance", year5); // thousands of dollars if (financeThousands > 0) { // choose a "nice" unit in *thousands* (1M, 2M, 4M, 8M, ...) let unitThousands = 1000; // $1M const minFrac = 0.12; const maxFrac = 0.28; while (unitThousands < financeThousands * minFrac) unitThousands *= 2; if (unitThousands > financeThousands * maxFrac) unitThousands /= 2; // pixel height for that unit const pixelsPerThousand = rightmost.facadeH / financeThousands; const bracketH = pixelsPerThousand * unitThousands; // CLOSER to the building: small offset vs bx const ux = bx + 10; const uy2 = yBot - bracketH; // vertical red line unitGroup.append("line") .attr("x1", ux) .attr("y1", uy2) .attr("x2", ux) .attr("y2", yBot) .attr("stroke", "red") .attr("stroke-width", 3) .attr("stroke-linecap", "round"); // top tick unitGroup.append("line") .attr("x1", ux) .attr("y1", uy2) .attr("x2", ux - 10) .attr("y2", uy2) .attr("stroke", "red") .attr("stroke-width", 3); // bottom tick unitGroup.append("line") .attr("x1", ux) .attr("y1", yBot) .attr("x2", ux - 10) .attr("y2", yBot) .attr("stroke", "red") .attr("stroke-width", 3); // nice integer label in millions, e.g. "512M" const unitMillions = unitThousands / 1000; const unitLabel = d3.format(",d")(unitMillions); unitGroup.append("text") .attr("x", ux + 14) .attr("y", uy2 + bracketH / 2) .attr("font-size", 15) // bigger text .attr("font-family", "system-ui, sans-serif") .attr("fill", "red") .attr("font-weight", 700) .attr("dominant-baseline", "middle") .text(`= $${unitLabel}M`); } } // caption svg.append("text") .attr("x", width / 2) .attr("y", 22) .attr("text-anchor", "middle") .attr("fill", "#111827") .attr("font-size", 16) .attr("font-family", "system-ui, sans-serif") .text(`${year5} – ${county2}: industry size (height)`); return svg.node(); }34:[{"id":"cb4c5a9aa84ebc29d213b4a1d1d9eec74e5f3a132a2b7d2d5994c3126b469deed3305022d0cd75466a85396025e76916440b7d197fe0507af3450b9174291195","href":"https://static.observableusercontent.com/files/cb4c5a9aa84ebc29d213b4a1d1d9eec74e5f3a132a2b7d2d5994c3126b469deed3305022d0cd75466a85396025e76916440b7d197fe0507af3450b9174291195","name":"Rust Belt Industry Employment.csv","type":"text/csv","lastModified":1763487844676.897,"size":1099}] 2f:{"id":"46cd21380382d116","slug":"buildings-engineering","title":"Buildings Engineering","thumbnail":"e942cc48916efa245717966c0fade897fd1c0498553b43b04f999491ad87c6f9","access_level":"public","create_time":"$D2025-11-18T17:43:22.493Z","update_time":"$D2025-12-01T11:22:58.664Z","view_time":null,"first_public_time":"$D2025-11-19T19:10:44.861Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e9b2f7fde85a5f53","login":"dis-2025-fall","name":"🪦 dis-2025-fall","avatar_url":"https://avatars-next.observableusercontent.com/a95179728f7a208605a8a434afc1723fb8e19b4266664a0a24602d1c54817cd7","tier":"pro_2024"},"version":162,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"58b4bf6dc88792cc","login":"samls2","name":"SamLS","avatar_url":"https://avatars-next.observableusercontent.com/5af7af2dc826d1f90f4a8d79fd0de60a87003c067bc02c639778e08358d356dd","tier":null}],"members":[{"type":"team","id":"e9b2f7fde85a5f53","login":"dis-2025-fall","name":"🪦 dis-2025-fall","avatar_url":"https://avatars-next.observableusercontent.com/a95179728f7a208605a8a434afc1723fb8e19b4266664a0a24602d1c54817cd7","tier":"pro_2024","role":"editor"},{"type":"individual","id":"58b4bf6dc88792cc","login":"samls2","name":"SamLS","avatar_url":"https://avatars-next.observableusercontent.com/5af7af2dc826d1f90f4a8d79fd0de60a87003c067bc02c639778e08358d356dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Buildings Engineering","cells":[{"id":0,"value":"# Buildings Engineering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"palette = ({\n bg: \"white\",\n windowOn: \"#facc15\",\n windowOff: \"#1e293b\",\n outlines: \"#111827\",\n power: \"#9ca3af\",\n hospital: \"#e5e7eb\",\n tech: \"#cbd5e1\",\n skyscraper: \"#64748b\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"dims = ({ width: 900, height: 500 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"rustBeltIndustryEmployment = await FileAttachment(\"Rust Belt Industry Employment.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"rustBeltIndustryEmployment","database":"$undefined"},{"id":11,"value":"employmentRaw = FileAttachment(\"Rust Belt Industry Employment.csv\").csv({\n typed: false\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"industries = [\n { name: \"Manufacturing\", key: \"Manu\" },\n { name: \"Finance\", key: \"Finance\" },\n { name: \"Information\", key: \"Info\" },\n { name: \"Health\", key: \"Health\" }\n]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"\nyears5 = [2003, 2013, 2023]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function parseMoney(x) {\n if (!x) return 0;\n return +x.replace(/\\$/g, \"\").replace(/,/g, \"\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"// one row per county–industry–year\nemployment = employmentRaw.flatMap(row =>\n industries.flatMap(ind =>\n years5.map(year => ({\n county: row[\"County\"],\n industry: ind.name,\n year,\n value: parseMoney(row[`${ind.key}, ${year}`])\n }))\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function getValue(county, industry, year) {\n const row = employment.find(d =>\n d.county === county &&\n d.industry === industry &&\n d.year === year\n );\n return row ? row.value : 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"maxBase2003 = d3.max(\n employment.filter(d => d.year === 2003),\n d => d.value\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"\n\nheightScale = d3.scaleLinear()\n .domain([0, maxBase2003])\n .range([80, 360]) // min + max building height for 2003 baseline","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"fmtMoney = d3.format(\"$,.0f\") // e.g. $34,687,698\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"fmtPct = d3.format(\"+.1%\") // e.g. +23.6%","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"tooltip = {\n const div = html`

`;\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"maxPerCounty = d3.rollup(\n employment,\n v => d3.max(v, d => d.value), // value is in thousands of dollars\n d => d.county\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"countyScaleMap = new Map(\n Array.from(maxPerCounty, ([county, maxVal]) => [\n county,\n d3.scaleLinear()\n .domain([0, maxVal]) // thousands of dollars\n .range([80, 360]) // min + max building height\n ])\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"