31:T640,md`
Introba has developed a whole building energy model for the Block 87 Mixed Use Tower after incorporating changes in programming and conditioned floor area. This study is designed to help characterize the proposed design energy use and to study the sensitivity of different envelope and HVAC system component characteristics on building energy use. The baseline design with all performance parameters defined at ASHRAE 90.1-2013 Appendix G minimum requirements shows an EUI of ${formatEUI_SI_IP(155)}. In comparison, the current basis of design has an EUI of ${formatEUI_SI_IP(167)}. To better understand the effect of different performance characteristics on building EUI, the figure below presents a parallel coordinates plot where each of the first four 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. The properties evaluated as part of this analysis include: * Window type * Window-to-wall ratio * HVAC system type * DWH system type A detailed description of each evaluated alternate has been provided in the model input assumptions below.

`32:T1fa9,parcoords2 = { const formatDHW = d => { switch(d) { case 0: return "Gas Boiler"; break; case 1: return "ASHP"; break; default: return "WLHP"; } } const formatType = d => { switch(d) { case 0: return "Solarban 70XL"; break; case 1: return "Solarban 90XL"; break; default: return "Triple pane"; } } const formatHVAC = d => { switch(d) { case 0: return "Air-cooled Chillers"; break; case 1: return "RESI VRF"; break; case 2: return "All VRF"; break; default: return "WLHP"; } } const config = { height: 500, width: 960, margin: {top: 60, right: 10, bottom: 10, left: 40}, format: { "Window Type": { newName: "Window Type", ticks: d3.format(".0f"), numTicks: [0, 1, 2], ticks: d => formatType(d), anchor: "start", selection: [360, 435]}, "WWR": { ticks: d3.format(".2f"), numTicks: 3, selection: [175, 250]}, "HVAC": { newName: "HVAC System", numTicks: [0, 1, 2, 3], ticks: d => formatHVAC(d), selection: [360, 435]}, "DHW": { newName: "DWH System", numTicks: [0, 1, 2], ticks: d => formatDHW(d), selection: [360, 435]}, "EUI": { newName: `${unitSelection.unit === "IP" ? "EUI kBTU/ft²/yr": "EUI kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f")}, }, units: unitSelection.unit }; const container = document.createElement("div"); container.setAttribute("class", "parcoords"); container.setAttribute("style", `width: ${config.width}px; height: ${config.height}px;`); const ctx = DOM.context2d(config.width, config.height); //ctx.transform(1, 0, 0, 1, config.margin.left, config.margin.top); const svg = d3.select(DOM.svg(config.width, config.height)); config.chartHeight = config.height - config.margin.top - config.margin.bottom; config.chartWidth = config.width - config.margin.right - config.margin.left; const dimensions = parametric_data2.columns.filter(d => d != "dataset"); const data = parametric_data2.map(d => { let dd = d; for (const key in config.format) { if ("convert" in config.format[key]) { dd = {...dd, [key]: config.format[key].convert(dd[key])}; } } return dd; }); const y = new Map( Array.from( dimensions, key => { const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); let range = reverse.indexOf(key) >= 0 ? [0, config.chartHeight] : [config.chartHeight, 0]; return [key, d3.scaleLinear(d3.extent(data, d => d[key]), range).nice()] } ) ); const x = d3.scalePoint().range([0, config.chartWidth]).domain(dimensions).padding(0); const c = svg.append("g").attr("transform", `translate(${config.margin.left}, ${config.margin.top})`); // 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 = d === "Window Type" ? d3.axisRight() : 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: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), 0)} ${config.label}`; case "Electricity": return `EUI: ${_.round(eui(d.value), 0)} ${config.label}`; // case "Heating Load": // let source = d.targetLinks.filter(dd => dd.source.name === "Heating System"); // return `Heating TEDI: ${_.round(eui(source[0].value), 0)} ${config.label}`; default: return ""; } }); node.attr('cursor', 'move') .call(d3.drag() .on('start', dragStart) .on('drag', dragMove) .on('end', dragEnd)); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(graph.links) .enter().append("g") .style("mix-blend-mode", "multiply") .attr("id", d => d.source.name.replace(" ", "_") + "_" + d.target.name.replace(" ", "_")); //apply gradients based on input and output const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); link.append("path") .attr("class", "link") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("display", d=> d.target.name === "Nothing" ? "none": null) .attr("opacity", d => d.value < 0.02 ? 0 : 1) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .html(d => `${d.source.name} → ${d.target.name}\n${eui(d.value)} ${config.label}`); function dragStart (d) { if (!d.__x) d.__x = d3.event.x; if (!d.__y) d.__y = d3.event.y; if (!d.__x0) d.__x0 = d.x0; if (!d.__y0) d.__y0 = d.y0; if (!d.__x1) d.__x1 = d.x1; if (!d.__y1) d.__y1 = d.y1; } function dragMove(d) { d3.select(this) .attr('transform', function (d) { const dx = d3.event.x - d.__x; const dy = d3.event.y - d.__y; d.x0 = d.__x0 + dx; d.x1 = d.__x1 + dx; d.y0 = d.__y0 + dy; d.y1 = d.__y1 + dy; if (d.x0 < 0) { d.x0 = 0; d.x1 = nodeWidth; } if (d.x1 > config.width) { d.x0 = config.width - nodeWidth; d.x1 = config.width; } if (d.y0 < 0) { d.y0 = 0; d.y1 = d.__y1 - d.__y0; } if (d.y1 > config.height) { d.y0 = config.height - (d.__y1 - d.__y0); d.y1 = config.height; } return `translate(${d.x0}, ${d.y0})`; }); sankey.update(graph); link.selectAll(".link").attr('d', d3.sankeyLinkHorizontal()); } function dragEnd(d) { delete d.__x; delete d.__y; delete d.__x0; delete d.__x1; delete d.__y0; delete d.__y1; } return svg.node(); }34:T4c6,md`

### Envelope Sensitivity In addition to overall energy use modeling, parametric analysis was conducted to understand the sensitivity of various envelope characteristics on building energy use. Figure 2 presents these results with the horizontal axes showing incremental changes in the studied parameter, and the vertical axes showing the impact of these changes on building EUI. The line represents the overall trend for each parameter, the baseline values are marked by dark blue dots and the current proposed values by circles. In accordance with the energy use characterization discussed above, the building EUI is highly sensitive to window characteristics such as window area, window U-factor, and window SHGC as compared to other envelope characteristics such as roof U-value and wall U-value, due to the high as-designed window-to-wall ratio. The EUI can most benefit from improvements to window U values and reduced window areas. It is recommended that the design team explore the feasibility of achieving glazing performance close to U 0.3-0.4, and window assembly performance as close as possible to at least 60%. These recommended values are highlighted by light blue circles.

`35:T20c4,sensitivies = { //general setup const config = { width: 960, cell: {height: 250, padding:40}, margin: {top: 60, right:15, bottom: 30, left: 35}, cols: 3, format: { "Window U": { newName: "Window U", convert: d => 1/d, ticks: d => d3.format(".2f")(1/d)}, "WWR": { newName: "Window-Wall Ratio", ticks: d3.format(",.0%")}, "Infiltration": { newName: "Infiltration cfm/ft²"}, "Skylight U": { convert: d => 1/d, ticks: d => d3.format(".2f")(1/d)}}, units: unitSelection.unit, } const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("display", "none") .style("position", "absolute") //.style("width", "80px") //.style("height", "30px") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "bold") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "#ffffff") .style("opacity", 0.9) .style("color", "#333333") .style("pointer-events", "none"); //handles conversion for each variable in config.format const data = sensitivity_data.map(d => { let dd = d.data; for (const key in config.format) { if ("convert" in config.format[key]) { dd = dd.map(p => ({...p, [key]: config.format[key].convert(p[key])})); } } return {variable: d.variable, data: dd}; }); //find the width of cells by dividing the total width by the number of cols config.cell.width = _.round( (config.width - config.margin.left - config.margin.right - config.cell.padding * (config.cols-1)) / config.cols ); //csize the svg based on the number of rows const svg = d3.select(DOM.svg(config.width, (config.cell.height + config.margin.bottom + config.cell.padding) * _.ceil(data.length / 3) + config.margin.top - config.margin.bottom )); //all the y values are the same - could use a map here to get different scales for each small multiple const y = d3.scaleLinear() .domain(d3.extent(data.map(d => d.data.map(p => eui(p.EUI))).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" ? `EUI kBTU/ft²/yr`: `EUI 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.EUI))) .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.EUI)); }) .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.EUI)); }) .attr("r",3) .attr("display", dd => { if (d.variable === "WWR" && dd[d.variable] === 0.35) { return "none"; } else if (d.variable === "Window U" && dd[d.variable] === 1/0.35) { return "none"; } else { return null; } }) .attr("stroke", "#1f77b4") .style("fill", dd => dd.Baseline === "yes" ? "#1f77b4": "#b4d6e8" ); d3.select(this).selectAll("overlay") .data(d.data) .join("circle") .attr("class", "overlay") .attr("r",18) .attr("stroke", "none") .style("fill", "#fff") .style("opacity", 0) .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd.TEDI)); }) .on("mouseover", dd => { tooltip.style("display", null); let data = dd[d.variable]; if (d.variable in config.format) { if ("ticks" in config.format[d.variable]){ data = config.format[d.variable].ticks(data); } } tooltip.html(`${data} | EUI ${_.round(eui(dd.EUI))} `) .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:T1d3a,parcoords = { const config = { height: 500, width: 960, margin: {top: 60, right: 10, bottom: 10, left: 40}, format: { // "Wall R": { // ticks: d3.format(".0f"), // // numTicks: 10, // selection: [325, 400]}, // "Window U": { // ticks: d3.format(".2f"), // selection: [125, 200]}, // "Window SHGC": { // ticks: d3.format(".2f"), // selection: [275, 350]}, // "WWR": { // ticks: d3.format(".2f"), // selection: [0, 75]}, // "Roof R": { // ticks: d3.format(".0f"), // // numTicks: 10, // selection: [225, 300]}, // "Infiltration": { // newName: "Infiltration (CFM/ft²)", // ticks: d3.format(".2f"), // numTicks: 4, // selection: [0, 75]}, "EUI": { newName: `${unitSelection.unit === "IP" ? "EUI kBTU/ft²/yr": "EUI kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f")}, "TEDI": { newName: `${unitSelection.unit === "IP" ? "TEDI kBTU/ft²/yr": "TEDI kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f")} }, units: unitSelection.unit }; const container = document.createElement("div"); container.setAttribute("class", "parcoords"); container.setAttribute("style", `width: ${config.width}px; height: ${config.height}px;`); const ctx = DOM.context2d(config.width, config.height); //ctx.transform(1, 0, 0, 1, config.margin.left, config.margin.top); const svg = d3.select(DOM.svg(config.width, config.height)); config.chartHeight = config.height - config.margin.top - config.margin.bottom; config.chartWidth = config.width - config.margin.right - config.margin.left; const dimensions = parametric_data.columns.filter(d => d != "dataset").filter(d => d != "TEDI"); const data = parametric_data.map(d => { let dd = d; for (const key in config.format) { if ("convert" in config.format[key]) { dd = {...dd, [key]: config.format[key].convert(dd[key])}; } } return dd; }); const y = new Map( Array.from( dimensions, key => { const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); let range = reverse.indexOf(key) >= 0 ? [0, config.chartHeight] : [config.chartHeight, 0]; return [key, d3.scaleLinear(d3.extent(data, d => d[key]), range).nice()] } ) ); const x = d3.scalePoint().range([0, config.chartWidth]).domain(dimensions).padding(0); const c = svg.append("g").attr("transform", `translate(${config.margin.left}, ${config.margin.top})`); const axis = d3.axisLeft().ticks(5); ctx.globalCompositeOperation = 'darken'; const g = c.selectAll(".dimension") .data(dimensions) .enter().append("g") .attr("class", "dimension") .classed("nonactive", false) .attr("transform", d => `translate(${x(d)})`); g.append("g") .attr("class", "paraxis") .each(function(d) { if (Object.keys(config.format).filter(key => "numTicks" in config.format[key]).indexOf(d) >= 0) { axis.ticks(config.format[d].numTicks); } else { axis.ticks(5); } let ya = axis.scale(y.get(d)); if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { ya = axis.scale(y.get(d)).tickFormat(config.format[d].ticks); } d3.select(this).call(ya); }) .call(g => g.selectAll("text") .clone(true).lower() .attr("fill", "none") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("opacity", 0.6) .attr("stroke", "white")) .call(g => g.selectAll("text") .attr("x", -12)); g.append("text") .attr("class", "label") .style("text-anchor", d => { let anchor = "end"; if (Object.keys(config.format).filter(d => "anchor" in config.format[d]).indexOf(d) >= 0) { anchor = config.format[d].anchor; } return anchor }) .attr("y", -25) .attr("font-size", 12) .style("font-family", "Open Sans") .html(d => { let name = d; if (Object.keys(config.format).filter(d => "newName" in config.format[d]).indexOf(d) >= 0) { name = config.format[d].newName; } return name; }); const render = renderQueue(draw).rate(50); ctx.clearRect(0,0,config.width,config.height); render(data); g.append("g") .attr("class", "parbrush") .each(function(d) { y.get(d).brush = d3.brushY().extent([[-10,-1], [10,config.chartHeight + 1]]) .on("brush", brush) .on("end", brush); d3.select(this) .call(y.get(d).brush); if (Object.keys(config.format).filter(d => "selection" in config.format[d]).indexOf(d) >= 0) { d3.select(this).call(y.get(d).brush.move, config.format[d].selection); } }) .selectAll("rect") .attr("x", -10) .attr("width", 20); function brush() { render.invalidate(); const actives = []; svg.selectAll(".parbrush") .filter(function(d) { y.get(d).brushSelectionValue = d3.brushSelection(this); return d3.brushSelection(this); }) .each(function(d) { actives.push({ dimension: d, extent: d3.brushSelection(this).map(y.get(d).invert) }); }); const selected = data.filter(function(d) { return actives.every(function(active) { let result = active.extent[1] <= d[active.dimension] && d[active.dimension] <= active.extent[0]; const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); if (reverse.indexOf(active.dimension) >= 0) { result = active.extent[1] >= d[active.dimension] && d[active.dimension] >= active.extent[0]; } return result; }); }); ctx.clearRect(0,0,config.width,config.height); render(selected); } function draw(d) { if (d.dataset === "interpolated") { //context.globalAlpha = .1; ctx.strokeStyle = "#ddeaf2"; ctx.lineWidth = 1; } else { //context.globalAlpha = 1; ctx.strokeStyle = "#1f77b4"; ctx.lineWidth = 1.5; } ctx.beginPath(); var coords = dimensions.map(p => [x(p) + config.margin.left, y.get(p)(d[p]) + config.margin.top]); coords.forEach(function(p,i) { // this tricky bit avoids rendering null values as 0 if (p === null) { // this bit renders horizontal lines on the previous/next // dimensions, so that sandwiched null values are visible if (i > 0) { var prev = coords[i-1]; if (prev !== null) { ctx.moveTo(prev[0],prev[1]); ctx.lineTo(prev[0]+6,prev[1]); } } if (i < coords.length-1) { var next = coords[i+1]; if (next !== null) { ctx.moveTo(next[0]-6,next[1]); } } return; } if (i == 0) { ctx.moveTo(p[0],p[1]); return; } ctx.lineTo(p[0],p[1]); }); ctx.stroke(); } container.appendChild(ctx.canvas); container.appendChild(svg.node()); return container; }37:T681,md`

#### Energy Performance Benchmarking The baseline design with all performance parameters defined at ASHRAE 90.1-2010 Appendix G minimum requirements shows an EUI of ${formatEUI_SI_IP(192)}. Incorporating the current window-to-wall ratio increases the EUI to ${formatEUI_SI_IP(251)}. Both these cases assume a baseline HVAC system that incorporates VAV air handling with hot water reheat for all the non-residential floors and packaged terminal AC units with hot water heating for all the residential spaces. Incorporating the proposed envelope recommendations reduces the EUI to ${formatEUI_SI_IP(195)}. Switching to the proposed systems with a Dedicated Outdoor Air System (DOAS) and four-pipe fan coil units for the residential spaces reduces the EUI to ${formatEUI_SI_IP(168)}. HVAC system alternates 1 (switching from hot water boilers to electric resistance heating) and 2 (air source VRF served by a DOAS for the residential spaces, DOAS and active chilled beams for the non-residential spaces) bring the building EUI to ${formatEUI_SI_IP(166)} and ${formatEUI_SI_IP(150)} respectively. Based on these results, the proposed design with the recommended envelope demonstrates an overall energy savings of around 12% over the baseline. HVAC system alternates 1 and 2 offer energy savings of around 14% and 22% over the baseline. Note that this analysis assumes an average utility rate of $0.084/kWH for electricity and $0.68/therm for natural gas, as per EIA's average commercial utility rates for the state of Texas. Figure 4 presents the comparison of site EUI and annual energy cost for the different studied scenarios.

`38:Td41,stackedBar = { const config = { height: 450, width: 960, margin: {top: 20, right:150, bottom: 30, left: 50, legend: 0}, units: unitSelection.unit, y: euiSwitch2.y, label: `${stacked_data.label} ${stacked_data.unit}` }; const svg = d3.select(DOM.svg(config.width, config.height)); const x = d3.scaleBand() .domain(stacked_data.columns) .range([config.margin.left, config.width - config.margin.right]) .paddingOuter(.3) .paddingInner(0.75); const y = d3.scaleLinear() .domain([0, d3.max(stacked_data.totals) + 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(); }39:T4ad,html``3a:Tac3,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; } // | }3b:T5ff,renderQueue = function(func) { var _queue = [], // data to be rendered _rate = 1000, // number of calls per frame _invalidate = function() {}, // invalidate last render queue _clear = function() {}; // clearing function var rq = function(data) { if (data) rq.data(data); _invalidate(); _clear(); rq.render(); }; rq.render = function() { var valid = true; _invalidate = rq.invalidate = function() { valid = false; }; function doFrame() { if (!valid) return true; var chunk = _queue.splice(0,_rate); chunk.map(func); timer_frame(doFrame); } doFrame(); }; rq.data = function(data) { _invalidate(); _queue = data.slice(0); // creates a copy of the data return rq; }; rq.add = function(data) { _queue = _queue.concat(data); }; rq.rate = function(value) { if (!arguments.length) return _rate; _rate = value; return rq; }; rq.remaining = function() { return _queue.length; }; // clear the canvas rq.clear = function(func) { if (!arguments.length) { _clear(); return rq; } _clear = func; return rq; }; rq.invalidate = _invalidate; var timer_frame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { setTimeout(callback, 17); }; return rq; }3c:T8cf,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

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

${title}

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

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }3d:[{"id":"6f0d8bcc1ea72f0adfdc1bc53bbdbb42009dd933cd019984246b9ac8f88c9c666a2194eb075ef2cd2fc0ed92500c07ab8952d967ba3969497764505305759a19","href":"https://static.observableusercontent.com/files/6f0d8bcc1ea72f0adfdc1bc53bbdbb42009dd933cd019984246b9ac8f88c9c666a2194eb075ef2cd2fc0ed92500c07ab8952d967ba3969497764505305759a19","name":"interpolated_data.csv","type":"text/csv","lastModified":1759767564068.574,"size":247033},{"id":"b7d3a2fe29395c4c9d9a11b16dcbf56fb0d61a818128fd3320983c6e9ae155287239bcb9b157300f296fbb5c896019193da3dc262f6cee16963e5886d2c9258c","href":"https://static.observableusercontent.com/files/b7d3a2fe29395c4c9d9a11b16dcbf56fb0d61a818128fd3320983c6e9ae155287239bcb9b157300f296fbb5c896019193da3dc262f6cee16963e5886d2c9258c","name":"stacked_data.csv","type":"text/csv","lastModified":1759767562983.116,"size":905},{"id":"42e38a26d16357426e2317251c49998950418e8dbba2dc8876fe1c7fb7432aba2e5c7f3d37b2b6dd5e09a625e7c2ed8d7d0d792936f8ebb4517b33ce1e7c7e72","href":"https://static.observableusercontent.com/files/42e38a26d16357426e2317251c49998950418e8dbba2dc8876fe1c7fb7432aba2e5c7f3d37b2b6dd5e09a625e7c2ed8d7d0d792936f8ebb4517b33ce1e7c7e72","name":"parametric_data.csv","type":"text/csv","lastModified":1759767562983.531,"size":1239},{"id":"49bfcf2cd58df4338ef80d65a694c6fc1706d701e789aa013197918b7f6c142571279103e5c6ea3d1beeed070c3c479597ee69569b6e9bf46bf26ffea83cbfa1","href":"https://static.observableusercontent.com/files/49bfcf2cd58df4338ef80d65a694c6fc1706d701e789aa013197918b7f6c142571279103e5c6ea3d1beeed070c3c479597ee69569b6e9bf46bf26ffea83cbfa1","name":"summary_data.csv","type":"text/csv","lastModified":1759767562985.151,"size":396},{"id":"22f9f3d7de63b87b2df993f08e8586a4249d7bf26b1a5c106bcf858d6d90e6f1bedeac13e885d023ca889bbd6ad474a09c0b4e2632fc5cec8cfee107b30b01ef","href":"https://static.observableusercontent.com/files/22f9f3d7de63b87b2df993f08e8586a4249d7bf26b1a5c106bcf858d6d90e6f1bedeac13e885d023ca889bbd6ad474a09c0b4e2632fc5cec8cfee107b30b01ef","name":"interpolated_data2.csv","type":"text/csv","lastModified":1759767563068.171,"size":2636},{"id":"a1ad8eaf0b954dc29a44ea70bb6c39db4537a1ef3c32a7a82d88b184913e66a3863fbf87bbb285cbd8087c967331e149073e2714f8fa88e4acf46803820ca64d","href":"https://static.observableusercontent.com/files/a1ad8eaf0b954dc29a44ea70bb6c39db4537a1ef3c32a7a82d88b184913e66a3863fbf87bbb285cbd8087c967331e149073e2714f8fa88e4acf46803820ca64d","name":"sankey_data.csv","type":"text/csv","lastModified":1759767563069.251,"size":957}] 2f:{"title":"Block 87 Mixed Use Tower","cells":[{"id":0,"value":"md`# Block 87 Mixed Use Tower`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1696,"value":"md`\n
\nFebruary 18, 2020\n
\n\n## Schematic Design Phase Energy Analysis - Update\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1717,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1702,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1792,"value":"html`Figure 2: Effect of different combinations of parameter properties on building EUI. Move or expand the selection box for each attribute.

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

\nDetailed model input assumptions are documented [here.](https://da.introba.com/projects/block-87/assets/200218 Block87 EM Inputs.pdf)

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

\nNovember 22, 2019\n
\n\n## Schematic Design Phase Energy Analysis\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`\n### Introduction\nIntroba has developed a whole building energy model for the Block 87 Mixed Use Tower in Austin, TX. 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 energy and cost implications of different HVAC system alternates against the current basis of design. The primary purpose of this analysis is to benchmark the project against an ASHRAE 90.1-2010 baseline. \n

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

\n### Energy End Use Characterization\nFigure 1 below shows the breakdown in energy by end use for the baseline design with the as-designed window-to-wall ratio. Energy sources are aligned on the left side of the graphic, while energy sinks (conduction losses, internal gains, etc.) are aligned on the right side. The total energy use intensity (EUI) of the design with proposed constructions, with all other performance parameters defined at ASHRAE 90.1-2010 levels, is approximately ${formatEUI_SI_IP(251)}, with roughly a third of this attributable to space heating energy with baseline boilers, roughly 21% to cooling energy, about 15% each to plugged equipment and fan energy. The load components on the right show the key drivers of proposed design energy use. Window conduction losses form the largest heating load component, constituting nearly 80% of the total heating load. In terms of cooling, the majority of the load results from solar gains followed by outside air cooling.\n

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

`","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([\"Baseline\", \"Target\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"circle\")\n .attr(\"r\", d => d === \"Baseline\" ? 3: 10)\n .attr(\"stroke\", d => d === \"Baseline\" ? \"#1f77b4\": \"none\")\n .style(\"fill\", d => d === \"Baseline\" ? \"#1f77b4\": \"#b4d6e8\" )\n .style(\"opacity\", d => d === \"Baseline\" ? 1: .6 );;\n\n g.append(\"text\")\n .attr(\"x\", 30)\n .attr(\"y\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n \n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"viewof figure2 = html`Figure 2: Sensitivity of individual building performance parameters on building EUI.

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

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"viewof figure3 = html`Figure 2: Effect of different combinations of parameter properties on building EUI. Draw a selection box of any size for each attribute.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"viewof euiSwitch2 = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"viewof figure5 = html`
Figure 4: Comparison of EUI and 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://da.introba.com/projects/block-87/assets/191127 Block87 SD EM Inputs.pdf)

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"ghgColor = d3.scaleOrdinal()\n .range([\"#1776b6\", \"#6fccd8\", \"#d7ddda\"])\n .domain(projectKeys)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"formatEUI_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${d} kWh/m²/yr`;\n }\n else {\n return `${_.round(d * 3.412 / 10.76, 0)} kBtu/ft²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"formatEUI_IP_SI = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} kBtu/ft²/yr`;\n }\n else {\n return `${_.round(d / 3.412 * 10.76, 2)} kWh/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"formatGHG_IP_SI = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} gCO₂e/ft²/yr`;\n }\n else {\n return `${_.round(d * 7.273362, 2)} gCO₂e/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"formatGHG_IP_SI_KG = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} kgCO₂e/ft²/yr`;\n }\n else {\n return `${_.round(d * 7.273362, 2)} kgCO₂e/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"formatAREA_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 0)} m²`;\n }\n else {\n return `${_.round(d * 10.76, 0)} ft²`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"sankey_data = {\n let sankey_data = (await FileAttachment(\"sankey_data.csv\").csv({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":472,"value":"$3a","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":1713,"value":"parametric_data2 = {\n let parametrics2 = (await FileAttachment(\"interpolated_data2.csv\").csv({typed:true})); \n \n const columns = parametrics2.columns;\n const data = parametrics2.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":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"$3c","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','https://bundle.run/d3@5.9.2','https://bundle.run/d3-sankey@0.12.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":"$W3d","stdlib":"1","titling":"auto"}