31:T69c,viewof zoneimg = { const images = new Map([ ["Conditioning Systems", FileAttachment("9_ZoneDiagrams_190205_Conditioning_Systems-01.jpg").url()], ["Program", FileAttachment("ZoneDiagrams_190205_Program-01.jpg").url()], ["Envelope", FileAttachment("00_ZoneDiagrams_190205_Envelope-01.jpg").url()], ["Bedrooms", FileAttachment("0_ZoneDiagrams_190205_Bedroom-01.jpg").url()], ["Cafe and Dining", FileAttachment("1_ZoneDiagrams_190205_CafeDining-01.jpg").url()], ["Circulation", FileAttachment("2_ZoneDiagrams_190205_Circulation-01.jpg").url()], ["Fitness", FileAttachment("3_ZoneDiagrams_190205_Fitness-01.jpg").url()], ["Food Prep", FileAttachment("4_ZoneDiagrams_190205_FoodPrep-01.jpg").url()], ["Student Activity", FileAttachment("5_ZoneDiagrams_190205_LibraryStudyLounge-01.jpg").url()], ["Back of House", FileAttachment("6_ZoneDiagrams_190205_BOH-01.jpg").url()], ["Office", FileAttachment("7_ZoneDiagrams_190205_Office-01.jpg").url()], ["Restrooms", FileAttachment("8_ZoneDiagrams_190205_Restrooms-01.jpg").url()], ]); const keys = [...images.keys()]; const select = html``; // Since FileAttachment().url() returns a promise, resolve all URLs const urls = await Promise.all(images.values()); const urlMap = new Map(keys.map((k, i) => [k, urls[i]])); // Store the URL map on the element for downstream use select.urlMap = urlMap; Object.defineProperty(select, "value", { get() { return urlMap.get(this.options[this.selectedIndex].value); }, set(v) {} }); return select; }32:Tbf3,calibration = { const chartHeight = height - 150; const svg = d3.select(DOM.svg(width, chartHeight)); //combine monthly data set with parametrics let map = new Map(); for (const [key, values] of Object.entries(monthly)) { //just grab the first default run for walls const n = parametricsMonthly.filter(d => d.variable === "Wall R")[0].sensitivity[0]; map.set(key, values.map((d, i) => ({...d, simulated: n[key][i]})) ); } const data = Array.from(map).reduce((data, [key, value]) => { data[key] = value; return data; }, {}); console.log(data); const margin = {top: 20, right: 30, bottom: 30, left: 35}; const keys = d3.keys(data); const colors = {steam: "#d52928", chw: "#1dbfcf", electricity: "#d6d231"}; const maxY = d3.max(d3.keys(data).map(utility => d3.max(data[utility].map(month => { return d3.max(d3.keys(month).filter(key => key != "date").map(key => units(month[key])/1000)); })))); const chart = svg.selectAll(".chart") .data(keys) .enter().append("g") .attr("class", "chart") .attr("transform", (d, i) => `translate(${i * width/keys.length + i*10}, 0)`); chart.each(function(d, i) { const x = d3.scaleTime() .domain(d3.extent(data[d], dd => dd.date)) .range([margin.left, width/keys.length - margin.right]); const y = d3.scaleLinear() .domain([0, maxY]) .range([chartHeight - margin.bottom, margin.top]) .nice(); const xAxis = g => g .attr("transform", `translate(0,${chartHeight - margin.bottom})`) .call(d3.axisBottom(x).ticks(d3.timeMonth.every(2)).tickFormat(d3.timeFormat("%b")).tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(d3.format("~s"))) .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(`${d.toUpperCase()} ${(unit === "IP") ? "mmBTU": "MWh"}`)); d3.select(this).append("g").call(xAxis); d3.select(this).append("g").call(yAxis); const lineM = d3.line() .x(dd => x(dd.date)) .y(dd => y(units(dd[year])/1000)); const lineS = d3.line() .x(dd => x(dd.date)) .y(dd => y(units(dd.simulated)/1000)); d3.select(this).append("path") .datum(data[d]) .attr("class", d) .attr("fill", "none") .style("stroke-dasharray", ("2, 4")) .attr("stroke", colors[d]) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", lineM); d3.select(this).append("path") .datum(data[d]) .attr("class", d) .attr("fill", "none") .attr("stroke", colors[d]) .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", lineS); }); return svg.node(); } 33:Tc9e,char = { const svg = d3.select(DOM.svg(width, height)) .style("margin-top", "30px"); const graph = sankey(loads); 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("stroke", "#000") .append("title") .html(d => `${d.name}\n${formatEUI(d.value)}`); node.append("text") .style("font", "10px sans-serif") .attr("x", d => d.x0 < 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 < width / 2 ? "start" : "end") .attr('font-size', 10) .text(d => d.name); node.attr('cursor', 'move') .call(d3.drag() .on('start', dragStart) .on('drag', dragMove) .on('end', dragEnd)); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(graph.links) .enter().append("g") .style("mix-blend-mode", "multiply"); //apply gradients based on input and output const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); link.append("path") .attr("class", "link") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("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${formatEUI(d.value)}`); 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 > width) { d.x0 = width - nodeWidth; d.x1 = width; } if (d.y0 < 0) { d.y0 = 0; d.y1 = d.__y1 - d.__y0; } if (d.y1 > height) { d.y0 = height - (d.__y1 - d.__y0); d.y1 = height; } return `translate(${d.x0}, ${d.y0})`; }); sankey.update(graph); link.selectAll(".link").attr('d', d3.sankeyLinkHorizontal()); } function dragEnd(d) { delete d.__x; delete d.__y; delete d.__x0; delete d.__x1; delete d.__y0; delete d.__y1; } return svg.node(); }34:T1b5a,chart = { const newHeight = height + 50 const svg = d3.select(DOM.svg(width, newHeight)) .property("value", []); const sort = (selections.sorted === "frequency" ? true: false); const data = sort ? hourly.sort((a, b) => b[selections.type] - a[selections.type]) : hourly.sort((a, b) => b.date - a.date); let areaColor = "#000000"; switch (selections.type) { case "heating": areaColor = "#d52928"; break; case "cooling": areaColor = "#1dbfcf"; break; default: areaColor = "#000000"; } let tempData = data; if (sort) { tempData = data.filter(d => d[selections.type] > 0); } const percentage = d => d3.format(".0%")((+d)/8760); const margin1 = {top: 40, right: 25, bottom: 110, left: 40}; const margin2 = {top: 470, right: 25, bottom: 30, left: 40}; const chartWidth = width - margin1.left - margin1.right; const chartHeight = newHeight - margin1.top - margin1.bottom; const contextHeight = newHeight - margin2.top - margin2.bottom; let x = d3.scaleTime().range([0, chartWidth]); let x2 = d3.scaleTime().range([0, chartWidth]); const y = d3.scaleLinear().range([chartHeight, 0]); const y2 = d3.scaleLinear().range([contextHeight, 0]); const y3 = d3.scaleLinear().range([chartHeight, 0]); if (sort) { x = d3.scaleLinear().range([0, chartWidth]); x2 = d3.scaleLinear().range([0, chartWidth]); } const xAxis = d3.axisBottom(x); const xAxis2 = d3.axisBottom(x2); if (sort) { xAxis.tickFormat(percentage); xAxis2.tickFormat(percentage); } 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((unit === "IP") ? "kBTU": "kW")); const yAxis2 = g => g .call(d3.axisRight(y3)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", -3) .attr("text-anchor", "end") .attr("font-weight", "bold") .html((unit === "IP") ? "°F": "°C")); const brush = d3.brushX() .extent([[0, 0], [chartWidth, contextHeight]]) .on("brush end", brushed); const zoom = d3.zoom() .scaleExtent([1, Infinity]) .translateExtent([[0, 0], [chartWidth, chartHeight]]) .extent([[0, 0], [chartWidth, chartHeight]]) .on("zoom", zoomed); const area1 = d3.area() // .x(d => x(d.data.date)) .curve(d3.curveMonotoneX) .x((d, i) => sort ? x(i) : x(d.date)) .y0(d => y(0)) .y1(d => y(units(d[selections.type]))); const area2 = d3.area() // .x(d => x2(d.date)) .curve(d3.curveMonotoneX) .x((d, i) => sort ? x(i) : x(d.date)) .y0(d => y2(0)) .y1(d => y2(units(d[selections.type]))); const line = d3.line() .x((d, i) => sort ? x(i) : x(d.date)) .y(d => { if (unit === "IP") { return y3(d.temperature * 1.8 + 32); } else { return y3(d.temperature); } }); svg.append("defs").append("clipPath") .attr("id", "clip") .append("rect") .attr("width", chartWidth) .attr("height", chartHeight); 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", chartWidth) .attr("height", chartHeight) .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(".line").attr("d", line); focus.select(".axis--x").call(xAxis); svg.select(".zoom").call(zoom.transform, d3.zoomIdentity .scale(chartWidth / (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.range().map(t.invertX, t); svg.property("value", value).dispatch("input"); focus.selectAll(".area").attr("d", area1); focus.select(".line").attr("d", line); focus.select(".axis--x").call(xAxis); context.select(".brush").call(brush.move, x.range().map(t.invertX, t)); } x.domain(d3.extent(data, function(d, i) { return sort ? i : d.date; })); x2.domain(d3.extent(data, function(d, i) { return sort ? i : d.date; })); y.domain([0, d3.max(data.map(d => units(d[selections.type])))]).nice(); y2.domain([0, d3.max(data.map(d => units(d[selections.type])))]); if (unit === "IP") { y3.domain([d3.min(data.map(d => d.temperature * 1.8 + 32)), d3.max(data.map(d => d.temperature * 1.8 + 32))]).nice(); } else { y3.domain([d3.min(data.map(d => d.temperature)), d3.max(data.map(d => d.temperature))]).nice(); } focus.append("path") .datum(data) .attr("class", "area") .attr("clip-path", "url(#clip)") .attr("fill", areaColor) .attr("opacity", 0.8) .attr("d", area1); focus.append("path") .datum(tempData) .attr("class", "line") .attr("fill", "none") .attr("stroke", "#f7aa6e")//"#abb1b2" .attr("stroke-opacity", 0.7) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("clip-path", "url(#clip)") .style("mix-blend-mode", "multiply") .attr("d", line); focus.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + chartHeight + ")") .call(xAxis); focus.append("g") .attr("class", "axis axis--y") .call(yAxis); focus.append("g") .attr("class", "axis axis--y") .attr("transform", "translate(" + chartWidth + ",0)") .call(yAxis2); context.append("path") .datum(data) .attr("class", "area") .attr("fill", areaColor) .attr("opacity", 0.8) .attr("clip-path", "url(#clip)") .attr("d", area2); context.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + contextHeight + ")") .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, 390]); } else { let range = d3.select(this).property("value"); context.append("g") .attr("class", "brush") .call(brush) .call(brush.move, range); } return svg.node(); }35:T410,hourlyLegend = { let areaColor = "#000000"; switch (selections.type) { case "heating": areaColor = "#d52928"; break; case "cooling": areaColor = "#1dbfcf"; break; default: areaColor = "#000000"; } const svg = d3.select(DOM.svg(960, 40)) .style("font", "11px sans-serif") .style("margin-bottom", "15px"); const g = svg.append("g") .selectAll("g") .data(["Outside Air Drybulb Temperature", `Hourly ${selections.type.charAt(0).toUpperCase() + selections.type.substr(1)} Load Data`]) .enter().append("g") .attr("transform", (d, i) => `translate(${40}, ${i*24 + 10})`); g.append("line") .attr("x1", 0) .attr("x2", 20) .attr("y1", 0) .attr("y2", 0) .attr("stroke", d => d === "Outside Air Drybulb Temperature"? "#f7aa6e": areaColor) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 3) g.append("text") .attr("x", 30) .attr("y", 0) .attr("dy", "0.35em") .text(d => d); return svg.node(); }36:T1048,sensitivies = { const cell = {height: 250, padding:40}; const margin = {top: 60, right:10, bottom: 30, left: 35}; const data = parametricsMonthly.map(d => { let sensitivity = d.sensitivity.map(dd => ({...dd, "Window U": 1/dd["Window U"]})) return {variable: d.variable, sensitivity: sensitivity}; }) cell.width = _.round((width - margin.left - margin.right - cell.padding * 2) / 3); const svg = d3.select(DOM.svg(width, (cell.height + margin.bottom + cell.padding) * _.ceil(data.length / 3) + margin.top - margin.bottom)); const y = d3.scaleLinear() .domain(d3.extent(data.map(d => d.sensitivity.map(p => convertEUI(p.EUI))).flat())) .range([cell.height, 0]).nice(); const x = new Map( Array.from( data.map(d => d.variable), key => [key, d3.scaleLinear(d3.extent(data.filter(d => d.variable === key)[0].sensitivity.map(d => d[key])), [0, cell.width])] ) ); const chart = svg.selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => { const h = (i % 3) * (cell.width + cell.padding) + margin.left; const v = _.floor(i / 3) * (cell.height + margin.bottom + cell.padding) + margin.top; return `translate(${h},${v})` }); chart.each(function(d, i) { const windowU = dd => d.variable === "Window U"? d3.format(".2f")(1/dd): dd; const xAxis = g => g .attr("transform", `translate(0,${cell.height})`) .call(d3.axisBottom(x.get(d.variable)).ticks(6).tickFormat(windowU)) .call(g => g.select(".domain").remove()); const yAxis = g => { if (i % 3 === 0) { g.call(d3.axisLeft(y).ticks(6)) .call(g => g.select(".domain").remove()); } if (i === 0) { g.select(".tick:last-of-type text").clone() .attr("x", 10) .attr("y", 15) .attr("text-anchor", "start") .attr("font-weight", "bold") .html(unit === "IP" ? "EUI kBTU/ft²/yr": "EUI kWh/m²/yr"); } } const line = d3.line() .x(dd => x.get(d.variable)(dd[d.variable])) .y(dd => y(convertEUI(dd.EUI))) .curve(d3.curveCardinal.tension(0)); d3.select(this).append("rect") .attr("class", "frame") .attr("x", 0) .attr("y", 0) .attr("width", cell.width) .attr("height", cell.height); //horizontal grid lines d3.select(this).selectAll(".grid .horizontal") .data(_.range(8).slice(1).map(d => d * cell.height / 8)) .join("line") .attr("class", "grid") .attr("x1", (i % 3 != 0) ? -cell.padding : 0) .attr("y1", d => d) .attr("x2", cell.width) .attr("y2", d => d); //vertical grid lines d3.select(this).selectAll(".grid .vertical") .data(_.range(8).slice(1).map(d => d * cell.width / 8)) .join("line") .attr("class", "grid") .attr("x1", d => d) .attr("y1", 0) .attr("x2", d => d) .attr("y2", cell.height); d3.select(this).append("g").call(xAxis); d3.select(this).append("g").call(yAxis); //add the variable labels d3.select(this).append("text") .attr("x", 0) .attr("y", -15) .attr("text-anchor", "start") .attr("font-size", 14) .text(d => d.variable); d3.select(this).append("path") .datum(d.sensitivity) .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("circle") .data(d.sensitivity) .join("circle") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(convertEUI(dd.EUI)); }) .attr("r",3) .attr("stroke", "#1f77b4") .style("fill", function(d) { return "#b4d6e8"; }) .append("title") .text(dd => `EUI ${_.round(convertEUI(dd.EUI), 2)}`); }); return svg.node(); } 37:Tbe3,calibration2 = { const chartHeight = height - 150; const svg = d3.select(DOM.svg(width, chartHeight)); const yearOverride = "2018"; //combine monthly data set with parametrics let map = new Map(); for (const [key, values] of Object.entries(monthly)) { const n = parametricsMonthly.filter(d => d.variable === adjustVariable)[0].sensitivity[variableSelection]; map.set(key, values.map((d, i) => ({...d, simulated: n[key][i]})) ); } const data = Array.from(map).reduce((data, [key, value]) => { data[key] = value; return data; }, {}); const margin = {top: 20, right: 30, bottom: 30, left: 35}; const keys = d3.keys(data); const colors = {steam: "#d52928", chw: "#1dbfcf", electricity: "#d6d231"}; const maxY = d3.max(d3.keys(data).map(utility => d3.max(data[utility].map(month => { return d3.max(d3.keys(month).filter(key => key != "date").map(key => units(month[key])/1000)); })))); const chart = svg.selectAll(".chart") .data(keys) .enter().append("g") .attr("class", "chart") .attr("transform", (d, i) => `translate(${i * width/keys.length + i*10}, 0)`); chart.each(function(d, i) { const x = d3.scaleTime() .domain(d3.extent(data[d], dd => dd.date)) .range([margin.left, width/keys.length - margin.right]); const y = d3.scaleLinear() .domain([0, maxY]) .range([chartHeight - margin.bottom, margin.top]) .nice(); const xAxis = g => g .attr("transform", `translate(0,${chartHeight - margin.bottom})`) .call(d3.axisBottom(x).ticks(d3.timeMonth.every(2)).tickFormat(d3.timeFormat("%b")).tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(d3.format("~s"))) .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(`${d.toUpperCase()} ${(unit === "IP") ? "mmBTU": "MWh"}`)); d3.select(this).append("g").call(xAxis); d3.select(this).append("g").call(yAxis); const lineM = d3.line() .x(dd => x(dd.date)) .y(dd => y(units(dd[yearOverride])/1000)); const lineS = d3.line() .x(dd => x(dd.date)) .y(dd => y(units(dd.simulated)/1000)); d3.select(this).append("path") .datum(data[d]) .attr("class", d) .attr("fill", "none") .style("stroke-dasharray", ("2, 4")) .attr("stroke", colors[d]) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", lineM); d3.select(this).append("path") .datum(data[d]) .attr("class", d) .attr("fill", "none") .attr("stroke", colors[d]) .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", lineS); }); return svg.node(); }38:T147a,parcoords = { const container = document.createElement("div"); container.setAttribute("class", "parcoords"); container.setAttribute("style", `width: ${width}px; height: ${height + 20}px;`); const context = DOM.context2d(width, height); const svg = d3.select(DOM.svg(width, height)); const margin = {top: 60, right: 15, bottom: 10, left: 35}; const chartH = height - margin.top - margin.bottom; const chartW = width - margin.right - margin.left; const dimensions = parametrics.columns.filter(d => d != "dataset"); const y = new Map( Array.from( dimensions, key => { let range = ["Wall R", "Roof R"].indexOf(key) >= 0 ? [0, chartH] : [chartH, 0] return [key, d3.scaleLinear(d3.extent(parametrics, d => d[key]), range)] } ) ); const x = d3.scalePoint().range([0, chartW]).domain(dimensions).padding(0); const c = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`); const axis = d3.axisLeft().ticks(5); context.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) { d3.select(this).call(axis.scale(y.get(d))); }) .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", "middle") .attr("y", -18) .text(d => d.toUpperCase()); const render = renderQueue(draw).rate(50); context.clearRect(0,0,width,height); render(parametrics); g.append("g") .attr("class", "parbrush") .each(function(d) { y.get(d).brush = d3.brushY().extent([[-10,0], [10,chartH + 1]]) .on("brush", brush) .on("end", brush); d3.select(this) .call(y.get(d).brush); switch(d) { case "Setpoint F": d3.select(this).call(y.get(d).brush.move, [110, 185]); break; case "Infiltration (CFM/FT2)": d3.select(this).call(y.get(d).brush.move, [225, 300]); break; case "EUI": break; default: d3.select(this).call(y.get(d).brush.move, [0, 75]); } }) .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 = parametrics.filter(function(d) { return actives.every(function(active) { let result = active.extent[1] <= d[active.dimension] && d[active.dimension] <= active.extent[0]; if (active.dimension === "Wall R" || active.dimension === "Roof R") { result = active.extent[1] >= d[active.dimension] && d[active.dimension] >= active.extent[0]; } return result; }); }); context.clearRect(0,0,width,height); //context.globalAlpha = d3.min([0.85/Math.pow(selected.length,0.3),1]); render(selected); // if (actives.length == 0) { // g.classed("nonactive", false); // } // else { // g.classed("nonactive", d => !(actives.map(p => p.dimension).includes(d))); // } } function draw(d) { if (d.dataset === "interpolated") { //context.globalAlpha = .1; context.strokeStyle = "#ddeaf2"; context.lineWidth = 1; } else { //context.globalAlpha = 1; context.strokeStyle = "#1f77b4"; context.lineWidth = 1.5; } context.beginPath(); var coords = dimensions.map(p => [x(p) + margin.left, y.get(p)(d[p]) + 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) { context.moveTo(prev[0],prev[1]); context.lineTo(prev[0]+6,prev[1]); } } if (i < coords.length-1) { var next = coords[i+1]; if (next !== null) { context.moveTo(next[0]-6,next[1]); } } return; } if (i == 0) { context.moveTo(p[0],p[1]); return; } context.lineTo(p[0],p[1]); }); context.stroke(); } container.appendChild(context.canvas); container.appendChild(svg.node()); return container; }39:T4ac,html``3a:T5bd,parametricsMonthly = { let data = (await FileAttachment("parametrics_monthly_190402.csv").csv()); //group the data by independent variable const grouped = group(data, d => d.Variable); const reducer = (entries, match) => { const re = new RegExp(`^${match} `, "i"); let filtered = entries.filter(([key, value]) => key.match(re)) ; //sort the months just to be sure the keys are in order filtered.sort((a, b) => +a[0].split(" ")[1] - +b[0].split(" ")[1]); return filtered.map(([key, value]) => value); } function reduce(series) { return series.map(d => { const entries = Object.entries(d); const out = {...d, "steam": reducer(entries, "s"), "chw": reducer(entries, "cw"), "electricity": reducer(entries, "e")}; //remove the utility columns for (const key in out) { const re = new RegExp("^e |^s |^cw ", "i"); if (key.match(re)) { delete out[key]; } } return out; } ).sort((a, b) => a[a.Variable] - b[b.Variable]); //sort the final output by the output variable just to be sure the index slider works properly. } //flatten the map to an array data = Array.from(grouped, d => ({variable: d[0], sensitivity: reduce(d[1])})); // data = [].concat() // const keys = parametrics.columns; // const data = parametrics.map(d => Object.assign(...keys.map(p => ({[p]: +d[p]})))); // data.columns = keys; // return data; return data; } 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:T4cf,depths = { const lookup = { "HOT WATER": 0, "ELECTRICITY": 0, "CHILLED WATER": 0, "INTERNAL GAINS": 1, "PASSIVE SOLAR GAINS": 1, "NATURAL VENTILATION": 1, "CONDUCTION LOSSES": 1, "HEATING LOAD": 2, "LIGHTING": 2, "EQUIPMENT": 2, "PUMPS": 2, "FANS": 2, "COOLING LOAD": 2, "MISC GAINS": 3, "EQUIPMENT GAINS": 3, "CONDUCTION GAINS": 3, "PEOPLE GAINS": 3, "OA GAINS": 3, "LIGHTING GAINS": 3, "SOLAR GAINS": 3, "ROOF CONDUCTION LOSSES": 3, "WINDOW CONDUCTION LOSSES": 3, "WALL CONDUCTION LOSSES": 3, "INFILTRATION LOSSES": 3, "MISC LOSSES": 3, "OA HEATING": 3 } const maxDepth = _.max(Object.keys(lookup).map(d => lookup[d])) return g => { const first = g.nodes.reduce((a, b) => { return (a.x0 || 0) < b.x0 ? a : b; }); const last = g.nodes.reduce((a, b) => { return (a.x0 || 0) > b.x0 ? a : b; }); const nodes = g.nodes.map(d => { const pos = (d.name in lookup) ? (lookup[d.name] * ((last.x0 - first.x0) / maxDepth) + first.x0) : d.x0; return {...d, x0: pos, x1: (pos + (first.x1 - first.x0))}; }); return {...g, nodes: nodes}; }; }3d:T74e,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) 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 = getVal; 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(input) : input.value; if (form.output) form.output.value = display ? display(value) : format ? format(value) : value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } return form; }3e:[{"id":"d7f027e91df1f4b80c6495d7406119e7cfe80ff686b91cac8d42229b50067f12550049d3196fd4ac7bec9a25f738f57536609083bdb8663c5893545b48dd94c6","href":"https://static.observableusercontent.com/files/d7f027e91df1f4b80c6495d7406119e7cfe80ff686b91cac8d42229b50067f12550049d3196fd4ac7bec9a25f738f57536609083bdb8663c5893545b48dd94c6","name":"6_ZoneDiagrams_190205_BOH-01.jpg","type":"image/jpeg","lastModified":1771526650564.741,"size":114392},{"id":"d66d711376598a703f4c0d6267ebff9c1d7436036bf8536092de5f156ea9f70d297d96a187d57ff14221a98f33bcdcb663bfdb3f14f7a9173d24a7015e68d704","href":"https://static.observableusercontent.com/files/d66d711376598a703f4c0d6267ebff9c1d7436036bf8536092de5f156ea9f70d297d96a187d57ff14221a98f33bcdcb663bfdb3f14f7a9173d24a7015e68d704","name":"4_ZoneDiagrams_190205_FoodPrep-01.jpg","type":"image/jpeg","lastModified":1771526650635.58,"size":117696},{"id":"3001f4a32fa2ae03410dd390bee561684329b013545dc5c7f2769addf345ffe5ddadd892cf35c2a1b479f50ed748e079ec07fe55f797b7360f940c97dea7d1a4","href":"https://static.observableusercontent.com/files/3001f4a32fa2ae03410dd390bee561684329b013545dc5c7f2769addf345ffe5ddadd892cf35c2a1b479f50ed748e079ec07fe55f797b7360f940c97dea7d1a4","name":"7_ZoneDiagrams_190205_Office-01.jpg","type":"image/jpeg","lastModified":1771526650751.271,"size":118793},{"id":"3bc7d46e66ce68fa8d20e99fd00845688796fbf967af9c0caca032c7b42b77bd9d20286f50d8a80fd457b33c85c4206bf1e987a1fb1be3ae14ffc07061c59506","href":"https://static.observableusercontent.com/files/3bc7d46e66ce68fa8d20e99fd00845688796fbf967af9c0caca032c7b42b77bd9d20286f50d8a80fd457b33c85c4206bf1e987a1fb1be3ae14ffc07061c59506","name":"3_ZoneDiagrams_190205_Fitness-01.jpg","type":"image/jpeg","lastModified":1771526650399.815,"size":118136},{"id":"3e14069f48d989502a09f2768836d4555ebc8b4f0f2ac04b33fc96f7fe045df636ed945209e0f4bb105bcbac1183343025f7e755ecedec01c408d163a7b60e15","href":"https://static.observableusercontent.com/files/3e14069f48d989502a09f2768836d4555ebc8b4f0f2ac04b33fc96f7fe045df636ed945209e0f4bb105bcbac1183343025f7e755ecedec01c408d163a7b60e15","name":"2_ZoneDiagrams_190205_Circulation-01.jpg","type":"image/jpeg","lastModified":1771526650589.425,"size":103358},{"id":"7af6a98acd165fa422ad28267c4f3bcaec752fc8d062e624df8b22be588489b194d8b06441d681ba16a28edb0c8b49ca5c8e42891996bba27cd297a2ae7c4f5c","href":"https://static.observableusercontent.com/files/7af6a98acd165fa422ad28267c4f3bcaec752fc8d062e624df8b22be588489b194d8b06441d681ba16a28edb0c8b49ca5c8e42891996bba27cd297a2ae7c4f5c","name":"9_ZoneDiagrams_190205_Conditioning_Systems-01.jpg","type":"image/jpeg","lastModified":1771526650645.713,"size":128690},{"id":"cb46f9231af9a68e935cff3c29f0b9280d13a809070fd339c3dcd271950e87e456f9d40a4fd99734450453c5dddf1dfc9f74b607f60f1235962adb20c1257561","href":"https://static.observableusercontent.com/files/cb46f9231af9a68e935cff3c29f0b9280d13a809070fd339c3dcd271950e87e456f9d40a4fd99734450453c5dddf1dfc9f74b607f60f1235962adb20c1257561","name":"ZoneDiagrams_190205_Program-01.jpg","type":"image/jpeg","lastModified":1771526650579.105,"size":111833},{"id":"6245d33587db84fbb1b7cc3f525bf9807565d2b2e0997a0c46ed46c542cc263935c8132b1cafd0906bf6cd4f47ad10c088bf702902c42898d4dfe14136dbd8ce","href":"https://static.observableusercontent.com/files/6245d33587db84fbb1b7cc3f525bf9807565d2b2e0997a0c46ed46c542cc263935c8132b1cafd0906bf6cd4f47ad10c088bf702902c42898d4dfe14136dbd8ce","name":"yale_electricity.csv","type":"text/csv","lastModified":1771526028744.86,"size":523},{"id":"88a608f063726778262f42bce1604d0d9bf62a82f2c0fd0f98b319b7271a388f512565782ef807f8c4b4e10ab35fcad23058cdb5ecccad67d87ffa6382c6188b","href":"https://static.observableusercontent.com/files/88a608f063726778262f42bce1604d0d9bf62a82f2c0fd0f98b319b7271a388f512565782ef807f8c4b4e10ab35fcad23058cdb5ecccad67d87ffa6382c6188b","name":"yale_chw_190402.csv","type":"text/csv","lastModified":1771526014428.666,"size":957},{"id":"e2b5e8082566cac4c6fdb90256e65d908147d7123d879e280c5cccc405f52bb8e9e9ca08afe7007052250000badd963910d37f00b713696bd6540c824719a398","href":"https://static.observableusercontent.com/files/e2b5e8082566cac4c6fdb90256e65d908147d7123d879e280c5cccc405f52bb8e9e9ca08afe7007052250000badd963910d37f00b713696bd6540c824719a398","name":"0_ZoneDiagrams_190205_Bedroom-01.jpg","type":"image/jpeg","lastModified":1771526650378.542,"size":109352},{"id":"0ee195f76fc9b1ddf63902fbe6a42ffdc0941ad263882f5b201c3061044f6ce6ba1936ab01efda92f74ba0827641247ce30496bcb4600e548a6711d271787cc1","href":"https://static.observableusercontent.com/files/0ee195f76fc9b1ddf63902fbe6a42ffdc0941ad263882f5b201c3061044f6ce6ba1936ab01efda92f74ba0827641247ce30496bcb4600e548a6711d271787cc1","name":"8_ZoneDiagrams_190205_Restrooms-01.jpg","type":"image/jpeg","lastModified":1771526650534.941,"size":120174},{"id":"7f17f8f0256e98eec7251d38d660840cf542b63fb923aaa2731e46c5d7647b39a66e80b5b95d5ae2495e1af02a4d9972e7d0385ad04676139d90693434dc4cc2","href":"https://static.observableusercontent.com/files/7f17f8f0256e98eec7251d38d660840cf542b63fb923aaa2731e46c5d7647b39a66e80b5b95d5ae2495e1af02a4d9972e7d0385ad04676139d90693434dc4cc2","name":"1_ZoneDiagrams_190205_CafeDining-01.jpg","type":"image/jpeg","lastModified":1771526650553.413,"size":116824},{"id":"3b2aa51e3332f08b3ebccfb9cdddcf5b15118ec6d2adbb95804dd8c0e9d75d392102beef4d7aec514cb604127e3e4a4afbdf4ce8b6393353134a6af3a38965aa","href":"https://static.observableusercontent.com/files/3b2aa51e3332f08b3ebccfb9cdddcf5b15118ec6d2adbb95804dd8c0e9d75d392102beef4d7aec514cb604127e3e4a4afbdf4ce8b6393353134a6af3a38965aa","name":"parametrics.csv","type":"text/csv","lastModified":1771526072020.722,"size":606436},{"id":"feb5400b16de763323b437ba307388c44ffb9de0ec8fdad4fb413a26633e6ce3633a225dcab5ee36a524094acf0dd550a0340b87e19a1f8a109d356837a79bb8","href":"https://static.observableusercontent.com/files/feb5400b16de763323b437ba307388c44ffb9de0ec8fdad4fb413a26633e6ce3633a225dcab5ee36a524094acf0dd550a0340b87e19a1f8a109d356837a79bb8","name":"yale_hw_190402.csv","type":"text/csv","lastModified":1771525985053.054,"size":1014},{"id":"e2d0388c25a945a8fc5d38ab75a07157c52de50e0aa4a6a5285fa690566a9c79db8f794cabf0514b5bdd65d66036a1023742f92301723cd9517e8434e355980f","href":"https://static.observableusercontent.com/files/e2d0388c25a945a8fc5d38ab75a07157c52de50e0aa4a6a5285fa690566a9c79db8f794cabf0514b5bdd65d66036a1023742f92301723cd9517e8434e355980f","name":"parametrics_monthly_190402.csv","type":"text/csv","lastModified":1771526053083.596,"size":13104},{"id":"05b3d79ebe2b0a60373dfc34843b3aed1a7aac5721fd25f042c642401c47b7c3a56ad2c94ea5655eff2a7facbadb63f56f844db91b0e7835d01c2164d0107f6b","href":"https://static.observableusercontent.com/files/05b3d79ebe2b0a60373dfc34843b3aed1a7aac5721fd25f042c642401c47b7c3a56ad2c94ea5655eff2a7facbadb63f56f844db91b0e7835d01c2164d0107f6b","name":"00_ZoneDiagrams_190205_Envelope-01.jpg","type":"image/jpeg","lastModified":1771526650584.02,"size":98241},{"id":"e0a8be0593be830854a4d789fbb2a985a35d56fb4a9f286bfc366a9639958eff5f6687fe204b8a8aed6cf7fcea3752e0d0f3ff463dceafc43df4f45dead0203b","href":"https://static.observableusercontent.com/files/e0a8be0593be830854a4d789fbb2a985a35d56fb4a9f286bfc366a9639958eff5f6687fe204b8a8aed6cf7fcea3752e0d0f3ff463dceafc43df4f45dead0203b","name":"5_ZoneDiagrams_190205_LibraryStudyLounge-01.jpg","type":"image/jpeg","lastModified":1771526650731.829,"size":117084}] 2f:{"title":"","cells":[{"id":872,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"viewof date = html`February 6, 2019`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`# Yale Residential College Energy Study`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"md`\n#### Introduction\nAs part of the wider goal to achieve a Carbon Neutral Campus by 2050, Yale University is working with Introba to identify opportunities for implementing effective energy efficiency upgrades in the historic Residential Colleges. This study is designed to help Yale understand the magnitude of achievable energy savings and the feasibility of implementation associated with the optimized energy efficiency packages to apply to the various Residential Colleges. Yale Facilities and Engineering has identified Berkeley College as a reference residence college that serves as the “typical” condition to be studied for this analysis. The objective for this work is to develop a matrix of energy efficiency options that can be applied to different Yale Residential Colleges to enable a transition from high energy heating systems such as steam and high temperature hot water to low carbon low temperature hot water systems.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"md`\n
\n#### Calibrated Energy Model\nIntroba developed a detailed whole building energy model for the existing Yale Berkeley College Figure 1 shows the graphic rendering of the energy model and presents the thermal block layout by space types and conditioning systems.\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"zone = {\n const zone = html`

`;\n return zone;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"viewof figure1 = html`Figure 1: Graphic Rendering of the Energy Model. Select thermal block organization from the dropdown list.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":"md`\n
\nThe energy model was calibrated to actual monthly energy use data for all fuel sources including campus steam, chilled water, and electricity available at the [Energy Use at Yale](https://java.facilities.yale.edu/energy/) platform. The calibration process followed procedures and criteria in accordance with ASHRAE Guideline 14. Figure 2 presents a comparison of model simulated monthly energy use with metered data for the last five years for all fuel sources. Detailed model inputs including envelope, internal and ventilation loads, and mechanical system parameters are included at the end of this report. This calibrated baseline model should reasonably represent the different heat gain, heat loss, and energy use components for the existing building.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"viewof year = {\n \n const year = html``;\n \n return year;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"legend = {\n \n const svg = d3.select(DOM.svg(960, 40))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\"Metered Data\", \"Simulated Data\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", 20)\n .attr(\"y1\", 0)\n .attr(\"y2\", 0)\n .attr(\"stroke\", \"#bababa\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-width\", d => d === \"Metered Data\" ? 2: 3)\n .style(\"stroke-dasharray\", d => d === \"Metered Data\" ? (\"2, 4\"): \"none\");\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":908,"value":"viewof figure2 = html`Figure 2: Comparison of simulated and metered energy use. Select year for comparison from the dropdown list.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"md`\n
\n#### Energy End Use Characterization\nAs presented in Figure 3, of the total ${formatEUI(313.5)} energy use intensity (EUI), the fuel source distribution shows 60% steam, 20% chilled water and 20% electricity use. Energy model results suggest that of the total ${formatEUI(189.6)} steam EUI, 57% can be attributed to domestic hot water and 43% to space heating. Lighting forms the largest electricity use component at ${formatEUI(27.2)} followed by plug loads at ${20.4}, and pumps and fans at ${11.4} and ${4} respectively. A further investigation into the heating load components shows that after Outside Air heating, largely driven by kitchen makeup air (26%), infiltration losses result in the largest heat loss (24%) followed by window conduction losses (19%), wall conduction losses (18%) and roof conduction losses (13%). Solar gains form the largest cooling load component (23%) followed by lighting (15%), outside air (12%) and envelope conduction (12%). \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"viewof figure3 = html`Figure 3: Building energy use characterization showing load components and energy end-uses.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"md`\n
\n#### Hourly Energy Use\nThe calibrated energy model was utilized to develop hourly profiles for different fuel sources, presented in Figure 4, to better understand the baseline performance. The heating load duration curve, plotted against outside air temperature, shows the highest 10% load hours occur when the outside temperature is below roughly ${formatDegree(5)}, and the peak 5% load hours occur below ${formatDegree(0)} outside. For the cooling load, the highest 10% load hours occur above ${formatDegree(20)} outside air temperature, and the top 1% when the outside air is above ${formatDegree(25)}.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"viewof selections = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"viewof figure4 = html`Figure 4: Hourly load profiles. Select fuel source and graph type from the dropdown lists.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1585,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1530,"value":"viewof updateDate = html`

February 20, 2019

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"md`\n#### Energy Use Sensitivity\nUtilizing the calibrated energy model, a series of energy efficiency measures (EEMs) were evaluated to understand the sensitivity of individual building performance characteristics on building energy use. Figure 5 presents the results of this analysis with the horizontal axes showing incremental improvement in a specific parameter, and the vertical axes showing the associated energy use intensity. In accordance with the energy use characterization discussed above, the overall energy use is most affected by domestic hot water use reduction and shows a 15% variation with changing flowrates. The thermostat setpoint is next in order of significance resulting in just over 10% variation in building energy use. The envelope parameters offer only a limited potential of savings with improvements, with wall insulation and infiltration rate increments showing the highest variation of about 7.5%, while roof insulation and window conductance increments only show less than 5% variation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1313,"value":"viewof figure5 = html`Figure 5: Sensitivity of individual building performance parameters on building energy use intensity.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"md`\n
\n#### Monthly Energy Use\nFigure 6 further breaks down the results of energy use sensitivity studies in the form of monthly energy use by utility type. Changes to domestic hot water flowrates affect the heating energy uniformly across all months. Setpoint and infiltration rate changes, however, only affect the wintertime heating energy with only minimal impact on cooling energy. Similarly, the envelope improvements have the most pronounced effect on wintertime heating, with minimal impact on summertime cooling. If it is determined that the metered data for summertime heating is misrepresented and should not be attributed to the assumed domestic hot water rates, the high wintertime heating energy would then be a result of worse-than-currently-assumed infiltration, thermostat setpoints, and/or envelope properties.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"viewof adjustVariable = {\n \n const adjustVariable = html``\n\n return adjustVariable;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"viewof variableSelection = slider({\n min: 0, \n max: parametricsMonthly.filter(d => d.variable === adjustVariable)[0].sensitivity.length - 1, \n step: 1,\n format: adjustVariable\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1548,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1566,"value":"legendcopy = {\n \n const svg = d3.select(DOM.svg(960, 40))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\"Metered Data\", \"Simulated Data\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", 20)\n .attr(\"y1\", 0)\n .attr(\"y2\", 0)\n .attr(\"stroke\", \"#bababa\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-width\", d => d === \"Metered Data\" ? 2: 3)\n .style(\"stroke-dasharray\", d => d === \"Metered Data\" ? (\"2, 4\"): \"none\");\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":1562,"value":"viewof figure6 = html`Figure 6: Sensitivity of building performance parameters on monthly energy use shown against 2018 data. Select individual parameter and performance characteristics from the dropdown list.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"md`\n
\n#### Parametric Analysis\nTo better understand the effect of different performance characteristics on building energy use, Figure 7 presents a parallel coordinates plot where each of the first six vertical axes represents a performance parameter and its evaluated properties, and the last axis shows the energy use intensity resulting from the selected combination(s). Putting constraints on one of more attributes, for instance, allows for the exploration of how changing the remaining attributes affects building energy use. The dark lines in the chart are results for combinations simulated using the calibrated energy model. The lighter lines represent results from all other combinations that are generated using statistical surrogate models that utilize data-driven approximation techniques.
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1311,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1526,"value":"parLegend = {\n \n const svg = d3.select(DOM.svg(960, 40))\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 + 10})`);\n\n g.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", 20)\n .attr(\"y1\", 0)\n .attr(\"y2\", 0)\n .attr(\"stroke\", d => d === \"Interpolated Data\" ? \"#ddeaf2\": \"#1f77b4\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-width\", 2)\n\n g.append(\"text\")\n .attr(\"x\", 30)\n .attr(\"y\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1328,"value":"viewof figure7 = html`Figure 7: 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":688,"value":"md`\n
\n#### Next Steps\nIntroba will next evaluate the energy efficiency measures for their impact on peak load and load duration reduction to understand the implication of envelope retrofits on hours of discomfort within occupied spaces if the energy supply systems were switched to low carbon low temperature hot water.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"parametrics = {\n let parametrics = (await FileAttachment(\"parametrics.csv\").csv({typed: true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, EUI: convertEUI(d.EUI)}));\n\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1344,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"convertEUI = d => (unit === \"IP\") ? (d * 3.412 * 0.092903) : d;","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"formatEUI = d => `${d3.format(\".1f\")(_.round(((unit === \"IP\") ? (units(d) * 0.092903) : units(d)), 2))} ${(unit === \"IP\") ? \"kBTU/ft²/yr\" : \"kWh/m²/yr\"}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"formatDegree = d => {\n if (unit === \"IP\") {\n return `${_.round(d * 1.8 + 32)}°F`;\n }\n else {\n return `${_.round(d)}°C`;\n }\n}\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"units = {\n if (unit === \"IP\") {\n return d => (d *3.412); \n }\n else {\n return d => d;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 1], [width - 1, height - 5]])\n .nodeAlign(d3.sankeyLeft);\n return sankey;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"color = {\n const lookup = {\n \"STEAM\": \"#d52928\",\n \"HEATING ENERGY\": \"#d52928\",\n \"COOLING ENERGY\": \"#1dbfcf\",\n \"ELECTRICITY\": \"#d6d231\",\n \"CHILLED WATER\": \"#1dbfcf\",\n \"INTERNAL GAINS\": \"#9268ac\",\n \"PASSIVE SOLAR GAINS\": \"#a17eb9\",\n \"NATURAL VENTILATION\": \"#b295c6\",\n \"CONDUCTION LOSSES\": \"#c5b0d5\",\n \"HEATING LOAD\": \"#e55725\",\n \"LIGHTING\": \"#d6d231\",\n \"EQUIPMENT\": \"#dfda61\",\n \"PUMPS\": \"#e8e48a\",\n \"FANS\": \"#f2f0b0\",\n \"COOLING LOAD\": \"#1f77b4\",\n \"PUMP & FAN GAINS\": \"#daf0f3\",\n \"EQUIPMENT GAINS\": \"#c7e1ed\",\n \"CONDUCTION GAINS\": \"#b4d6e8\",\n \"PEOPLE GAINS\": \"#a2cbe3\",\n \"OA GAINS\": \"#8fc0df\",\n \"LIGHTING GAINS\": \"#7db7da\",\n \"SOLAR GAINS\": \"#6aadd6\",\n \"ROOF CONDUCTION LOSSES\": \"#f8dac0\",\n \"WINDOW CONDUCTION LOSSES\": \"#f8caa3\",\n \"WALL CONDUCTION LOSSES\": \"#f8ba88\",\n \"INFILTRATION LOSSES\": \"#f7aa6e\",\n \"MISC LOSSES\": \"#f69b54\",\n \"OA HEATING\": \"#f68d39\",\n \"DHW\": \"#d52928\"\n }\n \n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"// d3 = require(\"https://bundle.run/d3@5.9.1\", \"https://bundle.run/d3-sankey@0.7.1\", \"https://bundle.run/d3-array@2.0.3\", \"https://bundle.run/d3-collection@1.0.7\")\nd3 = require('d3@5.9.2', 'd3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"loads = {\n let loads = (await d3.csv(\"https://gist.githubusercontent.com/jameswperakis/6a8455b9f976b15a4056080d12fa1c60/raw/6505be24e6cfe6224e0c23a01154db34a1bac379/yale_sankey.csv\")).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(loads.map(d => [d.source, d.target]).flat()));\n const links = loads.map(({source, target, value}) => ({\n source: nodes.indexOf(source),\n target: nodes.indexOf(target),\n value: value\n }));\n\n loads = {nodes: nodes.map(d => ({name: d})), links: links};\n return loads;\n} \n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"hourly = {\n let hourly = (await d3.csv(\"https://gist.githubusercontent.com/jameswperakis/28ada87acdc3d29927370393dad0f598/raw/5f6a959cfc4af53c40040d194163d63c665268a5/yale_hourly.csv\")).map(d => ({\n month: +d[\"Month\"],\n day: +d[\"Day\"],\n hour: +d[\"Hour\"] - 1,\n date: d3.timeParse(\"%m %d %H %Y\")(`${d[\"Month\"].padStart(2, \"0\")} ${d[\"Day\"].padStart(2, \"0\")} ${(+d[\"Hour\"] - 1).toString().padStart(2, \"0\")} 2018`),\n // heating: +d[\"Space Heating kWh\"],\n // cooling: +d[\"Space Cooling kWh\"],\n heating: _.max([+d[\"Space Heating kWh\"] - 80, 0]),\n // cooling: _.max([+d[\"Space Cooling kWh\"] - 30, 0]),\n cooling: +d[\"Space Cooling kWh\"],\n temperature: +d[\"Drybulb C\"]\n }));\n \n \n \n return hourly;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"monthly = {\n \n const process = d => ({\n date: d3.timeParse(\"%b\")(d.month.trim()),\n \"2014\": +d[\"2014\"],\n \"2015\": +d[\"2015\"],\n \"2016\": +d[\"2016\"],\n \"2017\": +d[\"2017\"],\n \"2018\": +d[\"2018\"],\n \"simulated\": +d[\"simulated\"]\n });\n\n let steam = (await FileAttachment(\"yale_hw_190402.csv\").csv()).map(process);\n \n let chw = (await FileAttachment(\"yale_chw_190402.csv\").csv()).map(process);\n \n let electricity = (await FileAttachment(\"yale_electricity.csv\").csv()).map(process);\n \n const monthly = {steam: steam, chw: chw, electricity: electricity};\n \n return monthly;\n\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"import {table} from \"@tmcw/tables@444\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1621,"value":"import {group} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"getVal = d => parametricsMonthly.filter(p => p.variable === adjustVariable)[0].sensitivity[d][adjustVariable] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1129,"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":1651,"value":"unit = unitSelection.unit","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}