31: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(); }32: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.

`33: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(); }34:T585,md`

#### Envelope Optimization The current design places the highest window-to-wall ratios in areas with maximum open views, but these are also the areas that receive the greatest solar radiation during the summer period. This presents the potential for excessive solar heat gain and daylight illuminance. Both situations may lead to occupant reliance on internal blinds for thermal and visual comfort, which in turn could increase lighting energy and reduce the quality of views to the Green and surrounding area. We recommend exploring a combination of external overhangs, surface tilts, and variations in window-to-wall ratios to control unwanted solar gains. Option 1 from Figure 4 below leverages a varied window-to-wall ratio between 26-56% to regulate solar gains during the summer. The lowest window-to-wall ratios can be found on the east, west, and upper portion of the south façade where high amounts of solar radiation are received during the summer. In Option 2, areas with the greatest incident solar radiation are provided with a 2’ overhang and windows tilted at 10 degrees from the façade. Adding shades and window tilts will allow for a slightly more relaxed (larger) window-to-wall ratio, particularly along the south façade, while maintaining desired solar control during the summer and likely improving the thermal and visual environment within the offices.

`35:T7c3,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(45.3)}. Optimizing the envelope with the target values shown in the sensitivity study results in 9% energy use savings (EUI of ${formatEUI_IP_SI(41.2)}, and approximately 7% 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, with a Dedicated Outdoor Air System (DOAS) and fan powered terminal units, the project could achieve an additional 32% energy use savings (EUI of ${formatEUI_IP_SI(26.7)}) and 25% energy cost savings. Compared to the variable air volume system included in the ASHRAE 90.1-2010 baseline, the proposed system helps reduce energy use by decoupling ventilation air from space conditioning, resulting in much lower fan energy. 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 **41% energy use savings, and 30% energy cost savings** compared to the ASHRAE 90.1-2010 baseline. This level of savings should achieve **13 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:T42c,md`

#### Photovoltaic Integration The EUI baseline for this project, according to Architecture 2030, is approximately ${formatEUI_IP_SI(93.0)}, with a target EUI of ${formatEUI_IP_SI(19.0)} based on a construction completion date in 2020. The proposed design for this project, according to this analysis, achieves an EUI of approximately ${formatEUI_IP_SI(26.7)}. 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 331,000 kWh/yr, which would reduce the project's site EUI by ${formatEUI_IP_SI(4.0)} for a total site EUI of ${formatEUI_IP_SI(22.7)}. 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 B.
`38:T4ad,html``39:[] 2f:{"title":"Reston Promenade Building B","cells":[{"id":0,"value":"md`# Reston Promenade Building B`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\n
\nApril 19, 2019\n#### Introduction\nThis report summarizes Integral’s analysis of Building B 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":217,"value":"md` $\"Prototype$ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"viewof figure1 = html`Figure 1: Image from the solar radiation study showing location and orientation of Building B.

`","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 26% of the total building energy use, followed by fan energy, lighting, and equipment energy which represent another 21%, 18%, and 17%, respectively. Space cooling, pump energy, and domestic hot water heating constitute the remaining 19%. The baseline building shows a total Energy Use Intensity (EUI) of ${formatEUI_IP_SI(45.3)}.\n\nThe 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 lighting and equipment amount to more than half of the total load, followed by solar gains (28%) and occupancy-related gains (9%). In terms of heating, almost half of the total load is due to window conduction losses, followed by outside air heating (23%), and other envelope losses.\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":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof euiSwitch = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$33","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":192,"value":"$34","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":250,"value":"viewof zoneimg = {\n const zoneimg = html``;\n return zoneimg;\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: Diagram showing multiple strategies to optimize envelope performance.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"$36","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":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"md` $\"Prototype$ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof figure6 = html`Figure 6: Roof plan showing annual incident solar radiation on rooftop solar panels for 3 potential locations. The table at left shows the annual PV energy generation potential for these three areas.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"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":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":8,"value":"viewof unitSelection = form(html``)","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 \"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":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 d3.csv(`https://www.elementa.nyc/projects/reston-promenade/building-b/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":66,"value":"sankey_data = {\n let sankey_data = (await d3.csv(`https://www.elementa.nyc/projects/reston-promenade/building-b/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":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":57,"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-b/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":84,"value":"stacked_cost = {\n let data = (await d3.csv(`https://www.elementa.nyc/projects/reston-promenade/building-b/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":78,"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"}