31:T409,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 47% of the total building energy use, followed by equipment energy and lighting, which represent another 15% and 13% respectively. Space cooling and domestic hot water heating, along with a minimal amount of fan and pump energy, represent the remaining 23%. The baseline building shows a total Energy Use Intensity (EUI) of ${formatEUI_IP_SI(26.4)}. The right side of the graph shows the key drivers of heating and cooling loads in the baseline building. In terms of cooling, occupancy related gains account for almost half (49%) of the total load, followed by equipment gains (17%), solar gains (15%), and lighting gains (14%). In terms of heating, more than half of the total load (54%) is due to window conduction losses, followed by wall conduction losses (17%), infiltration (11%), and other envelope losses.

`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:T4ec,md`

#### Energy Use Sensitivity Utilizing the Baseline energy model, Integral 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 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 roughly 35% WWR as an average for the whole building will offer significant energy savings by limiting window conduction losses in the winter and solar gains in the summer. Selecting a high-performance glazing system, with a maximum assembly U-value of 0.35 Btu/hr-ft²-°F will similarly help reduce window conduction losses in the winter. 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:T821,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 has an EUI of ${formatEUI_IP_SI(47.4)}. Optimizing the envelope with the target values shown in the sensitivity study results in 11% energy use savings (EUI of ${formatEUI_IP_SI(42)}, and approximately 8% energy cost savings compared to the ASHRAE 90.1-2010 baseline. These savings are largely attributable to reductions in heating load by optimizing the window to wall ratios and maximizing window assembly U-values. This level of savings would achieve 3 points for the LEED v4 Core & Shell Optimize Energy Performance credit. Incorporating the current Proposed HVAC system results in an additional 37% energy use savings (EUI of ${formatEUI_IP_SI(26.4)}) and 16% energy cost savings. The proposed HVAC system includes air-source heat pumps for the residential units and an air-cooled VRF system for the hotel spaces. All spaces will be served with a Dedicated Outdoor Air System (DOAS) and enthalpy recovery. 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 system, the project shows a total of **44% energy use savings, and 23% energy cost savings** compared to the ASHRAE 90.1-2010 baseline. This level of savings should achieve **11 points** under the Optimize Energy Performance credit in LEED v4 Core & Shell. Integral will continue to update this model as the project evolves. Detailed model inputs including envelope specifications, internal and ventilation loads, and mechanical system parameters for both the baseline building and proposed design models can be downloaded here.

`36: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(); }37:T43f,md`

#### Photovoltaic Integration The EUI baseline for this project, according to Architecture 2030, is approximately ${formatEUI_IP_SI(57.0)}, with a target EUI of ${formatEUI_IP_SI(12.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(26.4)}. 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. Based on a preliminary analysis, incorporating a rooftop photovoltaic array could generate up to 395,000 kWh/yr, which would reduce the project's site EUI by approximately ${formatEUI_IP_SI(5.0)} for a total site EUI of ${formatEUI_IP_SI(21.4)}. 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 4 points under the Optimize Energy Performance credit. Figure 6 below shows the generation potential of three areas on the roof of building A.
`38:T4ad,html``39:[] 2f:{"title":"Reston Promenade Building A","cells":[{"id":0,"value":"md`# Reston Promenade Building A`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\n
\nApril 19, 2019\n#### Introduction\nThis report summarizes Integral’s analysis of Building A at the Reston Promenade development, and includes key recommendations related to envelope performance, systems selection, and renewable energy integration. The analysis 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":6,"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 A.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"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":16,"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}","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":33,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$36","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":"$37","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 for 3 potential locations. 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\nIntroba 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, Introba 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://da.introba.com/projects/reston-promenade/building-a/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://da.introba.com/projects/reston-promenade/building-a/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://da.introba.com/projects/reston-promenade/building-a/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://da.introba.com/projects/reston-promenade/building-a/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"}