30: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(); }31:T20f8,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)}, "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("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) => ` ${variable}: ${p_value}
EUI: ${formatEUI_SI_IP(EUI)}` //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%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(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(tipContent(d.variable, data ,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(); }32:T214c,parcoords = { const formatHVAC = d => { switch(d) { case 0: return "ASHRAE 90.1"; break; case 1: return "UFAD"; break; default: return "VRF"; } } const config = { height: 500, width: 960, margin: {top: 60, right: 40, bottom: 10, left: 25}, format: { "Wall R": { ticks: d3.format(".0f"), numTicks: 4, selection: [250, 325] }, "Roof R ": { newName: "Roof R", ticks: d3.format(".0f"), numTicks: 4, selection: [355, 430] }, "Window U": { newName: "Window U", ticks: d3.format(".2f"), numTicks: 4, selection: [0, 75] }, "Window SHGC": { ticks: d3.format(".2f"), numTicks: 4, selection: [250, 325] }, "HVAC System": { numTicks: 2, ticks: d => formatHVAC(d), newName: "HVAC", selection: [355, 430]}, "WWR": { ticks: d3.format(".0%"), numTicks: 4, selection: [100,175] }, "Cutoff": { ticks: d => d3.format(".0f")(d) + "°", selection: [0, 75], numTicks: [45, 60, 75, 90], newName: "Cutoff Angle", }, "LPD Redux": { ticks: d3.format(".0%"), selection: [355, 430], numTicks: [.3, .5, .7], newName: "LPD Reduction", }, "EPD Redux": { ticks: d3.format(".0%"), selection: [355, 430], numTicks: [0, .25, .5], newName: "EPD Reduction", }, "EUI": { newName: `${unitSelection.unit === "IP" ? "EUI kBTU/ft²/yr": "EUI kWh/m²/yr"}`, anchor: "middle", numTicks: 6, ticks: d3.format(".1f")} }, units: unitSelection.unit }; const container = document.createElement("div"); container.setAttribute("class", "parcoords"); container.setAttribute("style", `width: ${config.width}px; height: ${config.height}px;`); const ctx = DOM.context2d(config.width, config.height); //ctx.transform(1, 0, 0, 1, config.margin.left, config.margin.top); const svg = d3.select(DOM.svg(config.width, config.height)); config.chartHeight = config.height - config.margin.top - config.margin.bottom; config.chartWidth = config.width - config.margin.right - config.margin.left; const dimensions = parametric_data.columns.filter(d => d != "dataset"); const data = parametric_data.map(d => { let dd = d; for (const key in config.format) { if ("convert" in config.format[key]) { dd = {...dd, [key]: config.format[key].convert(dd[key])}; } } return dd; }); const y = new Map( Array.from( dimensions, key => { const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); let range = reverse.indexOf(key) >= 0 ? [0, config.chartHeight] : [config.chartHeight, 0]; return [key, d3.scaleLinear(d3.extent(data, d => d[key]), range).nice()] } ) ); const x = d3.scalePoint().range([0, config.chartWidth]).domain(dimensions).padding(0); const c = svg.append("g").attr("transform", `translate(${config.margin.left}, ${config.margin.top})`); ctx.globalCompositeOperation = 'darken'; const g = c.selectAll(".dimension") .data(dimensions) .enter().append("g") .attr("class", "dimension") .classed("nonactive", false) .attr("transform", d => `translate(${x(d)})`); g.append("g") .attr("class", "paraxis") .each(function(d) { const axis = d3.axisLeft(); 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); } if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { ya.tickFormat(config.format[d].ticks); } // 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; console.log(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.5; } 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:Tceb,stackedBar2 = { 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(stacked2.columns) .range([config.margin.left, config.width - config.margin.right]) .paddingOuter(.3) .paddingInner(0.75); const y = d3.scaleLinear() .domain([0, d3.max(stacked2.totals) + eui(30)]) .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("text-anchor", "start") .attr("font-weight", "bold") .style("paint-order", "stroke") .style("stroke", "#ffffff") .style("stroke-width", "8px") .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(stacked2.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(stacked2.totals) .join("g") .attr("transform", (d, i) => `translate(${x(stacked2.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(stacked2) .join("g") .attr("fill", (d, i) => stackedColor(stacked2.keys[i])) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(stacked2.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(); }34:T653,md`

