30:Te28,cybercharacterization = { 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) .text(d => d.name); 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"); //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(); }31:T42e,md`

#### Energy Use Sensitivity Utilizing the calibrated energy model, a series of energy efficiency measures (EEMs) were evaluated to understand the sensitivity of individual building performance characteristics on building energy use. Figure 3 presents the results of this analysis with the horizontal axes showing incremental improvement in a specific parameter, and the vertical axes showing the associated energy use intensity. In accordance with the energy use characterization discussed above, the overall energy use is most affected by the installed equipment and lighting power densities (bottom right) and targeting these parameters to be below 0.5W/ft² will be critical for achieving the project target, especially since the current fenestration design with a 70% window-wall ratio results in a significant energy use penalty over the baseline (top left). Selecting high performance glazing (top middle) with a maximum assembly U-value of 0.4 Btu/hr-ft²-°F and an overall SHGC of 0.3 will be important to realize project goal. `32:T1f68,sensitivies = { //general setup const config = { width: 960, cell: {height: 250, padding:40}, margin: {top: 60, right:10, bottom: 30, left: 35}, cols: 3, format: { "Glass U": { convert: d => 1/d, ticks: d => d3.format(".2f")(1/d)}, "WWR": { newName: "Window-Wall Ratio", ticks: d => d3.format(",.0%")(d/100)}}, 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"); //initiate the dictionary of scales for the cross hairs const markers = {}; //handles conversion for each variable in config.format const data = sensitivity_data.map(d => { let dd = d.data; for (const key in config.format) { if ("convert" in config.format[key]) { dd = dd.map(p => ({...p, [key]: config.format[key].convert(p[key])})); } } return {variable: d.variable, data: dd}; }); //find the width of cells by dividing the total width by the number of cols config.cell.width = _.round( (config.width - config.margin.left - config.margin.right - config.cell.padding * (config.cols-1)) / config.cols ); //csize the svg based on the number of rows const svg = d3.select(DOM.svg(config.width, (config.cell.height + config.margin.bottom + config.cell.padding) * _.ceil(data.length / config.cols) + config.margin.top - config.margin.bottom )); //all the y values are the same - could use a map here to get different scales for each small multiple const y = d3.scaleLinear() .domain(d3.extent(data.map(d => d.data.map(p => eui(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])), [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()); } } //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 === "EPD" || d.variable === "LPD") && dd[d.variable] === 0.5) { return "none"; } else if (d.variable === "Glass SHGC" && dd[d.variable] === 0.3) { return "none"; } else { return null; } }) .attr("stroke", "#1f77b4") .style("fill", dd => dd.Baseline === "yes" ? "#1f77b4": "#b4d6e8" ); d3.select(this).selectAll("overlay") .data(d.data) .join("circle") .attr("class", "overlay") .attr("r",18) .attr("stroke", "none") .style("fill", "#fff") .style("opacity", 0) .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd.EUI)); }) .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("mouseout", d => { tooltip.style("display", "none"); }); }); return svg.node(); }33:T693,md`

#### Energy Performance Benchmarking As discussed in the previous sections, the LEED v4 Baseline with all performance parameters defined at ASHRAE 90.1-2010 Appendix G minimum requirements shows an EUI of ${formatEUI_IP_SI(39)}, as shown by the first bar in Figure 4. Increasing the glazing area to current design of 70% window-wall ratio results in a considerably increase in space heating and cooling energy, resulting in an 8% overall energy use penalty over the baseline, with an EUI of ${formatEUI_IP_SI(42)}. This case is shown by the second bar. Improving the glazing and load parameters to previously recommended targets offers savings across the board and drops the EUI to just meet the project target of ${formatEUI_IP_SI(35)} and shows a 10% savings over the Baseline. Finally, the case that cumulatively adds the currently proposed high efficiency HVAC systems further reduces the EUI to ${formatEUI_IP_SI(34)} increasing the overall savings over the Baseline to about 13%. In terms of the LEED v4 Core & Shell Optimize Energy Performance credit, a 10% savings, that relies on aggressive reductions in tenant-controlled lighting and equipment energy use, translates to 4 points. The proposed HVAC system efficiencies have the potential to increase the savings to 13% and achieve two additional points for a total of 6 points. Detailed model inputs including envelope, internal and ventilation loads, and mechanical system parameters for both Baseline and Proposed Design models can be downloaded here.

