31:T1285,characterization = { const config = { height: 520, width: 960, units: unitSelection.unit, label: `${unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr"}` }; const svg = d3.select(DOM.svg(config.width, config.height)); const graph = sankey(sankey_data); const nodeWidth = graph.nodes[0].x1 - graph.nodes[0].x0; const node = svg.selectAll("g") .data(graph.nodes) .enter().append("g") .attr('transform', d => `translate(${d.x0}, ${d.y0})`); node.append("rect") .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.name)) .attr("display", d => d.name === "Nothing" ? "none" : null) .attr("stroke", "#000") .append("title") .html(d => `${d.name}\n${eui(d.value)} ${config.label}`); node.append("text") .style("font", "10px sans-serif") .attr("x", d => d.x0 < config.width / 2 ? 6 + (d.x1 - d.x0) : - 6) .attr("y", d => (d.y1 - d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < config.width / 2 ? "start" : "end") .attr('font-size', 10) .html(d => d.name); node.append("text") .style("font", "12px sans-serif") .attr("x", d => d.x0 < config.width / 2 ? 6 + (d.x1 - d.x0) : - 6) .attr("y", d => (d.y1 - d.y0) / 2) .attr("dy", d => { // switch(d.name) { // case "Heating Load": // return "-1.25em"; // default: // return "1.85em"; // } return "1.8em"; }) .attr("text-anchor", d => d.x0 < config.width / 2 ? "start" : "end") .style("font-weight", "bold") .html(d => { switch(d.name) { case "Natural Gas": return `EUI: ${_.round(eui(d.value), 1)} ${config.label}`; case "Electricity": return `EUI: ${_.round(eui(d.value), 1)} ${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:T2318,sensitivies2 = { //general setup const config = { width: 960, cell: {height: 250, padding:40}, margin: {top: 60, right:15, bottom: 30, left: 35}, cols: 3, format: { "RESI Window U": { newName: "Residential Window U"}, //convert: d => 1/d, //ticks: d => d3.format(".2f")(1/d)}, "EDU Window U": { newName: "Podium Window U"}, //convert: d => 1/d, //ticks: d => d3.format(".2f")(1/d)}, "Edu WWR": { newName: "Podium Window-Wall Ratio", ticks: d3.format(",.0%")}, "Resi WWR": { newName: "Residential Window-Wall Ratio", ticks: d3.format(",.0%")}, "EDU Wall R": { newName: "Podium Wall R-value"}, "RESI Wall R": { newName: "Residential Wall R-value"}, "Roof R": { newName: "Roof R-value"}, "Infiltration": { newName: "Infiltration cfm/ft²"}, "Skylight U": { convert: d => 1/d, ticks: d => d3.format(".2f")(1/d)}}, units: unitSelection.unit, y: euiSwitch3.y } const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("display", "none") .style("position", "absolute") //.style("width", "80px") //.style("height", "30px") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "bold") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "#ffffff") .style("opacity", 0.9) .style("color", "#333333") .style("pointer-events", "none"); //handles conversion for each variable in config.format const data = sensitivity_data2.map(d => { let dd = d.data; for (const key in config.format) { if ("convert" in config.format[key]) { dd = dd.map(p => ({...p, [key]: config.format[key].convert(p[key])})); } } return {variable: d.variable, data: dd}; }); //find the width of cells by dividing the total width by the number of cols config.cell.width = _.round( (config.width - config.margin.left - config.margin.right - config.cell.padding * (config.cols-1)) / config.cols ); //csize the svg based on the number of rows const svg = d3.select(DOM.svg(config.width, (config.cell.height + config.margin.bottom + config.cell.padding) * _.ceil(data.length / 3) + config.margin.top - config.margin.bottom )); //all the y values are the same - could use a map here to get different scales for each small multiple const y = d3.scaleLinear() .domain(d3.extent(data.map(d => d.data.map(p => eui(p[config.y]))).flat())) .range([config.cell.height, 0]).nice(); //create a map for all the x scales const x = new Map( Array.from( data.map(d => d.variable), key => [ key, d3.scaleLinear(d3.extent(data.filter(d => d.variable === key)[0].data.map(d => d[key])), 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" ? `${config.y} kBTU/ft²/yr`: `${config.y} kWh/m²/yr`); } //general pattern for generating the interpolation line const line = d3.line() .x(dd => x.get(d.variable)(dd[d.variable])) .y(dd => y(eui(dd[config.y]))) .curve(d3.curveCardinal.tension(0)); //horizontal grid lines d3.select(this).selectAll(".grid .horizontal") .data(_.range(8).slice(1).map(d => d * config.cell.height / 8)) .join("line") .attr("class", "grid") .attr("x1", (i % config.cols != 0) ? -config.cell.padding : 0) .attr("y1", d => d) .attr("x2", config.cell.width) .attr("y2", d => d); //vertical grid lines d3.select(this).selectAll(".grid .vertical") .data(_.range(8).slice(1).map(d => d * config.cell.width / 8)) .join("line") .attr("class", "grid") .attr("x1", d => d) .attr("y1", 0) .attr("x2", d => d) .attr("y2", config.cell.height); d3.select(this).append("g").call(xAxis); d3.select(this).append("g").call(yAxis); d3.select(this).append("rect") .attr("class", "frame") .attr("x", 0) .attr("y", 0) .attr("width", config.cell.width) .attr("height", config.cell.height); //add the variable labels d3.select(this).append("text") .attr("x", 0) .attr("y", -15) .attr("text-anchor", "start") .attr("font-size", 12) .style("font-family", "Open Sans") .html(name); d3.select(this).selectAll(".recommended") .data(d.data.filter(dd => dd.Recommended === "yes")) .join("circle") .attr("class", "recommended") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd[config.y])); }) .attr("r",10) .attr("fill", "#b4d6e8") .attr("opacity", 0.8); d3.select(this).append("path") .datum(d.data) .attr("class", "interpolation") .attr("fill", "none") .attr("stroke", "#1f77b4") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); d3.select(this).selectAll("points") .data(d.data) .join("circle") .attr("class", "points") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd[config.y])); }) .attr("r",3) .attr("display", dd => { if (d.variable === "WWR" && dd[d.variable] === 0.35) { return "none"; } else if (d.variable === "Window U" && dd[d.variable] === 1/0.35) { return "none"; } else { return null; } }) .attr("stroke", "#1f77b4") .style("fill", dd => dd.Baseline === "yes" ? "#1f77b4": "#b4d6e8" ); d3.select(this).selectAll("overlay") .data(d.data) .join("circle") .attr("class", "overlay") .attr("r",18) .attr("stroke", "none") .style("fill", "#fff") .style("opacity", 0) .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd[config.y])); }) .on("mouseover", dd => { tooltip.style("display", null); let data = dd[d.variable]; if (d.variable in config.format) { if ("ticks" in config.format[d.variable]){ data = config.format[d.variable].ticks(data); } } tooltip.html(`${data} | ${config.y} ${_.round(eui(dd[config.y]))} `) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px");; }) .on("mousemove", dd => { tooltip .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", d => { tooltip.style("display", "none"); }); }); return svg.node(); }33:T2171,parcoords2 = { const formatDHW = d => { switch(d) { case 0: return "Elec. Boiler"; break; case 1: return "Gas Boiler"; break; case 2: return "Air Source"; break; default: return "GHX"; } } const config = { height: 500, width: 960, margin: {top: 60, right: 10, bottom: 10, left: 40}, format: { "Wall R": { ticks: d3.format(".0f"), numTicks: 4, selection: [335, 435]}, "Resi U": { ticks: d3.format(".2f"), selection: [335, 435], numTicks: [0.16, 0.20, 0.24, 0.28]}, "Edu U": { ticks: d3.format(".2f"), selection: [335, 435], numTicks: [0.16, 0.20, 0.24, 0.28]}, "Window SHGC": { ticks: d3.format(".2f"), numTicks: 4, selection: [225, 325]}, // "WWR": { // ticks: d3.format(".2f"), // numTicks: 4, // selection: [225, 300]}, "Roof R ": { ticks: d3.format(".0f"), numTicks: 4, selection: [335, 435]}, // "Infiltration": { // newName: "Infiltration", // ticks: d3.format(".2f"), // numTicks: 4, // selection: [0, 75]}, "EDU WWR": { newName: "Edu WWR", numTicks: 4, ticks: d3.format(".2f"), selection: [80, 180]}, "RESI WWR": { newName: "Resi WWR", numTicks: [0.13, 0.18, 0.23, 0.28], ticks: d3.format(".2f"), selection: [225, 325]}, "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", numTicks: [25, 30, 32, 35, 40, 45], ticks: d3.format(".1f")}, "GHGI": { newName: "GHGI kg/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_update.columns.filter(d => d != "dataset"); const data = parametric_data_update.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) { const axis = d3.axisLeft(); if (Object.keys(config.format).filter(key => "numTicks" in config.format[key]).indexOf(d) >= 0) { if (config.format[d].numTicks.length) { axis.tickValues(config.format[d].numTicks); } else { 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; #ddeaf2 ctx.strokeStyle = "#a5aab5"; ctx.lineWidth = 1.0; } 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; }34:T543,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 the building Energy Use Intensity (EUI) and Thermal Energy Demand Intensity (TEDI). The line represents the overall trend for each parameter, the baseline values are marked by dark blue dots and the recommended values by light blue circles. The overall energy use and TEDI benefit from low window U values and higher wall R values. A higher SHGC results in a lower thermal energy demand but higher cooling energy due to high solar gains in the summer. Therefore, an increase in the window SHGC results in a decrease in TEDI but an increase in the building EUI. It is possible to achieve a low TEDI and a reduced EUI by better solar control through appropriate shading elements across the facade. TEDI is not highly sensitive to the window-wall ratio because the windows already have a very low thermal conductance. Window-wall ratio has a higher impact on building EUI due to increased cooling energy resulting from higher heat gain in the summer.

`35:T2218,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)}, "Window U": { newName: "Window U", convert: d => 1/d, ticks: d => d3.format(".2f")(1/d)}, "Edu WWR": { newName: "Academic Window-Wall Ratio", ticks: d3.format(",.0%")}, "Resi WWR": { newName: "Residential 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, y: euiSwitch.y } const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("display", "none") .style("position", "absolute") //.style("width", "80px") //.style("height", "30px") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "bold") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "#ffffff") .style("opacity", 0.9) .style("color", "#333333") .style("pointer-events", "none"); //handles conversion for each variable in config.format const data = sensitivity_data.map(d => { let dd = d.data; for (const key in config.format) { if ("convert" in config.format[key]) { dd = dd.map(p => ({...p, [key]: config.format[key].convert(p[key])})); } } return {variable: d.variable, data: dd}; }); //find the width of cells by dividing the total width by the number of cols config.cell.width = _.round( (config.width - config.margin.left - config.margin.right - config.cell.padding * (config.cols-1)) / config.cols ); //csize the svg based on the number of rows const svg = d3.select(DOM.svg(config.width, (config.cell.height + config.margin.bottom + config.cell.padding) * _.ceil(data.length / 3) + config.margin.top - config.margin.bottom )); //all the y values are the same - could use a map here to get different scales for each small multiple const y = d3.scaleLinear() .domain(d3.extent(data.map(d => d.data.map(p => eui(p[config.y]))).flat())) .range([config.cell.height, 0]).nice(); //create a map for all the x scales const x = new Map( Array.from( data.map(d => d.variable), key => [ key, d3.scaleLinear(d3.extent(data.filter(d => d.variable === key)[0].data.map(d => d[key])), 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" ? `${config.y} kBTU/ft²/yr`: `${config.y} kWh/m²/yr`); } //general pattern for generating the interpolation line const line = d3.line() .x(dd => x.get(d.variable)(dd[d.variable])) .y(dd => y(eui(dd[config.y]))) .curve(d3.curveCardinal.tension(0)); //horizontal grid lines d3.select(this).selectAll(".grid .horizontal") .data(_.range(8).slice(1).map(d => d * config.cell.height / 8)) .join("line") .attr("class", "grid") .attr("x1", (i % config.cols != 0) ? -config.cell.padding : 0) .attr("y1", d => d) .attr("x2", config.cell.width) .attr("y2", d => d); //vertical grid lines d3.select(this).selectAll(".grid .vertical") .data(_.range(8).slice(1).map(d => d * config.cell.width / 8)) .join("line") .attr("class", "grid") .attr("x1", d => d) .attr("y1", 0) .attr("x2", d => d) .attr("y2", config.cell.height); d3.select(this).append("g").call(xAxis); d3.select(this).append("g").call(yAxis); d3.select(this).append("rect") .attr("class", "frame") .attr("x", 0) .attr("y", 0) .attr("width", config.cell.width) .attr("height", config.cell.height); //add the variable labels d3.select(this).append("text") .attr("x", 0) .attr("y", -15) .attr("text-anchor", "start") .attr("font-size", 12) .style("font-family", "Open Sans") .html(name); d3.select(this).selectAll(".recommended") .data(d.data.filter(dd => dd.Recommended === "yes")) .join("circle") .attr("class", "recommended") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd[config.y])); }) .attr("r",10) .attr("fill", "#b4d6e8") .attr("opacity", 0.8); d3.select(this).append("path") .datum(d.data) .attr("class", "interpolation") .attr("fill", "none") .attr("stroke", "#1f77b4") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); d3.select(this).selectAll("points") .data(d.data) .join("circle") .attr("class", "points") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd[config.y])); }) .attr("r",3) .attr("display", dd => { if (d.variable === "WWR" && dd[d.variable] === 0.35) { return "none"; } else if (d.variable === "Window U" && dd[d.variable] === 1/0.35) { return "none"; } else { return null; } }) .attr("stroke", "#1f77b4") .style("fill", dd => dd.Baseline === "yes" ? "#1f77b4": "#b4d6e8" ); d3.select(this).selectAll("overlay") .data(d.data) .join("circle") .attr("class", "overlay") .attr("r",18) .attr("stroke", "none") .style("fill", "#fff") .style("opacity", 0) .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd[config.y])); }) .on("mouseover", dd => { tooltip.style("display", null); let data = dd[d.variable]; if (d.variable in config.format) { if ("ticks" in config.format[d.variable]){ data = config.format[d.variable].ticks(data); } } tooltip.html(`${data} | ${config.y} ${_.round(eui(dd[config.y]))} `) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px");; }) .on("mousemove", dd => { tooltip .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", d => { tooltip.style("display", "none"); }); }); return svg.node(); }36:T407,md`

### Parametric Analysis To better understand the effect of different performance characteristics on building EUI, TEDI, and GHGI, 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 3 axes show the performance metrics 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 metrics. 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. The interpolated data is to be used to study approximate impact of various parameters on EUI, TEDI and GHGI intentisty. All decisions related to design and cost should be taken using modeled data only.

`37:T211f,parcoords = { const formatDHW = d => { switch(d) { case 0: return "Elec. Boiler"; break; case 1: return "Gas Boiler"; break; case 2: return "Air Source"; break; default: return "GHX"; } } const config = { height: 500, width: 960, margin: {top: 60, right: 10, bottom: 10, left: 40}, format: { "Wall R": { ticks: d3.format(".0f"), numTicks: 4, selection: [225, 300]}, "Resi U": { ticks: d3.format(".2f"), selection: [360, 435], numTicks: [0.18, 0.24, 0.30, 0.36]}, "Edu U": { ticks: d3.format(".2f"), selection: [360, 435], numTicks: [0.18, 0.24, 0.30, 0.36]}, "Window SHGC": { ticks: d3.format(".2f"), numTicks: 4, selection: [250, 325]}, // "WWR": { // ticks: d3.format(".2f"), // numTicks: 4, // selection: [225, 300]}, "Roof R ": { ticks: d3.format(".0f"), numTicks: 4, selection: [75, 200]}, // "Infiltration": { // newName: "Infiltration", // ticks: d3.format(".2f"), // numTicks: 4, // selection: [0, 75]}, "EDU WWR": { newName: "Edu WWR", numTicks: 4, ticks: d3.format(".2f"), selection: [125, 200]}, "RESI WWR": { newName: "Resi WWR", numTicks: 4, ticks: d3.format(".2f"), selection: [360, 435]}, "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")}, "GHGI": { newName: "GHGI kg/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"); 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) { const axis = d3.axisLeft(); if (Object.keys(config.format).filter(key => "numTicks" in config.format[key]).indexOf(d) >= 0) { if (config.format[d].numTicks.length) { axis.tickValues(config.format[d].numTicks); } else { 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; #ddeaf2 ctx.strokeStyle = "#a5aab5"; ctx.lineWidth = 1.0; } 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; }38:T638,md`

#### Energy Performance Benchmarking The results from this analysis are summarized in Figure 4 below and show that the total energy use intensity (EUI) for all end-uses is projected to be ${formatEUI_SI_IP(62.3)} for the ASHRC case; and ${formatEUI_SI_IP(58.9)} for the GSHP case. Of particular interest for this study is the comparison of HVAC energy end-uses, which are highlighted in the chart to the right, and show an approximate 9% savings with the GSHP case. The ASHRC case shows an EUI associated with HVAC end-uses at ${formatEUI_SI_IP(32.5)} in addition to the ${formatEUI_SI_IP(29.8)} for other end-uses. The GSHP case, with higher heating and cooling efficiency, reduces the HVAC-EUI to ${formatEUI_SI_IP(29.1)}, achieving ${formatEUI_SI_IP(58.9)}. Both scenarios show a TEDI of ${formatEUI_SI_IP(24.2)}. This meets the ${formatEUI_SI_IP(32)} project target, owing to the proposed high-performance envelope, and high-efficiency HVAC system controls including demand-controlled ventilation and exhaust air energy recovery. The ASHRC scenario incorporates a mix of heat recovery chillers and electric heat pumps for heating and cooling. This translates to a GHGI of ${formatGHG_SI_IP_KG(2.62)}. The GSHP alternate reduces the energy use, lowering the GHGI substantially to ${formatGHG_SI_IP_KG(2.35)}. Accounting for the cost of utilities as well as the cost of carbon, the ASHRC scenario translates to an annual energy cost of $${formatCost_SI_IP(9.4)}. The energy and GHG savings with the GSHP alternate reduce this to $${formatCost_SI_IP(8.9)}.

`39:Td18,stackedBar = { const config = { height: 450, width: 960, margin: {top: 20, right:360, bottom: 30, left: 50, legend: 0}, units: unitSelection.unit, y: euiSwitch.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) + cost(3)]) .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", -15) .attr("dy", "0.35em") .text(d => _.round(d, 2)); } 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(); }3a:T4ad,html``3b:Ta91,stacked_data = { let data = (await FileAttachment("stacked_data.csv").csv({typed:true})); 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_Source"){ // const keys = Object.keys(data[0]).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 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 = "Source 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 converted = data.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]), 2)); stacked4.label = "Cost"; stacked4.unit = (unitSelection.unit === "IP" ? "$/ft²/yr": "$/m²/yr") return stacked4; } // | }3c:T443,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", "Wall Losses":"#a17eb9", "Window Losses":"#a17eb9", "OA Cooling":"#6aadd6", "Internal Equipment Gains":"#a17eb9", "Opaque Envelope":"#f7aa6e", "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":"14a677dfd60b7c722367e10315b6eac4f2a03aa6b4275ec12980a36ee8bb6e93be5e26ff8db0f46b78fd38af8bb4926c39b9532b821762fc0682bf948d231b86","href":"https://static.observableusercontent.com/files/14a677dfd60b7c722367e10315b6eac4f2a03aa6b4275ec12980a36ee8bb6e93be5e26ff8db0f46b78fd38af8bb4926c39b9532b821762fc0682bf948d231b86","name":"parametric_data.csv","type":"text/csv","lastModified":1759768677912.565,"size":1575},{"id":"49bfcf2cd58df4338ef80d65a694c6fc1706d701e789aa013197918b7f6c142571279103e5c6ea3d1beeed070c3c479597ee69569b6e9bf46bf26ffea83cbfa1","href":"https://static.observableusercontent.com/files/49bfcf2cd58df4338ef80d65a694c6fc1706d701e789aa013197918b7f6c142571279103e5c6ea3d1beeed070c3c479597ee69569b6e9bf46bf26ffea83cbfa1","name":"summary_data.csv","type":"text/csv","lastModified":1759768678014.806,"size":396},{"id":"1a9ef5bda5a74fdc83e033029d5e672094f6de31697dcb74a095102e99405f91c481c189ee8149246af7ab9e87c0211562cf19842d6439e5d0087d885356b413","href":"https://static.observableusercontent.com/files/1a9ef5bda5a74fdc83e033029d5e672094f6de31697dcb74a095102e99405f91c481c189ee8149246af7ab9e87c0211562cf19842d6439e5d0087d885356b413","name":"stacked_data.csv","type":"text/csv","lastModified":1759768678015.742,"size":387},{"id":"cbe4e0ce66363444e7cd94a4a363b0ebec1189bd0a0149633d9bd6d8c8e89c8e8d3ec73057827c90dd2f3065912f880e6685e7fc5437ff264a58348789b4f281","href":"https://static.observableusercontent.com/files/cbe4e0ce66363444e7cd94a4a363b0ebec1189bd0a0149633d9bd6d8c8e89c8e8d3ec73057827c90dd2f3065912f880e6685e7fc5437ff264a58348789b4f281","name":"sankey_data.csv","type":"text/csv","lastModified":1759768677907.683,"size":1368},{"id":"1d260735b54028b4ebfe445a8d9e7a491b799fab745bb7c4c85a161ccb6abea9c1cdffdbc6c510fe4ae0d1ca862dce8c8cda3520bc6845cfb4447b48672800d9","href":"https://static.observableusercontent.com/files/1d260735b54028b4ebfe445a8d9e7a491b799fab745bb7c4c85a161ccb6abea9c1cdffdbc6c510fe4ae0d1ca862dce8c8cda3520bc6845cfb4447b48672800d9","name":"interpolated_data.csv","type":"text/csv","lastModified":1759768686004.746,"size":1264236},{"id":"a6a224aea4d23ac34f1cb3defde8d38e19e1093dc612e21dee01756dc58eb400720976d5f870f98a6666ed8c2ae4fc95d16662fe212ace2117b813312f4bc0ba","href":"https://static.observableusercontent.com/files/a6a224aea4d23ac34f1cb3defde8d38e19e1093dc612e21dee01756dc58eb400720976d5f870f98a6666ed8c2ae4fc95d16662fe212ace2117b813312f4bc0ba","name":"parametric_data2.csv","type":"text/csv","lastModified":1759768733328.632,"size":1575},{"id":"044826a8358562244fb46725501796efc5117398d188d778d33c28958b5b9f9e0a950c8d1f3271460ec1015ed1814c64dfa42724297f5302a7cd2a3a0b256777","href":"https://static.observableusercontent.com/files/044826a8358562244fb46725501796efc5117398d188d778d33c28958b5b9f9e0a950c8d1f3271460ec1015ed1814c64dfa42724297f5302a7cd2a3a0b256777","name":"summary_data@1.csv","type":"text/csv","lastModified":1759768767341.819,"size":386},{"id":"d4f56eadc80144c02359b30b5df4b3a6f7d88edd0090ffa8d807aea595d3b0623d5918af319fe729f7cf2f3a672e4344789d456bba255609b8dc54a188aad8e5","href":"https://static.observableusercontent.com/files/d4f56eadc80144c02359b30b5df4b3a6f7d88edd0090ffa8d807aea595d3b0623d5918af319fe729f7cf2f3a672e4344789d456bba255609b8dc54a188aad8e5","name":"parametric_data3.csv","type":"text/csv","lastModified":1759768795779.882,"size":2641},{"id":"be94cbeb42901e680e1ce8f221c7b57a31ee021261c9a9d7f59021322efd6bdbc81dc7ac0c96c7945c47156ac3b43df1b4c64f8c720fcc8641ee43b31bbf9c72","href":"https://static.observableusercontent.com/files/be94cbeb42901e680e1ce8f221c7b57a31ee021261c9a9d7f59021322efd6bdbc81dc7ac0c96c7945c47156ac3b43df1b4c64f8c720fcc8641ee43b31bbf9c72","name":"interpolated_data_update.csv","type":"text/csv","lastModified":1759768846464.504,"size":1272563},{"id":"07b5ac39213e6e5287d2e24cdec9b9c8d770e5527e71fad3941a04d5432b4dbdf6ce2c57c03975fe5cf384191af82fc855293e3a1b8ae06219f9a96428d4281b","href":"https://static.observableusercontent.com/files/07b5ac39213e6e5287d2e24cdec9b9c8d770e5527e71fad3941a04d5432b4dbdf6ce2c57c03975fe5cf384191af82fc855293e3a1b8ae06219f9a96428d4281b","name":"HCH 4.jpg","type":"image/jpeg","lastModified":1759768880087.012,"size":234025}] 2f:{"title":"Humber College - Cultural Hub","cells":[{"id":0,"value":"md`# Humber College - Cultural Hub`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2161,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2159,"value":"md`

\n## Validation Stage Energy Model\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof date = html`September 22, 2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1963,"value":"md`\nIntroba built a whole building energy model for the validation phase as per the most recent drawings and conversations with the design team regarding updated geometry, thermal zoning, internal load definitions and usage profiles, and HVAC system configuration. The purpose of this model it to ensure that the project meets the project targets i.e. EUI, TEDI and GHGI, and to assist with further design exploration.

\n\nThe updated energy model shows an EUI of ${formatEUI_SI_IP(65.1)}, a TEDI of ${formatEUI_SI_IP(32.8)} and GHGI of ${formatEUI_SI_IP(2.6)}. \n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2056,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2070,"value":"viewof figure1 = html`Figure 1: Building energy use characterization showing load components and energy end-uses for the baseline design..

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

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2047,"value":"viewof euiSwitch3 = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2042,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2117,"value":"viewof figure2 = html`Figure 2: Sensitivity of individual building performance parameters on building EUI and TEDI.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2122,"value":"md`

\n## Updated Energy Model\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2149,"value":"viewof date2 = html`August 17, 2020 `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1969,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2131,"value":"md`

\n## Design-Assist Block Model\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2126,"value":"viewof date3 = html`February 3, 2020 `","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`\nIntroba has developed a whole building energy model for the Humber Cultural Hub building in Toronto, ON. This study is designed to to study the sensitivity of different envelope component characteristics on building energy use and help assess the relative performance of two different HVAC plant alternates currently under consideration for the project: Air source heat recovery chillers (ASHRC), and Water source heat pumps connected to geo-exchange well field (GSHP). Both options assume the same air side HVAC as noted in the energy model input assumptions at the end of this document. \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1792,"value":"model = {\n const img = await FileAttachment(\"HCH 4.jpg\").image();\n img.style.width = \"720px\";\n return img;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"viewof figure3 = html`Figure 3: Representation of the energy model.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"viewof euiSwitch = 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([\"Basis of Design\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"circle\")\n .attr(\"r\", d => d === \"Basis of Design\" ? 3: 10)\n .attr(\"stroke\", d => d === \"Basis of Design\" ? \"#1f77b4\": \"none\")\n .style(\"fill\", d => d === \"Basis of Design\" ? \"#1f77b4\": \"#b4d6e8\" )\n .style(\"opacity\", d => d === \"Basis of 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 figure4 = html`Figure 4: Sensitivity of individual building performance parameters on building EUI and TEDI.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1619,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1866,"value":"viewof figure5 = html`Figure 5: Effect of different combinations of parameter properties on building EUI, TEDI, and GHGI. Move or expand the selection box for each attribute.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1949,"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":1850,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1837,"value":"viewof euiSwitch2 = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1841,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1846,"value":"viewof figure6 = html`
Figure 6: Comparison of EUI, energy cost, and GHG emissions for different studied scenarios.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`\n

\nDetailed model input assumptions are documented [here.](https://www.elementa.nyc/projects/hch/assets/200203 HCH EM Inputs.pdf)

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$3a","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":1874,"value":"formatCost_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${d}/m²/yr`;\n }\n else {\n return `${_.round(d / 10.76, 0)}/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_SI_IP_KG = d => {\n if (unitSelection.unit === \"SI\") {\n return `${d} kgCO₂e/m²/yr`;\n }\n else {\n return `${_.round(d / 10.76, 2)} kgCO₂e/ft²/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({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":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":1032,"value":"projectKeys = [\"gridToProject\", \"renewableToProject\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1823,"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\": \"#dadada\"\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@1.csv\").csv({typed:true})); \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/10.76, 2) : _.round(d, 2);","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_data2.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":2044,"value":"sensitivity_data2 = {\n //add a random version number to avoid caching\n let data = (await FileAttachment(\"parametric_data3.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, EUI: eui(d.EUI), TEDI: eui(d.TEDI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1972,"value":"parametric_data_update = {\n let parametrics = (await FileAttachment(\"interpolated_data_update.csv\").csv({typed:true})); \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"}