31:T4aa,md`

#### Energy End Use Characterization The graph below (Figure 2) shows the breakdown of energy by end use for the ASHRAE 90.1-2010 baseline building. Space heating represents roughly 55% of the total building energy use, which is typical for residential buildings in this climate zone. Fan energy, lighting, equipment energy, and pumping energy collectively account for 24% of the building energy use, and cooling energy accounts for the remaining 21%. The baseline building shows a total Energy Use Intensity (EUI) of ${formatEUI_IP_SI(49)}. The right side of the graph shows the key drivers of heating and cooling loads in the baseline building. In terms of cooling, internal gains from occupants account for more than half of the total load (55%). A large portion of that load, however, is met through natural ventilation and passive infiltration. In terms of heating, most of the load (62%) is from window conduction losses, followed by wall conduction losses (16%) and infiltration (12%). This analysis suggests that improving the window assembly U-value, and optimizing the window to wall ratio will have a large impact on overall building energy use.

`32:Te23,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.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(); }33:T480,md`

#### Energy Use Sensitivity Utilizing the Baseline energy model, a series of energy efficiency measures (EEMs) were evaluated to understand the sensitivity of individual building performance characteristics on building energy use. Figure 3 presents the results of this analysis with the horizontal axes showing incremental improvement in a specific parameter, and the vertical axes showing the associated energy use intensity. 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 roughly 35% WWR as an average for the whole building will offer significant energy savings. Similarly, selecting a high-performance glazing system, with a maximum assembly U-value of 0.35 Btu/hr-ft²-°F will help reduce heating loads associated with window conduction losses. Use the dropdown menu to select different performance metrics for the sensitivity study. It is important to note how the heating and cooling energy is particularly sensitive to the window to wall ratio for the building.

`34:T2036,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-Wall Ratio", ticks: d3.format(",.0%")}}, units: unitSelection.unit, y: euiSwitch.y } const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("display", "none") .style("position", "absolute") //.style("width", "80px") //.style("height", "30px") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "bold") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "#ffffff") .style("opacity", 0.9) .style("color", "#333333") .style("pointer-events", "none"); //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 / 3) + 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[config.y]))).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).tickFormat(d3.format(".1f"))) .call(g => g.select(".domain").remove()); } } //put the y axis label in the top left corner of the first row/col. if (i === 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" ? `${config.y} kBTU/ft²/yr`: `${config.y} 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[config.y]))) .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[config.y])); }) .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[config.y])); }) .attr("r",3) .attr("display", dd => { if (d.variable === "WWR" && dd[d.variable] === 0.35) { return "none"; } else if (d.variable === "Window U" && dd[d.variable] === 1/0.35) { 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[config.y])); }) .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(`${data} | ${config.y} ${_.round(eui(dd[config.y]))} `) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px");; }) .on("mousemove", dd => { tooltip .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", d => { tooltip.style("display", "none"); }); }); return svg.node(); }35:T5aa,md`

#### Envelope Optimization One of the challenges with residential buildings is balancing the desire for daylight and views with the need to reduce window conduction losses and control seasonal solar radiation. On the one-hand, larger window areas provide more access to daylight and views as well as passive solar gains, while on the other hand larger window areas lead to greater conduction losses and increase the likelihood of thermal and visual discomfort. To account for this tradeoff, we recommend slightly reducing the overall window-to-wall ratio of the building, and exploring the use of external shades on the south, southwest, and west façades for seasonal solar control. Option 1 from Figure 4 below demonstrates how mullion extensions can control peak solar gains during the summer. Positioning vertical fins on the east edge of windows (right-hand side in view below) on the south façade will control solar gains occurring between 11am and noon during the summer, while positioning vertical fins on the west edge (left-hand side in the diagram below) on the southwest façade will help control peak afternoon solar gains occurring around 3pm. In Option 2, solar gains are controlled with horizontal shades, optimized for each window on the façade. This creates a more uniform distribution of solar radiation across the entire façade and improves occupant thermal and visual comfort year-round.

`36:T8a7,md`