The first column in the figure below represents the average building EUI for an existing mid to large sized office building in climate zone 2A. The EUI is derived from commercial reference building models for existing buildings organized by building type and location based on 2003 CBECS data. The last column represents the PV Budget of the building, assuming 70% of the footprint is available for a photovoltaic array. This would offset about 50% of the EUI associated with the office floors. The last four cases are built off of the 'Prop Env & Lights' scenario and evaluate the following HVAC system alternates: * The first option replaces the VAV overhead distribution with a DOAS system and air towers for underfloor air distribution (UFAD) and perimeter electric heat. This causes a reduction in conditioned air volume and a higher supply air temperature, resulting an annual EUI of ${formatEUI_SI_IP(95.4)}. This is represented as 'UFAD' in Figure 5 below. * The second HVAC option incorporates refrigerant heat recovery eliminating the need for chillers and electric reheat, reducing the overall EUI to ${formatEUI_SI_IP(93.3)} as depicted under 'VRF' in Figure 5. * The third and fourth cases evaluate the performance of the same HVAC alternate with the addition of air scrubbers incorporating HLR technology to reduce outside air quantities by 40-60% for the office floors. A reduction in ventilation air volume results in a building EUI of ${formatEUI_SI_IP(93.7)} when coupled with the UFAD scenario and ${formatEUI_SI_IP(90.9)} when paired with the VRF scenario.

`35:Tce2,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]).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("text-anchor", "start") .attr("font-weight", "bold") .style("paint-order", "stroke") .style("stroke", "#ffffff") .style("stroke-width", "8px") .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(); }36:T68f,md`

### Renewable Energy Generation Introba has developed an onsite renewable energy generation analysis model that takes the comprehensive hourly electric load profiles described in the above Energy Performance Benchmarking section and analyzes the VRF system scenario for optimal renewable energy capacity. Figure 6 plots the hourly electric load profile and evaluates the impact of different photovoltaic array capacities. The Net Zero Energy (NZE) offset refers to the percentage of project demand that is generated by the renewables on an annual basis, irrespective of whether it is utilized by the building or potentially sold back to the grid. The Deficit, illustrated in the graph as “Grid to Project”, refers the percentage of the annual project demand that cannot be met by renewable generation on an hour-by-hour basis, and the Surplus refers to the percentage of project demand generated by the renewables above what is needed to meet NZE. The starting state of the graph below depicts the hourly load profile for average days in the first two months (January and February). Use the context bar below the graph to select different times during the year, or use the mouse to zoom and pan on the graph itself to see more information. The results suggest that a 960 kWp array will be sufficient to offset all project energy use on an annual basis, and meet the NZE criteria. A preliminary solar availability study suggests that 439 kWp is the maximum solar array capacity that the roof can accomodate, thereby offsetting over a third of the project's annual energy consumption. This analysis assumes a grid-connected net-metered building.

