31:Tb3b,viewof zone = { const parent = document.createElement("div"); parent.value = { Office: false, Resi: false, CEP: false }; const svg = d3.select(DOM.svg(960, 400)); // 🔒 FileAttachment must be literals → make a map for the image layer URLs const IMG = { "base-02": FileAttachment("base-02.jpg").url(), "all-02": FileAttachment("all-02.jpg").url(), "off_rad-02": FileAttachment("off_rad-02.jpg").url(), "resi_rad-02": FileAttachment("resi_rad-02.jpg").url() }; const paths = Object.keys(IMG); // Raster layers svg.append("g") .attr("transform", "translate(480,0)") .selectAll(".rad") .data(paths) .join("image") .attr("class", "rad") .attr("href", d => IMG[d]) .attr("id", String) .attr("opacity", d => (d === "base-02" ? 1 : 0)) .attr("width", 480) .attr("height", 400); const evalImg = () => { if (parent.value.Office && !parent.value.Resi) return "off_rad-02"; if (parent.value.Resi && !parent.value.Office) return "resi_rad-02"; if (parent.value.Resi && parent.value.Office) return "all-02"; return "base-02"; }; // 🧩 Load the base SVG via FileAttachment instead of d3.xml { const maybeImg = await FileAttachment("base_svg.svg").image(); let sourceSvgEl; // If Observable gave us an inline
\nApril 19, 2019\n#### Introduction\nThis report summarizes Integral’s analysis of Building D at the Reston Promenade development, the residential tower in the southwest corner of the project site. The report includes key recommendations related to envelope performance, systems selection, and renewable energy integration. The analysis below is based on the schematic design project documents, as well as ongoing conversations with the project team.\n

`\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"/*md` $\"Prototype$ `\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"/*viewof figure1 = html`Figure 1: Annual temperature profile for Dallas.

`\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"/*md`\n
\n\n#### Key Climate Drivers \nDallas observes a long overheating period from March till November when outside air temperature is higher than 60 ⁰F, and an extreme heat week in July with a maximum temperature of 107 ⁰F\n
\n
\nClick the different building sections - Offices, Residential in the image below to see the incident solar radiation and energy profiles of the respective buildings. Switching \"ON\" the central energy plant will demonstrate how it can be used to transfer waste heat between buildings thereby reducing consumption. \n
`\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1233,"value":"results = {\nreturn md`\n**Daily Energy** = ${savings.Office_HEnergy+savings.Office_CEnergy+savings.Resi_HEnergy} mmBTU \n | \n**Peak Load** = ${savings.Office_Load+savings.Resi_Load} Tons\n
\n`\n}\n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"// graphs = {\n// const container = html`

\n// $\"Prototype$ \n\n//

`\n \n// yield container \n// }\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"// viewof figure2 = html`Figure 2:\n// Annual Solar Radiation on the building massing and impact of adding/ removing the building. Areas with high incident solar radiation (> 400 kWh/m²)require external shading. \n// `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"chart2.update(img.profile)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"/*format = {\n const keys = Object.keys(WinterDay[0]).slice(1);\n const stack = d3.stack()\n .keys(keys)\n \n const series = stack(WinterDay);\n \n return {\n series\n };\n \n \n}\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"WinterDay = {\n let W_Data = (await FileAttachment(\"Winter_Profiles.csv\").csv({typed:true}));\n return W_Data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"savings = {\n let values = {Office_HEnergy:0, Office_CEnergy:0, Office_Load:0 , Resi_HEnergy:0 , Resi_Load:0, savings_L: \"\", savings_E: \"\"}\n if (img.profile===\"off\"){\n values.Office_HEnergy= 70;\n values.Office_CEnergy= 20;\n values.Office_Load= 2900; \n }\n else if (img.profile===\"offres\"){\n values.Office_HEnergy= 70;\n values.Office_CEnergy= 20;\n values.Resi_HEnergy= 80;\n values.Office_Load= 2900;\n values.Resi_Load= 1200; \n }\n else if (img.profile===\"res\"){\n values.Resi_HEnergy= 80;\n values.Resi_Load= 1200; \n }\n else if (img.profile===\"cep\"){\n values.Office_HEnergy= 70;\n values.Office_CEnergy= 20;\n values.Resi_HEnergy= 40;\n values.Office_Load= 2900;\n values.Resi_Load= 500;\n values.savings_L = \"**Peak Load Reduction from CEP** = ~15%\";\n values.savings_E = \"**HVAC Energy Reduction from CEP** = ~20%\";\n \n }\n\n \n return values\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"img = {\n \n // const suffix = `?version=${Math.floor(Math.random() * 100)}`;\n const suffix = \"\";\n \n \n let img = {rad: `BaseImage2.jpg${suffix}`, profile: \"base.csv\"};\n \n if (zone.Office && zone.Resi) {\n img.rad = `All_Rad.jpg${suffix}`;\n img.profile = \"offres\";\n }\n else if (zone.Office && !zone.Resi) {\n img.rad = `Office_Rad.jpg${suffix}`;\n img.profile = \"off\";\n \n }\n else if (!zone.Office && zone.Resi) {\n img.rad = `Resi_Rad.jpg${suffix}`;\n img.profile = \"res\";\n \n }\n else if (!zone.Office && !zone.Resi) {\n img.rad = `BaseImage2.jpg${suffix}`;\n img.profile = \"base\";\n }\n \n if (zone.CEP && zone.Office && zone.Resi) {\n img.profile = \"cep\";\n }\n \n return img;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@5\", \"d3-array@2\", \"d3-time-format@2.1.3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {nest} from \"@mbostock/nested-groups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"html`