#### Energy Performance Benchmarking As discussed previously, the LEED v4 Baseline with all performance parameters defined at ASHRAE 90.1-2010 Appendix G minimum requirements shows an EUI of ${formatEUI_IP_SI(49.0)}, as shown by the first bar in Figure 5. Optimizing the envelope with the target values shown in the sensitivity study results in 13% energy use savings (EUI of ${formatEUI_IP_SI(42.4)}), and approximately 9% energy cost savings compared to the ASHRAE 90.1-2010 baseline. These savings are largely attributable to reductions in heating load by reducing the window to wall ratio in the proposed design and maximizing window assembly U-values. This level of savings would achieve 4 points for the LEED v4 Core & Shell Optimize Energy Performance credit. Incorporating the current Proposed HVAC system, which includes water source heat pumps, a Dedicated Outdoor Air System (DOAS) with enthalpy energy recovery, and condensing boilers, the project could achieve an additional 43% energy use savings (EUI of ${formatEUI_IP_SI(24.0)}) in energy use and 20% savings in energy costs. Compared to the packaged terminal units included in the ASHRAE 90.1-2010 baseline, the proposed system helps reduce energy use by decoupling ventilation air from space conditioning. In addition, exhaust air energy recovery significantly reduces the heating and cooling energy. With the improved envelope and HVAC, the project shows a total of **51% savings in energy use, and 27% savings in energy cost** compared to the ASHRAE 90.1-2010 baseline. This level of savings should achieve **12 points** under the Optimize Energy Performance credit in LEED v4 Core & Shell. Note that in the proposed design, the proportion of electricity to gas used in the buildings changes due to the use of heat pumps for space heating. Integral Group will continue to update this model as the project evolves. Detailed model inputs including envelope, internal and ventilation loads, and mechanical system parameters for both Baseline and Proposed Design models can be downloaded here.

