31:T129b,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 => { console.log(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(); }32:T4c2,md`

### Envelope Sensitivity In addition to overall energy use modeling, parametric analysis was conducted to understand the sensitivity of various envelope characteristics on building energy use. Figure 2 presents these results with the horizontal axes showing incremental changes in the studied parameter, and the vertical axes showing the impact of these changes on building TEDI. The line represents the overall trend for each parameter, the baseline values are marked by dark blue dots. In accordance with the energy use characterization discussed above, the TEDI can most benefit from further improvements to window U values, followed by reduced window areas and improvements to wall and roof insulation. It is recommended that the design team explore the feasibility of achieving wall and roof performance as close as possible to R-35 and R-45 respectively, and window assembly performance as close as possible to assembly U-0.25. These recommended values are highlighted by light blue circles. Note that while designing to reduce infiltration rates will have appreciable impact on TEDI, current models assume levels that are mandated by CaGBC for both baseline and target designs.

`33:T20cc,sensitivies = { //general setup const config = { width: 960, cell: {height: 250, padding:40}, margin: {top: 60, right:15, 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%")}, "Infiltration": { newName: "Infiltration cfm/ft²"}, "Skylight U": { convert: d => 1/d, ticks: d => d3.format(".2f")(1/d)}}, units: unitSelection.unit, } 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.TEDI))).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])), key === "Infiltration" ? [config.cell.width, 0] : [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" ? `TEDI kBTU/ft²/yr`: `TEDI 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.TEDI))) .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.TEDI)); }) .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.TEDI)); }) .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.TEDI)); }) .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} | TEDI ${_.round(eui(dd.TEDI))} `) .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:T1cde,parcoords = { const config = { height: 500, width: 960, margin: {top: 60, right: 10, bottom: 10, left: 40}, format: { "Wall R": { ticks: d3.format(".0f"), numTicks: 10, selection: [125, 200]}, "Window U": { ticks: d3.format(".2f"), selection: [225, 300]}, "Window SHGC": { ticks: d3.format(".2f"), selection: [100, 175]}, "WWR": { ticks: d3.format(".2f"), selection: [250, 325]}, "Roof R": { ticks: d3.format(".0f"), numTicks: 10, selection: [225, 300]}, "Infiltration": { newName: "Infiltration (CFM/ft²)", ticks: d3.format(".2f"), selection: [0, 75]}, "EUI": { newName: `${unitSelection.unit === "IP" ? "EUI kBTU/ft²/yr": "EUI kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f")}, "TEDI": { newName: `${unitSelection.unit === "IP" ? "TEDI kBTU/ft²/yr": "TEDI kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f")} }, units: unitSelection.unit }; const container = document.createElement("div"); container.setAttribute("class", "parcoords"); container.setAttribute("style", `width: ${config.width}px; height: ${config.height}px;`); const ctx = DOM.context2d(config.width, config.height); //ctx.transform(1, 0, 0, 1, config.margin.left, config.margin.top); const svg = d3.select(DOM.svg(config.width, config.height)); config.chartHeight = config.height - config.margin.top - config.margin.bottom; config.chartWidth = config.width - config.margin.right - config.margin.left; const dimensions = parametric_data.columns.filter(d => d != "dataset").filter(d => d != "EUI"); const data = parametric_data.map(d => { let dd = d; for (const key in config.format) { if ("convert" in config.format[key]) { dd = {...dd, [key]: config.format[key].convert(dd[key])}; } } return dd; }); const y = new Map( Array.from( dimensions, key => { const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); let range = reverse.indexOf(key) >= 0 ? [0, config.chartHeight] : [config.chartHeight, 0]; return [key, d3.scaleLinear(d3.extent(data, d => d[key]), range).nice()] } ) ); const x = d3.scalePoint().range([0, config.chartWidth]).domain(dimensions).padding(0); const c = svg.append("g").attr("transform", `translate(${config.margin.left}, ${config.margin.top})`); const axis = d3.axisLeft().ticks(5); ctx.globalCompositeOperation = 'darken'; const g = c.selectAll(".dimension") .data(dimensions) .enter().append("g") .attr("class", "dimension") .classed("nonactive", false) .attr("transform", d => `translate(${x(d)})`); g.append("g") .attr("class", "paraxis") .each(function(d) { if (Object.keys(config.format).filter(key => "numTicks" in config.format[key]).indexOf(d) >= 0) { axis.ticks(config.format[d].numTicks); } else { axis.ticks(5); } let ya = axis.scale(y.get(d)); if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { ya = axis.scale(y.get(d)).tickFormat(config.format[d].ticks); } d3.select(this).call(ya); }) .call(g => g.selectAll("text") .clone(true).lower() .attr("fill", "none") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("opacity", 0.6) .attr("stroke", "white")) .call(g => g.selectAll("text") .attr("x", -12)); g.append("text") .attr("class", "label") .style("text-anchor", d => { let anchor = "end"; if (Object.keys(config.format).filter(d => "anchor" in config.format[d]).indexOf(d) >= 0) { anchor = config.format[d].anchor; } return anchor }) .attr("y", -25) .attr("font-size", 12) .style("font-family", "Open Sans") .html(d => { let name = d; if (Object.keys(config.format).filter(d => "newName" in config.format[d]).indexOf(d) >= 0) { name = config.format[d].newName; } return name; }); const render = renderQueue(draw).rate(50); ctx.clearRect(0,0,config.width,config.height); render(data); g.append("g") .attr("class", "parbrush") .each(function(d) { y.get(d).brush = d3.brushY().extent([[-10,-1], [10,config.chartHeight + 1]]) .on("brush", brush) .on("end", brush); d3.select(this) .call(y.get(d).brush); if (Object.keys(config.format).filter(d => "selection" in config.format[d]).indexOf(d) >= 0) { d3.select(this).call(y.get(d).brush.move, config.format[d].selection); } }) .selectAll("rect") .attr("x", -10) .attr("width", 20); function brush() { render.invalidate(); const actives = []; svg.selectAll(".parbrush") .filter(function(d) { y.get(d).brushSelectionValue = d3.brushSelection(this); return d3.brushSelection(this); }) .each(function(d) { actives.push({ dimension: d, extent: d3.brushSelection(this).map(y.get(d).invert) }); }); const selected = data.filter(function(d) { return actives.every(function(active) { let result = active.extent[1] <= d[active.dimension] && d[active.dimension] <= active.extent[0]; const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); if (reverse.indexOf(active.dimension) >= 0) { result = active.extent[1] >= d[active.dimension] && d[active.dimension] >= active.extent[0]; } return result; }); }); ctx.clearRect(0,0,config.width,config.height); render(selected); } function draw(d) { if (d.dataset === "interpolated") { //context.globalAlpha = .1; ctx.strokeStyle = "#ddeaf2"; ctx.lineWidth = 1; } else { //context.globalAlpha = 1; ctx.strokeStyle = "#1f77b4"; ctx.lineWidth = 1.5; } ctx.beginPath(); var coords = dimensions.map(p => [x(p) + config.margin.left, y.get(p)(d[p]) + config.margin.top]); coords.forEach(function(p,i) { // this tricky bit avoids rendering null values as 0 if (p === null) { // this bit renders horizontal lines on the previous/next // dimensions, so that sandwiched null values are visible if (i > 0) { var prev = coords[i-1]; if (prev !== null) { ctx.moveTo(prev[0],prev[1]); ctx.lineTo(prev[0]+6,prev[1]); } } if (i < coords.length-1) { var next = coords[i+1]; if (next !== null) { ctx.moveTo(next[0]-6,next[1]); } } return; } if (i == 0) { ctx.moveTo(p[0],p[1]); return; } ctx.lineTo(p[0],p[1]); }); ctx.stroke(); } container.appendChild(ctx.canvas); container.appendChild(svg.node()); return container; }35:T7c9,md`

#### Energy Performance Benchmarking As discussed in the previous sections, the baseline design with all performance parameters defined at ASHRAE 90.1-2010 Appendix G minimum requirements shows an EUI of ${formatEUI_SI_IP(162)} and a TEDI of ${formatEUI_SI_IP(47)}. Incorporating the current proposed constructions (R-30 walls, R-40 roofs, U-0.35 window assemblies) reduces the EUI to ${formatEUI_SI_IP(141)} and TEDI to ${formatEUI_SI_IP(38)}. Both these cases assume a baseline HVAC system that incorporates VAV air handling with electric reheat fan powered terminal units. Switching to the proposed systems with air source VRF served by an energy recovery dedicated outside air system (DOAS) reduces the EUI to ${formatEUI_SI_IP(93)} and TEDI to just under the target of ${formatEUI_SI_IP(34)}. Based on these results, the current proposed design demonstrates an overall energy savings of around 43% over the baseline and meets the TEDI target. Finally, improving the envelope properties to recommended values (R-35 walls, R-45 roofs, U-0.25 window assemblies), based on the results of sensitivity analysis, offers appreciable reduction in heating loads, reduces the TEDI appreciably to about ${formatEUI_SI_IP(25)}, and the EUI to ${formatEUI_SI_IP(85)} increasing the savings to 48% over the baseline. In terms of GHG emissions, the baseline energy use levels translate to 209 MTCO2e/yr. The current design with proposed constructions and HVAC systems reduces this to 90 MTCO2e/yr. Note that this analysis assumes an average grid emissions intensity of 20 gCO2e/kWh in accordance to the latest federal NIRR reporting, a blended utility rate of $0.11/kWH and a source energy factor of 1.96 for electricity. For natural gas, the assumed average grid emissions intensity is 181 gCO2e/kWh, the utility rate is $0.36/therm, and the source energy factor is 1.01. Figure 4 presents the comparison of EUI, TEDI and GHG for the different studied scenarios.

`36:Td3f,stackedBar = { const config = { height: 450, width: 960, margin: {top: 20, right:150, bottom: 30, left: 50, legend: 0}, units: unitSelection.unit, y: euiSwitch2.y, label: `${stacked_data.label} ${stacked_data.unit}` }; const svg = d3.select(DOM.svg(config.width, config.height)); const x = d3.scaleBand() .domain(stacked_data.columns) .range([config.margin.left, config.width - config.margin.right]) .paddingOuter(.3) .paddingInner(0.75); const y = d3.scaleLinear() .domain([0, d3.max(stacked_data.totals) + eui(5)]) .rangeRound([config.height - config.margin.bottom, config.margin.top]).nice(); const xAxis = g => g .attr("transform", `translate(0,${config.height - config.margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${config.margin.left}, 0)`) .call(d3.axisLeft(y).ticks(null, "s").tickSize(-(config.width - config.margin.left - config.margin.right + 20)).tickPadding(10)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "#eaeaea").attr("opacity", 0.7)) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("y", 0) .attr("text-anchor", "start") .attr("font-weight", "bold") .style("paint-order", "stroke") .style("stroke", "#ffffff") .style("stroke-width", "8px") .html(`${config.label}`)); const legend = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "end") .selectAll("g") .data(stacked_data.keys.slice().reverse()) .join("g") .attr("transform", (d, i) => `translate(0,${i * 21})`); g.append("rect") .attr("x", -18) .attr("width", 18) .attr("height", 18) .attr("fill",stackedColor); g.append("text") .attr("x", -28) .attr("y", 8) .attr("dy", "0.35em") .text(d => d); } const totals = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "middle") .selectAll("g") .data(stacked_data.totals) .join("g") .attr("transform", (d, i) => `translate(${x(stacked_data.columns[i])},${y(d)})`); g.append("text") .attr("x", x.bandwidth()/2) .attr("y", -8) .attr("dy", "0.35em") .text(d => _.round(d, 1)); } svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .selectAll("g") .data(stacked_data) .join("g") .attr("fill", (d, i) => stackedColor(stacked_data.keys[i])) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(stacked_data.columns[i])) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .append("title") .html(d => `${_.round(d[1] - d[0], 2)} ${config.label}`); // `${d.name}\n${eui(d.value)} ${config.label}` svg.append("g") .attr("transform", `translate(${config.width - config.margin.legend},${config.margin.top})`) .call(legend); svg.append("g").call(totals) return svg.node(); }37:T18b3,renewables_chart = { const width = 960; const height = 500; const svg = d3.select(DOM.svg(width, height)).property("value", []);//.attr("view", []); const margin1 = {top: 20, right: 20, bottom: 110, left: 40}; const margin2 = {top: 430, right: 20, bottom: 30, left: 40}; const chart_width = width - margin1.left - margin1.right; const chart_height = height - margin1.top - margin1.bottom; const context_height = height - margin2.top - margin2.bottom; // const x = d3.scaleTime().range([0, chart_width]); // const x2 = d3.scaleTime().range([0, chart_width]); const x = d3.scaleLinear().range([0, chart_width]); const x2 = d3.scaleLinear().range([0, chart_width]); const y = d3.scaleLinear().range([chart_height, 0]); const y2 = d3.scaleLinear().range([context_height, 0]); const xAxis = d3.axisBottom(x); const xAxis2 = d3.axisBottom(x2); // const xAxis = g => g // .call(d3.axisBottom(x)); // const xAxis2 = g => g // .call(d3.axisBottom(x2)) // .call(g => g.select(".tick:first-of-type text").remove()); const yAxis = g => g .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Kilowatts")); const brush = d3.brushX() .extent([[0, 0], [chart_width, context_height]]) .on("brush end", brushed); const zoom = d3.zoom() .scaleExtent([1, Infinity]) .translateExtent([[0, 0], [chart_width, chart_height]]) .extent([[0, 0], [chart_width, chart_height]]) .on("zoom", zoomed); const area1 = d3.area() // .x(d => x(d.data.date)) .curve(d3.curveMonotoneX) .x(d => x(d.data.index)) .y0(d => y(d[0])) .y1(d => y(d[1])); const area2 = d3.area() // .x(d => x2(d.date)) .curve(d3.curveMonotoneX) .x(d => x2(d.index)) .y0(d => y2(0)) .y1(d => y2(d.ghg)); /* // const line = d3.line() // .defined(d => !isNaN(d.grid_to_project + d.grid_to_battery)) // .x(d => x(d.index)) // .y(d => y(d.grid_to_project + d.grid_to_battery)); */ svg.append("defs").append("clipPath") .attr("id", "clip") .append("rect") .attr("width", chart_width) .attr("height", chart_height); const focus = svg.append("g") .attr("class", "focus") .attr("transform", `translate(${margin1.left},${margin1.top})`); const context = svg.append("g") .attr("class", "context") .attr("transform", `translate(${margin2.left},${margin2.top})`); svg.append("rect") .attr("class", "zoom") .attr("width", chart_width) .attr("height", chart_height) .attr("cursor", "move") .attr("fill", "none") .attr("pointer-events", "all") .attr("transform", "translate(" + margin1.left + "," + margin1.top + ")") .call(zoom); function brushed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom let s = d3.event.selection || x2.range(); x.domain(s.map(x2.invert), x2); focus.selectAll(".area").attr("d", area1); // focus.select(".demandLine").attr("d", line); focus.select(".axis--x").call(xAxis); svg.select(".zoom").call(zoom.transform, d3.zoomIdentity .scale(chart_width / (s[1] - s[0])) .translate(-s[0], 0)); } function zoomed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush let value = []; let t = d3.event.transform; x.domain(t.rescaleX(x2).domain()); value = x.domain(); svg.property("value", value).dispatch("input"); focus.selectAll(".area").attr("d", area1); // focus.select(".demandLine").attr("d", line); focus.select(".axis--x").call(xAxis); context.select(".brush").call(brush.move, x.range().map(t.invertX, t)); } // const stacked = Object.assign(d3.stack().keys(projectKeys)(peaks), { // keys: projectKeys // }); const stacked = Object.assign(d3.stack().keys(projectKeys)(renewables_peaks), { keys: projectKeys }); const formatHour = d3.timeFormat("%I %p"); const formatMonth = d3.timeFormat("%B"); const months = _.range(12).map((d, i) => i*24); //convert indices to months xAxis2.tickValues(months).tickFormat(i => formatMonth(renewables_peaks[i].date)); xAxis.tickFormat(i => formatHour(renewables_peaks[i].date)); // x.domain(d3.extent(data, function(d) { return d.date; })); // x2.domain(d3.extent(data, function(d) { return d.date; })); x.domain(d3.extent(renewables_peaks, function(d) { return d.index; })); x2.domain(d3.extent(renewables_peaks, function(d) { return d.index; })); // y.domain([0, d3.max(stacked.flat(2))]).nice(); // y2.domain([0, d3.max(peaks, function(d) { return d[scenario.value]; })]); y.domain([0, 1000]).nice(); y2.domain([0, 1000]); focus.selectAll("path") .data(stacked) .enter().append("path") .attr("class", "area") .attr("clip-path", "url(#clip)") .attr("fill", (d, i) => ghgColor(stacked.keys[i])) .attr("d", area1) // focus.append("path") // .datum(data) // .attr("fill", "none") // .attr("stroke-width", 1.5) // .attr("stroke", "#2171b5") // .attr("class", "demandLine") // .attr("clip-path", "url(#clip)") // .attr("d", line); focus.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + chart_height + ")") .call(xAxis); focus.append("g") .attr("class", "axis axis--y") .call(yAxis); context.append("path") .datum(renewables_peaks) .attr("class", "area") .attr("fill", "#1776b6") .attr("clip-path", "url(#clip)") .attr("d", area2); context.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + context_height + ")") .call(xAxis2); //this is the value of the previous svg node if (!this) { context.append("g") .attr("class", "brush") .call(brush) .call(brush.move, [0, 150]); } else { let range = d3.select(this).property("value").map(x); context.append("g") .attr("class", "brush") .call(brush) .call(brush.move, range); } return svg.node(); }38:Tb1f,md`
${ table(summary_data, { sortable: false, header: false, style: "compact", columns: { Parameter: { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. return i === 0 ? "" : html`

${val}

`; } }, Q: { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. if (i === 1 || i === 2) { val = formatEUI_IP_SI(val) } else if (i === 3) { val = formatGHG_IP_SI_KG(val); } else if (i === 4) { val = ` ${val} MTCO₂e/yr ` ; } else if (i === 5) { val = cost(val) ; } else if (i === 6) { val = ` ${val} kW_p` ; } return i === 0 ? html`

${val}

` : html`

${val}

`; } }, R: { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. if (i === 1 || i === 2) { val = formatEUI_IP_SI(val) } else if (i === 3) { val = formatGHG_IP_SI_KG(val); } else if (i === 4) { val = ` ${val} MTCO₂e/yr ` ; } else if (i === 5) { val = cost(val) ; } else if (i === 6) { val = ` ${val} kW_p` ; } return i === 0 ? html`

${val}

` : html`

${val}

`; } }, S: { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. if (i === 1 || i === 2) { val = formatEUI_IP_SI(val) } else if (i === 3) { val = formatGHG_IP_SI_KG(val); } else if (i === 4) { val = ` ${val} MTCO₂e/yr ` ; } else if (i === 5) { val = cost(val) ; } else if (i === 6) { val = ` ${val} kW_p` ; } return i === 0 ? html`

${val}

` : html`

${val}

`; } }, } }) } `39:T4ad,html``3a:T7a6,function simulate(d, c) { const config = Object.assign({ //maxCharge: 2000, pvSize: 800, // initialCharge: 2000, // chargeRate: 333, // dischargeRate: 333 }, c) let hours = [...d]; hours.map((dd, i, arr) => { let o = {...dd}; //PV Generation in kWh o.pvGeneration = o.ghg_offset * config.pvSize/ 1000; //Total Renewable Generation in kWh o.totalGeneration = o.pvGeneration; //send pv to project if (o.totalGeneration >= o.ghg) { o.renewableToProject = o.ghg } else { o.renewableToProject = o.totalGeneration } //update project demand let demand = o.ghg - o.renewableToProject; // //get battery charge // if (i === 0) { // o.batteryCharge = config.initialCharge; // } // else { // o.batteryCharge = arr[i - 1].batteryCharge; // } // //send unused pv to battery // if (o.totalGeneration - o.renewableToProject >= config.chargeRate) { // o.renewableToBattery = Math.min(config.chargeRate, config.maxCharge - o.batteryCharge); // } // else { // o.renewableToBattery = Math.min(o.totalGeneration - o.renewableToProject, config.maxCharge - o.batteryCharge); // } //update the battery charge // o.batteryCharge += o.renewableToBattery; //send remaining charge to grid // o.renewableToGrid = Math.max(o.totalGeneration - o.renewableToProject - o.renewableToBattery, 0); o.renewableToGrid = Math.max(o.totalGeneration - o.renewableToProject, 0); // //send battery to project // o.batteryToProject = Math.min(demand, config.dischargeRate, o.batteryCharge); // //update battery charge // o.batteryCharge -= o.batteryToProject; //send grid to project if needed // o.gridToProject = demand - o.batteryToProject; o.gridToProject = demand; arr[i] = o; }) return hours; }3b:Ta99,stacked_data = { let data = (await FileAttachment("stacked_data.csv").csv()); if (euiSwitch2.value == "stacked_energy") { const keys = Object.keys(data[0]).filter(d => d != "Case").filter(d => d != "TEDI").filter(d => d != "GHG").filter(d => d != "Cost").filter(d => d != "Source Energy"); const converted = data.map(o => { const a = {...o}; for (const key of keys) { a[key] = eui(o[key]); } return a; }); const stacked1 = d3.stack().keys(keys)(converted); stacked1.columns = data.map(d => d.Case); stacked1.keys = keys; stacked1.totals = converted.map(o => _.round(_.sumBy(keys, key => o[key]), 0)); stacked1.label = "Site EUI"; stacked1.unit = (unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr") return stacked1; } else if (euiSwitch2.value == "stacked_TEDI"){ const keys = Object.keys(data[0]).filter(d => d === "TEDI"); const converted = data.map(o => { const a = {...o}; for (const key of keys) { a[key] = eui(o[key]); } return a; }); const stacked2 = d3.stack().keys(keys)(converted); stacked2.columns = data.map(d => d.Case); stacked2.keys = keys; stacked2.totals = converted.map(o => _.round(_.sumBy(keys, key => o[key]), 0)); stacked2.label = "EUI"; stacked2.unit = (unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr") return stacked2; } else if (euiSwitch2.value == "stacked_GHG"){ const keys = Object.keys(data[0]).filter(d => d === "GHG"); const converted = data.map(o => { const a = {...o}; for (const key of keys) { a[key] = ghg(o[key]); } return a; }); const stacked3 = d3.stack().keys(keys)(converted); stacked3.columns = data.map(d => d.Case); stacked3.keys = keys; stacked3.totals = converted.map(o => _.round(_.sumBy(keys, key => o[key]), 0)); stacked3.label = "GHG Emissions"; stacked3.unit = `MTCO2e/yr` return stacked3; } // else if (euiSwitch2.value == "stacked_Cost"){ // const keys = Object.keys(data[0]).filter(d => d === "Cost"); // const costData=[9.711218, 8.876749, 7.144803, 7.05974]; // const converted = costData.map(o => { // const a = {...o}; // for (const key of keys) { // a[key] = cost(o[key]); // } // return a; // }); // const stacked4 = d3.stack().keys(keys)(converted); // stacked4.columns = data.map(d => d.Case); // stacked4.keys = keys; // stacked4.totals = converted.map(o => _.round(_.sumBy(keys, key => o[key]), 0)); // stacked4.label = "Cost"; // stacked4.unit = (unitSelection.unit === "IP" ? "$/ft²/yr" : "$/m²/yr") // return stacked4; // } // | }3c:T408,color = { const lookup = { "Electricity":"#d6d231", "DHW":"#d52928", "Heating Energy":"#d52928", "Cooling Energy":"#1dbfcf", "Lights":"#d6d231", "Fans":"#bfbfbf", "Equipment":"#dddddd", "Other Gains":"#a17eb9", "Passive Solar Gains":"#a17eb9", "Lighting Gains":"#a17eb9", "Occupant Gains":"#a17eb9", "Infiltration Losses":"#a17eb9", "Window Losses":"#a17eb9", "Internal Equipment Gains":"#a17eb9", "OA Economizer":"#a17eb9", "Walls":"#f7aa6e", "Roof":"#f7aa6e", "Below Grade":"#f7aa6e", "Infiltration":"#f7aa6e", "Windows":"#f7aa6e", "OA Heating":"#f7aa6e", "Equipment Gains":"#6aadd6", "Lighting":"#6aadd6", "Solar":"#6aadd6", "Occupants":"#6aadd6", "Cooling Load":"#1f77b4", "Cooling System":"#1f77b4", "Heating Load":"#e55725", "Heating System":"#e55725", "Pumps":"#adadad", "Exterior Usage": "#808080", "Floor on Grade":"#f7aa6e", "Natural Gas": "#e55725" }; return name => lookup[name]; }3d: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; }3e: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; }3f:[{"id":"d130a7b9548c2a88db1a711087cf88e5396d7c77aa588c244ff6a776434faffcccf168289985af86cda571e1d2b3b668d238a4b6307ba24f6d19b65fc62bcfbf","href":"https://static.observableusercontent.com/files/d130a7b9548c2a88db1a711087cf88e5396d7c77aa588c244ff6a776434faffcccf168289985af86cda571e1d2b3b668d238a4b6307ba24f6d19b65fc62bcfbf","name":"interpolated_data.csv","type":"text/csv","lastModified":1759521948041.868,"size":248063},{"id":"eb6a94b7b2fab232ee3369df4cbfb1d451470f17d291cf98005ec1667dd426a7b30bd64f6303c3354ac682cf7c5a0647f029a2231a30311d7b4158dbce6b38f1","href":"https://static.observableusercontent.com/files/eb6a94b7b2fab232ee3369df4cbfb1d451470f17d291cf98005ec1667dd426a7b30bd64f6303c3354ac682cf7c5a0647f029a2231a30311d7b4158dbce6b38f1","name":"parametric_data.csv","type":"text/csv","lastModified":1759522070130.775,"size":1311},{"id":"044826a8358562244fb46725501796efc5117398d188d778d33c28958b5b9f9e0a950c8d1f3271460ec1015ed1814c64dfa42724297f5302a7cd2a3a0b256777","href":"https://static.observableusercontent.com/files/044826a8358562244fb46725501796efc5117398d188d778d33c28958b5b9f9e0a950c8d1f3271460ec1015ed1814c64dfa42724297f5302a7cd2a3a0b256777","name":"summary_data.csv","type":"text/csv","lastModified":1759522097282.309,"size":386},{"id":"9fdca1d4d70c073a5c7593baf3fe9cd5eccd8fdd3e91c8c93e3a33e93f87dbb72a4861504e88aae44a72f1c49aa9f7837f636bf6343018394e975e88f45d7f4c","href":"https://static.observableusercontent.com/files/9fdca1d4d70c073a5c7593baf3fe9cd5eccd8fdd3e91c8c93e3a33e93f87dbb72a4861504e88aae44a72f1c49aa9f7837f636bf6343018394e975e88f45d7f4c","name":"stacked_data.csv","type":"text/csv","lastModified":1759522115316.697,"size":592},{"id":"8e22f0bbc749b340d910b5ea97b727a4927ca7bed36a746fc529ecc3da8ab1398679f384041a04a7f51cf08dac259222957e920451734f938e07d8baded00dbf","href":"https://static.observableusercontent.com/files/8e22f0bbc749b340d910b5ea97b727a4927ca7bed36a746fc529ecc3da8ab1398679f384041a04a7f51cf08dac259222957e920451734f938e07d8baded00dbf","name":"sankey_data.csv","type":"text/csv","lastModified":1759522138818.746,"size":1346},{"id":"b8f8755c7b984fba7fc28c243f2c012fd1debab596630a9747c54a6f136281832ee0c0357509202ec6cbb62a4f6a5c2e9c161105c33e36e5856c13e11440a186","href":"https://static.observableusercontent.com/files/b8f8755c7b984fba7fc28c243f2c012fd1debab596630a9747c54a6f136281832ee0c0357509202ec6cbb62a4f6a5c2e9c161105c33e36e5856c13e11440a186","name":"renewables_data.csv","type":"text/csv","lastModified":1759522161163.394,"size":201496}] 2f:{"title":"Centennial College A-Block Expansion","cells":[{"id":0,"value":"md`# Centennial College A-Block Expansion`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof date = html`Novermber 1, 2019 - Pursuit Phase Energy Analysis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`

