30:T4ba,md`

### Energy End Use Characterization Figure 2 below shows the breakdown in energy by end use for the building. ### TO BE EDITED

`31: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(); }32:T4b0,md`

### Envelope Sensitivity Parametric analysis will be conducted to understand the sensitivity of various envelope characteristics on building energy use. Figure 3 below 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 or building CEDI (selectable from the dropdown). The line represents the overall trend for each parameter, the baseline values are marked by dark blue dots. ### TO BE EDITED

`33:T2468,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 -S": { newName: "Window-Wall Ratio - South Facade", }, "WWR- N/E/W": { newName: "Window-Wall Ratio - North/East/West Facade", }, // "Infiltration": { // newName: "Infiltration cfm/ft²"}, // "Skylight U": { // convert: d => 1/d, // ticks: d => d3.format(".2f")(1/d)} }, units: unitSelection.unit, y: euiSwitch.y } let eui_convert; if (config.y === "PeakCooling") { eui_convert = d => d; } else { eui_convert = d => (unitSelection.unit === "IP") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 2); } const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("border-radius", "3px") .style("pointer-events", "none") .style("display", "none") .style("position", "absolute") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "regular") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "white") .style("box-shadow", "0 0 10px rgba(0,0,0,.25)") .style("color", "#333333") .style("line-height", "1.6") .style("pointer-events", "none"); const tipContent = (variable, p_value, EUI) => { let val = formatEUI_SI_IP(EUI); if (config.y === "PeakCooling"){ val = `${_.round(EUI, 1)} Tons`; } return `${variable}: ${p_value}
${config.y === "PeakCooling" ? "Tons": config.y}: ${val}`; } //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_convert(p[config.y]))).flat())) .range([config.cell.height, 0]).nice(); //create a map for all the x scales const x = new Map( Array.from( data.map(d => d.variable), key => [ key, d3.scaleLinear(d3.extent(data.filter(d => d.variable === key)[0].data.map(d => d[key])), [0, config.cell.width]) ] ) ); //create a group for each chart const chart = svg.selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => { //position the group in its appropriate row and col const h = (i % config.cols) * (config.cell.width + config.cell.padding) + config.margin.left; const v = _.floor(i / config.cols) * (config.cell.height + config.margin.bottom + config.cell.padding) + config.margin.top; return `translate(${h},${v})` }); //run through each group chart.each(function(d, i) { //rename the variable if needed let name = d.variable; if (name in config.format) { if ("newName" in config.format[name]){ name = config.format[name].newName; } } //if there are format specifiers, use them, otherwise just use the default let xa = d3.axisBottom(x.get(d.variable)).ticks(6); if (d.variable in config.format) { if ("ticks" in config.format[d.variable]){ xa.tickFormat(config.format[d.variable].ticks); } } const xAxis = g => g .attr("transform", `translate(0,${config.cell.height})`) .call(xa) .call(g => g.select(".domain").remove()); const yAxis = g => { if (i % config.cols === 0) { g.call(d3.axisLeft(y).ticks(6)) .call(g => g.select(".domain").remove()); } } let y_label; if (config.y === "PeakCooling") { y_label = "Peak Cooling Tons"; } else { if (config.units === "IP") { y_label = `${config.y} kBTU/ft²/yr`; } else { y_label = `${config.y} kWh/m²/yr`; } } //put the y axis label in the top left corner of the first row/col. if (i%3 === 0) { d3.select(this).append("g") .attr("transform", "translate(15, 20)") .append("text") .attr("font-size", 10) .attr("text-anchor", "start") .attr("opacity",1) .html(y_label); } //general pattern for generating the interpolation line const line = d3.line() .x(dd => x.get(d.variable)(dd[d.variable])) .y(dd => y(eui_convert(dd[config.y]))) .curve(d3.curveCardinal.tension(0)); //horizontal grid lines d3.select(this).selectAll(".grid .horizontal") .data(_.range(8).slice(1).map(d => d * config.cell.height / 8)) .join("line") .attr("class", "grid") .attr("x1", (i % config.cols != 0) ? -config.cell.padding : 0) .attr("y1", d => d) .attr("x2", config.cell.width) .attr("y2", d => d); //vertical grid lines d3.select(this).selectAll(".grid .vertical") .data(_.range(8).slice(1).map(d => d * config.cell.width / 8)) .join("line") .attr("class", "grid") .attr("x1", d => d) .attr("y1", 0) .attr("x2", d => d) .attr("y2", config.cell.height); d3.select(this).append("g").call(xAxis); d3.select(this).append("g").call(yAxis); d3.select(this).append("rect") .attr("class", "frame") .attr("x", 0) .attr("y", 0) .attr("width", config.cell.width) .attr("height", config.cell.height); //add the variable labels d3.select(this).append("text") .attr("x", 0) .attr("y", -15) .attr("text-anchor", "start") .attr("font-size", 12) .style("font-family", "Open Sans") .html(name); d3.select(this).selectAll(".recommended") .data(d.data.filter(dd => dd.Recommended === "yes")) .join("circle") .attr("class", "recommended") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui_convert(dd[config.y])); }) .attr("r",10) .attr("fill", "#b4d6e8") .attr("opacity", 0.8); d3.select(this).append("path") .datum(d.data) .attr("class", "interpolation") .attr("fill", "none") .attr("stroke", "#1f77b4") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); d3.select(this).selectAll("points") .data(d.data) .join("circle") .attr("class", "points") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui_convert(dd[config.y])); }) .attr("r",3) .attr("display", dd => { if ((d.variable === "EPD" || d.variable === "LPD") && dd[d.variable] === 0.5) { return "none"; } else if (d.variable === "Glass SHGC" && dd[d.variable] === 0.3) { return "none"; } else { return null; } }) .attr("stroke", "#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_convert(dd[config.y])); }) .on("mouseover", dd => { tooltip.style("display", null); let data = dd[d.variable]; if (d.variable in config.format) { if ("ticks" in config.format[d.variable]){ data = config.format[d.variable].ticks(data); } } tooltip.html(tipContent(d.variable, data ,dd[config.y])) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", d => { tooltip.style("display", "none"); }); }); return svg.node(); }34:T1dda,parcoords = { const config = { height: 500, width: 960, margin: {top: 60, right: 10, bottom: 10, left: 60}, format: { "Wall R": { newName: "Wall R", ticks: d3.format(".0f"), selection: [375,500]}, "Roof R": { newName: "Roof R", ticks: d3.format(".0f"), selection: [375,500]}, "Window U": { newName: "Window U", ticks: d3.format(".2f"), selection: [0, 75]}, "SHGC S": { newName: "SHGC-S", ticks: d3.format(".2f"), selection: [120, 215]}, "SHGC N/E/W": { newName: "SHGC- N/E?W", ticks: d3.format(".2f"), selection: [120, 215]}, "WWR -S": { newName: "WWR-South (%)", ticks: d3.format(".0f"), selection: [375,500]}, "WWR- N/E/W": { newName: "WWR-N/E/W(%) ", ticks: d3.format(".0f"), selection: [120, 215]}, // "Infiltration": { // newName: "Infiltration (CFM/ft²)", // selection: [0,75], // ticks: d3.format(".3f")}, "EUI": { newName: `${unitSelection.unit === "IP" ? " EUI kBTU/ft²/yr": " EUI kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f")}, "Shade Cutoff": { newName: "Shade -", selection: [200, 350]}, "CEDI": { newName: `${unitSelection.unit === "IP" ? " CEDI kBTU/ft²/yr": " CEDI 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).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) { 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 = "#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; }35:T5de,md`
#### Energy Performance Benchmarking As discussed in the previous sections, the proposed design with envelope and lighting parameters defined at ASHRAE 90.1-2013 Appendix G minimum requirements (ASHRAE) shows an EUI of ${formatEUI_SI_IP(116.6)}. This is reduced to ${formatEUI_SI_IP(96.2)} when the performance parameters are changed to matching the costing report (COST). Reducing lighting densities (LPD) by atleast 25% can bring the EUI down to approximately ${formatEUI_SI_IP(88.5)}, and below the PV budget. Each of these scenarios assume an ground source heat pump system with an electric backup boiler to balance the loads and a centralized ERV system to provide ventilation air. Three other HVAC concepts are being studied to reduce the energy consumption further including - adding earth air tubes for ventilation air (HVAC-1), changing ground source system to an air-to- water VRF system (HVAC-2) and lastly replacing the entire system with a heating only biomass boiler (HVAC-3). The concept 3 has the lowest electric EUI since the heating is considered to be generated primarily from burning wood. However, this option will be more carbon intensive compared to other options. The energy use intensity for the building is highly sensitive to the operation of the building including the occupancy profiles and equipment usage. A detailed energy model input assumption can be found [here.](https://www.elementa.nyc/projects/ksr/assets/200406_EnergyModelAssumptions.pdf)

`36:Tce2,stackedBar = { const config = { height: 600, 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(); }37:T47d,md`

### Renewable Energy Generation and Battery Storage For the NZE study, an onsite renewable energy generationhas been developed that takes the comprehensive hourly electric load profiles for optimizing potential renewable energy. The graph below plots the balance of energy needed from renewables and the grid to meet the project demand. This is based on comprehensive solar studies, selected renewable energy and the hourly project electricity load profile of the scenario "Reduced Lighting". 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 the 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. This surplus generation cannot be utilized either by the building, because the demand is low.

`38:T13c8,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, 30]).nice(); y2.domain([0, 30]); 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(); }39:T446,color = { const lookup = { "Electricity":"#d6d231", "DHW":"#d52928", "Exterior Lights": "#808080", "Heating Energy":"#d52928", "Cooling Energy":"#1dbfcf", "Lights":"#d6d231", "Fans":"#bfbfbf", "Equipment":"#dddddd", "Exterior Usage":"#dddddd", "Pumps":"#dddddd", "Other Gains":"#a17eb9", "Passive Solar Gains":"#a17eb9", "Lights Gains":"#a17eb9", "Internal Equipment Gains":"#a17eb9", "Occupant Gains":"#a17eb9", "Infiltration Losses":"#a17eb9", "Window Losses":"#a17eb9", "Internal Gains":"#a17eb9", "OA Economizer":"#a17eb9", "Walls":"#f7aa6e", "Roofs":"#f7aa6e", "Floor on Grade":"#f7aa6e", "Infiltration":"#f7aa6e", "Windows":"#f7aa6e", "OA Heating":"#f7aa6e", "Equipment Gains":"#6aadd6", "OA Cooling":"#a17eb9", "Conduction":"#6aadd6", "Lighting":"#6aadd6", "Solar":"#6aadd6", "Occupants":"#6aadd6", "Cooling Load":"#1f77b4", "Cooling System":"#1f77b4", "Heating Load":"#e55725", "Heating System":"#e55725", }; return name => lookup[name]; }3a: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; }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:T40b,html``3e:[{"id":"88c0e8457480493684955c5ed4da5803a8c2edbdcc1b9d83f4e1360389d8ab617d4260b6b4d546bfc37c16046a974510b7407fed4fcd7aeebfb4100821cb8a45","href":"https://static.observableusercontent.com/files/88c0e8457480493684955c5ed4da5803a8c2edbdcc1b9d83f4e1360389d8ab617d4260b6b4d546bfc37c16046a974510b7407fed4fcd7aeebfb4100821cb8a45","name":"sankey_data.csv","type":"text/csv","lastModified":1759769035043.451,"size":1446},{"id":"b5ce0e24eadab2c24e69fee785eaa95523603c9e611bbd5051befc1693c9bac0377bebfd1b02ae966478cedfa71483463d5a2cf6726c368f153aa812735fdf16","href":"https://static.observableusercontent.com/files/b5ce0e24eadab2c24e69fee785eaa95523603c9e611bbd5051befc1693c9bac0377bebfd1b02ae966478cedfa71483463d5a2cf6726c368f153aa812735fdf16","name":"renewables_data_update.csv","type":"text/csv","lastModified":1759769073722.911,"size":110208},{"id":"ed995521d6a4d2a2703a8058e390954054f4e14de9363750eb8d09db2ca1d4d5c1572e4464a23eab5e1d795f412ef0fcec6253f03154cb71a6e296dc5a303f51","href":"https://static.observableusercontent.com/files/ed995521d6a4d2a2703a8058e390954054f4e14de9363750eb8d09db2ca1d4d5c1572e4464a23eab5e1d795f412ef0fcec6253f03154cb71a6e296dc5a303f51","name":"renewables_data.csv","type":"text/csv","lastModified":1759769104886.207,"size":110720},{"id":"3d09c72727ce955a7da2dd329ba1661add85ed18bf3aafc311aa6cf4480743b38c261c9c5cf32c748270565583e24ab3930a5f9c43c7dfec4598c76157d4642c","href":"https://static.observableusercontent.com/files/3d09c72727ce955a7da2dd329ba1661add85ed18bf3aafc311aa6cf4480743b38c261c9c5cf32c748270565583e24ab3930a5f9c43c7dfec4598c76157d4642c","name":"renewables_battery.csv","type":"text/csv","lastModified":1759769133392.382,"size":435095},{"id":"4f63e19e68cc24164158960da1594bab2ca8454fc7be1f401f00851e8517cbbde78e864874bdd06058202ac7a0cd9c50c99de4220386177930954a2b50f040ce","href":"https://static.observableusercontent.com/files/4f63e19e68cc24164158960da1594bab2ca8454fc7be1f401f00851e8517cbbde78e864874bdd06058202ac7a0cd9c50c99de4220386177930954a2b50f040ce","name":"stacked_data.csv","type":"text/csv","lastModified":1759769157281.613,"size":351},{"id":"d85f7afcb5851a9609045a8d7d005d768f8a29f25499ce0b09439b15dc774dbbd09c360c12f988cbc19608caa1c1ad6102136a5d5e60244c2d940e15eb90e13c","href":"https://static.observableusercontent.com/files/d85f7afcb5851a9609045a8d7d005d768f8a29f25499ce0b09439b15dc774dbbd09c360c12f988cbc19608caa1c1ad6102136a5d5e60244c2d940e15eb90e13c","name":"parametric_data.csv","type":"text/csv","lastModified":1759769196463.383,"size":2201},{"id":"097b133f64162cba8e0e2e8e72a7f2c38c79ac30b8f1453165b73e562509b321ab769a824e4414466c39e24aa2e2ea091d66e7a2ee740999dc21035800151ad8","href":"https://static.observableusercontent.com/files/097b133f64162cba8e0e2e8e72a7f2c38c79ac30b8f1453165b73e562509b321ab769a824e4414466c39e24aa2e2ea091d66e7a2ee740999dc21035800151ad8","name":"interpolated_data.csv","type":"text/csv","lastModified":1759769254346.351,"size":4114429},{"id":"e7232d25c4904e8ea40b0aa5b449defb14a51aefea430d0139f058613c636c63db9b2367245ce87abddc2b3e30d9d9a5cdafe04f016c6f30213642213d264b76","href":"https://static.observableusercontent.com/files/e7232d25c4904e8ea40b0aa5b449defb14a51aefea430d0139f058613c636c63db9b2367245ce87abddc2b3e30d9d9a5cdafe04f016c6f30213642213d264b76","name":"Render.jpg","type":"image/jpeg","lastModified":1759769323349.978,"size":363139}] 2e:{"title":"CCSF","cells":[{"id":0,"value":"md`# CCSF`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"model = {\n const img = await FileAttachment(\"Render.jpg\").image();\n img.style.width = \"720px\";\n return img;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"viewof figure1 = html`Figure 1:Representative Building Rendering.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2293,"value":"\nviewof date2 = html`July 20, 2020`","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`\n### Introduction\nIntroba developed a whole building energy model for the proposed CCSF Building in San Francisco. 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 will evaluate HVAC systems alternates to assess their impact on building energy performance. Figure 1 presents a graphic representation of the modeled building.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2036,"value":"viewof figure2 = html`Figure2: Building energy use characterization showing load components and energy end-uses for the proposed design..

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2103,"value":"viewof euiSwitch = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$33","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 figure3 = html`Figure 3: Sensitivity of individual building performance parameters on building EUI.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2032,"value":"// md`\n//
\n// ### Shading Analysis\n// To understand the impact of incident solar radiation and to assist the design of horizontal shades, facade studies will be performed.

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2023,"value":"// md` $\"Model$

`","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 4 below 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.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"parLegend = {\n \n const svg = d3.select(DOM.svg(960, 60))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\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 + 30})`);\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":154,"value":"viewof figure4 = html`Figure 4: 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":488,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"$36","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 scenarios.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2308,"value":"md`\n

