31:T2113,sensitivies = { //general setup const config = { width: 960, cell: {height: 250, padding:40}, margin: {top: 60, right:15, bottom: 30, left: 35}, cols: 3, format: { "Window U": { newName: "Window U", convert: d => 1/d, ticks: d => d3.format(".2f")(1/d)}, "WWR": { newName: "Window-Wall Ratio", ticks: d3.format(",.0%")}, "Infiltration": { newName: "Infiltration cfm/ft²"}, "Skylight U": { convert: d => 1/d, ticks: d => d3.format(".2f")(1/d)}}, units: unitSelection.unit, 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(); }32:T1ff2,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: [250, 325]}, "Window U": { ticks: d3.format(".2f"), selection: [100, 175], numTicks: [0.18, 0.26, 0.34, 0.42]}, "Window SHGC": { ticks: d3.format(".2f"), numTicks: 4, selection: [100, 175]}, "WWR": { ticks: d3.format(".2f"), numTicks: 4, selection: [225, 300]}, "Roof R": { ticks: d3.format(".0f"), numTicks: 4, selection: [250, 325]}, "Infiltration": { newName: "Infiltration", ticks: d3.format(".2f"), numTicks: 4, selection: [0, 75]}, "HVAC System": { newName: "DHW System", numTicks: 4, ticks: d => formatDHW(d), selection: [250, 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", 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; ctx.strokeStyle = "#ddeaf2"; 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; }33:T403,md`

#### Domestic Hot Water Fuel Performance Introba has conducted a study to evaluate the performance of different DHW system configurations from an operational cost perspective. The system alternates tested include a gas-based domestic water heater, an electric water heater, and an air-source heat pump. For an average suite size of ${formatAREA_SI_IP(65)}, the average monthly operational cost for each system alternate has been depicted in the figure below. Note that this analysis assumes a time-of-use utility rate structure for electricity defined as follows: * On-peak: Weekdays from 7AM to 11AM and 5PM to 7PM - $0.208 /kWh * Mid-peak: Weekdays from 11AM to 5PM - $0.144 /kWh * Off-peak: Weekdays from 7PM to 7AM and all day weekends and holidays - $0.101 /kWh The price of natural gas is assumed to be $0.02 /kWh and a fuel charge rate of $0.0587 /m³ reflective of the carbon pollution price as per fuel charge rate definitions published by the Canadian Department of Finance.

`34:Td2c,stackedBar = { const config = { height: 450, width: 750, margin: {top: 20, right:150, bottom: 30, left: 50, legend: 0}, units: unitSelection.unit, 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(1)]) .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(); }35:T4ad,html``36:T54e,stacked_data = { let data = (await FileAttachment("stacked_data.csv").csv({ typed: true })); // const keys = Object.keys(data[0]).filter(d => d != "Case").filter(d => d != "TEDI").filter(d => d != "GHG").filter(d => d != "Cost per unit").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 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 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]), 1)); stacked1.label = "Energy Cost per suite"; stacked1.unit = "$/month" return stacked1; 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 = "Energy cost"; stacked4.unit = (unitSelection.unit === "IP" ? "$/ft²/yr": "$/m²/yr") return stacked4; }37: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; }38: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; }39:[{"id":"49bfcf2cd58df4338ef80d65a694c6fc1706d701e789aa013197918b7f6c142571279103e5c6ea3d1beeed070c3c479597ee69569b6e9bf46bf26ffea83cbfa1","href":"https://static.observableusercontent.com/files/49bfcf2cd58df4338ef80d65a694c6fc1706d701e789aa013197918b7f6c142571279103e5c6ea3d1beeed070c3c479597ee69569b6e9bf46bf26ffea83cbfa1","name":"summary_data.csv","type":"text/csv","lastModified":1767393970932.638,"size":396},{"id":"947261100c7f84f8a374ea196515e0aee5d586c7ba67d6a33b2423c0e77380cab84de3ebdd7732723e81fe285c8cd462ab638556fe6b4274f35a09f3506d566a","href":"https://static.observableusercontent.com/files/947261100c7f84f8a374ea196515e0aee5d586c7ba67d6a33b2423c0e77380cab84de3ebdd7732723e81fe285c8cd462ab638556fe6b4274f35a09f3506d566a","name":"interpolated_data.csv","type":"text/csv","lastModified":1767393971473.222,"size":1215567},{"id":"a1ad8eaf0b954dc29a44ea70bb6c39db4537a1ef3c32a7a82d88b184913e66a3863fbf87bbb285cbd8087c967331e149073e2714f8fa88e4acf46803820ca64d","href":"https://static.observableusercontent.com/files/a1ad8eaf0b954dc29a44ea70bb6c39db4537a1ef3c32a7a82d88b184913e66a3863fbf87bbb285cbd8087c967331e149073e2714f8fa88e4acf46803820ca64d","name":"sankey_data.csv","type":"text/csv","lastModified":1767393970929.146,"size":957},{"id":"e8fc8e6f0b841dfc41ea88f1d2500c4eaa3e35fd03a472affe6206673f79d2858e5b92d6ae0d9027d8ee8715e51b6bfb24b1c2ea0c15b3c6d2eed86a5390e409","href":"https://static.observableusercontent.com/files/e8fc8e6f0b841dfc41ea88f1d2500c4eaa3e35fd03a472affe6206673f79d2858e5b92d6ae0d9027d8ee8715e51b6bfb24b1c2ea0c15b3c6d2eed86a5390e409","name":"parametric_data.csv","type":"text/csv","lastModified":1767393970928.124,"size":1702},{"id":"fb2ca940c3220716ce2716c6f6fdebf97b9756a9053d4bbc26a56acdb9c9fb9b821e732b2700a16e18f1f78f29bce7c7e2286d07e8ae1aaa5f515189d24dfc3a","href":"https://static.observableusercontent.com/files/fb2ca940c3220716ce2716c6f6fdebf97b9756a9053d4bbc26a56acdb9c9fb9b821e732b2700a16e18f1f78f29bce7c7e2286d07e8ae1aaa5f515189d24dfc3a","name":"stacked_data.csv","type":"text/csv","lastModified":1767393970960.218,"size":61}] 2f:{"title":"Queen & Coxwell - TCHC Building","cells":[{"id":0,"value":"md`# Queen & Coxwell - TCHC Building`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof date = html`January 15, 2019 - Design Assist Energy Analysis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`

\n### Introduction\nIntroba has developed a whole building energy model for the TCHC building in Toronto, ON. This study is designed to help characterize the proposed design energy use and to study the sensitivity of different envelope component characteristics on building energy use and understand the implications of different DHW system alternates against the current basis of design. \n

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

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

\n### Envelope Sensitivity\nIn 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 EUI and TEDI. The line represents the overall trend for each parameter, the baseline values are marked by dark blue dots and the current proposed values by light blue circles. \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"viewof euiSwitch = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"sensLegend = {\n \n const svg = d3.select(DOM.svg(960, 50))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\"Baseline\", \"BOD\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"circle\")\n .attr(\"r\", d => d === \"Baseline\" ? 3: 10)\n .attr(\"stroke\", d => d === \"Baseline\" ? \"#1f77b4\": \"none\")\n .style(\"fill\", d => d === \"Baseline\" ? \"#1f77b4\": \"#b4d6e8\" )\n .style(\"opacity\", d => d === \"Baseline\" ? 1: .6 );;\n\n g.append(\"text\")\n .attr(\"x\", 30)\n .attr(\"y\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n \n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"viewof figure1 = html`Figure 2: Sensitivity of individual building performance parameters on building EUI and TEDI.

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

\n### Parametric Analysis\nTo 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.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1812,"value":"viewof figure3 = html`Figure 2: 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":1822,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1850,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1855,"value":"viewof figure4 = html`
Figure 4: Comparison of energy cost 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/queen-coxwell/assets/200203 Q+C TCHC EM Inputs.pdf)

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"ghgColor = d3.scaleOrdinal()\n .range([\"#1776b6\", \"#6fccd8\", \"#d7ddda\"])\n .domain(projectKeys)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"formatEUI_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${d} kWh/m²/yr`;\n }\n else {\n return `${_.round(d * 3.412 / 10.76, 0)} kBtu/ft²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"formatEUI_IP_SI = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} kBtu/ft²/yr`;\n }\n else {\n return `${_.round(d / 3.412 * 10.76, 2)} kWh/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"formatGHG_IP_SI = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} gCO₂e/ft²/yr`;\n }\n else {\n return `${_.round(d * 7.273362, 2)} gCO₂e/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"formatGHG_IP_SI_KG = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} kgCO₂e/ft²/yr`;\n }\n else {\n return `${_.round(d * 7.273362, 2)} kgCO₂e/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"formatAREA_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 0)} m²`;\n }\n else {\n return `${_.round(d * 10.76, 0)} ft²`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"sankey_data = {\n let sankey_data = (await FileAttachment(\"sankey_data.csv\").csv({ 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":1032,"value":"projectKeys = [\"gridToProject\", \"renewableToProject\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"$36","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.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":"color = {\n const lookup = {\n \"Electricity\":\"#d6d231\",\n \"DHW\":\"#d52928\",\n \"Heating Energy\":\"#d52928\",\n \"Cooling Energy\":\"#1dbfcf\",\n \"Lights\":\"#d6d231\",\n \"Fans\":\"#bfbfbf\",\n \"Equipment\":\"#dddddd\",\n \"Other Gains\":\"#a17eb9\",\n \"Passive Solar Gains\":\"#a17eb9\",\n \"Lighting Gains\":\"#a17eb9\",\n \"Occupant Gains\":\"#a17eb9\",\n \"Infiltration Losses\":\"#a17eb9\",\n \"OA Cooling\":\"#6aadd6\",\n \"Internal Gains\":\"#a17eb9\",\n \"Opaque Envelope\":\"#f7aa6e\",\n \"Walls\":\"#f7aa6e\",\n \"Roof\":\"#f7aa6e\",\n \"Below Grade\":\"#f7aa6e\",\n \"Infiltration\":\"#f7aa6e\",\n \"Windows\":\"#f7aa6e\",\n \"OA Heating\":\"#f7aa6e\",\n \"Equipment Gains\":\"#6aadd6\",\n \"Lighting\":\"#6aadd6\",\n \"Solar\":\"#6aadd6\",\n \"Occupants\":\"#6aadd6\",\n \"Cooling Load\":\"#1f77b4\",\n \"Cooling System\":\"#1f77b4\",\n \"Heating Load\":\"#e55725\",\n \"Heating System\":\"#e55725\",\n \"Pumps\":\"#adadad\",\n \"Exterior Usage\": \"#808080\",\n \"Floor on Grade\":\"#f7aa6e\",\n \"Natural Gas\": \"#e55725\"\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await FileAttachment(\"parametric_data.csv\").csv({ 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":86,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"$38","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.15.1/dist/d3.min.js').catch(() => window[\"d3\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"d3format = require('d3-format@1.4.4/dist/d3-format.min.js').catch(() => window[\"d3\"])","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":"$W39","stdlib":"1","titling":"auto"}