31:T2191,parcoords2 = { const lookup = { "HVAC System": { "0": "NG Boiler", "1": "ASHP", "2": "GSHP" } } const config = { height: 500, width: 960, margin: {top: 60, right: 40, bottom: 10, left: 25}, format: { "Wall R": { ticks: d3.format(".0f"), numTicks: 4, selection: [350, 450] }, "Roof R": { newName: "Roof R", ticks: d3.format(".0f"), numTicks: 4, selection: [350, 450] }, "WWR - Academic ": { newName: "Academic WWR", anchor: "middle", selection: [250,350] }, "WWR- D2 HUB+Fitness": { newName: "Hub WWR", anchor: "middle", selection: [100,200] }, "Window U": { newName: "Window U", ticks: d3.format(".2f"), numTicks: 4, selection: [0, 100] }, "SHGC S": { newName: "SHGC", ticks: d3.format(".1f"), numTicks: 4, selection: [100,200] }, "Shade": { ticks: d3.format(".0f"), numTicks: 4, selection: [0,100] }, "HVAC System": { ticks: d => lookup["HVAC System"]["".concat(d)], numTicks: 3, selection: [350, 450]}, "TEDI": { newName: `${unitSelection.unit === "IP" ? "TEDI kBTU/ft²/y": "TEDI kWh/m²/y"}`, anchor: "middle", numTicks: 6, ticks: d3.format(".1f")}, "CEDI": { newName: `${unitSelection.unit === "IP" ? "CEDI kBTU/ft²/y": "CEDI kWh/m²/y"}`, anchor: "middle", numTicks: 6, ticks: d3.format(".1f")}, "EUI": { newName: `${unitSelection.unit === "IP" ? "EUI kBTU/ft²/y": "EUI kWh/m²/y"}`, anchor: "middle", numTicks: 6, 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_data2.columns.filter(d => d != "dataset"); const data = parametric_data2.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})`); 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) { const axis = d3.axisLeft(); let ya = axis.scale(y.get(d)); if (Object.keys(config.format).filter(key => "numTicks" in config.format[key]).indexOf(d) >= 0) { if (config.format[d].numTicks.length) { ya.tickValues(config.format[d].numTicks) } else { ya.ticks(config.format[d].numTicks); } } else { ya.ticks(5); } if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { ya.tickFormat(config.format[d].ticks); } // 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 = "middle"; 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; console.log(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; }32:T5af,md`

### Energy End Use Characterization Figure 2 below shows the breakdown in energy by end use for the building. The energy in this case have been calculated for the baseline building design using envelope parameters and lighting values from SB-10 Division 3. The modeled HVAC system is a packaged VAV with a natural gas heater to provide heating as specified in SB-10. The total energy use intensity (EUI) of this design case used as a baseline is approximately ${formatEUI_SI_IP(297)}. In the graphic, the 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. Of the total EUI of ${formatEUI_SI_IP(297)}, almost 50% is attributable to heating energy, followed by 14% to equipment energy and 11% to lighting energy. The load components on the right show the key gains and losses attributable to the heating and cooling gains. The heating load is predominantly attributable to heating the incoming outside air in the vehicle bays and the other parts of building and account for about 60% of the total heating load. Additional 17% loads is required for the reheat in order to maintain the humidity in the space. The envelope has a bigger impact on the D2Hub and education part of the building. On the cooling side, cooling the outside air constitutes 27% of the cooling load followed by occupants, lighting and equipment.

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

### Envelope Sensitivity A detailed parametric analysis has been conducted on the baseline design as discussed above, to understand the sensitivity of various envelope characteristics on building energy use. Figure 3 below 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 or building CEDI (selectable from the dropdown). The line represents the overall trend for each parameter, the baseline values are marked by dark blue dots. As discussed above, the heating load of the building drives the energy use of the building. While sensitivity based on TEDI is an important factor, ensuring a lower cooling demand is equally necessary to avoid upsizing of the active cooling system. It is recommended that the design team design the walls with an insulation value of at least R-40 and roof of at least R-50. The window u-value is recommended to be less than U-0.2 for the entire assembly which can be achieved by thermally broken triple glass windows. Infiltration plays a very critical role in reducing the thermal demand of the building and it is recommended that the building is designed with a tight envelope later verified by a blower door test. The currently planned window-to-wall ratios are in the range of the optimized values, but as seen below, the academic and office/fitness areas are sensitive to the higher/lower WWR.

`35:T2272,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)}, "SHGC S": { newName: "SHGC"}, }, units: unitSelection.unit, y: euiSwitch.y } let eui_convert; 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.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(); }36:T1f94,parcoords = { const config = { height: 500, width: 960, margin: {top: 60, right: 40, bottom: 10, left: 25}, format: { "Wall R": { ticks: d3.format(".0f"), numTicks: 4, selection: [350, 450] }, "Roof R": { newName: "Roof R", ticks: d3.format(".0f"), numTicks: 4, selection: [350, 450] }, "WWR - Academic": { newName: "Academic WWR", selection: [250,350] }, "WWR- D2 HUB+Fitness": { newName: "HUB Fitness WWR", selection: [100,200] }, "Window U": { newName: "Window U", ticks: d3.format(".2f"), numTicks: 4, selection: [0, 100] }, "SHGC": { ticks: d3.format(".1f"), numTicks: 4, selection: [100,200] }, "Shade": { ticks: d3.format(".0f"), numTicks: 4, selection: [250,350] }, "TEDI": { newName: `${unitSelection.unit === "IP" ? "TEDI kBTU/ft²/yr": "TEDI kWh/m²/yr"}`, anchor: "middle", numTicks: 6, ticks: d3.format(".1f")}, "CEDI": { newName: `${unitSelection.unit === "IP" ? "CEDI kBTU/ft²/yr": "CEDI kWh/m²/yr"}`, anchor: "middle", numTicks: 6, 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"); 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})`); 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) { const axis = d3.axisLeft(); let ya = axis.scale(y.get(d)); if (Object.keys(config.format).filter(key => "numTicks" in config.format[key]).indexOf(d) >= 0) { if (config.format[d].numTicks.length) { ya.tickValues(config.format[d].numTicks) } else { ya.ticks(config.format[d].numTicks); } } else { ya.ticks(5); } if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { ya.tickFormat(config.format[d].ticks); } // 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 = "middle"; 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; console.log(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; }37:T764,md`
#### Energy Performance Benchmarking (WIP) As discussed in the previous sections, the SB-10 baseline design with envelope and lighting parameters defined in the standard shows an EUI of ${formatEUI_SI_IP(297.6)}. This is reduced to ${formatEUI_SI_IP(264.1)} when the recommended envelope of R-40 walls, R-50 roof, triple glazed windows and shades with cut-off angle of around 60 degrees is used. Additionally, this case also includes a vestibule in the vehicle bay, that helps to reduce the heat loss when ambulances leave the facility. This combination provides an EUI reduction of about 11%. Changing the HVAC system to a decoupled system by including a dedicated outdoor system (DOAS) to provide fresh air, improve the heat recovery effectiveness and reducing the lighting power density (LPD) can bring the EUI down to approximately ${formatEUI_SI_IP(190.6)} - approximately 36% lower energy use than the baseline. The next bar shows the energy use when the HVAC plant is changed to an air source heat pump for heating and cooling. An ASHP provides thermal energy at a much higher efficiency thereby reducing the EUI by 48% to ${formatEUI_SI_IP(163.4)}. Replacing the ASHP with a ground source heat pump and utilizing ground as a heat rejection source can help bring the EUI down further to ${formatEUI_SI_IP(152.2)}. This option relies on stable and balanced ground temperatures and includes electric boilers as backup heating options. Lastly, enhancing the heat recovery ventilation effectviness to 80% can reduce the EUI (and TEDI) further to ${formatEUI_SI_IP(139.2)}. This option is the current proposed HVAC design option. A 800 kW PV array mounted on the rooftop can offset electricity to make the project with the proposed HVAC system a net zer energy and net zero emission builidng. A slider has been provided to assess the EUI offset with different PV sizes.
`38:T69b,stacked = { const data = stacked_data.filter(d => d.Case != "800 kW PV Array"); const cols = data.map(d => d.Case); if (euiSwitch2.value == "stacked_energy") { const exclusions = ["Case", "TEDI", "EUI", "GHGI", "Source Energy", "PV Offset"] const keys = _.difference(Object.keys(data[0]), exclusions); const converted = data.map(o => { const a = {...o}; for (const key of keys) { a[key] = eui(o[key]); } return a; }); const stacked = d3.stack().keys(keys)(converted); stacked.columns = cols; stacked.keys = keys; stacked.totals = converted.map(o => _.round(_.sumBy(keys, key => o[key]), 2)); stacked.pvoffset = eui(pvsize * 1352 / 7700); return stacked; } 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 stacked = d3.stack().keys(keys)(converted); stacked.columns = cols; stacked.keys = keys; stacked.totals = converted.map(o => _.round(_.sumBy(keys, key => o[key]), 2)); return stacked; } else if (euiSwitch2.value == "stacked_GHGI") { const keys = Object.keys(data[0]).filter(d => d === "GHGI") const converted = data.map(o => { const a = {...o}; for (const key of keys) { a[key] = eui(o[key]); } return a; }); const stacked = d3.stack().keys(keys)(converted); stacked.columns = cols; stacked.keys = keys; stacked.totals = converted.map(o => _.round(_.sumBy(keys, key => o[key]), 2)); return stacked; } }39:T13a7,stackedBar = { const config = { height: 600, width: 960, margin: {top: 20, right:150, bottom: 30, left: 35, legend: 0}, units: unitSelection.unit, label: `${unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr"}` }; 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, 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:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .style("paint-order", "stroke") .style("stroke", "#ffffff") .style("stroke-width", "8px") .html(`EUI ${config.label}`)); const pv_line = svg => { const g = svg .selectAll(".pvline") .data([stacked.pvoffset]) .join("path") .attr("class", "pvline") .attr("d", d => d3.line()([[config.margin.left, y(d)], [config.margin.left + width - config.margin.right - 12, y(d)]])) .attr("stroke-width", 4) .attr("stroke-linecap", "round") .attr("opacity", 0.8) .attr("stroke", "#d6d231") .style("stroke-dasharray", ("6, 12")); svg.append("text") .attr("x", config.margin.left + width - config.margin.right - 12) .attr("y", y(stacked.pvoffset) - 16 ) .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("font-family", "Open Sans") .attr("font-size", 10) .text(d => _.round(stacked.pvoffset, 1)); } const legend = svg => { const keys = stacked.keys.slice().reverse(); const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "end") .selectAll("g") .data(keys) .join("g") .attr("transform", (d, i) => `translate(0,${i * 21})`); const g2 = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "end") .selectAll(".pv_line_legend") .data([0]) .join("g") .attr("class", "pv_line_legend") .attr("transform", (d, i) => `translate(0,${keys.length * 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); if (euiSwitch2.value === "stacked_energy") { g2.append("path") .attr("d", d => d3.line()([[-18, 9], [0, 9]])) .attr("stroke-width", 4) .attr("stroke-linecap", "butt") .attr("opacity", 0.8) .attr("stroke", "#d6d231"); g2.append("text") .attr("x", -28) .attr("y", 8) .attr("dy", "0.35em") .text(`PV Offset (${pvsize} kW)`); } } 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", x.bandwidth()/2) .attr("y", -16) .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) .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])) .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); if (euiSwitch2.value === "stacked_energy") { console.log(euiSwitch2.value); svg.append("g").call(pv_line); } svg.append("g").call(totals) return svg.node(); }3a:T4a2,color = { const lookup = { "Electricity":"#d6d231", "Natural Gas": "#e55725", "DHW":"#d52928", "Exterior Lights": "#808080", "Heating Energy":"#d52928", "Cooling Energy":"#1dbfcf", "Lights":"#d6d231", "Fans":"#bfbfbf", "Equipment":"#dddddd", "Ambulance Charging":"#dddddd", "Pumps":"#dddddd", "Other Gains":"#a17eb9", "Passive Solar Gains":"#a17eb9", "Lights Gains":"#a17eb9", "Internal Equipment Gains":"#a17eb9", "Occupant Gains":"#a17eb9", "Infiltration Losses":"#a17eb9", "Window Losses":"#a17eb9", "Internal Gains":"#a17eb9", "OA Economizer":"#a17eb9", "Walls":"#f7aa6e", "Roofs":"#f7aa6e", "Floor on Grade":"#f7aa6e", "Infiltration":"#f7aa6e", "Windows":"#f7aa6e", "OA Heating":"#f7aa6e", "Reheat":"#f7aa6e", "Equipment Gains":"#6aadd6", "OA Cooling":"#6aadd6", "Dehumidification":"#6aadd6", "Conduction":"#6aadd6", "Lighting":"#6aadd6", "Solar":"#6aadd6", "Occupants":"#6aadd6", "Cooling Load":"#1f77b4", "Cooling System":"#1f77b4", "Heating Load":"#e55725", "Heating System":"#e55725", }; return name => lookup[name]; }3b: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; }3c: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; }3d:T40b,html``3e:[{"id":"f7838f332c2ef8f8eed518dacab30a203b4b3e87bed70b1ebe3422c0454d637f2d03e6c442bdcff68e56bc578a230609ea6ad71c5ae20a28f7764868b9ae624c","href":"https://static.observableusercontent.com/files/f7838f332c2ef8f8eed518dacab30a203b4b3e87bed70b1ebe3422c0454d637f2d03e6c442bdcff68e56bc578a230609ea6ad71c5ae20a28f7764868b9ae624c","name":"parametric_data_2.csv","type":"text/csv","lastModified":1759768108191.083,"size":2698},{"id":"6f28deb5ffe470204cf94fa2eacc15158975cd98286bfef1b48ec91994453449946341dbbfadd5d5fdc06ef795f3cc16ee62617189dacca9e48794bc2ad4e9b3","href":"https://static.observableusercontent.com/files/6f28deb5ffe470204cf94fa2eacc15158975cd98286bfef1b48ec91994453449946341dbbfadd5d5fdc06ef795f3cc16ee62617189dacca9e48794bc2ad4e9b3","name":"sankey_data.csv","type":"text/csv","lastModified":1759768108192.158,"size":1232},{"id":"ef6dfaaffd3857e929f545c7f3ffa4c0692e8096522cce7d72ee1140a2214994a1ca77503ed037e9f911a779fd3bb77b5fe971865372d4a6d5bcaef118ece1bb","href":"https://static.observableusercontent.com/files/ef6dfaaffd3857e929f545c7f3ffa4c0692e8096522cce7d72ee1140a2214994a1ca77503ed037e9f911a779fd3bb77b5fe971865372d4a6d5bcaef118ece1bb","name":"stacked_data.csv","type":"text/csv","lastModified":1759768108855.918,"size":563},{"id":"c4ba2a64b8f35cd89628b984f871dfd99f2b12b4db78010be96631e74e2479d038fbf8a943dcd79cd48e01ceeee35399c36eef9b6ea3a4bf163e8a1b31bff711","href":"https://static.observableusercontent.com/files/c4ba2a64b8f35cd89628b984f871dfd99f2b12b4db78010be96631e74e2479d038fbf8a943dcd79cd48e01ceeee35399c36eef9b6ea3a4bf163e8a1b31bff711","name":"renewables_data.csv","type":"text/csv","lastModified":1759768112846.922,"size":190931},{"id":"1ca13e95800ef8b65c6dcd17b896d528bc400890f1444ac222aa51be4a9e866b494b9bb79a334928b451cc05dbf8fdd91c3e1ea918e888a5eca17ac840167bef","href":"https://static.observableusercontent.com/files/1ca13e95800ef8b65c6dcd17b896d528bc400890f1444ac222aa51be4a9e866b494b9bb79a334928b451cc05dbf8fdd91c3e1ea918e888a5eca17ac840167bef","name":"interpolated_data3.csv","type":"text/csv","lastModified":1759768113524.689,"size":228433},{"id":"e80002ff3bd384311b90e2372bb96702c94a2f18805283ea5e8315f9cd302bfe86a327a37c64c8ccd18c533b962c0049cc97c501e3f959079da5e0946d111593","href":"https://static.observableusercontent.com/files/e80002ff3bd384311b90e2372bb96702c94a2f18805283ea5e8315f9cd302bfe86a327a37c64c8ccd18c533b962c0049cc97c501e3f959079da5e0946d111593","name":"interpolated_data.csv","type":"text/csv","lastModified":1759768123124.13,"size":971074},{"id":"273819197ae5f3a8b7aaad0e1e31a99803c37efc80ca9acb4c209c1f07972559183d29070af45e58442cf81c33b7b2aaf4405d17b5f1b307846a2ee64d907b4c","href":"https://static.observableusercontent.com/files/273819197ae5f3a8b7aaad0e1e31a99803c37efc80ca9acb4c209c1f07972559183d29070af45e58442cf81c33b7b2aaf4405d17b5f1b307846a2ee64d907b4c","name":"interpolated_data2.csv","type":"text/csv","lastModified":1759768149478.943,"size":3596242},{"id":"d0398e83247e8e7a00414bbdafbbd845618687d4e15471bc5720d6d823de1be71384ef7bf8a6aa0137051053d2edad4d5ed1f2b7ff2aef26ffc1b0b9be9cb36f","href":"https://static.observableusercontent.com/files/d0398e83247e8e7a00414bbdafbbd845618687d4e15471bc5720d6d823de1be71384ef7bf8a6aa0137051053d2edad4d5ed1f2b7ff2aef26ffc1b0b9be9cb36f","name":"model.jpg","type":"image/jpeg","lastModified":1759768291905.554,"size":69192}] 2f:{"title":"Toronto EMS Facility","cells":[{"id":0,"value":"md`# Toronto EMS Facility`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2845,"value":"md`\n

\n### Parallel Coordinates Update\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2826,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`\n

\n### SD Energy Analysis\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2834,"value":"md`\nIntroba developed a whole building energy model for the proposed EMS Facility in Toronto. This study is designed to help characterize the baseline design energy use and to study the sensitivity of different envelope component characteristics on building energy use. In addition, this study will evaluate HVAC systems alternates to assess their impact on building energy performance. Figure 1 presents a graphic representation of the modeled building.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2888,"value":"model = {\n const img = await FileAttachment(\"model.jpg\").image();\n img.style.width = \"720px\";\n return img;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1654,"value":"viewof figure1 = html`Figure 1:Representative energy model.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2036,"value":"viewof figure2 = html`Figure2: Building energy use characterization showing load components and energy end-uses for the baseline design.

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2103,"value":"viewof euiSwitch = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$35","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([\"Current Design\", \"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 === \"Current Design\" ? 3: 10)\n .attr(\"stroke\", d => d === \"Current Design\" ? \"#1f77b4\": \"none\")\n .style(\"fill\", d => d === \"Current Design\" ? \"#1f77b4\": \"#b4d6e8\" )\n .style(\"opacity\", d => d === \"Current Design\" ? 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 3: Sensitivity of individual building performance parameters on building EUI.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2032,"value":"// md`\n//
\n// ### Shading Analysis\n// To understand the impact of incident solar radiation and to assist the design of horizontal shades, facade studies will be performed.

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2023,"value":"// md` $\"Model$

`","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 EUI, Figure 4 below presents a parallel coordinates plot where each of the first seven vertical axes represents a performance parameter and its evaluated properties, and the last axis shows the EUI 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 EUI. 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.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$36","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 4: Effect of different combinations of parameter properties on building energy use intensity. Move or expand the selection box for each attribute.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2695,"value":"stacked_data = (await FileAttachment(\"stacked_data.csv\").csv({typed:true}));","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2689,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2687,"value":"viewof pvsize = slider({\n min: 0, \n max: 1800, \n step: 50, \n format: \".0f\",\n description: \"Size of PV system in kW\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2519,"value":"viewof euiSwitch2 = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2784,"value":"euiSwitch2.value","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"viewof figure5 = html`
Figure 5: Comparison of energy use intensities by end-use and TEDI for different studied scenarios.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"pvColor = d3.scaleOrdinal()\n .range([\"#1776b6\", \"#6fccd8\", \"#d7ddda\"])\n .domain(projectKeys)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1910,"value":"pvColorUpdate = d3.scaleOrdinal()\n .range([\"#1776b6\", \"#6fccd8\"])\n .domain(projectKeysUpdate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"projectKeys = [\"gridToProject\", \"renewableToProject\", \"batteryToProject\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1817,"value":"projectKeysUpdate = [\"gridToProject\", \"renewableToProject\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1740,"value":"pvDataUpdate = {\n let data = await FileAttachment(\"renewables_data.csv\").csv({typed:true});\n\n const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]\n const times = [];\n \n const timeParse = (m, d, h) => {\n return d3.timeParse(\"%m %d %H\")(`${m.toString().padStart(2, \"0\")} ${d.toString().padStart(2, \"0\")} ${h.toString().padStart(2, \"0\")}`)\n }\n \n for (const m in _.range(12)) {\n for (const d in _.range(months[m])) {\n for (const h in _.range(24)) {\n times.push({month: +m + 1, day: +d + 1, hour: +h, date: timeParse(+m + 1, +d + 1, +h)});\n }\n }\n }\n \n return data.map((d, i, arr) => ({...d, ...times[i]}));\n\n } ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"renewables_data_update = {\n let renewables = (await FileAttachment(\"renewables_data.csv\").csv({typed:true})); \n \n // const columns = renewables.columns;\n // const data = renewables;\n // data.columns = columns;\n\n return renewables;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":2818,"value":"sankey(sankey_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"sankey_data = {\n let sankey_data = (await FileAttachment(\"sankey_data.csv\").csv({typed:true})).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":495,"value":"stackedColor = {\n const lookup = {\n \"PV Budget\":\"#708238\",\n \"Lights\":\"#d6d231\",\n \"Plug Loads\":\"#dddddd\",\n \"Heating\":\"#d52928\",\n \"DHW\":\"#e55725\",\n \"Cooling\":\"#1dbfcf\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"Proposed System\":\"#EEEEEE\",\n \"Ambulance Charging\": \"#808080\",\n \"TEDI\":\"#d52928\",\n \"GHGI\":\"#9CBD53\",\n \"PV Offset\":\"#9CBD53\",\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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":66,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await FileAttachment(\"parametric_data_2.csv\").csv({typed:true})); \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({typed:true})); \n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: eui(d.TEDI),CEDI: eui(d.CEDI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2849,"value":"parametric_data2 = {\n let parametrics = (await FileAttachment(\"interpolated_data2.csv\").csv({typed:true})); \n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: eui(d.TEDI),CEDI: eui(d.CEDI), EUI: eui(d.EUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":545,"value":"d3 = require('d3@5.9.2','d3-sankey@0.12.1');","pinned":true,"hidden":false,"mode":"ojs"},{"id":2086,"value":"d3format = d3.format","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"import {group, groupSum, groupCount} from \"@mbostock/group\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}