`37:T13ca,chart2 = { const width = 960; const height = 500; const svg = d3.select(DOM.svg(width, height)).property("value", []);//.attr("view", []); const margin1 = {top: 20, right: 20, bottom: 110, left: 40}; const margin2 = {top: 430, right: 20, bottom: 30, left: 40}; const chart_width = width - margin1.left - margin1.right; const chart_height = height - margin1.top - margin1.bottom; const context_height = height - margin2.top - margin2.bottom; const x = d3.scaleLinear().range([0, chart_width]); const x2 = d3.scaleLinear().range([0, chart_width]); const y = d3.scaleLinear().range([chart_height, 0]); const y2 = d3.scaleLinear().range([context_height, 0]); const xAxis = d3.axisBottom(x); const xAxis2 = d3.axisBottom(x2); const yAxis = g => g .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("kWh")); const brush = d3.brushX() .extent([[0, 0], [chart_width, context_height]]) .on("brush end", brushed); const zoom = d3.zoom() .scaleExtent([1, Infinity]) .translateExtent([[0, 0], [chart_width, chart_height]]) .extent([[0, 0], [chart_width, chart_height]]) .on("zoom", zoomed); const area1 = d3.area() .curve(d3.curveMonotoneX) .x(d => x(d.data.index)) .y0(d => y(d[0])) .y1(d => y(d[1])); const area2 = d3.area() .curve(d3.curveMonotoneX) .x(d => x2(d.index)) .y0(d => y2(0)) .y1(d => y2(d.a)); svg.append("defs").append("clipPath") .attr("id", "clip") .append("rect") .attr("width", chart_width) .attr("height", chart_height); const focus = svg.append("g") .attr("class", "focus") .attr("transform", `translate(${margin1.left},${margin1.top})`); const context = svg.append("g") .attr("class", "context") .attr("transform", `translate(${margin2.left},${margin2.top})`); svg.append("rect") .attr("class", "zoom") .attr("width", chart_width) .attr("height", chart_height) .attr("cursor", "move") .attr("fill", "none") .attr("pointer-events", "all") .attr("transform", "translate(" + margin1.left + "," + margin1.top + ")") .call(zoom); function brushed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom let s = d3.event.selection || x2.range(); x.domain(s.map(x2.invert), x2); focus.selectAll(".area").attr("d", area1); focus.select(".axis--x").call(xAxis); svg.select(".zoom").call(zoom.transform, d3.zoomIdentity .scale(chart_width / (s[1] - s[0])) .translate(-s[0], 0)); } function zoomed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush let value = []; let t = d3.event.transform; x.domain(t.rescaleX(x2).domain()); value = x.domain(); svg.property("value", value).dispatch("input"); focus.selectAll(".area").attr("d", area1); // focus.select(".demandLine").attr("d", line); focus.select(".axis--x").call(xAxis); context.select(".brush").call(brush.move, x.range().map(t.invertX, t)); } const stacked = Object.assign(d3.stack().keys(projectKeysUpdate)(peaksUpdate), { keys: projectKeysUpdate }); const formatHour = d3.timeFormat("%I %p"); const formatMonth = d3.timeFormat("%B"); const months = _.range(12).map((d, i) => i*24); //convert indices to months xAxis2.tickValues(months).tickFormat(i => formatMonth(peaksUpdate[i].date)); xAxis.tickFormat(i => formatHour(peaksUpdate[i].date)); x.domain(d3.extent(peaksUpdate, function(d) { return d.index; })); x2.domain(d3.extent(peaksUpdate, function(d) { return d.index; })); y.domain([0, 450]).nice(); y2.domain([0, 450]); focus.selectAll("path") .data(stacked) .enter().append("path") .attr("class", "area") .attr("clip-path", "url(#clip)") .attr("fill", (d, i) => pvColor(stacked.keys[i])) .attr("d", area1) focus.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + chart_height + ")") .call(xAxis); focus.append("g") .attr("class", "axis axis--y") .call(yAxis); context.append("path") .datum(peaksUpdate) .attr("class", "area") .attr("fill", "#1776b6") .attr("clip-path", "url(#clip)") .attr("d", area2); context.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + context_height + ")") .call(xAxis2); //this is the value of the previous svg node if (!this) { context.append("g") .attr("class", "brush") .call(brush) .call(brush.move, [0, 150]); } else { let range = d3.select(this).property("value").map(x); context.append("g") .attr("class", "brush") .call(brush) .call(brush.move, range); } return svg.node(); }38:T7b3,function simulate(d, c) { const config = Object.assign({ maxCharge: 2000, pvSize: 800, windSize: 800, scenario: "a", initialCharge: 2000, chargeRate: 333, dischargeRate: 333 }, c) let hours = [...d]; hours.map((dd, i, arr) => { let o = {...dd}; //PV Generation in kWh o.pvGeneration = o.potential * config.pvSize / 1000; //Wind Generation in kWh for 100kwp turbine o.windGeneration = (o.wind * config.windSize) / 100; //Total Renewable Generation in kWh o.totalGeneration = o.pvGeneration + o.windGeneration //send pv to project if (o.totalGeneration >= o[config.scenario]) { o.renewableToProject = o[config.scenario] } else { o.renewableToProject = o.totalGeneration } //update project demand let demand = o[config.scenario] - o.renewableToProject; //get battery charge if (i === 0) { o.batteryCharge = config.initialCharge; } else { o.batteryCharge = arr[i - 1].batteryCharge; } //send unused pv to battery if (o.totalGeneration - o.renewableToProject >= config.chargeRate) { o.renewableToBattery = Math.min(config.chargeRate, config.maxCharge - o.batteryCharge); } else { o.renewableToBattery = Math.min(o.totalGeneration - o.renewableToProject, config.maxCharge - o.batteryCharge); } //update the battery charge o.batteryCharge += o.renewableToBattery; //send remaining charge to grid o.renewableToGrid = Math.max(o.totalGeneration - o.renewableToProject - o.renewableToBattery, 0); //send battery to project o.batteryToProject = Math.min(demand, config.dischargeRate, o.batteryCharge); //update battery charge o.batteryCharge -= o.batteryToProject; //send grid to project if needed o.gridToProject = demand - o.batteryToProject; arr[i] = o; }) return hours; }39: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; }3a: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; }3b:T40b,html``3c:[{"id":"d150de05b07dec4983b10ffabb7b386e5e7b58100c1119d0707da5da39feceb1582e02100a388293e3492a16a0a403391c58193c692453ca8ac2f617d0f2eb34","href":"https://static.observableusercontent.com/files/d150de05b07dec4983b10ffabb7b386e5e7b58100c1119d0707da5da39feceb1582e02100a388293e3492a16a0a403391c58193c692453ca8ac2f617d0f2eb34","name":"renewables_data_update.csv","type":"text/csv","lastModified":1759598532504.333,"size":110657},{"id":"cb1f835655870659df1ed4acb842e07c70d19c144f119181e63ccab5456a4e1acf653a894979957f76cb0bb22234d45496a8e7de008077530f2bf69b710cbe04","href":"https://static.observableusercontent.com/files/cb1f835655870659df1ed4acb842e07c70d19c144f119181e63ccab5456a4e1acf653a894979957f76cb0bb22234d45496a8e7de008077530f2bf69b710cbe04","name":"sankey_data.csv","type":"text/csv","lastModified":1759598532476.509,"size":1132},{"id":"4045b85fb248c92fe97fb003ae9a180fda81a91526dfccbc03176c64815344e897df236907dfcd8f2d9530138b87f8590890b2aab332f2894047d60f4b53aac8","href":"https://static.observableusercontent.com/files/4045b85fb248c92fe97fb003ae9a180fda81a91526dfccbc03176c64815344e897df236907dfcd8f2d9530138b87f8590890b2aab332f2894047d60f4b53aac8","name":"stacked_data2.csv","type":"text/csv","lastModified":1759598532449.039,"size":727},{"id":"d1e5c731dba277b46303b6b926507fa834d335adc2c9c0831aeb393a95fa80e3e48dd83132cc92a7ca5e113f44306f7f54509d2633e8106eeef843c063ca505e","href":"https://static.observableusercontent.com/files/d1e5c731dba277b46303b6b926507fa834d335adc2c9c0831aeb393a95fa80e3e48dd83132cc92a7ca5e113f44306f7f54509d2633e8106eeef843c063ca505e","name":"parametric_data.csv","type":"text/csv","lastModified":1759598532451.255,"size":1396},{"id":"650084d07bd63c44b3a9e64602710e4a7f455a429296f1197ce6274a90f66f985c74910b234bac561d4266f359bf980fd7ff28a8e846cf5c8a6eec16293bdf50","href":"https://static.observableusercontent.com/files/650084d07bd63c44b3a9e64602710e4a7f455a429296f1197ce6274a90f66f985c74910b234bac561d4266f359bf980fd7ff28a8e846cf5c8a6eec16293bdf50","name":"interpolated_data3.csv","type":"text/csv","lastModified":1759598533723.984,"size":6143929},{"id":"d09fdde9f8fc81bb6a782a3727dd96d03fc0daba6c6bc44ff2aacc903212aca52ccb3d45ac2ff1b4c6439b88a1de3d813d090dde2cb29615dd4e9ea0be9f29e4","href":"https://static.observableusercontent.com/files/d09fdde9f8fc81bb6a782a3727dd96d03fc0daba6c6bc44ff2aacc903212aca52ccb3d45ac2ff1b4c6439b88a1de3d813d090dde2cb29615dd4e9ea0be9f29e4","name":"stacked_data.csv","type":"text/csv","lastModified":1759598532467.71,"size":806}] 2e:{"title":"1100 E 5th St","cells":[{"id":0,"value":"md`# 1100 E 5th St`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"viewof date2 = html`March 30, 2020 - Energy Analysis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`\n### Introduction\nIntroba developed a whole building energy model for the proposed 1100 E 5th St building 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. In addition, this study evaluates different HVAC system measures to assess their impact on building energy performance. The objective is to evaluate the building's net zero energy potential and to identify a roadmap to reach net zero.

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

