31:T1210,characterization = { const config = { height: 520, width: 960, units: unitSelection.unit, label: `${unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr"}` }; const svg = d3.select(DOM.svg(config.width, config.height)); const graph = sankey(sankey_data); const nodeWidth = graph.nodes[0].x1 - graph.nodes[0].x0; const node = svg.selectAll("g") .data(graph.nodes) .enter().append("g") .attr('transform', d => `translate(${d.x0}, ${d.y0})`); node.append("rect") .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.name)) .attr("display", d => d.name === "Nothing" ? "none" : null) .attr("stroke", "#000") .append("title") .html(d => `${d.name}\n${eui(d.value)} ${config.label}`); node.append("text") .style("font", "10px sans-serif") .attr("x", d => d.x0 < config.width / 2 ? 6 + (d.x1 - d.x0) : - 6) .attr("y", d => (d.y1 - d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < config.width / 2 ? "start" : "end") .attr('font-size', 10) .text(d => d.name); node.append("text") .style("font", "12px sans-serif") .attr("x", d => d.x0 < config.width / 2 ? 6 + (d.x1 - d.x0) : - 6) .attr("y", d => (d.y1 - d.y0) / 2) .attr("dy", d => { // switch(d.name) { // case "Heating Load": // return "-1.25em"; // default: // return "1.85em"; // } return "1.8em"; }) .attr("text-anchor", d => d.x0 < config.width / 2 ? "start" : "end") .style("font-weight", "bold") .html(d => { switch(d.name) { // case "Natural Gas": // return `EUI: ${_.round(eui(d.value), 0)} ${config.label}`; case "Electricity": return `EUI: ${_.round(eui(d.value), 0)} ${config.label}`; // case "Heating Load": // let source = d.targetLinks.filter(dd => dd.source.name === "Heating System"); // return `Heating TEDI: ${_.round(eui(source[0].value), 0)} ${config.label}`; default: return ""; } }); node.attr('cursor', 'move') .call(d3.drag() .on('start', dragStart) .on('drag', dragMove) .on('end', dragEnd)); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(graph.links) .enter().append("g") .style("mix-blend-mode", "multiply"); //apply gradients based on input and output const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); link.append("path") .attr("class", "link") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("display", d=> d.target.name === "Nothing" ? "none": null) .attr("opacity", d => d.value < 0.02 ? 0 : 1) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .html(d => `${d.source.name} → ${d.target.name}\n${eui(d.value)} ${config.label}`); function dragStart (d) { if (!d.__x) d.__x = d3.event.x; if (!d.__y) d.__y = d3.event.y; if (!d.__x0) d.__x0 = d.x0; if (!d.__y0) d.__y0 = d.y0; if (!d.__x1) d.__x1 = d.x1; if (!d.__y1) d.__y1 = d.y1; } function dragMove(d) { d3.select(this) .attr('transform', function (d) { const dx = d3.event.x - d.__x; const dy = d3.event.y - d.__y; d.x0 = d.__x0 + dx; d.x1 = d.__x1 + dx; d.y0 = d.__y0 + dy; d.y1 = d.__y1 + dy; if (d.x0 < 0) { d.x0 = 0; d.x1 = nodeWidth; } if (d.x1 > config.width) { d.x0 = config.width - nodeWidth; d.x1 = config.width; } if (d.y0 < 0) { d.y0 = 0; d.y1 = d.__y1 - d.__y0; } if (d.y1 > config.height) { d.y0 = config.height - (d.__y1 - d.__y0); d.y1 = config.height; } return `translate(${d.x0}, ${d.y0})`; }); sankey.update(graph); link.selectAll(".link").attr('d', d3.sankeyLinkHorizontal()); } function dragEnd(d) { delete d.__x; delete d.__y; delete d.__x0; delete d.__x1; delete d.__y0; delete d.__y1; } return svg.node(); }32:T20b3,sensitivies = { //general setup const config = { width: 960, cell: {height: 250, padding:40}, margin: {top: 60, right:10, bottom: 30, left: 35}, cols: 3, format: { "Window U": { newName: "Window U", convert: d => 1/d, ticks: d => d3.format(".2f")(1/d)}, "WWR": { newName: "Window to Wall Ratio", ticks: d3.format(".0%")}, "Shade Cutoff": { newName: "Shade Cutoff Angle °", ticks: d3.format(",.0f")}}, units: unitSelection.unit, } const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("border-radius", "3px") .style("pointer-events", "none") .style("display", "none") .style("position", "absolute") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "regular") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "white") .style("box-shadow", "0 0 10px rgba(0,0,0,.25)") .style("color", "#333333") .style("line-height", "1.6") .style("pointer-events", "none"); const tipContent = (variable, p_value, EUI) => ` ${variable}: ${p_value}
EUI: ${formatEUI_SI_IP(EUI)}` //initiate the dictionary of scales for the cross hairs const markers = {}; //handles conversion for each variable in config.format const data = sensitivity_data.map(d => { let dd = d.data; for (const key in config.format) { if ("convert" in config.format[key]) { dd = dd.map(p => ({...p, [key]: config.format[key].convert(p[key])})); } } return {variable: d.variable, data: dd}; }); //find the width of cells by dividing the total width by the number of cols config.cell.width = _.round( (config.width - config.margin.left - config.margin.right - config.cell.padding * (config.cols-1)) / config.cols ); //csize the svg based on the number of rows const svg = d3.select(DOM.svg(config.width, (config.cell.height + config.margin.bottom + config.cell.padding) * _.ceil(data.length / config.cols) + config.margin.top - config.margin.bottom )); //all the y values are the same - could use a map here to get different scales for each small multiple const y = d3.scaleLinear() .domain(d3.extent(data.map(d => d.data.map(p => eui(p.EUI))).flat())) .range([config.cell.height, 0]).nice(); //create a map for all the x scales const x = new Map( Array.from( data.map(d => d.variable), key => [ key, d3.scaleLinear(d3.extent(data.filter(d => d.variable === key)[0].data.map(d => d[key])), [0, config.cell.width]) ] ) ); //create a group for each chart const chart = svg.selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => { //position the group in its appropriate row and col const h = (i % config.cols) * (config.cell.width + config.cell.padding) + config.margin.left; const v = _.floor(i / config.cols) * (config.cell.height + config.margin.bottom + config.cell.padding) + config.margin.top; return `translate(${h},${v})` }); //run through each group chart.each(function(d, i) { //rename the variable if needed let name = d.variable; if (name in config.format) { if ("newName" in config.format[name]){ name = config.format[name].newName; } } //if there are format specifiers, use them, otherwise just use the default let xa = d3.axisBottom(x.get(d.variable)).ticks(6); if (d.variable in config.format) { if ("ticks" in config.format[d.variable]){ xa.tickFormat(config.format[d.variable].ticks); } } const xAxis = g => g .attr("transform", `translate(0,${config.cell.height})`) .call(xa) .call(g => g.select(".domain").remove()); const yAxis = g => { if (i % config.cols === 0) { g.call(d3.axisLeft(y).ticks(6)) .call(g => g.select(".domain").remove()); } } //put the y axis label in the top left corner of the first row/col. if (i%3 === 0) { d3.select(this).append("g") .attr("transform", "translate(15, 20)") .append("text") .attr("font-size", 10) .attr("text-anchor", "start") .attr("opacity",1) .html(config.units === "IP" ? "EUI kBTU/ft²/yr": "EUI kWh/m²/yr"); } //general pattern for generating the interpolation line const line = d3.line() .x(dd => x.get(d.variable)(dd[d.variable])) .y(dd => y(eui(dd.EUI))) .curve(d3.curveCardinal.tension(0)); //horizontal grid lines d3.select(this).selectAll(".grid .horizontal") .data(_.range(8).slice(1).map(d => d * config.cell.height / 8)) .join("line") .attr("class", "grid") .attr("x1", (i % config.cols != 0) ? -config.cell.padding : 0) .attr("y1", d => d) .attr("x2", config.cell.width) .attr("y2", d => d); //vertical grid lines d3.select(this).selectAll(".grid .vertical") .data(_.range(8).slice(1).map(d => d * config.cell.width / 8)) .join("line") .attr("class", "grid") .attr("x1", d => d) .attr("y1", 0) .attr("x2", d => d) .attr("y2", config.cell.height); d3.select(this).append("g").call(xAxis); d3.select(this).append("g").call(yAxis); d3.select(this).append("rect") .attr("class", "frame") .attr("x", 0) .attr("y", 0) .attr("width", config.cell.width) .attr("height", config.cell.height); //add the variable labels d3.select(this).append("text") .attr("x", 0) .attr("y", -15) .attr("text-anchor", "start") .attr("font-size", 12) .style("font-family", "Open Sans") .html(name); d3.select(this).selectAll(".recommended") .data(d.data.filter(dd => dd.Recommended === "yes")) .join("circle") .attr("class", "recommended") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd.EUI)); }) .attr("r",10) .attr("fill", "#b4d6e8") .attr("opacity", 0.8); d3.select(this).append("path") .datum(d.data) .attr("class", "interpolation") .attr("fill", "none") .attr("stroke", "#1f77b4") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); d3.select(this).selectAll("points") .data(d.data) .join("circle") .attr("class", "points") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd.EUI)); }) .attr("r",3) .attr("display", dd => { if ((d.variable === "EPD" || d.variable === "LPD") && dd[d.variable] === 0.5) { return "none"; } else if (d.variable === "Glass SHGC" && dd[d.variable] === 0.3) { return "none"; } else { return null; } }) .attr("stroke", "#1f77b4") .style("fill", dd => dd.Baseline === "yes" ? "#1f77b4": "#b4d6e8" ); d3.select(this).selectAll("overlay") .data(d.data) .join("circle") .attr("class", "overlay") .attr("r",18) .attr("stroke", "none") .style("fill", "#fff") .style("opacity", 0) .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd.EUI)); }) .on("mouseover", dd => { tooltip.style("display", null); let data = dd[d.variable]; if (d.variable in config.format) { if ("ticks" in config.format[d.variable]){ data = config.format[d.variable].ticks(data); } } tooltip.html(tipContent(d.variable, data ,dd.EUI)) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", d => { tooltip.style("display", "none"); }); }); return svg.node(); }33:Td45,stackedBar = { const config = { height: 450, width: 960, margin: {top: 20, right:150, bottom: 30, left: 50, legend: 0}, units: unitSelection.unit, label: `${unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr"}` }; const svg = d3.select(DOM.svg(config.width, config.height)); const x = d3.scaleBand() .domain(stacked_data.columns) .range([config.margin.left, config.width - config.margin.right]) .paddingOuter(.3) .paddingInner(0.75); const y = d3.scaleLinear() .domain([0, d3.max(stacked_data.totals) + eui(10)]) .rangeRound([config.height - config.margin.bottom, config.margin.top]).nice(); const xAxis = g => g .attr("transform", `translate(0,${config.height - config.margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${config.margin.left},0)`) .call(d3.axisLeft(y).ticks(null, "s").tickSize(-(config.width - config.margin.left - config.margin.right + 20)).tickPadding(10)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "#eaeaea").attr("opacity", 0.7)) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .style("paint-order", "stroke") .style("stroke", "#ffffff") .style("stroke-width", "8px") .html(config.units === "IP" ? `EUI kBTU/ft²/yr`: `EUI kWh/m²/yr`)); const legend = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "end") .selectAll("g") .data(stacked_data.keys.slice().reverse()) .join("g") .attr("transform", (d, i) => `translate(0,${i * 21})`); g.append("rect") .attr("x", -18) .attr("width", 18) .attr("height", 18) .attr("fill",stackedColor); g.append("text") .attr("x", -28) .attr("y", 8) .attr("dy", "0.35em") .text(d => d); } const totals = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "middle") .selectAll("g") .data(stacked_data.totals) .join("g") .attr("transform", (d, i) => `translate(${x(stacked_data.columns[i])},${y(d)})`); g.append("text") .attr("x", x.bandwidth()/2) .attr("y", -16) .attr("dy", "0.35em") .text(d => _.round(d, 1)); } svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .selectAll("g") .data(stacked_data) .join("g") .attr("fill", (d, i) => stackedColor(stacked_data.keys[i])) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(stacked_data.columns[i])) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .append("title") .html(d => `${_.round(d[1] - d[0], 2)} ${config.label}`); // `${d.name}\n${eui(d.value)} ${config.label}` svg.append("g") .attr("transform", `translate(${config.width - config.margin.legend},${config.margin.top})`) .call(legend); svg.append("g").call(totals) return svg.node(); }34:T4ad,html``35:[{"id":"2f31604638acb3e4b03701a1f9fd21139a2c3faa88fff95ac3b7c7e0da1e53d71f172a781a4737ac1b4948f3121d6baf33056b3cd3b389d8897e7de7e7c8afa5","href":"https://static.observableusercontent.com/files/2f31604638acb3e4b03701a1f9fd21139a2c3faa88fff95ac3b7c7e0da1e53d71f172a781a4737ac1b4948f3121d6baf33056b3cd3b389d8897e7de7e7c8afa5","name":"cover-2x.jpg","type":"image/jpeg","lastModified":1759770701185.007,"size":527527},{"id":"83a26640dc17a19659b04fb02331749cd74917ae0ea538ef06741da52b32898517289300973753bca8dda4c33d6c5c60f25e9c2d93308685ad42907931cd0f2a","href":"https://static.observableusercontent.com/files/83a26640dc17a19659b04fb02331749cd74917ae0ea538ef06741da52b32898517289300973753bca8dda4c33d6c5c60f25e9c2d93308685ad42907931cd0f2a","name":"stacked_data.csv","type":"text/csv","lastModified":1759770725092.617,"size":277},{"id":"ec4607837eee7ebc10a30c4fc8564fdad5bc13eeb8d63ee64ba4fe1a8dbaf5a72790d1837f59d36375b135eb6bf7ea5f5db6056f3fbd5f9ccf51d6828bc623fc","href":"https://static.observableusercontent.com/files/ec4607837eee7ebc10a30c4fc8564fdad5bc13eeb8d63ee64ba4fe1a8dbaf5a72790d1837f59d36375b135eb6bf7ea5f5db6056f3fbd5f9ccf51d6828bc623fc","name":"sankey_data.csv","type":"text/csv","lastModified":1759770725093.453,"size":1416},{"id":"7639eb0473c01de1f90f0ea673793735d3966d4a379539cd538fac8959fc4188fb646d0460bd2d8d8a6804fe2a26f534880a0d31679370c4dcbb10a7cbd49a6b","href":"https://static.observableusercontent.com/files/7639eb0473c01de1f90f0ea673793735d3966d4a379539cd538fac8959fc4188fb646d0460bd2d8d8a6804fe2a26f534880a0d31679370c4dcbb10a7cbd49a6b","name":"sensitivity_data.csv","type":"text/csv","lastModified":1759770725104.691,"size":4299},{"id":"d130a7b9548c2a88db1a711087cf88e5396d7c77aa588c244ff6a776434faffcccf168289985af86cda571e1d2b3b668d238a4b6307ba24f6d19b65fc62bcfbf","href":"https://static.observableusercontent.com/files/d130a7b9548c2a88db1a711087cf88e5396d7c77aa588c244ff6a776434faffcccf168289985af86cda571e1d2b3b668d238a4b6307ba24f6d19b65fc62bcfbf","name":"interpolated_data.csv","type":"text/csv","lastModified":1759770726656.711,"size":248063},{"id":"e359e900d36533987b6733cfe5ebefce516d79c1b0d1f3ed1e77fbd8fde68c1812d69b96b3db0e995294330876c44ab89338d3072c587ef8a5f70c9df5daff93","href":"https://static.observableusercontent.com/files/e359e900d36533987b6733cfe5ebefce516d79c1b0d1f3ed1e77fbd8fde68c1812d69b96b3db0e995294330876c44ab89338d3072c587ef8a5f70c9df5daff93","name":"base-2x.jpg","type":"image/jpeg","lastModified":1759770810575.476,"size":1004902},{"id":"5619d5c9f9c29869b44651dcaa00bf006d2a5cdbe6c55362d4110c68b205543c5600e43fe4281a6df785fdaacf7269547390096097c00a18c23d3441ec9fdb46","href":"https://static.observableusercontent.com/files/5619d5c9f9c29869b44651dcaa00bf006d2a5cdbe6c55362d4110c68b205543c5600e43fe4281a6df785fdaacf7269547390096097c00a18c23d3441ec9fdb46","name":"design-2x.jpg","type":"image/jpeg","lastModified":1759770811718.375,"size":1051125},{"id":"bc32c29b90705764d54770a87d83aa488296baf4131a7f5475ffdf78e9ee257af0c9240f6fb197a0798916afbf8dd23d9380ada9f28ea431a8f4e49214f787f1","href":"https://static.observableusercontent.com/files/bc32c29b90705764d54770a87d83aa488296baf4131a7f5475ffdf78e9ee257af0c9240f6fb197a0798916afbf8dd23d9380ada9f28ea431a8f4e49214f787f1","name":"pv45-2x.jpg","type":"image/jpeg","lastModified":1759771110136.45,"size":659643},{"id":"e598b05162ad02818a37f0fa6cb849151663667f68c82d97dc82c9112c818dec31952ecf1e1b557ece6c869455f9e8407c16884d002415395ec5277426c38e04","href":"https://static.observableusercontent.com/files/e598b05162ad02818a37f0fa6cb849151663667f68c82d97dc82c9112c818dec31952ecf1e1b557ece6c869455f9e8407c16884d002415395ec5277426c38e04","name":"pv150-2x.jpg","type":"image/jpeg","lastModified":1759771113731.388,"size":773567}] 2f:{"title":"Columbian Quarter Building C","cells":[{"id":0,"value":"md`# Columbian Quarter Building C`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\n
\nOctober 16, 2019 - Pursuit Phase Analysis\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"md`\n### Introduction\nThis report summarizes Introba’s analysis of the mixed-use residential Building C at the proposed Columbian Quarter project in Washington DC, and includes key recommendations related to envelope performance, systems selection, and renewable energy integration. The analysis is based on the concept design exhibits shared by the design team. Figure 1 shows a graphic representation of the analysis model developed for this study.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"model_block = {\n const img = await FileAttachment(\"cover-2x.jpg\").image();\n img.style.width = \"720px\";\n return html`${md`### Model Preview`}
${img}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"viewof figure1 = html`Figure 1: Graphic representation of the analysis model.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`\n

\n#### Energy End Use Characterization\nThe graph below (Figure 2) shows the breakdown of energy by end use for the ASHRAE 90.1-2010 baseline building. Space heating represents roughly 28% of the total building energy use, followed by equipment, space cooling, and lighting energy which represent another 22%, 20%, and 12%, respectively. The baseline building shows a total Energy Use Intensity (EUI) of ${formatEUI_IP_SI(32)}.\n\nThe right side of the graph shows the key drivers of heating and cooling loads in the baseline building. In terms of heating, over half of the total load is due to window conduction losses, followed by wall conduction and infiltration losses. In terms of cooling, internal gains from occupants amount to more than half of the total load, followed by equipment gains.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof figure2 = html`Figure 2: Building energy use characterization showing load components and energy end-uses for the ASHRAE 90.1-2010 baseline building.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`\n

\n#### Energy Use Sensitivity\nUtilizing the Baseline energy model, Introba evaluated a series of energy efficiency measures (EEMs) to understand the sensitivity of individual building performance characteristics on building energy use. The graphs below (Figure 3) show the results of this analysis. The horizontal axes represent incremental improvement in a specific parameter, while the vertical axes show the associated energy use intensity (EUI) of the building. In accordance with the energy use characterization discussed above, the overall energy use is most affected by window to wall ratios (WWR), and window assembly U-values. Targeting a 40% WWR as an average for the whole building will offer significant energy savings by limiting window conduction losses in the winter. Selecting a high-performance glazing system, with a maximum assembly U-value of 0.30 Btu/hr-ft²-°F will similarly help reduce window conduction losses in the winter. \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"sensLegend = {\n \n const svg = d3.select(DOM.svg(960, 50))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\"Baseline\", \"Target\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"circle\")\n .attr(\"r\", d => d === \"Baseline\" ? 3: 10)\n .attr(\"stroke\", d => d === \"Baseline\" ? \"#1f77b4\": \"none\")\n .style(\"fill\", d => d === \"Baseline\" ? \"#1f77b4\": \"#b4d6e8\" )\n .style(\"opacity\", d => d === \"Baseline\" ? 1: .6 );;\n\n g.append(\"text\")\n .attr(\"x\", 30)\n .attr(\"y\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n \n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"viewof figure3 = html`Figure 3: Sensitivity of individual building performance parameters on building energy use intensity.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`\n

\n#### Exterior Shade Optimization\nThe current design incorporates a uniform window-to-wall ratio across all orientations. A combination of balconies, horizontal overhangs, and vertical fins are designed for strategic solar control. A comparison for design options in Figure 4 suggests a significant summertime incident radiation reduction of 35 - 40% with the existing configuration. However, as noted on the design option with vertical shades, there are areas on the façade that can benefit from additional shades. Further studies should be conducted to evaluate the impact of spacing, depth and placement of vertical fins along the façade in response to optimal solar control. Use the dropdown menu to select different design options.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"viewof zoneimg = {\n const zoneimg = html``;\n return zoneimg;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"zone = {\n const zone = html`

`;\n return zone;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"viewof figure4 = html`Figure 4: Comparison of incident summertime solar radiation with and without vertical exterior fins.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`\n

\n#### Energy Performance Benchmarking\nAs discussed previously, the baseline scenario with all performance parameters defined at ASHRAE 90.1-2010 minimum requirements shows an EUI of ${formatEUI_IP_SI(32)}. Optimizing the envelope with the target values shown in the sensitivity study results in 9% energy use savings and reduces the EUI to ${formatEUI_IP_SI(29)}. These savings are largely attributable to reductions in heating load by optimizing the window to wall ratios and window assembly U-values.\n\nIncorporating a high performance HVAC system with an energy recovery Dedicated Outdoor Air System (DOAS) and fan powered zone terminal units, the project could achieve an additional 18% energy use savings with an EUI of ${formatEUI_IP_SI(23)}. Compared to the baseline system, the recommended system helps reduce energy use by decoupling ventilation air from space conditioning and recovers energy from exhaust air, resulting in much lower cooling and heating energy.\n\n\n\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"viewof figure5 = html`Figure 5: Comparison of energy use intensities by end-use for different modeled cases.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`\n

\n#### Photovoltaic Integration\nThe RFP requirement to generate 178 kWh per ${formatAREA_IP_SI(1000)} of gross building area translates to a generation requirement of just over 50,000 kWh/yr. Based on incident solar radiation intensity on the project roof, this level of generation will require a 45 kW PV array on approximately ${formatAREA_IP_SI(3000)} of roof area. This level of generation will offset approximately 3% of building energy use. In terms of maximum rooftop potential, the ${formatAREA_IP_SI(10000)} penthouse roof can accommodate a 150 kW PV array which can offset 10% of building energy use. For Net Zero Energy operation, a total of 1.5 MW PV array will be required on approximately ${formatAREA_IP_SI(100000)} total area.This is illustrated in Figure 6.\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"viewof zoneimgpv = {\n const zoneimgpv = html``;\n return zoneimgpv;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"//md` $\"PV\"$ `\n\nzonepv = {\n const zone = html`

`;\n return zone;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof figure6 = html`Figure 6: Rendering showing required PV array size.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"formatEUI_IP_SI = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} kBtu/ft²/yr`;\n }\n else {\n return `${_.round(d / 3.412 * 10.76, 2)} kWh/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"formatEUI_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 1)} kWh/m²/yr`;\n }\n else {\n return `${_.round(d * 3.412 / 10.76, 1)} kBtu/ft²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"formatAREA_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 0)} m²`;\n }\n else {\n return `${_.round(d * 10.76, 0)} ft²`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"formatAREA_IP_SI = d => {\n if (unitSelection.unit === \"IP\") {\n return `${_.round(d, 0)} ft²`;\n }\n else {\n return `${_.round(d / 10.76, 0)} m²`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import {group} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"color = {\n const lookup = {\n \"Electricity\":\"#d6d231\",\n \"DHW\":\"#d52928\",\n \"Heating Energy\":\"#d52928\",\n \"Cooling Energy\":\"#1dbfcf\",\n \"Lights\":\"#d6d231\",\n \"Fans\":\"#bfbfbf\",\n \"Equipment\":\"#dddddd\",\n \"Other Gains\":\"#a17eb9\",\n \"Passive Solar Gains\":\"#a17eb9\",\n \"Lighting Gains\":\"#a17eb9\",\n \"Occupant Gains\":\"#a17eb9\",\n \"Infiltration Losses\":\"#a17eb9\",\n \"Window Losses\":\"#a17eb9\",\n \"Internal Equipment Gains\":\"#a17eb9\",\n \"OA Economizer\":\"#a17eb9\",\n \"Walls\":\"#f7aa6e\",\n \"Roof\":\"#f7aa6e\",\n \"Below Grade\":\"#f7aa6e\",\n \"Infiltration\":\"#f7aa6e\",\n \"Windows\":\"#f7aa6e\",\n \"OA Heating\":\"#f7aa6e\",\n \"Equipment Gains\":\"#6aadd6\",\n \"Lighting\":\"#6aadd6\",\n \"Solar\":\"#6aadd6\",\n \"Occupants\":\"#6aadd6\",\n \"Cooling Load\":\"#1f77b4\",\n \"Cooling System\":\"#1f77b4\",\n \"Heating Load\":\"#e55725\",\n \"Heating System\":\"#e55725\",\n \"Pumps\":\"#adadad\",\n \"Exterior Usage\": \"#808080\",\n \"Floor on Grade\":\"#f7aa6e\"\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"convertCost = d => (unitSelection.unit === \"IP\") ? _.round(d / 10.76, 3) : _.round(d, 3);","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"d3 = require('d3@5.9.2', 'd3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await FileAttachment(\"sensitivity_data.csv\").csv()); \n //group the data by independent variable\n const grouped = group(data, d => d.Variable);\n data = Array.from(grouped, d => ({variable: d[0], data: d[1].sort((a, b) => a[d[0]] - b[d[0]])}));\n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"sankey_data = {\n let sankey_data = (await FileAttachment(\"sankey_data.csv\").csv()).map(({source, target, value}) => ({source: source, target: target, value: +value}));\n \n //http://elementa.nyc/yale/berekely/data/yale_sankey.csv\n //create a list of nodes and links\n const nodes = Array.from(new Set(sankey_data.map(d => [d.source, d.target]).flat()));\n const links = sankey_data.map(({source, target, value}) => ({\n source: nodes.indexOf(source),\n target: nodes.indexOf(target),\n value: value\n }));\n\n sankey_data = {nodes: nodes.map(d => ({name: d})), links: links};\n return sankey_data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"sankey = {\n const config = {\n height: 500,\n width: 960,\n margin: {bottom: 10}\n }\n const sankey = d3.sankey()\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 1], [config.width, config.height - config.margin.bottom]])\n .nodeAlign(d3.sankeyLeft);\n return sankey;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"stacked_data = {\n let data = (await FileAttachment(\"stacked_data.csv\").csv());\n \n \n const keys = Object.keys(data[0]).filter(d => ![\"Case\", \"Electricity\", \"Gas\"].includes(d));\n \n const converted = data.map(o => {\n const a = {...o};\n for (const key of keys) {\n a[key] = eui(o[key]);\n }\n return a;\n \n });\n const stacked = d3.stack().keys(keys)(converted);\n stacked.columns = data.map(d => d.Case);\n stacked.keys = keys;\n stacked.totals = converted.map(o => _.round(_.sumBy(keys, key => o[key]), 0));\n \n return stacked;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"stackedColor = {\n const lookup = {\n \"Lights\":\"#d6d231\",\n \"Plug Loads\":\"#dddddd\",\n \"Heating\":\"#d52928\",\n \"DHW\":\"#e55725\",\n \"Cooling\":\"#1dbfcf\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"TEDI\": \"#b52928\",\n \"Exterior Usage\": \"#808080\"\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}