`37:T18a7,stackedBar = { const config = { height: 430, width: 960, margin: {top: 20, right:120, bottom: 30, left: 35, legend: 10}, units: unitSelection.unit, energyLabel: `${unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr"}`, costLabel: `${unitSelection.unit === "IP" ? "$/ft²/yr": "$/m²/yr"}` }; const svg = d3.select(DOM.svg(config.width, config.height)); const energy = svg.append("g"); const cost = svg.append("g").attr("transform", `translate(${config.width/2 + 40}, 0)`); const x = d3.scaleBand() .domain(stacked_energy.columns) .range([config.margin.left, config.width/2 - config.margin.right]) .paddingOuter(.3) .paddingInner(0.7); const yEnergy = d3.scaleLinear() .domain([0, d3.max(stacked_energy.totals) + eui(40)]) .rangeRound([config.height - config.margin.bottom, config.margin.top]).nice(); const yCost = d3.scaleLinear() .domain([0, d3.max(stacked_cost.totals) + convertCost(2)]) .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).tickPadding(8)); const yAxisEnergy = g => g .attr("transform", `translate(${config.margin.left},0)`) .call(d3.axisLeft(yEnergy).ticks(null, "s").tickSize(-(config.width/2 - config.margin.left - config.margin.right)).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", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .html(`EUI ${config.energyLabel}`)) .call(g => g.select(".tick:last-of-type line").remove()); const yAxisCost = g => g .attr("transform", `translate(${config.margin.left},0)`) .call(d3.axisLeft(yCost).ticks(null, "s").tickSize(-(config.width/2 - config.margin.left - config.margin.right)).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", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .html(`Utility Cost ${config.costLabel}`)) .call(g => g.select(".tick:last-of-type line").remove()); const legendEnergy = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "start") .selectAll("g") .data(stacked_energy.keys.slice().reverse()) .join("g") .attr("transform", (d, i) => `translate(0,${i * 21})`); g.append("rect") .attr("x", 0) .attr("y", 5) .attr("width", 10) .attr("height", 10) .attr("fill",stackedColor); g.append("text") .attr("x", 18) .attr("y", 8) .attr("dy", "0.35em") .text(d => d); } const legendCost = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "start") .selectAll("g") .data(stacked_cost.keys.slice().reverse()) .join("g") .attr("transform", (d, i) => `translate(0,${i * 21})`); g.append("rect") .attr("x", 0) .attr("y", 5) .attr("width", 10) .attr("height", 10) .attr("fill",stackedColor); g.append("text") .attr("x", 18) .attr("y", 8) .attr("dy", "0.35em") .text(d => d); } const energyTotals = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("g") .data(stacked_energy.totals) .join("g") .attr("transform", (d, i) => `translate(${x(stacked_energy.columns[i])},${yEnergy(d)})`); g.append("text") .attr("x", x.bandwidth()/2) .attr("y", -16) .attr("dy", "0.35em") .text(d => _.round(d, 1)); } const costTotals = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("g") .data(stacked_cost.totals) .join("g") .attr("transform", (d, i) => `translate(${x(stacked_cost.columns[i])},${yCost(d)})`); g.append("text") .attr("x", x.bandwidth()/2) .attr("y", -16) .attr("dy", "0.35em") .text(d => _.round(d,2)); } energy.append("g") .call(xAxis); energy.append("g") .call(yAxisEnergy); energy.append("g") .selectAll("g") .data(stacked_energy) .join("g") .attr("fill", (d, i) => stackedColor(stacked_energy.keys[i])) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(stacked_energy.columns[i])) .attr("y", d => yEnergy(d[1])) .attr("height", d => yEnergy(d[0]) - yEnergy(d[1])) .attr("width", x.bandwidth()) .append("title") .html(d => `${_.round(d[1] - d[0], 2)} ${config.energyLabel}`); energy.append("g") .attr("transform", `translate(${config.width/2 - config.margin.right + config.margin.legend},${config.margin.top})`) .call(legendEnergy); energy.append("g").call(energyTotals); cost.append("g") .call(xAxis); cost.append("g") .call(yAxisCost); cost.append("g") .selectAll("g") .data(stacked_cost) .join("g") .attr("fill", (d, i) => stackedColor(stacked_cost.keys[i])) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(stacked_cost.columns[i])) .attr("y", d => yCost(d[1])) .attr("height", d => yCost(d[0]) - yCost(d[1])) .attr("width", x.bandwidth()) .append("title") .html(d => `${_.round(d[1] - d[0], 2)} ${config.costLabel}`); cost.append("g") .attr("transform", `translate(${config.width/2 - config.margin.right + config.margin.legend},${config.margin.top})`) .call(legendCost); cost.append("g").call(costTotals); return svg.node(); }38:T4ad,html``39:[] 2f:{"title":"Reston Promenade Building D","cells":[{"id":0,"value":"md`# Reston Promenade Building D`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\n
\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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md` $\"Prototype$ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof figure1 = html`Figure 1: Image from the solar radiation study showing location and orientation of Building D.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"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":15,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"viewof euiSwitch = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"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":23,"value":"viewof figure3 = html`Figure 3: Sensitivity of individual building performance parameters on building energy use intensity.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof zoneimg = {\n const zoneimg = html``;\n return zoneimg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"zone = {\n const zone = html`

`;\n return zone;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"viewof figure4 = html`Figure 4: Diagram showing multiple strategies to optimize envelope performance.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"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":39,"value":"md`\n

\n#### Photovoltaic Integration\nThe EUI baseline for this project, according to Architecture 2030, is approximately ${formatEUI_IP_SI(48.0)}, with a target EUI of ${formatEUI_IP_SI(10.0)} based on a construction completion date around 2020. The proposed design for this project, according to this analysis, achieves an EUI of approximately ${formatEUI_IP_SI(24.0)}. In order to move closer to the Architecture 2030 target, the project could potentially integrate on-site renewable energy generation to further reduce site energy.\n\nBased on a preliminary analysis, incorporating a rooftop photovoltaic array could generate up to 166,000 kWh/yr, which would reduce the project's site EUI by ${formatEUI_IP_SI(2.0)} for a total site EUI of ${formatEUI_IP_SI(22.0)}. This would help the project achieve the maximum 3 points under the Renewable Energy credit in LEED v4 Core & Shell, as well as an additional 2 points under the Optimize Energy Performance credit. \n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md` $\"Prototype$ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof figure6 = html`Figure 6: Roof plan showing annual incident solar radiation on rooftop solar panels. The chart on the left shows the Architecture 2030 targets compared to the achievable site EUI of the proposed design with PV integration.

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

\n#### Next Steps\nIntegral Group will continue to refine this analysis as the design evolves. The following are proposed next steps for the project team:\n\n* HKS to review envelope assembly thermal performance targets and consider construction details and specifications which are able to meet the recommended insulation levels.\n\n* HKS to review optimized envelope Options and explore the feasibility of incorporating these strategies into the design of the façade.\n\n* During the DD Phase, Integral Group to further refine façade analysis, looking at daylight and visual comfort impacts in addition to solar heat gain.\n\n* Design Team and client to discuss feasibility of incorporating onsite rooftop solar panels or designing the roof to be PV ready.\n\n* Design Team and client to discuss desire to pursue an all-electric building design which would enable carbon-neutral building operation at a future date.\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"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":49,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"import {group} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"color = {\n const lookup = {\n \"Electricity\":\"#d6d231\",\n \"Natural Gas\": \"#e55725\",\n \"DHW\":\"#d52928\",\n \"Heating Energy\":\"#d52928\",\n \"Cooling Energy\":\"#1dbfcf\",\n \"Lights\":\"#d6d231\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"Equipment\":\"#dddddd\",\n \"Passive Solar Gains\":\"#a17eb9\",\n \"Internal Equipment Gains\":\"#a17eb9\",\n \"Lighting Gains\":\"#a17eb9\",\n \"Occupant Gains\":\"#a17eb9\",\n \"Passive Infiltration\":\"#a17eb9\",\n \"Window Losses\":\"#a17eb9\",\n \"Wall Losses\":\"#a17eb9\",\n \"OA Cooling\":\"#6aadd6\",\n \"Equipment Gains\":\"#6aadd6\",\n \"Lighting\":\"#6aadd6\",\n \"Solar\":\"#6aadd6\",\n \"Occupants\":\"#6aadd6\",\n \"Cooling Load\":\"#1f77b4\",\n \"Cooling System\":\"#1f77b4\",\n \"Windows\":\"#f7aa6e\",\n \"Heating Load\":\"#e55725\",\n \"Heating System\":\"#e55725\",\n \"Roof\": \"#f7aa6e\",\n \"Walls\": \"#f7aa6e\",\n \"Infiltration\": \"#f7aa6e\",\n \"OA Heating\":\"#f7aa6e\",\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"convertCost = d => (unitSelection.unit === \"IP\") ? _.round(d / 10.76, 3) : _.round(d, 3);","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"d3 = require('d3@5.9.2', 'd3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await d3.csv(`https://www.elementa.nyc/projects/reston-promenade/building-d/data/parametric_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType)); \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":67,"value":"sankey_data = {\n let sankey_data = (await d3.csv(`https://www.elementa.nyc/projects/reston-promenade/building-d/data/sankey_data.csv?version=${Math.floor(Math.random() * 100)}`)).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":69,"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":71,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"stacked_energy = {\n let data = (await d3.csv(`https://www.elementa.nyc/projects/reston-promenade/building-d/data/stacked_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType));\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]), 2));\n \n return stacked;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"stacked_cost = {\n let data = (await d3.csv(`https://www.elementa.nyc/projects/reston-promenade/building-d/data/stacked_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType));\n \n \n const keys = [\"Electricity\", \"Gas\"];\n \n const converted = data.map(o => {\n const a = {...o};\n for (const key of keys) {\n a[key] = convertCost(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]), 2));\n \n return stacked;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"stackedColor = {\n const lookup = {\n \"Lights\":\"#d6d231\",\n \"Exterior Lighting\": \"#f4ec5d\",\n \"Equipment\":\"#dddddd\",\n \"Heating\":\"#d52928\",\n \"DHW\":\"#e55725\",\n \"Cooling\":\"#1dbfcf\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"Electricity\": \"#c0bfbf\",\n \"Gas\": \"#7f7f7f\"\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}