\n### Energy End Use Characterization\nFigure 2 below shows the breakdown in energy by end use for the proposed design with envelope and lighting parameters defined as per the basis of design and HVAC system definitions as per ASHRAE 90.1-2013. Energy sources are aligned on the left side of the graphic, while energy sinks (conduction losses, equipment gains, etc.) are aligned on the right side. The total energy use intensity (EUI) for this configuration is approximately ${formatEUI_SI_IP(101.6)}, with 38% of this attributable to plug loads, followed by 21% to cooling and about 20% to lighting energy. \n\nThe load components on the right show the key drivers of energy use. With a window-to-wall ratio of 70%, solar gains form the largest load component, constituting 38% of the total cooling load. In terms of heating, the majority of the load results from window conduction losses.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$30","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 baseline design.

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

\n### Envelope Sensitivity\nIn addition to overall energy use modeling, parametric analysis was conducted to understand the sensitivity of various envelope characteristics on building energy use. Figure 2 presents these results with the horizontal axes showing incremental changes in the studied parameter, and the vertical axes showing the impact of these changes on building EUI. The line represents the overall trend for each parameter, the base case values are marked by dark blue dots. In accordance with the energy use characterization discussed above, the overall energy use can most benefit from improvements to window SHGC, followed by reduced window areas.

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"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. \n\nTwo HVAC system alternates have also been included in the parallel coordiantes plot. The underfloor air distribution (UFAD) alternate replaces the VAV overhead distribution with a DOAS system and air towers for underfloor distribution and perimeter electric heat. The 'VRF' option incorporates refrigerant heat recovery eliminating the need for chillers and electric reheat. \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof figure3 = html`Figure 3: 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":2202,"value":"md`\n

