31:T47c,md`
### Envelope Sensitivity A detailed parametric analysis has been conducted on the current design as discussed above, to understand the sensitivity of various envelope characteristics on building energy use. The following section present different charts where the horizontal axes show the incremental changes in the studied parameter, and the vertical axes show the impact of these changes on building Energy Use Intensity (EUI), Thermal Energy Demand Intensity (TEDI), Cooling Energy Demand Intensity (CEDI), Energy Demand Intensity (EDI). The line represents the overall trend for each parameter. Excluding passive cooling design cases are marked with blue dots, and cases with passive cooling design are marked with orange dots. Passive Cooling Design Conditions are considered as follows: • Expanded Summer and Shoulder Season Heating Setpoint • Natural Ventilation and Night Flush • 1ft² of Exposed Thermal Mass per ft² of Floor Area `32:T2a8c,sensitivies = { //general setup const config = { width: 960, cell: { height: 250, padding: 40 }, margin: { top: 60, right: 10, bottom: 30, left: 35 }, cols: 3, format: { "Window U": { newName: "Window U", convert: d => 1 / d, ticks: d => d3.format(".2f")(1 / d) }, "Window SHGC": { newName: "SHGC" }, "WWR": { newName: "WWR (all orientation)", ticks: d3.format(",.0%"), }, "Wall R": { newName: "Wall R", }, "Roof R": { newName: "Roof R", } }, units: unitSelection.unit, y: euiSwitch.y } const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("border-radius", "3px") .style("pointer-events", "none") .style("display", "none") .style("position", "absolute") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "regular") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "white") .style("box-shadow", "0 0 10px rgba(0,0,0,.25)") .style("color", "#333333") .style("line-height", "1.6") .style("pointer-events", "none"); const tipContent = (variable, p_value, EUI) => { let val = formatEUI_SI_IP(EUI); let new_p = p_value; if (variable === "Window U") { new_p = _.round(1/p_value, 2); } return `${variable}: ${new_p}
${config.y}: ${val}`; } // tooltip.html(tipContent(d.variable, NaturalVent.NaturalVent, data)) //initiate the dictionary of scales for the cross hairs const markers = {}; //handles conversion for each variable in config.format const data = sensitivity_data.map(d => { let dd = d.data; for (const key in config.format) { if ("convert" in config.format[key]) { dd = dd.map(p => ({ ...p, [key]: config.format[key].convert(p[key]) })); } } return { variable: d.variable, data: dd }; }); //find the width of cells by dividing the total width by the number of cols config.cell.width = _.round( (config.width - config.margin.left - config.margin.right - config.cell.padding * (config.cols - 1)) / config.cols ); //csize the svg based on the number of rows const svg = d3.select(DOM.svg(config.width, (config.cell.height + config.margin.bottom + config.cell.padding) * _.ceil(data.length / config.cols) + config.margin.top - config.margin.bottom )); console.log(data); //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 => eui2(p[config.y]))).flat())) .range([config.cell.height, 0]).nice(); //create a map for all the x scales const x = new Map( Array.from( data.map(d => d.variable), key => [ key, d3.scaleLinear(d3.extent(data.filter(d => d.variable === key)[0].data.map(d => d[key])), [0, config.cell.width]) ] ) ); //create a group for each chart const chart = svg.selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => { //position the group in its appropriate row and col const h = (i % config.cols) * (config.cell.width + config.cell.padding) + config.margin.left; const v = _.floor(i / config.cols) * (config.cell.height + config.margin.bottom + config.cell.padding) + config.margin.top; return `translate(${h},${v})` }); //run through each group chart.each(function(d, i) { //rename the variable if needed let name = d.variable; if (name in config.format) { if ("newName" in config.format[name]) { name = config.format[name].newName; } } //if there are format specifiers, use them, otherwise just use the default let xa = d3.axisBottom(x.get(d.variable)).ticks(6); if (d.variable in config.format) { if ("ticks" in config.format[d.variable]) { xa.tickFormat(config.format[d.variable].ticks); } } const xAxis = g => g .attr("transform", `translate(0,${config.cell.height})`) .call(xa) .call(g => g.select(".domain").remove()); const yAxis = g => { if (i % config.cols === 0) { g.call(d3.axisLeft(y).ticks(6)) .call(g => g.select(".domain").remove()); } } let y_label; if (config.units === "IP") { y_label = `${config.y} kBTU/ft²/yr`; } else { y_label = `${config.y} kWh/m²/yr`; } //put the y axis label in the top left corner of the first row/col. if (i % 3 === 0) { d3.select(this).append("g") .attr("transform", "translate(15, 20)") .append("text") .attr("font-size", 10) .attr("text-anchor", "start") .attr("opacity", 1) .html(y_label); } //general pattern for generating the interpolation line const line = d3.line() .x(dd => x.get(d.variable)(dd[d.variable])) .y(dd => y(eui2(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); let grouped_by_NaturalVent = group(d.data, dd => dd.NaturalVent); grouped_by_NaturalVent = Array.from(grouped_by_NaturalVent, dd => ({NaturalVent: dd[0], data: dd[1]})); let chart_group = this; // for (let idx = 0; idx < grouped_by_NaturalVent.length; idx++) { for (const NaturalVent of grouped_by_NaturalVent) { // const NaturalVent = grouped_by_NaturalVent[idx]; // const dark = sensitivity_colors[idx].dark; // const light = sensitivity_colors[idx].light; console.log(NaturalVent) const dark = sensitivity_colors[NaturalVent.NaturalVent].dark; const light = sensitivity_colors[NaturalVent.NaturalVent].light; d3.select(chart_group).selectAll(".recommended") .data(NaturalVent.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(ip_to(dd[config.y])); }) .attr("r", 10) .attr("fill", light) .attr("opacity", 0.8); d3.select(chart_group).append("path") .datum(NaturalVent.data) .attr("class", "interpolation") .attr("fill", "none") .attr("stroke", dark) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); d3.select(chart_group).selectAll("points") .data(NaturalVent.data) .join("circle") .attr("class", "points") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(ip_to(dd[config.y])); }) .attr("r", 3) .attr("display", dd => { if ((d.variable === "EPD" || d.variable === "LPD") && dd[d.variable] === 0.5) { return "none"; } else if (d.variable === "Glass SHGC" && dd[d.variable] === 0.3) { return "none"; } else { return null; } }) .attr("stroke", dark) // .style("fill", dd => dd.Baseline === "yes" ? dark : light); .style("fill", light); d3.select(chart_group).selectAll("overlay") .data(NaturalVent.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(ip_to(dd[config.y])); }) .on("mouseover", dd => { tooltip.style("display", null); let data = dd[d.variable]; // if (d.variable in config.format) { // if ("ticks" in config.format[d.variable]) { // data = config.format[d.variable].ticks(data); // } // } tooltip.html(tipContent(d.variable, data, dd[config.y])) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", d => { tooltip.style("display", "none"); }); } }); return svg.node(); }33:T2a41,parcoords = { // const lookup = { // DHW: { // "0": "Boiler Top-up", // "1": "ASHP Top-up", // "2": "SHARC + ASHP Top-up" // } // } // const lookup = { // HR: { // "0": "No", // "1": "Yes" // } // } const config = { height: 500, width: 1150, margin: {top: 60, right: 5, bottom: 10, left: 40}, format: { "WWR": { newName: "WWR", ticks: d3.format(".2f"), numTicks: [0.20, 0.38, 0.60, 0.80], reverse: true, anchor: "middle" // selection: [0, 435] }, "Wall R": { anchor: "middle", ticks: d3.format(".0f"), numTicks: [13, 17, 21, 25, 30], // reverse: true, // selection: [0, 435] }, "Roof R": { anchor: "middle", ticks: d3.format(".0f"), numTicks: [30, 40, 50, 60, 70], // reverse: true, // selection: [0, 435] }, "Window U": { anchor: "middle", ticks: d3.format(".2f"), numTicks: [0.15, 0.20, 0.30, 0.36, 0.40, 0.50], reverse: true, // selection: [0, 435] }, "Window SHGC": { anchor: "middle", ticks: d3.format(".2f"), numTicks: [0.20, 0.25, 0.30, 0.38], reverse: true, // numTicks: 4, // selection: [0, 435] }, // "Infiltration": { // // newName: "Infiltration (CFM/ft²)", // ticks: d3.format(".2f"), // numTicks: [0.07, 0.04, 0.01]}, "TEDI": { newName: `${unitSelection.unit === "IP" ? "TEDI kBTU/ft²/yr": "TEDI kWh/m²/yr"}`, anchor: "middle", ticks: d3.format(".1f"), numTicks: 10}, // selection: [340, 360]}, "EUI": { newName: `${unitSelection.unit === "IP" ? "EUI kBTU/ft²/yr": "EUI kWh/m²/yr"}`, anchor: "middle", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "EDI": { newName: `${unitSelection.unit === "IP" ? "EDI kBTU/ft²/yr": "EDI kWh/m²/yr"}`, anchor: "middle", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "CEDI": { newName: `${unitSelection.unit === "IP" ? "CEDI kBTU/ft²/yr": "CEDI kWh/m²/yr"}`, anchor: "middle", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "peak_cooling": { newName : `Pk.Cool ${unitSelection.unit === "IP" ? "W/ft²": "W/m²"}`, anchor: "middle", ticks: d3.format(".2f"), numTicks: 10, // selection: [0, 435] }, "peak_heating": { newName : `Pk.Heat ${unitSelection.unit === "IP" ? "W/ft²": "W/m²"}`, anchor: "end", ticks: d3.format(".2f"), numTicks: 10, // selection: [0, 435] }, }, 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") && (d != "Weather")).filter(d => d != "time_of_peak_cooling").filter(d => d != "time_of_peak_heating").filter(d => d != "NaturalVent"); let 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; }); data = data.filter(d => d.NaturalVent === NatVentSelection.nv); 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'; ctx.globalAlpha = 0.5; const g = c.selectAll(".dimension") .data(dimensions) .enter().append("g") .attr("class", "dimension") .classed("nonactive", false) .attr("transform", d => `translate(${x(d)})`); g.append("g") .attr("class", "paraxis") .each(function(d) { const axis = d3.axisLeft(); let ya = axis.scale(y.get(d)); if (Object.keys(config.format).filter(key => "numTicks" in config.format[key]).indexOf(d) >= 0) { if (config.format[d].numTicks.length) { ya.tickValues(config.format[d].numTicks) } else { ya.ticks(config.format[d].numTicks); } } else { ya.ticks(5); } 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", 10.5) .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 = "#1f77b4"; // ctx.lineWidth = 1; // } // else { // //context.globalAlpha = 1; // ctx.strokeStyle = "#1f77b4"; // ctx.lineWidth = 1.5; // } // if (d.NaturalVent === NatVentSelection.nv){console.log(NatVentSelection.nv); // } let line_color = parametric_colors["default"]; // switch(d.Weather) { // case "TMY": // line_color = parametric_colors["TMY"]; // ctx.strokeStyle = d.dataset === "interpolated" ? line_color.light: line_color.dark; // break; // case 2050: // line_color = parametric_colors["2050"]; // ctx.strokeStyle = d.dataset === "interpolated" ? line_color.light: line_color.dark; // break; // case 2080: // line_color = parametric_colors["2080"]; // ctx.strokeStyle = d.dataset === "interpolated" ? line_color.light: line_color.dark; // break; // default: // ctx.strokeStyle = "#000000"; // } // ctx.lineWidth = d.dataset === "interpolated" ? 1: 1.5; switch(d.Weather) { case "TMY": ctx.strokeStyle = parametric_colors["TMY"].dark; break; case 2050: ctx.strokeStyle = parametric_colors["2050"].dark; break; case 2080: ctx.strokeStyle = parametric_colors["2080"].dark; break; default: ctx.strokeStyle = "#000000"; } ctx.lineWidth = 1; 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:T4bb,color = { const lookup = { "Electricity":"#d6d231", "Natural Gas": "#e55725", "DHW":"#d52928", "Exterior Lights": "#808080", "Heating Energy":"#d52928", "Cooling Energy":"#1dbfcf", "Lights":"#d6d231", "Fans":"#bfbfbf", "Equipment":"#dddddd", "Ambulance Charging":"#dddddd", "Pumps":"#dddddd", "Other Gains":"#a17eb9", "Passive Solar Gains":"#a17eb9", "Lights Gains":"#a17eb9", "Internal Equipment Gains":"#a17eb9", "Occupant Gains":"#a17eb9", "Infiltration Losses":"#a17eb9", "Window Losses":"#a17eb9", "Conduction Losses":"#a17eb9", "Internal Gains":"#a17eb9", "Economizer":"#a17eb9", "Walls":"#f7aa6e", "Roofs":"#f7aa6e", "Floors":"#f7aa6e", "Infiltration":"#f7aa6e", "Windows":"#f7aa6e", "OA Heating":"#f7aa6e", "Reheat":"#f7aa6e", "Equipment Gains":"#6aadd6", "OA Cooling":"#6aadd6", "Dehumidification":"#6aadd6", "Conduction ":"#6aadd6", "Lighting":"#6aadd6", "Solar":"#6aadd6", "Occupants":"#6aadd6", "Cooling Load":"#1f77b4", "Cooling System":"#1f77b4", "Heating Load":"#e55725", "Heating System":"#e55725", }; return name => lookup[name]; }35:T5ff,renderQueue = function(func) { var _queue = [], // data to be rendered _rate = 1000, // number of calls per frame _invalidate = function() {}, // invalidate last render queue _clear = function() {}; // clearing function var rq = function(data) { if (data) rq.data(data); _invalidate(); _clear(); rq.render(); }; rq.render = function() { var valid = true; _invalidate = rq.invalidate = function() { valid = false; }; function doFrame() { if (!valid) return true; var chunk = _queue.splice(0,_rate); chunk.map(func); timer_frame(doFrame); } doFrame(); }; rq.data = function(data) { _invalidate(); _queue = data.slice(0); // creates a copy of the data return rq; }; rq.add = function(data) { _queue = _queue.concat(data); }; rq.rate = function(value) { if (!arguments.length) return _rate; _rate = value; return rq; }; rq.remaining = function() { return _queue.length; }; // clear the canvas rq.clear = function(func) { if (!arguments.length) { _clear(); return rq; } _clear = func; return rq; }; rq.invalidate = _invalidate; var timer_frame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { setTimeout(callback, 17); }; return rq; }36:T8cf,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

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

${title}

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

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }37:T462,html``38:T426,heating_cooling_data = { let data = await FileAttachment("base_and_microload@2.xlsx").xlsx(); let base = data.sheet("base", { headers: true }); let microload = data.sheet("microload", {headers: true}); function reshape(arr) { let keys = d3.keys(arr[0]); let bldgs = _.uniq(keys.map(d => d.split("_")[0])); let headers = _.uniq(keys.map(d => d.split("_")[1])); const reshaped = {} for (const row of arr) { let month = {}; for (const [key, value] of Object.entries(row)) { const [bldg, header] = key.split("_"); if (bldg in month) { month[bldg][header] = value; } else { month[bldg] = {[header]: value}; } } for (const [key, value] of Object.entries(month)) { if (key in reshaped) { reshaped[key].push(value); } else { reshaped[key] = [value] } } } return reshaped; } base = reshape(base); microload = reshape(microload); return {base: base, microload: microload} }39:T4c3,viewof zone = { let parent = document.createElement("div"); let svg = d3.select(DOM.svg(480, 312)); const cover = await FileAttachment("svg_background@1.svg").xml(); svg.node().appendChild(cover.documentElement.getElementById("root")); let style = document.createElement("style"); style.innerHTML = cover.getElementsByTagName("style")[0].innerHTML; document.head.appendChild(style); const elements = { "A3": true, "A1": true, "A2": true, "X1321": true, "B1": true, "B4": true, "B5": true, "B6": true, "XC": true } parent.value = elements; svg.selectAll(d3.keys(elements).map(d => `#${d}`).join(", ")) .attr("opacity", 0) .classed("clicked", true) .on("mouseover", function(d) { d3.select(this) .style("cursor", "pointer") }) .on("click", function(d) { if (!d3.select(this).classed("clicked")) { d3.select(this).classed("clicked", true); parent.value[d3.select(this).attr("id")] = true; } else { d3.select(this).classed("clicked", false); parent.value[d3.select(this).attr("id")] = false; } parent.dispatchEvent(new CustomEvent("input")); }); parent.appendChild(svg.node()); return parent; } 3a:T1485,stacked_chart = { const width = 960; const height = 400; const margin = {top: 10, right: 20, bottom: 60, left: 50}; const svg = d3.select(DOM.svg(width, height)); const t = svg.transition().duration(500); const initialize_data = heating_cooling_data.base; const initialize_bldgs = { "A3": true, "A1": true, "A2": true, "X1321": true, "B1": true, "B4": true, "B5": true, "B6": true, "XC": true } function array_sum(arr1, arr2) { // merge two arrays with same dimensions and properties based on common keys const output = arr1.map((d, i) => { const merged = {}; for (const [key, value] of Object.entries(d)) { merged[key] = value + arr2[i][key]; } return merged; }); return output; } function stack(data, bldgs) { // create basestack by adding all buildings const base_layer_keys = d3.keys(data[d3.keys(bldgs)[0]][0]); const base_obj = {} base_layer_keys.forEach(d => { base_obj[d] = 0 }); let merged = Array(12).fill(base_obj); for (const [bldg, status] of Object.entries(bldgs)) { if (status) { merged = array_sum(merged, data[bldg]); } } return d3.stack().keys(["simcooling", "cooling", "simheating", "heating"]).offset(d3.stackOffsetDiverging)(merged); } let stacked = stack(initialize_data, initialize_bldgs); const legend = (svg) => { const lookup = { "Cooling": "cooling", "Simultaneous Cooling": "simcooling", "Simultaneous Heating": "simheating", "Heating": "heating" } const g = svg .attr("font-family", "Open Sans") .attr("font-size", 12) .attr("text-anchor", "start") .selectAll("g") .data(d3.keys(lookup)) .join("g") .attr("transform", (d, i) => { let k = d3.keys(lookup); let ln = 0; if (i != 0) { ln = k.slice(0, i).reduce((acc, d) => acc + d.length, 0); } return `translate(${i * 40 + ln * 6},0)`; }) g.append("rect") .attr("x", 0) .attr("y", 5) .attr("width", 12) .attr("height", 12) .attr("fill", d => stacked_colors[lookup[d]]); g.append("text") .attr("x", 18) .attr("y", 11) .attr("dy", "0.35em") .text(d => d); } // const x = d3.scaleBand() // .domain(d3.range(0, 12)) // .range([0, width - margin.left - margin.right]).padding(0.2); const x = d3.scaleLinear() .domain([0, 11]) .range([0, width - margin.left - margin.right]); const convert_ints_to_months = d => d3.timeFormat("%b")(new Date().setMonth(d)); const xAxis = g => g .attr("transform", `translate(0,${height - margin.top - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(convert_ints_to_months).tickPadding(8)); const graph = svg.append("g") .join("g") .attr("transform", (d, i) => `translate(${margin.left}, ${margin.top})`); let ymin = d3.min(stacked.map(d => d3.min(d, dd => dd[0]))) * 1.1; let ymax = d3.max(stacked.map(d => d3.max(d, dd => dd[1]))) * 1.1; const y = d3.scaleLinear() .domain([ymin, ymax]) .range([height - margin.top - margin.bottom, 0]); const yAxis = g => g .call(d3.axisLeft(y).tickPadding(6).tickFormat(d3.format(".2s"))) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 8) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("MWh")) .call(g => g.selectAll("line").clone() .attr("x2", width - margin.right) .attr("stroke", "#F5F5F5")) .call(g => g.select(".domain").remove()); graph.append('g') .call(xAxis); graph.append('g') .call(yAxis); graph.append("g") .attr("transform", `translate(0, ${height - margin.top - margin.bottom + 30})`) .call(legend); const area = d3.area() .x((d, i) => x(i)) .y0(d => y(d[0])) .y1(d => y(d[1])) // const groups = graph.selectAll('g') // .data(stacked) // .join('g') // .style('fill', (d,i) => stacked_colors[d.key]); // groups.selectAll('rect') // .data(d => d) // .join('rect') // .attr('x', (d, i) => x(i)) // .attr('y', d => y(d[1])) // .attr('height', d => y(d[0]) - y(d[1])) // .attr('width', x.bandwidth()); const path = graph.selectAll(".stacked_area") .data(stacked) .join("path") .attr("class", "stacked_area") .attr("d", area) .attr("fill", d => stacked_colors[d.key]); function transition(data, bldgs) { stacked = stack(data, bldgs); // groups.selectAll("g") // .data(stacked) // .join("g") // .transition().duration(500); // groups.selectAll("rect") // .data(d => d) // .join("rect") // .transition().duration(500) // .attr('x', (d, i) => x(i)) // .attr('y', d => y(d[1])) // .attr('height', d => y(d[0]) - y(d[1])) // .attr('width', x.bandwidth()); path.data(stacked) .transition().duration(500) .attr("d", area); } function update(data, bldgs) { transition(data, bldgs); } return Object.assign(svg.node(), {update}); }3b:[{"id":"68e96d2beda01de4d1273b146708663d3b1796c0efa767ef5493045eb6317e1ab4f8fafd54ca7a6898612f48635170f813e6660b7f275b629423babef1d99d98","href":"https://static.observableusercontent.com/files/68e96d2beda01de4d1273b146708663d3b1796c0efa767ef5493045eb6317e1ab4f8fafd54ca7a6898612f48635170f813e6660b7f275b629423babef1d99d98","name":"Shot@2.PNG","type":"image/png","lastModified":1681421976017.742,"size":952851},{"id":"c611a99c3f121d5ace850f46529e8b157ca7e5b3e75f20f97609b8408a7f7259e3244f111661af18479a290aeeaa68312093389ec30e662cb06994d8afb0a156","href":"https://static.observableusercontent.com/files/c611a99c3f121d5ace850f46529e8b157ca7e5b3e75f20f97609b8408a7f7259e3244f111661af18479a290aeeaa68312093389ec30e662cb06994d8afb0a156","name":"sensitivity_coorstek.csv","type":"text/csv","lastModified":1681421976017.742,"size":6294},{"id":"cdb47e8e78d0739698356431d35732044288b72feeeeef7e30cc836663b0dcd0da6b826458a13ee268cd1f5aabd5ad909defb0eacca62618f1fc2c07ba3b940a","href":"https://static.observableusercontent.com/files/cdb47e8e78d0739698356431d35732044288b72feeeeef7e30cc836663b0dcd0da6b826458a13ee268cd1f5aabd5ad909defb0eacca62618f1fc2c07ba3b940a","name":"parametric_coorstek3@5.csv","type":"text/csv","lastModified":1681421976017.742,"size":1923963},{"id":"8359208377fcee6e29532dba76ef39f6653a4a2344c54807940d87dc13a54eab687ff659fa1d4e93246e8c7285e137cce7f13f765f7e62e10a676030faec20ba","href":"https://static.observableusercontent.com/files/8359208377fcee6e29532dba76ef39f6653a4a2344c54807940d87dc13a54eab687ff659fa1d4e93246e8c7285e137cce7f13f765f7e62e10a676030faec20ba","name":"svg_background@1.svg","type":"image/svg+xml","lastModified":1681427775165.721,"size":332811},{"id":"ef218c2306059596b7992758eb84de4cda0d0add868ba060bfcb306cc70d142822ba343531cf868eaff4a3758c902f70e9aa4e870e29fe0361496c19cbd39bbe","href":"https://static.observableusercontent.com/files/ef218c2306059596b7992758eb84de4cda0d0add868ba060bfcb306cc70d142822ba343531cf868eaff4a3758c902f70e9aa4e870e29fe0361496c19cbd39bbe","name":"base_and_microload@2.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1681569620932.068,"size":22298}] 2f:{"title":"CoorsTek 9th St. Redevelopment","cells":[{"id":0,"value":"md`# CoorsTek 9th St. Redevelopment\nJanuary 18, 2023\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2023,"value":"studiedParameterRange = FileAttachment(\"Shot@2.PNG\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2971,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3032,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2977,"value":"viewof euiSwitch = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3509,"value":"sensitivity_colors = ({\n \"Off\": {\"dark\": \"#7030A0\",\"light\": \"#7030A0\"}, \n \"On\": {\"dark\": \"#BCBE00\",\"light\": \"#BCBE00\"},\n \"default\": {\"dark\": \"#000000\",\"light\": \"#000000\"}\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":2967,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"sensLegend = {\n \n const svg = d3.select(DOM.svg(960, 70))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\n {NaturalVent: \"Off\", label: \"Passive Cooling Off\"}, \n {NaturalVent: \"On\", label: \"Passive Cooling On\"},\n ])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"circle\")\n .attr(\"r\", 3)\n .attr(\"stroke\", d => sensitivity_colors[d.NaturalVent].dark)\n .style(\"fill\", d => sensitivity_colors[d.NaturalVent].light)\n\n g.append(\"text\")\n .attr(\"x\", 20)\n .attr(\"y\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(d => d.label);\n \n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3547,"value":"viewof figure1 = html`Figure 1: Sensitivity of building performance parameters on building EUI.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3091,"value":"md`\n
\n### Parametric Analysis\nTo better understand the effect of different performance characteristics on building EUI, Figure 2 below presents a parallel coordinates plot where each of the first five vertical axes represents a performance parameter and its evaluated properties, and the last axis shows the EUI resulting from the selected combinations. Putting constraints on one of more attributes, for instance, allows for the exploration of how changing the remaining attributes affects the EUI. The dark lines in the chart are results for combinations simulated using the whole building energy model. The lighter lines represent results from all other combinations that are generated using statistical surrogate models that utilize data-driven approximation techniques. Additionally, there is a passive cooling \"On\" and \"Off\" toggle to preview the effects of passive cooling on the evaluated parameters.\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3267,"value":"viewof NatVentSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3720,"value":"parametric_colors = ({\n \"TMY\": {\"dark\": \"#1f77b4\",\"light\": \"#B4D6E8\"}, \n \"2050\": {\"dark\": \"#ff7f0e\",\"light\": \"#FCD1AB\"}, \n \"2080\": {\"dark\": \"#2ca02c\",\"light\": \"#B3E5B3\"},\n \"default\": {\"dark\": \"#000000\",\"light\": \"#000000\"}\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":2983,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"sensLegend1 = {\n \n const svg = d3.select(DOM.svg(960, 70))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\n {year: \"TMY\", label: \"TODAY - TMY3\"}, \n {year: \"2050\", label: \"MID CENTURY - HadCM3-A2 (2050)\"},\n {year: \"2080\", label: \"END OF CENTURY - HadCM3-A2 (2080)\"}\n ])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"circle\")\n .attr(\"r\", 3)\n .attr(\"stroke\", d => parametric_colors[d.year].dark)\n .style(\"fill\", d => parametric_colors[d.year].light)\n\n g.append(\"text\")\n .attr(\"x\", 20)\n .attr(\"y\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(d => d.label);\n \n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof figure2 = html`Figure 2: Effect of different combinations of parameter properties on building energy use intensity. Move or expand the selection box for each attribute.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2689,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"ip_to = d => (unitSelection.unit === \"SI\") ? _.round(d / 3.412 / 0.092903, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":3707,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"formatEUI_SI_IP = d => {\n if (unitSelection.unit === \"IP\") {\n return `${_.round(d, 1)} kBtu/ft²/yr`;\n }\n else {\n return `${_.round(d / 3.412 * 10.76, 1)} kWh/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"formatAREA_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 0)} m²`;\n }\n else {\n return `${_.round(d * 10.76, 0)} ft²`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"stackedColor = {\n const lookup = {\n \"PV Budget\":\"#708238\",\n \"Lights\":\"#d6d231\",\n \"Plug Loads\":\"#dddddd\",\n \"Heating\":\"#d52928\",\n \"DHW\":\"#e55725\",\n \"Cooling\":\"#1dbfcf\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"Proposed System\":\"#EEEEEE\",\n \"Ambulance Charging\": \"#808080\",\n \"TEDI\":\"#d52928\",\n \"GHGI\":\"#9CBD53\",\n \"PV Offset\":\"#9CBD53\",\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":3166,"value":"eui2 = d => (unitSelection.unit === \"IP\") ? _.round(d, 2) : _.round(d / 3.412 / 0.092903, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = await FileAttachment(\"sensitivity_coorstek.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(\"parametric_coorstek3@5.csv\").csv({typed:true}));\n \n const peak_conversion = d => (unitSelection.unit === \"IP\") ? _.round(d, 2) : _.round(d/10.7639, 2);\n\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => (\n {...d, \n EUI: eui2(d.EUI),\n TEDI: eui2(d.TEDI),\n CEDI: eui2(d.CEDI),\n peak_cooling: peak_conversion(d.peak_cooling),\n peak_heating: peak_conversion(d.peak_heating) \n }));\n data.columns = columns;\n\n\n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"d3 = require('d3@5.9.2','d3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":2086,"value":"d3format = d3.format","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"import {group, groupSum, groupCount} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3849,"value":"stacked_colors = ({\n heating: \"#E64025\",\n cooling: \"#24BFCF\",\n simheating: \"#A53A79\",\n simcooling: \"#914198\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3776,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":3725,"value":"viewof scenario = Inputs.select(new Map([[\"Base Case\", \"base\"],[\"Microload\", \"microload\"]]), {value: \"base\", label: \"Load Scenario\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3728,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":3802,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":3808,"value":"stacked_chart.update(heating_cooling_data[scenario], zone)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}