\n### Introduction\nIntroba developed a whole building energy model for the Centennial College A-Block expansion project in Toronto, ON. This study is designed to help characterize the proposed design energy use and to study the sensitivity of different envelope component characteristics on building energy use. The primary purpose of this analysis is to benchmark the project against an ASHRAE 90.1-2010 baseline and to the check whether the project design is set on track to achieve a Thermal Energy Demand Intensity (TEDI) under ${formatEUI_SI_IP(34)} in compliance with requirements of the Zero Carbon Building (ZCB) Standard published by the Canada Green Building Council (CaGBC) for ASHRAE Climate Zone 6.\n

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

\n### Energy End Use Characterization\nFigure 1 below shows the breakdown in energy by end use for the baseline 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. The total energy use intensity (EUI) of the baseline design, with all performance parameters defined at ASHRAE 90.1-2010 levels is approximately ${formatEUI_SI_IP(162)}, with roughly half of this attributable to space heating energy to meet a TEDI of ${formatEUI_SI_IP(47)} with baseline boilers, roughly 13% each to plugged equipment and fan energy, and about 11% to lighting energy. The load components on the right show the key drivers of proposed design energy use. Solar gains form the largest load component, constituting 40% of the total cooling load. In terms of heating, the majority of the load results from window conduction losses followed by outside air heating.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"viewof figure2 = html`Figure 1: Building energy use characterization showing load components and energy end-uses for the proposed design.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"// viewof euiSwitch = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":59,"value":"viewof figure3 = html`Figure 2: Sensitivity of individual building performance parameters on building TEDI.

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