\n#### Solar Energy Generation\nTo achieve a net zero energy building, solar PV panels will be installed on the sloped roofs shown in dotted in the figure below. The slopped roofs recieve on an average about 1550 kWh/m2 of inicident solar radiation. In comparison, the flat roofs achieve only about 1200-1300 kWh/m2. There is approx. ${formatAREA_SI_IP(175)} and ${formatAREA_SI_IP(116)} of area on the sloped roof considering a 75% utilization, which can produce approximately 76,000 kWh of electricity annually through a 55 kW solar system. This is the PV budget for the project translating into an EUI of ${formatEUI_SI_IP(95.8)}.

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

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`\nDetailed model input assumptions are documented [here.](https://www.elementa.nyc/projects/fnti/assets/190924_FNTI_EM_Inputs.pdf)

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2354,"value":"viewof pvSize2 = {\n return slider({\n min: 0, \n max: 100, \n step: 1, \n value: 0,\n display: v => {\n let el = document.createElement(\"span\")\n let pvArea = formatAREA_SI_IP(_.round(v / (1 * 0.19*0.75), 0))\n el.innerHTML = `${d3.format(\",.0f\")(v)} kW_p (75% Area Utilization) | PV Area: ${pvArea}`\n return el;\n },\n description: \"Select Photovoltaic Size\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2352,"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":2350,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1861,"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":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(2018, 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":563,"value":"pvData = {\n let data = await FileAttachment(\"renewables_battery.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, date: timeParse(+m + 1, +d + 1, +h)});\n }\n }\n }\n \n return data.map((d, i, arr) => ({...d, ...times[i]}));\n\n } ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1740,"value":"pvDataUpdate = {\n let data = await FileAttachment(\"renewables_data.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, date: timeParse(+m + 1, +d + 1, +h)});\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":"$39","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":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":495,"value":"stackedColor = {\n const lookup = {\n \"PV Budget\":\"#708238\",\n \"Lights\":\"#d6d231\",\n \"Plug Loads\":\"#dddddd\",\n \"Heating\":\"#d52928\",\n \"DHW\":\"#e55725\",\n \"Cooling\":\"#1dbfcf\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"Proposed System\":\"#EEEEEE\",\n \"Ext Lights\": \"#808080\",\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 \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 //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),CEDI: eui(d.CEDI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"$3a","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 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 \n return hours;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"d3 = require('d3@5.9.2','d3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":2086,"value":"d3format = d3.format","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$3b","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":"$3c","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":"$3d","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}