29:null 2a:["$","title",null,{"children":"WF - SA Building 309 | Elementa Engineering | Observable"}] 2f:T45b,md`

### Energy End Use Characterization Figure 1 below shows the anticipated breakdown of building energy use and load component for the Concept Design. Energy sources are aligned on the left side of the graphic, while energy sinks (conduction losses, equipment gains, etc.) are aligned on the right side. Viewed in this way, the Concept Design energy model assists in identifying additional opportunities within the proposed design to improve the overall energy performance. In the Concept Design, plug loads represents roughly 41% of the total building energy use, followed by space cooling energy, lighting, and fan energy which represent another 25%, 17%, and 11%, respectively. Exterior lighting, space heating, pump energy, and domestic hot water heating constitute the remaining 6%. The Concept Design building shows a total Energy Use Intensity (EUI) of 41. Investigating further into the load components contributing to cooling energy reveals that almost 47% of the total heating load is due to outside air cooling, followed by solar gains (20%) and internal gains (30%).

`30:T1285,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) .html(d => d.name); node.append("text") .style("font", "12px sans-serif") .attr("x", d => d.x0 < config.width / 2 ? 6 + (d.x1 - d.x0) : - 6) .attr("y", d => (d.y1 - d.y0) / 2) .attr("dy", d => { // switch(d.name) { // case "Heating Load": // return "-1.25em"; // default: // return "1.85em"; // } return "1.8em"; }) .attr("text-anchor", d => d.x0 < config.width / 2 ? "start" : "end") .style("font-weight", "bold") .html(d => { switch(d.name) { case "Natural Gas": return `EUI: ${_.round(eui(d.value), 0)} ${config.label}`; case "Electricity": return `EUI: ${_.round(eui(d.value), 0)} ${config.label}`; // case "Heating Load": // let source = d.targetLinks.filter(dd => dd.source.name === "Heating System"); // return `Heating TEDI: ${_.round(eui(source[0].value), 0)} ${config.label}`; default: return ""; } }); node.attr('cursor', 'move') .call(d3.drag() .on('start', dragStart) .on('drag', dragMove) .on('end', dragEnd)); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(graph.links) .enter().append("g") .style("mix-blend-mode", "multiply") .attr("id", d => d.source.name.replace(" ", "_") + "_" + d.target.name.replace(" ", "_")); //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(); }31:T2402,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", // }, // "Infiltration": { // newName: "Infiltration cfm/ft²"}, // "Skylight U": { // convert: d => 1/d, // ticks: d => d3.format(".2f")(1/d)} }, units: unitSelection.unit, y: euiSwitch.y } let eui_convert; if (config.y === "PeakCooling") { eui_convert = d => d; } else { eui_convert = d => (unitSelection.unit === "IP") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 2); } const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("border-radius", "3px") .style("pointer-events", "none") .style("display", "none") .style("position", "absolute") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "regular") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "white") .style("box-shadow", "0 0 10px rgba(0,0,0,.25)") .style("color", "#333333") .style("line-height", "1.6") .style("pointer-events", "none"); const tipContent = (variable, p_value, EUI) => { let val = formatEUI_SI_IP(EUI); if (config.y === "PeakCooling"){ val = `${_.round(EUI, 1)} Tons`; } return `${variable}: ${p_value}
${config.y === "PeakCooling" ? "Tons": config.y}: ${val}`; } //initiate the dictionary of scales for the cross hairs const markers = {}; //handles conversion for each variable in config.format const data = sensitivity_data.map(d => { let dd = d.data; for (const key in config.format) { if ("convert" in config.format[key]) { dd = dd.map(p => ({...p, [key]: config.format[key].convert(p[key])})); } } return {variable: d.variable, data: dd}; }); //find the width of cells by dividing the total width by the number of cols config.cell.width = _.round( (config.width - config.margin.left - config.margin.right - config.cell.padding * (config.cols-1)) / config.cols ); //csize the svg based on the number of rows const svg = d3.select(DOM.svg(config.width, (config.cell.height + config.margin.bottom + config.cell.padding) * _.ceil(data.length / config.cols) + config.margin.top - config.margin.bottom )); //all the y values are the same - could use a map here to get different scales for each small multiple const y = d3.scaleLinear() .domain(d3.extent(data.map(d => d.data.map(p => eui_convert(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)) .call(g => g.select(".domain").remove()); } } let y_label; if (config.y === "PeakCooling") { y_label = "Peak Cooling Tons"; } else { if (config.units === "IP") { y_label = `${config.y} kBTU/ft²/yr`; } else { y_label = `${config.y} kWh/m²/yr`; } } //put the y axis label in the top left corner of the first row/col. if (i%3 === 0) { d3.select(this).append("g") .attr("transform", "translate(15, 20)") .append("text") .attr("font-size", 10) .attr("text-anchor", "start") .attr("opacity",1) .html(y_label); } //general pattern for generating the interpolation line const line = d3.line() .x(dd => x.get(d.variable)(dd[d.variable])) .y(dd => y(eui_convert(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_convert(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_convert(dd[config.y])); }) .attr("r",3) .attr("display", dd => { if ((d.variable === "EPD" || d.variable === "LPD") && dd[d.variable] === 0.5) { return "none"; } else if (d.variable === "Glass SHGC" && dd[d.variable] === 0.3) { return "none"; } else { return null; } }) .attr("stroke", "#1f77b4") .style("fill", dd => dd.Baseline === "yes" ? "#1f77b4": "#b4d6e8" ); d3.select(this).selectAll("overlay") .data(d.data) .join("circle") .attr("class", "overlay") .attr("r",18) .attr("stroke", "none") .style("fill", "#fff") .style("opacity", 0) .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui_convert(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(tipContent(d.variable, data ,dd[config.y])) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", d => { tooltip.style("display", "none"); }); }); return svg.node(); }32:T8aa,md`

### Path to Net Positive Energy The leftmost bar in Figure 3 represents the Concept Design. Four additional energy models were created to evaluate energy savings potential. Note that all energy efficiency strategies were evaluated cumulatively over the Concept Design. Key findings are as follows with detailed energy model inputs assumptions linked below. * The Concept Design, with a 36% window-all ratio, a UFAD system, perimeter hydronic heating and cooling system, and a connection to a central chilled water plant demonstrates an EUI of 41.1 kBTU/ft2/yr. This requires a PV capacity of 2.48 MWp for NPE performance. * Optimized Shading adds orientation-specific external shades for south, east, and west facades and results in cooling and fan energy savings in addition to limiting peak cooling loads and the potential for daylight glare. The cases reduces the EUI to 40.6 and PV capacity to 2.46 MWp. * Onsite Chiller Plant adds onsite 5.5 COP chillers for base loads, offering savings in cooling energy and reducing the EUI to 40.1 and PV capacity to 2.43 MWp. * HVAC System Alt 1 replaces the hydronic heating system with electric resistance, incorporates ventilation air scrubbers, and a dual-wheel dehumidification and energy recovery system while maintaining the UFAD system. These HVAC strategies, evaluated individually in the previous section, offer appreciable cooling energy savings, and reduce the EUI to 39.2 and PV capacity to 2.37 MWp. * HVAC System Alt 2 replaces the UFAD system with chilled beams and a dedicated outside air system (DOAS) while maintaining all other HVAC strategies. This alternate further reduces fan and cooling energy, resulting in the lowest EUI of 38.4 and PV capacity of 2.32 MWp. Note that the results described above are based on many assumptions about how and when the building will be occupied. These results illustrate the energy impact assumming a 50/50 program split between regular-office (7am-5pm) and call-center usage (24-7 occupancy), an office space lighting power density of 0.7 W/ft2 and equipment power density of 1.8 W/ft2. Results for other scenarios can be reviewed by adjusteding the sliders below the graph.

`33:T15a0,stackedBar = { const config = { height: 450, width: 960, margin: {top: 40, right:225, bottom: 30, left: 50, legend: 10}, units: unitSelection.unit, label: `${unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr"}` }; const pvCapacity = d => (unitSelection.unit === "IP") ? (d / 3.412 * 10.76 * 19.17): d * 19.17; const svg = d3.select(DOM.svg(config.width, config.height)); const x = d3.scaleBand() .domain(stacked.columns) .range([config.margin.left, config.width - config.margin.right]) .paddingOuter(.3) .paddingInner(0.75); const y = d3.scaleLinear() .domain([0, eui(200)]) // .domain([0, d3.max(stacked.totals) + eui(30)]) .rangeRound([config.height - config.margin.bottom, config.margin.top]).nice(); const y2 = d3.scaleLinear() .domain([0, 3500]) // .domain([0, d3.max(stacked.totals) + eui(30)]) .rangeRound([config.height - config.margin.bottom, config.margin.top]).nice(); const xAxis = g => g .attr("transform", `translate(0,${config.height - config.margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${config.margin.left},0)`) .call(d3.axisLeft(y).ticks(null, "s").tickSize(-(config.width - config.margin.left - config.margin.right + 20)).tickPadding(10)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "#eaeaea").attr("opacity", 0.7)) .call(g => g.select(".tick:first-of-type text").clone() .attr("transform", "rotate(-90)") .attr("y", -40) .attr("x", 0) .attr("text-anchor", "start") .attr("font-weight", "bold") .style("paint-order", "stroke") .style("stroke", "#ffffff") .style("stroke-width", "8px") .html(`Energy Use Intensity (${config.label})`)); const yAxis2 = g => g .attr("transform", `translate(${config.width - config.margin.right + 20},0)`) .call(d3.axisRight(y2).ticks(null, "s").tickSize(-(config.width - config.margin.left - config.margin.right + 20)).tickPadding(10)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").remove()) .call(g => g.select(".tick:first-of-type text").clone() .attr("transform", "rotate(-90)") .attr("y", 50) .attr("x", 0) .attr("text-anchor", "start") .attr("font-weight", "bold") .style("paint-order", "stroke") .style("stroke", "#ffffff") .style("stroke-width", "8px") .html(`PV System Size (kW)`)); const legend = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "end") .selectAll("g") .data(stacked.keys.slice().reverse().concat(["blank", "PV Offset"])) .join("g") .attr("transform", (d, i) => `translate(0,${i * 21})`); g.append("rect") .attr("x", -18) .attr("width", 18) .attr("height", 18) .attr("fill", d => d === "blank"? "#ffffff": stackedColor(d)); g.append("text") .attr("x", -28) .attr("y", 8) .attr("dy", "0.35em") .text(d => d === "blank"? "": d); } const totals = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "middle") .selectAll("g") .data(stacked.totals) .join("g") .attr("transform", (d, i) => `translate(${x(stacked.columns[i])},${y(d)})`); g.append("text") .attr("x", -5) .attr("y", -16) .attr("dy", "0.35em") .text(d => _.round(d, 2)); } const pv_sizes = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "middle") .selectAll("g") .data(stacked.totals) .join("g") .attr("transform", (d, i) => `translate(${x(stacked.columns[i])},${y2(pvCapacity(d))})`); g.append("text") .attr("x", x.bandwidth() + 5) .attr("y", -16) .attr("dy", "0.35em") .text(d => d3.format(".3s")(_.round(pvCapacity(d), 1))); } svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(yAxis2); svg.append("g") .selectAll("g") .data(stacked) .join("g") .attr("fill", (d, i) => stackedColor(stacked.keys[i])) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(stacked.columns[i]) - x.bandwidth()/2 - 5) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .append("title") .html(d => `${_.round(d[1] - d[0], 2)} ${config.label}`); //adds pv bars svg.append("g") .selectAll("rect") .data(stacked.columns) .join("rect") .attr("fill", "#eaeaea") .attr("x", d => x(d) + x.bandwidth()/2 + 5) .attr("y", (d, i) => y2(pvCapacity(stacked.totals[i]))) .attr("height", (d, i) => y2(0) - y2(pvCapacity(stacked.totals[i]))) .attr("width", x.bandwidth()) .append("title") .html((d, i) => `${d3.format(".3s")(_.round(pvCapacity(stacked.totals[i]), 1))} ${config.label}`) ; svg.append("g") .attr("transform", `translate(${config.width - config.margin.legend},${config.margin.top})`) .call(legend); svg.append("g").call(totals) svg.append("g").call(pv_sizes) return svg.node(); }34:T40c,color = { const lookup = { "Electricity":"#d6d231", "DHW":"#d52928", "Heating Energy":"#d52928", "Cooling Energy":"#1dbfcf", "Lights":"#d6d231", "Fans":"#bfbfbf", "Equipment":"#dddddd", "Exterior Usage":"#dddddd", "Pumps":"#dddddd", "Other Gains":"#a17eb9", "Passive Solar Gains":"#a17eb9", "Lighting Gains":"#a17eb9", "Occupant Gains":"#a17eb9", "Infiltration Losses":"#a17eb9", "Window Losses":"#a17eb9", "Internal Gains":"#a17eb9", "OA Economizer":"#a17eb9", "Walls":"#f7aa6e", "Roof":"#f7aa6e", "Below Grade":"#f7aa6e", "Infiltration":"#f7aa6e", "Envelope Losses":"#f7aa6e", "OA Heating":"#f7aa6e", "Equipment Gains":"#6aadd6", "OA Cooling":"#6aadd6", "Conduction Gains":"#6aadd6", "Lighting":"#6aadd6", "Solar Gains":"#6aadd6", "Occupants":"#6aadd6", "Cooling Load":"#1f77b4", "Cooling System":"#1f77b4", "Heating Load":"#e55725", "Heating System":"#e55725", }; return name => lookup[name]; }35:T5ff,renderQueue = function(func) { var _queue = [], // data to be rendered _rate = 1000, // number of calls per frame _invalidate = function() {}, // invalidate last render queue _clear = function() {}; // clearing function var rq = function(data) { if (data) rq.data(data); _invalidate(); _clear(); rq.render(); }; rq.render = function() { var valid = true; _invalidate = rq.invalidate = function() { valid = false; }; function doFrame() { if (!valid) return true; var chunk = _queue.splice(0,_rate); chunk.map(func); timer_frame(doFrame); } doFrame(); }; rq.data = function(data) { _invalidate(); _queue = data.slice(0); // creates a copy of the data return rq; }; rq.add = function(data) { _queue = _queue.concat(data); }; rq.rate = function(value) { if (!arguments.length) return _rate; _rate = value; return rq; }; rq.remaining = function() { return _queue.length; }; // clear the canvas rq.clear = function(func) { if (!arguments.length) { _clear(); return rq; } _clear = func; return rq; }; rq.invalidate = _invalidate; var timer_frame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { setTimeout(callback, 17); }; return rq; }36:T8cf,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }37:T40b,html``38:[] 2d:{"id":"e9271b0388da322d","slug":"hra-wf-sa-building-309","title":"WF - SA Building 309","thumbnail":"c4e4ee60f429f287627cf941334e450de80c09c7a7236020f29f2f2c33319ac7","access_level":"public","create_time":"$D2020-04-02T16:37:58.166Z","update_time":"$D2020-08-24T13:18:56.101Z","view_time":null,"first_public_time":"$D2020-04-03T18:56:00.516Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"d158447cd1f3bc11","login":"elementa","name":"Elementa Engineering","avatar_url":"https://avatars-next.observableusercontent.com/392be552c44531b13196ece3fde1f8781cde3f3738248df478971dc7871a7a1f","tier":"starter_2024"},"version":2579,"publish_version":2579,"role":null,"authored":false,"authors":[{"type":"individual","id":"f725482116d7891b","login":"elementa","name":"Elementa Engineering","avatar_url":"https://avatars-next.observableusercontent.com/392be552c44531b13196ece3fde1f8781cde3f3738248df478971dc7871a7a1f","tier":null}],"members":[{"type":"individual","id":"f725482116d7891b","login":"elementa","name":"Elementa Engineering","avatar_url":"https://avatars-next.observableusercontent.com/392be552c44531b13196ece3fde1f8781cde3f3738248df478971dc7871a7a1f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"WF - SA Building 309","cells":[{"id":0,"value":"md`# WF - SA Building 309`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2036,"value":"viewof figure2 = html`Figure 1: Building energy use characterization showing load components and energy end-uses for the baseline design..

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`\n

\n### Envelope Sensitivity\nUtilizing the Concept Design energy model, Integral evaluated a series of energy efficiency measures (EEMs) to understand the sensitivity of individual building envelope performance characteristics on building energy use. Sensitivity studies are an effective way to isolate design variables such as window, wall, and roof conductance and identify optimal performance targets based on the point of diminishing savings (blue highlighted targets below).\n\nFigure 2 shows the results of this analysis. The horizontal axes represents incremental changes in the specific parameter, while the vertical axes showing the impact of these changes on building EUI, CEDI, and peak cooling load. The line represents the overall trend for each parameter and the Concept Design values are marked by dark blue dots. \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2103,"value":"viewof euiSwitch = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof figure3 = html`Figure 2: Sensitivity of individual building performance parameters on building EUI.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2562,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"viewof figure5 = html`
Figure 3: Comparison of energy use intensities by end-use for different studied scenarios.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2519,"value":"viewof SCH = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2226,"value":"viewof LPD = {\n return slider({\n min: 0.5, \n max: 0.7, \n step: 0.2, \n value: 0.7,\n display: v => {\n let el = document.createElement(\"span\")\n el.innerHTML = `${d3.format(\",.1f\")(v)} W/ft² `\n return el;\n }, \n description: `Select Lighting Power Density`\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2256,"value":"viewof EPD = {\n return slider({\n min: 1.1, \n max: 1.8, \n step: 0.7, \n value: 1.8,\n display: v => {\n let el = document.createElement(\"span\")\n el.innerHTML = `${d3.format(\",.1f\")(v)} W/ft² `\n return el;\n },\n description: `Select Equipment Power Density`\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2261,"value":"// viewof SCH = {\n// return slider({\n// min: 1, \n// max: 3, \n// step: 1, \n// value: 1,\n// display: v=> {\n// let el = document.createElement(\"span\");\n// let value;\n// switch(v) {\n// case 1:\n// value = \"100% Admin (7am-5pm)\";\n// break;\n// case 2:\n// value = \"50/50 Program\";\n// break;\n// case 3:\n// value = \"100% Call Center (24hr\";\n// break;\n\n// default:\n// value = \"100% Admin (7am-5pm)\";\n// }\n// el.innterHTML = `${value}`\n// return el.innterHTML;\n \n// }, \n\n// description: `Select Operation Schedule`\n// });\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"md`\nDetailed model input assumptions are documented [here.]((https://www.elementa.nyc/projects/wells-fargo/assets/200424WF-NPE_SD_EM_Inputs.pdf)

` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"formatEUI_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 1)} kWh/m²/yr`;\n }\n else {\n return `${_.round(d * 3.412 / 10.76, 1)} kBtu/ft²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"formatAREA_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 0)} m²`;\n }\n else {\n return `${_.round(d * 10.76, 0)} ft²`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"sankey_data = {\n let sankey_data = (await d3.csv(`https://www.elementa.nyc/projects/wells-fargo/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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"stackedColor = {\n const lookup = {\n \"Lights\":\"#d6d231\",\n \"Plug Loads\":\"#E6E483\",\n \"Heating\":\"#d52928\",\n \"DHW\":\"#e55725\",\n \"Cooling\":\"#1dbfcf\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"Exterior Usage\": \"#ABA827\",\n \"PV Offset\": \"#eaeaea\"\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"stacked = {\n let data = (await d3.csv(`https://www.elementa.nyc/projects/wells-fargo/data/${resultFile}.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType));\n \n \n const keys = Object.keys(data[0]).filter(d => d != \"Case\");\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 \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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2298,"value":"stackedResultName = `${LPD}_${EPD}_${SCH.value}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2305,"value":"stackedResultLookup = {\n \n const Lookup = {\n \"0.5_1.1_1\" : \"a\",\n \"0.7_1.1_1\" : \"b\",\n \"0.5_1.8_1\" : \"c\",\n \"0.7_1.8_1\" : \"d\",\n \"0.5_1.1_2\" : \"e\",\n \"0.7_1.1_2\" : \"f\",\n \"0.5_1.8_2\" : \"g\",\n \"0.7_1.8_2\" : \"h\",\n \"0.5_1.1_3\" : \"i\",\n \"0.7_1.1_3\" : \"j\",\n \"0.5_1.8_3\" : \"k\",\n \"0.7_1.8_3\" : \"l\",\n };\n\n return name => Lookup[name];\n}\n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2313,"value":"resultFile = `stacked_data_${stackedResultLookup(stackedResultName)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await d3.csv(`https://www.elementa.nyc/projects/wells-fargo/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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"d3 = require('d3@5.9.2','d3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2086,"value":"d3format = d3.format","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"function slider(config = {}) {\n let {value, min = 0, max = 1, step = \"any\", precision = 2, title, description, getValue, format, display, submit} = config;\n if (typeof config == \"number\") value = config;\n if (value == null) value = (max + min) / 2;\n precision = Math.pow(10, precision);\n if (!getValue) getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\", title, description, submit, format, display,\n attributes: {min, max, step, value},\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"import {group, groupSum, groupCount} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 2e:"$2d:body"