\n### Parametric Analysis\nTo better understand the effect of different performance characteristics on building TEDI, Figure 3 presents a parallel coordinates plot where each of the first six vertical axes represents a performance parameter and its evaluated properties, and the last axis shows the TEDI resulting from the selected combinations. Putting constraints on one of more attributes, for instance, allows for the exploration of how changing the remaining attributes affects the TEDI. The dark lines in the chart are results for combinations simulated using the whole building energy model. The lighter lines represent results from all other combinations that are generated using statistical surrogate models that utilize data-driven approximation techniques.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"parLegend = {\n \n const svg = d3.select(DOM.svg(960, 60))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\"Interpolated Data\", \"Modeled Data\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 30})`);\n\n g.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", 20)\n .attr(\"y1\", 0)\n .attr(\"y2\", 0)\n .attr(\"stroke\", d => d === \"Interpolated Data\" ? \"#ddeaf2\": \"#1f77b4\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-width\", 2)\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":154,"value":"viewof figure4 = html`Figure 3: Effect of different combinations of parameter properties on building TEDI. Move or expand the selection box for each attribute.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"viewof euiSwitch2 = form(html``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":732,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":863,"value":"viewof figure5 = html`
Figure 4: Comparison of EUI, TEDI, GHG emissions and cost for different studied scenarios.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"md`

