31:T98e,md`

### Envelope Improvements and Heating Demand One of the key objectives of this study is to identify envelope retrofits such that building heating loads can be met with low temperature (${_.round(c_f(48.8))}°${unitSelection.unit === "IP" ? "F": "C"}) hot water. Based on discussions with Yale, hot water temperature has successfully been set back to ${_.round(c_f(48.8))}°${unitSelection.unit === "IP" ? "F": "C"} for periods when the outside air temperature was above ${_.round(c_f(10))}°${unitSelection.unit === "IP" ? "F": "C"}. This analysis, therefore, is based on the premise that low temperature hot water can successfully meet space heating loads when ambient temperature is above ${_.round(c_f(10))}°${unitSelection.unit === "IP" ? "F": "C"}. Based on the results from the calibrated baseline energy model, the median load when the outside air temperature is around ${_.round(c_f(10))}°${unitSelection.unit === "IP" ? "F": "C"} is ${_.round(kw_kbtu(94))} ${unitSelection.unit === "IP" ? "kBtu/hr": "kW"}. For the purpose of this analysis, this load establishes the limit up to which low temperature hot water can be used effectively. Figure 5 below shows the range of heating loads corresponding to various outside air temperatures. The target load range, which is based on the identified heating load limit at ${_.round(c_f(10))}°${unitSelection.unit === "IP" ? "F": "C"}, is indicated on the graph. The areas in dark red represent loads that fall outside of the target range, while those in light orange indicate loads that are within the target range. Using the dropdown menu, you can see how the loads reduce with each envelope upgrade scenario. With Envelope Upgrade 1, it’s possible to utilize low temperature hot water as long as outside air temperatures are above ${_.round(c_f(5))}°${unitSelection.unit === "IP" ? "F": "C"} (roughly 72% of the year). With Envelope Upgrade 2, the outside air temperature can drop to approximately ${_.round(c_f(-5))}°${unitSelection.unit === "IP" ? "F": "C"} (roughly 96% of the year). However, in order to meet the building heating demand at all reasonable outside air temperatures (down to ${_.round(c_f(-18))}°${unitSelection.unit === "IP" ? "F": "C"}), the building will need to incorporate envelope improvements equal to or better than those represented by Envelope Upgrade 3.

`32:T2c11,chart = { const width = 960; const height = 800; const margin = {top: 40, right: 25, bottom: 30, left: 40}; const svg = d3.select(DOM.svg(width, height)); const initial = "base"; const yUnit = unitSelection.unit === "IP" ? "kBtu/hr": "kW"; const xUnit = unitSelection.unit === "IP" ? "F": "C"; const color = (val) => val < (target + 10) ? lowColor: highColor; const xtick = d => d3.format("d")(c_f(d)); const tooltip = d3.select("body").append("div") .attr("class", "tooltip2") .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 = d => ` Third Quartile: ${_.round(d[2], 2)} ${yUnit}
Median: ${_.round(d[1], 2)} ${yUnit}
First Quartile: ${_.round(d[0], 2)} ${yUnit}
${_.round((8760 - d[5]) / 8760 * 100, 2)}% of year` const x = d3.scaleLinear() .domain(d3.extent(data.bins.flat())) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.get("base")[2]) + kw_kbtu(100)]).nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0).tickValues(data.bins.map(d => d[0])).tickFormat(xtick)) .call(g => g.select(".tick:last-of-type text") .text("") .attr("x", -6) .attr("text-anchor", "start") .attr("font-weight", "bold") .html(d => `${_.round(c_f(d))} °${xUnit} OA`)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .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") .text(`Heating Load ${yUnit}`)); const baseDots = svg.selectAll("g") .data(data); const baseLow = baseDots.join("circle") .attr("fill", "#e5e2e0") .attr("opacity", 0.6) .attr("stroke", "#ffffff") .attr("stroke-weight", 2) .attr("r", 4) .attr("cx", (d, i) => x(data.bins[i][0]) + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)/2 + 2) .attr("cy", d => y(d.get("base")[3])); const baseHigh = baseDots.join("circle") .attr("fill", "#e5e2e0") .attr("opacity", 0.6) .attr("stroke", "#ffffff") .attr("stroke-weight", 2) .attr("r", 4) .attr("cx", (d, i) => x(data.bins[i][0]) + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)/2 + 2) .attr("cy", d => y(d.get("base")[4])); const baseBar = svg.append("g") .attr("fill", "#e5e2e0") .style("mix-blend-mode", "multiply") .attr("opacity", 0.6) .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => x(data.bins[i][0]) + 2) .attr("width", (d, i) => Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)) .attr("y", d => y(d.get("base")[2])) .attr("height", d => (y(d.get("base")[0]) - y(d.get("base")[2]))); const baseMedian = svg.append("g") .attr("stroke", "#ffffff") .attr("stroke-width", 2) .attr("opacity", 0.8) .selectAll("line") .data(data) .join("line") .attr("x1", (d, i) => x(data.bins[i][0]) + 2) .attr("x2", (d, i) => x(data.bins[i][0]) + 2 + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)) .attr("y1", d => y(d.get("base")[1])) .attr("y2", d => y(d.get("base")[1])); svg.append("line") .attr("stroke", lowColor) .attr("mix-blend-mode", "multiply") .attr("stroke-opacity", .7) .attr("stroke-width", 2) .attr("shape-rendering", "crispEdges") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", y(target)) .attr("y2", y(target)); svg.append("text") .attr("x", width - margin.right) .attr("fill", lowColor) .attr("y", y(target) + 2) .attr("text-anchor", "end") .attr("fill-opacity", .7) .style("font-family", "sans-serif") .style("font-size", 12) .style("font-weight", "bold") .style("paint-order", "stroke") .style("stroke", "#ffffff") .style("stroke-width", "15px") .text("Target Load Range"); const legend = svg => { const g = svg .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "end") .attr("transform", `translate(${width - margin.right},${margin.top})`); g.selectAll("circle") .data([0, 100]) .join("circle") .attr("fill", "#e5e2e0") .attr("stroke", "#ffffff") .attr("stroke-weight", 2) .attr("r", 4) .attr("cx", -7) .attr("cy", String); g.selectAll(".ticks") .data([0, 25, 50, 75, 100, 150, 175]) .join("line") .attr("class", "ticks") .attr("stroke", "#e5e2e0") .attr("opacity", 0.8) .attr("stroke-weight", 1) .attr("shape-rendering", "crispEdges") .attr("x1", -30) .attr("x2", -20) .attr("y1", String) .attr("y2", String); g.append("rect") .attr("x", -14) .attr("y", 25) .attr("width", 14) .attr("height", 50) .attr("fill", "#e5e2e0"); g.append("line") .attr("x1", -14) .attr("x2", 14) .attr("y1", 50) .attr("y2", 50) .attr("stroke-width", 2) .attr("stroke", "#ffffff"); g.selectAll(".labels") .data(["Maximum", "75th Percentile", "Median", "25th Percentile", "Minimum"]) .join("text") .attr("text-anchor", "end") .attr("x", -40) .attr("y", (d, i) => i * 25) .attr("dy", "0.35em") .text(String); const c = g.selectAll(".colors").data(["Outside of target range", "Within target range"]) c.join("rect") .attr("x", -14) .attr("y", (d, i) => i * 25 + 143) .attr("width", 14) .attr("height", 14) .attr("fill", (d, i) => [highColor, lowColor][i]); c.join("text") .attr("text-anchor", "end") .attr("x", -40) .attr("y", (d, i) => i * 25 + 150) .attr("dy", "0.35em") .text(String); } const dots = svg.selectAll("g .extremes") .data(data); const low = dots.join("circle") .attr("fill", d => color(d.get(initial)[3])) .attr("stroke", "#ffffff") .attr("stroke-weight", 2) .attr("r", 4) .attr("cx", (d, i) => x(data.bins[i][0]) + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)/2 + 2) .attr("cy", d => y(d.get(initial)[3])); const high = dots.join("circle") .attr("fill", d => color(d.get(initial)[4])) .attr("stroke", "#ffffff") .attr("stroke-weight", 2) .attr("r", 4) .attr("cx", (d, i) => x(data.bins[i][0]) + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)/2 + 2) .attr("cy", d => y(d.get(initial)[4])); const bar = svg.append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", d => color(d.get(initial)[1])) .attr("x", (d, i) => x(data.bins[i][0]) + 2) .attr("width", (d, i) => Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)) .attr("y", d => y(d.get(initial)[2])) .attr("height", d => (y(d.get(initial)[0]) - y(d.get(initial)[2]))) .on("mouseover", function(d) { tooltip.style("display", null); d3.select(this) .attr("fill", chroma(color(d.get(initial)[1])).darken().hex()); tooltip.html(tipContent(d.get(initial))) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mousemove", function(d) { tooltip .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this) .attr("fill", color(d.get(initial)[1])); tooltip.style("display", "none"); }); const median = svg.append("g") .attr("stroke", "#ffffff") .attr("stroke-width", 2) .attr("opacity", 0.8) .selectAll("line") .data(data) .join("line") .attr("x1", (d, i) => x(data.bins[i][0]) + 2) .attr("x2", (d, i) => x(data.bins[i][0]) + 2 + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)) .attr("y1", d => y(d.get(initial)[1])) .attr("y2", d => y(d.get(initial)[1])); function transitionStacked(eem) { bar.on("mouseover", function(d) { tooltip.style("display", null); d3.select(this) .attr("fill", chroma(color(d.get(eem)[1])).darken().hex()); tooltip.html(tipContent(d.get(eem))) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mousemove", function(d) { tooltip .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this) .attr("fill", color(d.get(eem)[1])); tooltip.style("display", "none"); });; bar.transition() .duration(500) .delay((d, i) => i * 20) .attr("x", (d, i) => x(data.bins[i][0]) + 2) .attr("width", (d, i) => Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)) .attr("y", d => y(d.get(eem)[2])) .attr("height", d => (y(d.get(eem)[0]) - y(d.get(eem)[2]))) .attr("fill", d => color(d.get(eem)[1])); median.transition() .duration(500) .delay((d, i) => i * 20) .attr("x1", (d, i) => x(data.bins[i][0]) + 2) .attr("x2", (d, i) => x(data.bins[i][0]) + 2 + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)) .attr("y1", d => y(d.get(eem)[1])) .attr("y2", d => y(d.get(eem)[1])); high.transition() .duration(500) .delay((d, i) => i * 20) .attr("fill", d => color(d.get(eem)[4])) .attr("cx", (d, i) => x(data.bins[i][0]) + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)/2 + 2) .attr("cy", d => y(d.get(eem)[4])); low.transition() .duration(500) .delay((d, i) => i * 20) .attr("fill", d => color(d.get(eem)[3])) .attr("cx", (d, i) => x(data.bins[i][0]) + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)/2 + 2) .attr("cy", d => y(d.get(eem)[3])); } function update(eem) { transitionStacked(eem); } svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(legend); svg.selectAll("text").attr("font-size", "12px") return Object.assign(svg.node(), {update}); }33:T1a32,histogram = { const width = 960; const margin = {top: 100, right: 25, bottom: 30, left: 40}; const padding = {horizontal: 20, vertical: 30}; const scenarios = ["Upgrade 1", "Upgrade 2", "Upgrade 3"]; const columns = 3; const cellWidth = _.round((width - margin.left - margin.right - (columns - 1) * padding.horizontal) / columns); const cellHeight = 300; const keys = Object.keys(raw[0]).filter(d => d != "temp"); const rows = _.ceil((keys.length - 1) / columns); const svg = d3.select(DOM.svg(width, (margin.top + margin.bottom + rows * cellHeight + (rows - 1)* padding.vertical))); const x = d3.scaleLinear() .domain(d3.extent(raw, d => kw_kbtu(d.base))).nice() .range([0, cellWidth]); const data = raw.filter(d => d.temp < 20); const thresholds = d3.histogram() .domain(x.domain()) .thresholds(x.ticks(10)) .value(d => c_f(d.base)) (data); const bin = m => thresholds.map(d => { let arr = m.filter(val => kw_kbtu(val) >= d.x0 && kw_kbtu(val) < d.x1); // arr.x0 = d.x0; // arr.x1 = d.x1; // arr.y1 = arr.length / m.length; return {x0: d.x0, x1: d.x1, y1: arr.length / m.length}; }); // let max = 0; const bins = new Map( _.range(-17, 21, 2).map(temp => { let mapped = {}; for (let key of keys) { let m = data.filter(d => d.temp >= temp && d.temp < temp + 2).map(d => d[key]); let filtered = bin(m); mapped[key] = filtered; // let newMax = d3.max(filtered, d => d.length / m.length); // if (newMax > max) max = newMax; }; return [temp, mapped]; }) ); const y = d3.scaleLinear() .domain([0, .7]).nice() .range([cellHeight, 0]); const chart = svg.selectAll("g") .data(keys.filter(d => d != "base")) .join("g") .attr("transform", (d, i) => { const h = (i % columns) * (cellWidth + padding.horizontal) + margin.left; const v = _.floor(i / columns) * (cellHeight + padding.vertical) + margin.top; return `translate(${h},${v})` }); const line = d3.line() // .defined(d => !isNaN(d.value)) .x(d => x(d.x0)) .y(d => y(d.y1)) .curve(d3.curveBasis); const area = d3.area() // .defined(d => !isNaN(d.value)) .x(d => x(d.x0)) .y1(d => y(d.y1)) .y0(cellHeight) .curve(d3.curveBasis); chart.each(function(d, i) { let xUnit = unitSelection.unit === "IP" ? "kBtu/hr": "kW"; let xText = i === (keys.filter(dd => dd != "base").length - 1) ? `${xUnit}`: ""; let yText = i === 0 ? "Hours": ""; let xAxis = g => g .attr("transform", `translate(0,${cellHeight})`) .call(d3.axisBottom(x).ticks(5)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 14) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(xText)); let yAxis = g => g .call(d3.axisLeft(y).tickFormat(d3.format(".0%")).ticks(5)) .call(g => g.select(".domain").remove()) .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") .text(yText)); d3.select(this).append("clipPath") .attr("id", `frame-clip${i}`).append("rect") .attr("x", 0) .attr("y", 0) .attr("width", cellWidth) .attr("height", cellHeight); d3.select(this).append("rect") .attr("x", 0) .attr("y", 0) .attr("width", cellWidth) .attr("height", cellHeight) .attr("fill", "none") .attr("shape-rendering", "crispEdges") .attr("stroke-opacity", 0.2) .attr("stroke", "#333333"); const baseClip = d3.select(this) .append("clipPath").attr("id", `base-clip${i}`) .append("path") .datum(bins.get(temperature).base) .attr("d", area); const baseBackground = d3.select(this) .append("rect") .attr("fill", "#e5e2e0") .attr("clip-path",`url(#base-clip${i})`) .attr("opacity", .6) .attr("x", x(target)) .attr("y", 0) .attr("width", cellWidth - x(target)) .attr("height", cellHeight); const baseLine = d3.select(this) .append("path") .datum(bins.get(temperature).base) .attr("clip-path", `url(#frame-clip${i})`) .style('stroke-dasharray', '3,2') .attr("stroke-width", 2) .attr("fill", "none") .attr("stroke", "#bcbcbc") .attr("d", line); const scenarioClip = d3.select(this) .append("clipPath").attr("id", `scenario-clip${i}`) .append("path") .datum(bins.get(temperature)[d]) .attr("d", area); const scenarioBackground = d3.select(this) .append("rect") .attr("fill", highColor) .attr("clip-path",`url(#scenario-clip${i})`) .attr("opacity", .8) .attr("x", x(target)) .attr("y", 0) .attr("width", cellWidth - x(target)) .attr("height", cellHeight); // const scenarioLine = d3.select(this) // .append("path") // .datum(bins.get(temperature)[d]) // .attr("clip-path", `url(#frame-clip${i})`) // .attr("stroke-width", 2) // .attr("fill", "none") // .attr("stroke", highColor) // .attr("d", line); const targetBackground = d3.select(this) .append("rect") .attr("fill", lowColor) .attr("clip-path",`url(#scenario-clip${i})`) .attr("opacity", .5) .attr("x", 0) .attr("y", 0) .attr("width", x(target)) .attr("height", cellHeight); d3.select(this).append("line") .attr("stroke", lowColor) .attr("mix-blend-mode", "multiply") .attr("stroke-opacity", .7) .attr("stroke-width", 2) .attr("x1", x(target)) .attr("x2", x(target)) .attr("y1", 0) .attr("y2", cellHeight); if (i % columns === 0) d3.select(this).append("g").call(yAxis); if (_.floor(i / columns) === 0) d3.select(this).append("g").call(xAxis); d3.select(this).append("text") .attr("x", 0) .attr("y", -20) .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("text-anchor", "start") .text(scenarios[i]); }); svg.selectAll("text").attr("font-size", "12px") return svg.node(); }34:T8cc,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; }35:T513,data = { const temps = raw.map(d => d.temp); let data = raw.filter(d => d.temp < 20); const extents = d3.extent(data, d => d.temp).map(d => Math.ceil(d)); const bins = _.range(extents[0], extents[1], 2).map(d => [d, d + 2]); let binned = bins.map(bin => data.filter(d => d.temp >= bin[0] && d.temp < bin[1])); binned = binned.map((d, bin) => { let map = new Map(); let hours = temps.filter(temp => temp >= bins[bin][0]).length; for (const key in d[0]) { let s = d.sort((a, b) => a[key] - b[key]).map(dd => dd[key]); if (key != "temp") { s = s.map(val => kw_kbtu(val)); } map.set(key, [d3.quantile(s, 0.25), d3.quantile(s, 0.5), d3.quantile(s, 0.75), d3.min(s), d3.max(s), hours]); } return map; }); binned.bins = bins; return binned; // const temp = data.sort((a, b) => b.base - a.base).map(d => ({temp: d.temp})); // const keys = Object.keys(data[0]).filter(d => d != "temp"); // const sorted = keys.map(key => data.sort((a, b) => b.key - a.key).map(d => ({[key]: d[key]}) )); // data = _.zipWith(...sorted, temp, function(...args) { // return Object.assign(...args); // }); // return data.filter(d => d.base >= 0); } 36:T498,color = { const lookup = { "HOT WATER": "#d52928", "HEATING ENERGY": highColor, "COOLING ENERGY": "#1dbfcf", "ELECTRICITY": "#d6d231", "CHILLED WATER": "#1dbfcf", "INTERNAL GAINS": "#c5b0d5", "PASSIVE SOLAR GAINS": "#c5b0d5", "NATURAL VENTILATION": "#c5b0d5", "CONDUCTION LOSSES": "#c5b0d5", "HEATING LOAD": "#e55725", "LIGHTING": "#d6d231", "EQUIPMENT": chroma("#d6d231").darken().hex(), "PUMPS": chroma("#bfbfbf").darken().hex(), "FANS": "#bfbfbf", "COOLING LOAD": "#1f77b4", "PUMP & FAN GAINS": "#8fc0df", "EQUIPMENT GAINS": "#8fc0df", "CONDUCTION GAINS": "#8fc0df", "PEOPLE GAINS": "#8fc0df", "OA GAINS": "#8fc0df", "LIGHTING GAINS": "#8fc0df", "SOLAR GAINS": "#8fc0df", "ROOF CONDUCTION LOSSES": "#f8ba88", "WINDOW CONDUCTION LOSSES": "#f8ba88", "WALL CONDUCTION LOSSES": "#f8ba88", "INFILTRATION LOSSES": "#f8ba88", "MISC LOSSES": "#f8ba88", "OA HEATING": "#f8ba88", "DHW": "#e55725", "HW DISTRIBUTION LOSSES": chroma("#e55725").darken().hex(), "CHW DISTRIBUTION LOSSES": chroma("#1dbfcf").darken().hex() } return name => lookup[name]; }37:[] 2f:{"title":"Yale Berkeley Update","cells":[{"id":0,"value":"md`# Yale Berkeley Update`","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1000,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"viewof scenario = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"viewof figure5 = html`Figure 5: Modeled heating loads versus outside air temperature.

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

\n### Heating Load Distribution\nAt any given outside air temperature, there is a range of possible heating loads due to variations in solar gains, occupancy loads, equipment operation, etc. While the graph above (Figure 5) represents this range as a box-and-whisker plot for all corresponding outside air temperatures, the graph below (Figure 6) shows the frequency distribution of loads for a single temperature (+/- 1°C). The existing building conditions are represented in grey, while the load distribution for each envelope upgrade package is shown in light orange (for loads that are within the target range) and red (for loads that are outside the target range). This graph illustrates the frequency of a specific load for any given outside air temperature, for each envelope upgrade package. Note how the entire projected load range with Envelope Upgrade 3 is within the target, even at the lowest outside air temperatures.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"viewof temperature = {\n const temp = d => _.round(c_f(d));\n \n return slider({\n min: -17, \n max: 19, \n step: 2, \n value: 7,\n display: v => `${temp(v)} ${unitSelection.unit === \"IP\"? \"F\": \"C\"}`,\n description: \"Select temperature range\"\n \n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"viewof figure6 = html`Figure 6: Distribution of heating loads for each envelope upgrade package at the selected temperature.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3@5.9.2', 'd3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"chroma = (await import(\"https://unpkg.com/chroma-js\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"formatEUI_IP_SI = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} kBtu/ft²/yr`;\n }\n else {\n return `${_.round(d / 3.412 * 10.76, 2)} kWh/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"c_f = d => unitSelection.unit === \"IP\" ? (d * 1.8 + 32): d\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"kw_kbtu = d => unitSelection.unit === \"IP\" ? (d * 3.412): d","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1093,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"highColor = \"#e26e42\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"target = kw_kbtu(94);","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"lowColor = \"#ffc48f\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"chart.update(scenario.scenario)","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"raw = await d3.csv(`https://da.introba.com/projects/yale-berkeley-enclosure-study/data/data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType);","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"monthly = {\n \n const process = d => ({\n ...d,\n date: d3.timeParse(\"%b\")(d.month.trim())\n });\n\n let hw = (await d3.csv(`https://da.introba.com/projects/yale-berkeley-enclosure-study/data/yale_hw_v2.csv?version=${Math.floor(Math.random() * 1000)}`, d3.autoType)).map(process);\n \n let chw = (await d3.csv(`https://da.introba.com/projects/yale-berkeley-enclosure-study/data/yale_chw_v2.csv?version=${Math.floor(Math.random() * 1000)}`, d3.autoType)).map(process);\n \n let electricity = (await d3.csv(`https://da.introba.com/projects/yale-berkeley-enclosure-study/data/yale_electricity_v2.csv?version=${Math.floor(Math.random() * 1000)}`, d3.autoType)).map(process);\n \n const monthly = {hw: hw, chw: chw, electricity: electricity};\n \n return monthly;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"formatEUI = d => `${d3.format(\".0f\")(_.round(((unitSelection.unit === \"IP\") ? (kw_kbtu(d) * 0.092903) : kw_kbtu(d))))} ${(unitSelection.unit === \"IP\") ? \"kBtu/ft²/yr\" : \"kWh/m²/yr\"}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 1], [960 - 1, 600 - 5]])\n .nodeAlign(d3.sankeyLeft);\n return sankey;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"loads = {\n let loads = (await d3.csv(\"https://da.introba.com/projects/yale-berkeley-enclosure-study/data/yale_sankey_v2.csv\")).map(({source, target, value}) => ({source: source, target: target, value: +value}));\n \n //http://da.introba.com/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","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"stackedColor = {\n const lookup = {\n \"Equipment\":chroma(\"#d6d231\").darken().hex(),\n \"Lighting\":\"#d6d231\",\n \"Heating\":highColor,\n \"Domestic Hot Water\":\"#e55725\",\n \"HW Dist. Losses\":chroma(\"#e55725\").darken().hex(),\n \"Cooling\":\"#1dbfcf\",\n \"CHW Dist. Losses\":chroma(\"#1dbfcf\").darken().hex(),\n \"Pumps\":chroma(\"#bfbfbf\").darken().hex(),\n \"Fans\":\"#bfbfbf\"\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"stacked = {\n let data = (await d3.csv(`https://da.introba.com/projects/yale-berkeley-enclosure-study/data/stacked_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType));\n \n \n const keys = Object.keys(data[0]).filter(d => d != \"Case\");\n \n const converted = data.map(o => {\n const a = {...o};\n for (const key of keys) {\n a[key] = eui(o[key]);\n }\n return a;\n \n });\n const stacked = d3.stack().keys(keys)(converted);\n stacked.columns = data.map(d => d.Case);\n stacked.keys = keys;\n stacked.totals = converted.map(o => _.round(_.sumBy(keys, key => o[key]), 2));\n \n return stacked;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d * 3.412 * 0.092903, 1) : _.round(d, 1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"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":1246,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await d3.csv(`https://da.introba.com/projects/canada-post/data/parametric_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType)); \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":1248,"value":"import {group} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}