`34:Tc61,stackedBar = { const config = { height: 450, width: 960, margin: {top: 20, right:150, bottom: 30, left: 35, legend: 10}, units: unitSelection.unit, label: `${unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr"}` }; const svg = d3.select(DOM.svg(config.width, config.height)); const x = d3.scaleBand() .domain(stacked.columns) .range([config.margin.left, config.width - config.margin.right]) .paddingOuter(.3) .paddingInner(0.75); const y = d3.scaleLinear() .domain([0, d3.max(stacked.totals) + eui(30)]) .rangeRound([config.height - config.margin.bottom, config.margin.top]); 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", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .html(`EUI ${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.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.totals) .join("g") .attr("transform", (d, i) => `translate(${x(stacked.columns[i])},${y(d)})`); g.append("text") .attr("x", x.bandwidth()/2) .attr("y", -16) .attr("dy", "0.35em") .text(d => _.round(d, 1)); } svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .selectAll("g") .data(stacked) .join("g") .attr("fill", (d, i) => stackedColor(stacked.keys[i])) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(stacked.columns[i])) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .append("title") .html(d => `${_.round(d[1] - d[0], 2)} ${config.label}`); // `${d.name}\n${eui(d.value)} ${config.label}` svg.append("g") .attr("transform", `translate(${config.width - config.margin.legend},${config.margin.top})`) .call(legend); svg.append("g").call(totals) return svg.node(); }35:T1af7,parcoords = { const config = { height: 500, width: 960, margin: {top: 60, right: 10, bottom: 10, left: 35}, format: { "Spandrel R": { reverse: true, ticks: d3.format(".1f"), selection: [0, 75]}, "EPD": { selection: [0, 75]}, "LPD": { selection: [0, 75]}, "Glass U": { ticks: d3.format(".1f"), selection: [0, 75]}, "Glass SHGC": { ticks: d3.format(".1f"), selection: [0, 75], ticks: d3.format(".2f")}, "WWR": { newName: "Win-Wall Ratio", ticks: d => d3.format(",.0%")(d/100), selection: [0, 75], anchor: "start"}, "EUI": { newName: `${unitSelection.unit === "IP" ? "kBTU/ft²/yr": "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"); 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)] } ) ); 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) { let ya = axis.scale(y.get(d)); if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { ya = axis.scale(y.get(d)).tickFormat(config.format[d].ticks); } d3.select(this).call(ya); }) .call(g => g.selectAll("text") .clone(true).lower() .attr("fill", "none") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("opacity", 0.6) .attr("stroke", "white")) .call(g => g.selectAll("text") .attr("x", -12)); g.append("text") .attr("class", "label") .style("text-anchor", d => { let anchor = "middle"; if (Object.keys(config.format).filter(d => "anchor" in config.format[d]).indexOf(d) >= 0) { anchor = config.format[d].anchor; } return anchor }) .attr("y", -25) .attr("font-size", 12) .style("font-family", "Open Sans") .html(d => { let name = d; if (Object.keys(config.format).filter(d => "newName" in config.format[d]).indexOf(d) >= 0) { name = config.format[d].newName; } return name; }); const render = renderQueue(draw).rate(50); ctx.clearRect(0,0,config.width,config.height); render(data); g.append("g") .attr("class", "parbrush") .each(function(d) { y.get(d).brush = d3.brushY().extent([[-10,-1], [10,config.chartHeight + 1]]) .on("brush", brush) .on("end", brush); d3.select(this) .call(y.get(d).brush); if (Object.keys(config.format).filter(d => "selection" in config.format[d]).indexOf(d) >= 0) { d3.select(this).call(y.get(d).brush.move, config.format[d].selection); } }) .selectAll("rect") .attr("x", -10) .attr("width", 20); function brush() { render.invalidate(); const actives = []; svg.selectAll(".parbrush") .filter(function(d) { y.get(d).brushSelectionValue = d3.brushSelection(this); return d3.brushSelection(this); }) .each(function(d) { actives.push({ dimension: d, extent: d3.brushSelection(this).map(y.get(d).invert) }); }); const selected = data.filter(function(d) { return actives.every(function(active) { let result = active.extent[1] <= d[active.dimension] && d[active.dimension] <= active.extent[0]; const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); if (reverse.indexOf(active.dimension) >= 0) { result = active.extent[1] >= d[active.dimension] && d[active.dimension] >= active.extent[0]; } return result; }); }); 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; }36:T4ad,html``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:[] 2e:{"title":"Charlotte Metro","cells":[{"id":0,"value":"md`# Charlotte Metro`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"md`\n
\nMarch 13, 2019\n#### Introduction\nThis study is designed to help benchmark the current design of Charlotte Metro project in Charlotte, NC against a LEED v4 Energy Performance Baseline in accordance with ASHRAE 90.1-2010 Appendix G requirements, and to check whether the project design is on track to achieve the energy performance target of ${formatEUI_IP_SI(35)} annual energy use intensity (EUI). The primary purpose of this report is to develop a matrix for minimum performance criteria for different envelope and load characteristics, after considering the current architectural and HVAC systems design.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\n
\n#### Whole Building Energy Model\nIntegral Group created a detailed whole building energy model for the project in Schematic Design phase. Figure 1 shows the graphic rendering of the energy model and presents the thermal block layout by space types. This model reasonably represents the different heat gain, heat loss, and energy use components for the building design. Detailed model inputs including envelope, internal and ventilation loads, and mechanical system parameters are included at the end of this report.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"viewof zoneimg = {\n const zoneimg = html``;\n return zoneimg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"zone = {\n const zone = html`

`;\n return zone;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"viewof figure1 = html`Figure 1: Graphic Rendering of the Energy Model. Select thermal block organization from the dropdown list.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"md`\n
\n#### Energy End Use Characterization\nAs presented in Figure 2, the ASHRAE 90.1-2010 Baseline shows a total energy use intensity of ${formatEUI_IP_SI(38.5)}, with lighting and equipment energy use forming the largest energy use components at about 25% each. This is followed by space cooling and space heating energy which equally contribute to another 25% of the total energy use. Mechanical system fans and pumps, and domestic hot water form the remaining 25%.\n\nA further investigation into the load components shows that internal gains, attributed to equipment and lighting, amount to almost half of the total cooling load. This is followed by outside air cooling (20%) and solar gains (20%), and finally occupant related heat gains (10%). Almost half of the total heating load is comprised of window conduction losses followed by outside air heating (33%) and then other envelope losses.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"viewof figure2 = html`Figure 2: Building energy use characterization showing load components and energy end-uses.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"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":123,"value":"viewof figure3 = html`Figure 3: Sensitivity of individual building performance parameters on building energy use intensity.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"viewof figure4 = html`Figure 4: Comparison of energy use intensities by end-use for different modeled cases.

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

\n#### Parametric Analysis\nTo better understand the effect of different performance characteristics on building energy use, Figure 5 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 energy use intensity resulting from the selected combination(s). Putting constraints on one of more attributes, for instance, allows for the exploration of how changing the remaining attributes affects building energy use. The dark lines in the chart are results for combinations simulated using the calibrated 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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"parLegend = {\n \n const svg = d3.select(DOM.svg(960, 40))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\")\n .style(\"margin-top\", \"30px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\"Interpolated Data\", \"Modeled Data\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", 20)\n .attr(\"y1\", 0)\n .attr(\"y2\", 0)\n .attr(\"stroke\", d => d === \"Interpolated Data\" ? \"#ddeaf2\": \"#1f77b4\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-width\", 2)\n\n g.append(\"text\")\n .attr(\"x\", 30)\n .attr(\"y\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"viewof figure5 = html`Figure 5: 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":109,"value":"md`\n

\n#### Next Steps\nIntegral Group will next update the energy models at the end of Design Development phase.\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require('d3@5.9.2', 'd3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {group} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"color = {\n const lookup = {\n \"Electricity\":\"#d6d231\",\n \"Natural Gas\": \"#e55725\",\n \"DHW\":\"#d52928\",\n \"Heating Energy\":\"#d52928\",\n \"Cooling Energy\":\"#1dbfcf\",\n \"Lights\":\"#d6d231\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"Equipment\":\"#dddddd\",\n \"Passive Solar Gains\":\"#a17eb9\",\n \"Internal Equipment Gains\":\"#a17eb9\",\n \"Lighting Gains\":\"#a17eb9\",\n \"Occupant Gains\":\"#a17eb9\",\n \"Passive Infiltration\":\"#a17eb9\",\n \"Window Losses\":\"#a17eb9\",\n \"OA Cooling\":\"#6aadd6\",\n \"Equipment Gains\":\"#1f77b4\",\n \"Lighting\":\"#6aadd6\",\n \"Solar\":\"#c7e1ed\",\n \"Occupants\":\"#c7e1ed\",\n \"Cooling Load\":\"#1f77b4\",\n \"Windows\":\"#e55725\",\n \"Heating Load\":\"#e55725\",\n \"Roof\": \"#f8caa3\",\n \"Walls\": \"#f7aa6e\",\n \"Infiltration\": \"#f8caa3\",\n \"OA Heating\":\"#f68d39\",\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await d3.csv(`https://www.elementa.nyc/projects/charlotte-metro/data/parametric_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType));\n \n //group the data by independent variable\n const grouped = group(data, d => d.Variable);\n \n data = Array.from(grouped, d => ({variable: d[0], data: d[1].sort((a, b) => a[d[0]] - b[d[0]])}));\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"parametric_data = {\n let parametrics = (await d3.csv(`https://www.elementa.nyc/projects/charlotte-metro/data/interpolated_data.csv`, d3.autoType)); \n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, EUI: eui(d.EUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"sankey_data = {\n let sankey_data = (await d3.csv(`https://www.elementa.nyc/projects/charlotte-metro/data/sankey_data.csv?version=${Math.floor(Math.random() * 100)}`)).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":22,"value":"sankey = {\n const config = {\n height: 500,\n width: 960,\n margin: {bottom: 10}\n }\n const sankey = d3.sankey()\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 1], [config.width, config.height - config.margin.bottom]])\n .nodeAlign(d3.sankeyLeft);\n return sankey;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"stacked = {\n let data = (await d3.csv(`https://www.elementa.nyc/projects/charlotte-metro/data/stacked_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType));\n \n \n const keys = Object.keys(data[0]).filter(d => d != \"Case\");\n \n const converted = data.map(o => {\n const a = {...o};\n for (const key of keys) {\n a[key] = eui(o[key]);\n }\n return a;\n \n });\n const stacked = d3.stack().keys(keys)(converted);\n stacked.columns = data.map(d => d.Case);\n stacked.keys = keys;\n stacked.totals = converted.map(o => _.round(_.sumBy(keys, key => o[key]), 2));\n \n return stacked;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"stackedColor = {\n const lookup = {\n \"Lights\":\"#d6d231\",\n \"Equipment\":\"#dddddd\",\n \"Heating\":\"#d52928\",\n \"DHW\":\"#e55725\",\n \"Cooling\":\"#1dbfcf\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\"\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"formatDegree = d => {\n if (unitSelection.unit === \"IP\") {\n return `${_.round(d * 1.8 + 32)}°F`;\n }\n else {\n return `${_.round(d)}°C`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"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":371,"value":"root = \"https://elementa.nyc/projects/charlotte-metro/\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}