\n### Renewable Energy Generation\nIntroba additionally developed an onsite renewable energy generation model that takes the comprehensive hourly electric load profiles and analyzes the proposed design scenario for sizing potential renewable energy capacities. Figure 5 plots the energy balance from renewables and grid to meet the project demand based on different photovoltaic capacities. The energy offset refers to the percentage of project attributed energy use that is offset by the renewables on a net-annual basis, irrespective of whether the generation is utilized by the building, or potentially net-metered back to the grid. Initial analysis suggests that a 53 kWp PV array will be required to offset 5% of project energy.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"viewof pvSize = {\n return slider({\n min: 0, \n max: 1000, \n step: 5, \n value: 55,\n display: v => {\n let el = document.createElement(\"span\")\n let pvArea = formatAREA_SI_IP(_.round(v / (1 * 0.19), 0))\n el.innerHTML = `${d3.format(\",.0f\")(v)} kW_p | PV Area: ${pvArea}`\n return el;\n },\n description: \"Select Photovoltaic Size\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"md`
\nPV Offset: **${d3.format(\".1%\")(_.sumBy(renewables_sim, d => d.totalGeneration)/(_.sumBy(renewables_sim, d => d.ghg)))}**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"legend = {\n \n const key_map = {\n \"gridToProject\": \"Grid to Project\",\n \"renewableToProject\": \"Renewable to Project\"\n }\n \n const svg = d3.select(DOM.svg(960, ghgColor.domain().length * 24 + 15))\n .style(\"font\", \"11px sans-serif\");\n \n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data(ghgColor.domain())\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 15})`);\n\n g.append(\"rect\")\n .attr(\"width\", 20)\n .attr(\"height\",20)\n .attr(\"fill\", ghgColor);\n\n g.append(\"text\")\n .attr(\"x\", 30)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.35em\")\n .text(d => key_map[d]);\n \n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1290,"value":"md`

\n### Summary and Conclusions\nThe following table summarizes the key metrics for this study.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1165,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`\n

\nDetailed model input assumptions are documented [here.](https://da.introba.com/projects/ccabe/assets/191101_CCABE_EM_Inputs.pdf)

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"ghgColor = d3.scaleOrdinal()\n .range([\"#1776b6\", \"#6fccd8\", \"#d7ddda\"])\n .domain(projectKeys)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"formatEUI_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${d} kWh/m²/yr`;\n }\n else {\n return `${_.round(d * 3.412 / 10.76, 0)} kBtu/ft²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"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":981,"value":"formatGHG_IP_SI = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} gCO₂e/ft²/yr`;\n }\n else {\n return `${_.round(d * 7.273362, 2)} gCO₂e/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"formatGHG_IP_SI_KG = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} kgCO₂e/ft²/yr`;\n }\n else {\n return `${_.round(d * 7.273362, 2)} kgCO₂e/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"formatAREA_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 0)} m²`;\n }\n else {\n return `${_.round(d * 10.76, 0)} ft²`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"sankey_data = {\n let sankey_data = (await FileAttachment(\"sankey_data.csv\").csv()).map(({source, target, value}) => ({source: source, target: target, value: +value}));\n \n //http://elementa.nyc/yale/berekely/data/yale_sankey.csv\n //create a list of nodes and links\n const nodes = Array.from(new Set(sankey_data.map(d => [d.source, d.target]).flat()));\n const links = sankey_data.map(({source, target, value}) => ({\n source: nodes.indexOf(source),\n target: nodes.indexOf(target),\n value: value\n }));\n\n sankey_data = {nodes: nodes.map(d => ({name: d})), links: links};\n return sankey_data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"sankey = {\n const config = {\n height: 500,\n width: 920,\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":1018,"value":"renewables_data = {\n let renewables = (await FileAttachment(\"renewables_data.csv\").csv({typed: true})); \n \n\n return renewables;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"renewables_sim = simulate(renewables_data, {\n pvSize: pvSize,\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"renewables_peaks = {\n const nested = d3.nest()\n .key(d => d.month)\n .entries(renewables_sim)\n .map((d) => {\n let month = +d.key;\n let totals = groupSum(d.values, d => d.day, d => d.ghg);\n let target = _.sumBy(Array.from(totals), d => d[1]) / totals.size;\n \n // let closest = Array.from(totals).reduce(function(prev, curr) {\n // return (Math.abs(curr[1] - target) < Math.abs(prev[1] - target) ? curr : prev);\n // })[0];\n\n let day = +d.values.reduce((a, b) => {\n return (a.ghg || 0) > b.ghg ? a : b;\n }, {}).day;\n \n // let day = closest;\n \n let values = renewables_sim.filter(dd => (dd.month === month && dd.day === day));\n\n return {month: month, day: day, values: values};\n });\n \n \n\n let peaks = [].concat(...nested.map(d => d.values));\n \n \n peaks.map((d, i, arr) => {\n arr[i] = {...d, index: i};\n });\n \n return peaks;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"projectKeys = [\"gridToProject\", \"renewableToProject\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"stackedColor = {\n const lookup = {\n \"Lights\":\"#d6d231\",\n \"Plug Loads\":\"#dddddd\",\n \"Heating\":\"#d52928\",\n \"DHW\":\"#e55725\",\n \"Cooling\":\"#1dbfcf\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"TEDI\": \"#d52928\",\n \"Exterior Usage\": \"#808080\",\n \"GHG\": \"#9CBD53\",\n \"Source Energy\": \"gray\",\n \"Cost\": \"pink\"\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1159,"value":"summary_data = {\n let general = (await FileAttachment(\"summary_data.csv\").csv()); \n \n return general;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"ghg = d => (unitSelection.unit === \"IP\") ? _.round(d * 7.273362, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1433,"value":"cost = d => (unitSelection.unit === \"IP\") ? `${_.round(d, 2)} / ft²` : `${_.round(d * 10.76, 2)} /m²`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await FileAttachment(\"parametric_data.csv\").csv()); \n //group the data by independent variable\n const grouped = group(data, d => d.Variable);\n data = Array.from(grouped, d => ({variable: d[0], data: d[1].sort((a, b) => a[d[0]] - b[d[0]])}));\n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"parametric_data = {\n let parametrics = await FileAttachment(\"interpolated_data.csv\").csv(); \n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, EUI: eui(d.EUI), TEDI: eui(d.TEDI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"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"},{"id":22,"value":"d3 = require('d3@5.9.2','d3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"d3format = require('d3-format@1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"import {group, groupSum, groupCount} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"import {table} from \"@tmcw/tables@444\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3f","stdlib":"1","titling":"auto"}