\n#### Energy Performance Benchmarking\nThe baseline design with all performance parameters defined at ASHRAE 90.1-2013 Appendix G minimum requirements shows an EUI of ${formatEUI_SI_IP(108.0)}. The baseline uses air-cooled chillers, recirculating AHU with energy recovery, and overhead VAV electric resistance reheat coils. Adjusting the envelope and internal loads as per the basis of design brings the EUI to ${formatEUI_SI_IP(101.6)}. This is represented by the 'Prop Env & Lights' case in Figure 4. \n\nThe following load management strategies have been built off of the Prop Env & Lights case to evaluate their impact on the building EUI: \n* Light shelves for higher daylight penetration \n* Operable windows (natural ventilation) \n* Automated blinds for controlling glare and solar gains \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2239,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2261,"value":"viewof figure4 = html`
Figure 4: Comparison of energy use intensities by end-use for different studied scenarios.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"viewof figure5 = html`
Figure 5: Comparison of energy use intensities by end-use for different studied HVAC system alternates.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`\nDetailed model input assumptions are documented [here.](https://www.elementa.nyc/projects/1100-E5/assets/1100 E5 Bldg EM Inputs.pdf)

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"// viewof scenario = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"viewof pvSize2 = {\n return slider({\n min: 0, \n max: 625, \n step: 25, \n value: 439,\n display: v => {\n let el = document.createElement(\"span\")\n let pvArea = formatAREA_SI_IP(_.round(v / (1 * 0.19), 0))\n el.innerHTML = `${d3.format(\",.0f\")(v)} kW_p | PV Area: ${pvArea}`\n return el;\n },\n description: \"Select Photovoltaic Size\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"md`
\nNZE Offset: **${d3.format(\".1%\")(_.sumBy(hoursUpdate, d => d.totalGeneration)/(_.sumBy(hoursUpdate, d => d.a)))}**\n \nDeficit: **${d3.format(\".1%\")((_.sumBy(hoursUpdate, d => d.gridToProject))/(_.sumBy(hoursUpdate, d => d.a)))}**\n \nSurplus: **${d3.format(\".1%\")((hoursUpdate.reduce((acc, d) => { return acc + (d.totalGeneration - d.renewableToProject)}, 0))/(_.sumBy(hoursUpdate, d => d.a)))}**\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"legend2 = {\n \n const key_map = {\n \"gridToProject\": \"Grid to Project\",\n \"renewableToProject\": \"Renewable to Project\"\n }\n \n const svg = d3.select(DOM.svg(960, pvColorUpdate.domain().length * 24 + 15))\n .style(\"font\", \"11px sans-serif\");\n \n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data(pvColor.domain())\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 15})`);\n\n g.append(\"rect\")\n .attr(\"width\", 20)\n .attr(\"height\",20)\n .attr(\"fill\", pvColor);\n\n g.append(\"text\")\n .attr(\"x\", 30)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.35em\")\n .text(d => key_map[d]);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"viewof figure6 = html`

Figure 6: Balance of Energy to Offset Project Demand\n

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

\n### Recommendations and Next Steps\nThe design team should review the envelope performance targets and consider construction details and specifications, and assess the feasibility of incorporating each HVAC system alternate in order to minimize the building EUI.\n\nThe energy model will be updated once the design values including envelope parameters, loads and other variables have been finalized. \n\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"pvColor = d3.scaleOrdinal()\n .range([\"#1776b6\", \"#6fccd8\", \"#d7ddda\"])\n .domain(projectKeys)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1910,"value":"pvColorUpdate = d3.scaleOrdinal()\n .range([\"#1776b6\", \"#6fccd8\"])\n .domain(projectKeysUpdate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"projectKeys = [\"gridToProject\", \"renewableToProject\", \"batteryToProject\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1817,"value":"projectKeysUpdate = [\"gridToProject\", \"renewableToProject\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1715,"value":"peaksUpdate = {\n const nested = d3.nest()\n .key(d => d.month)\n .entries(hoursUpdate)\n .map((d) => {\n let month = +d.key;\n let totals = groupSum(d.values, d => d.day, d => d.a);\n let target = _.sumBy(Array.from(totals), d => d[1]) / totals.size;\n let closest = Array.from(totals).reduce(function(prev, curr) {\n return (Math.abs(curr[1] - target) < Math.abs(prev[1] - target) ? curr : prev);\n })[0];\n\n let day = closest;\n \n let date = new Date(2020, month, day);\n \n //march was selecting a weekend day - this bit just selects a different day for the month of march...\n // if (month == 3) {\n // Math.max(day += 2, 30);\n // }\n \n let values = hoursUpdate.filter(dd => (dd.month === month && dd.day === day));\n\n return {month: month, day: day, values: values};\n\n });\n\n\n let peaks = [].concat(...nested.map(d => d.values));\n \n \n peaks.map((d, i, arr) => {\n arr[i] = {...d, index: i};\n });\n \n return peaks;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1740,"value":"pvDataUpdate = {\n let data = await FileAttachment(\"renewables_data_update.csv\").csv({typed:true});\n\n const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]\n const times = [];\n \n const timeParse = (m, d, h) => {\n return d3.timeParse(\"%m %d %H\")(`${m.toString().padStart(2, \"0\")} ${d.toString().padStart(2, \"0\")} ${h.toString().padStart(2, \"0\")}`)\n }\n \n for (const m in _.range(12)) {\n for (const d in _.range(months[m])) {\n for (const h in _.range(24)) {\n times.push({month: +m + 1, day: +d + 1, hour: +h + 1, date: timeParse(+m + 1, +d + 1, +h + 1)});\n }\n }\n }\n \n return data.map((d, i, arr) => ({...d, ...times[i]}));\n\n } ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1697,"value":"hoursUpdate = simulateUpdate(pvDataUpdate, {\n scenario: renewables_data_update.a,\n pvSize2: pvSize2,\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"renewables_data_update = {\n let renewables = (await FileAttachment(\"renewables_data_update.csv\").csv({typed:true})); \n \n // const columns = renewables.columns;\n // const data = renewables;\n // data.columns = columns;\n\n return renewables;\n \n}","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 \"Plug Loads\":\"#dddddd\",\n \"Kitchen Loads\":\"#dddddd\",\n \"Other Gains\":\"#a17eb9\",\n \"Passive Solar Gains\":\"#a17eb9\",\n \"Lighting Gains\":\"#a17eb9\",\n \"Occupant Gains\":\"#a17eb9\",\n \"Infiltration Losses\":\"#a17eb9\",\n \"Window Losses\":\"#a17eb9\",\n \"Internal Equipment Gains\":\"#a17eb9\",\n \"-\":\"#a17eb9\",\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 \"OA Cooling\":\"#6aadd6\",\n \"Occupants\":\"#6aadd6\",\n \"Cooling Load\":\"#1f77b4\",\n \"Cooling System\":\"#1f77b4\",\n \"Heating Load\":\"#e55725\",\n \"Heating System\":\"#e55725\",\n };\n\n return name => lookup[name];\n}","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 === \"SI\") {\n return `${_.round(d, 1)} kWh/m²/yr`;\n }\n else {\n return `${_.round(d * 3.412 / 10.76, 1)} kBtu/ft²/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":22,"value":"d3 = require('d3@5.16.0/dist/d3.min.js','d3-sankey@0.12.1');","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 //?version=${Math.floor(Math.random() * 100)} - add this after the file name when you want to update the file\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":495,"value":"stackedColor = {\n const lookup = {\n \"DOE Ref Bldg\":\"#505238\",\n \"Lights\":\"#d6d231\",\n \"Plug Loads\":\"#dddddd\",\n \"Heating\":\"#d52928\",\n \"DHW\":\"#e55725\",\n \"Cooling\":\"#1dbfcf\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"Ext Usage\":\"#606060\",\n \"PV Budget\":\"#708238\"\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"stacked = {\n let data = (await FileAttachment(\"stacked_data.csv\").csv({typed:true}));\n //?version=${Math.floor(Math.random() * 100)} - add this after the file name when you want to update the file\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 \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":2236,"value":"stacked2 = {\n let data = (await FileAttachment(\"stacked_data2.csv\").csv({typed:true}));\n //?version=${Math.floor(Math.random() * 100)} - add this after the file name when you want to update the file\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 \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":31,"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":36,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 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(\"parametric_data.csv\").csv({typed:true})); \n //?version=${Math.floor(Math.random() * 100)} - add this to the file name when you want to update the file\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_data3.csv\").csv({typed:true})); \n \n const columns = parametrics.columns;\n let data = parametrics.map(d => ({...d, EUI: eui(d.EUI)}));\n data.columns = columns;\n \n return data;\n \n// data = data.map(d => {\n// let o = {...d, \"Roof R\": d[\"Roof R \"]};\n// delete o[\"Roof R \"];\n// return o;\n// });\n \n// data.columns = columns;\n// return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1692,"value":"function simulateUpdate(d, c) {\n \n const config = Object.assign({\n pvSize2: 800,\n scenario: renewables_data_update.a\n }, c)\n \n \n let hours = [...d];\n hours.map((dd, i, arr) => {\n \n\n let o = {...dd}; \n \n //PV Generation in kWh\n o.pvGeneration = o.potential * config.pvSize2 / 1000;\n \n \n //Total Renewable Generation in kWh\n o.totalGeneration = o.pvGeneration\n \n //send pv to project\n if (o.totalGeneration >= o.a) {\n o.renewableToProject = o.a\n }\n else {\n o.renewableToProject = o.totalGeneration\n }\n \n //update project demand\n let demand = o.a - o.renewableToProject; \n \n \n //send remaining charge to grid\n o.renewableToGrid = Math.max(o.totalGeneration - o.renewableToProject, 0);\n \n //send grid to project if needed\n o.gridToProject = demand;\n arr[i] = o;\n \n })\n //console.log(hours)\n return hours;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"d3format = require('d3-format@1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"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":547,"value":"$3a","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":"$3b","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}