3e:null 3f:["$","title",null,{"children":"Yale Residential College Energy Study | Boian Spassov | Observable"}] 45:T646,viewof zoneimg = { const zoneimg = html``; return zoneimg; }46:Tbd5,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; }, {}); 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(); } 47: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(); }48: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(); }49: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(); }4a:T1047,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(".1f")(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(); }4b: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(); }4c: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; }4d:T102d,table(internalLoads, { sortable: false, header: true, style: "normal", columns: { Program: { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. if (i === internalLoads.length -1) { return html`

${val}

`; } else { return html`

${val}

`; } } }, "Area (ft²)": { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. if (i === internalLoads.length -1) { return html`

${val}

`; } else { return html`

${val}

`; } } }, "Equipment (W/ft²)": { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. if (i === internalLoads.length -1) { return html`

${val}

`; } else { return html`

${val}

`; } } }, "Lights (W/ft²)": { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. if (i === internalLoads.length -1) { return html`

${val}

`; } else { return html`

${val}

`; } } }, "Occupancy (ft²/per.)": { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. if (i === internalLoads.length -1) { return html`

${val}

`; } else { return html`

${val}

`; } } }, "Infiltration (CFM/ft² @ 75pa)": { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. if (i === internalLoads.length -1) { return html`

${val}

`; } else { return html`

${val}

`; } } }, "OA Vent. (CFM)": { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. if (i === internalLoads.length -1) { return html`

${val}

`; } else { return html`

${val}

`; } } }, "Heating Setpoint (°F)": { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. if (i === internalLoads.length -1) { return html`

${val}

`; } else { return html`

${val}

`; } } }, "Cooling Setpoint (°F)": { formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. if (i === internalLoads.length -1) { return html`

${val}

`; } else { return html`

${val}

`; } } } } })4e:T5a4,table(occupancy, { sortable: false, header: true, style: "normal", columns: { "Hour": { formatter(val, i) { return html`

${val}

`; } }, "Bedrooms": { formatter(val, i) { return html`

${val}

`; } }, "Cafe / Dining": { formatter(val, i) { return html`

${val}

`; } }, "Circulation": { formatter(val, i) { return html`

${val}

`; } }, "Fitness": { formatter(val, i) { return html`

${val}

`; } }, "Food Prep": { formatter(val, i) { return html`

${val}

`; } }, "Student Activity": { formatter(val, i) { return html`

${val}

`; } }, "Back of House": { formatter(val, i) { return html`

${val}

`; } }, "Office": { formatter(val, i) { return html`

${val}

`; } }, "Restroom": { formatter(val, i) { return html`

${val}

`; } }, } })4f:T627,table(equipment, { sortable: false, header: true, style: "normal", columns: { "Hour": { formatter(val, i) { return html`

${val}

`; } }, "Bedrooms": { formatter(val, i) { return html`

${val}

`; } }, "Cafe / Dining": { formatter(val, i) { return html`

${val}

`; } }, "Circulation": { formatter(val, i) { return html`

${val}

`; } }, "Fitness": { formatter(val, i) { return html`

${val}

`; } }, "Fitness": { formatter(val, i) { return html`

${val}

`; } }, "Food Prep": { formatter(val, i) { return html`

${val}

`; } }, "Student Activity": { formatter(val, i) { return html`

${val}

`; } }, "Back of House": { formatter(val, i) { return html`

${val}

`; } }, "Office": { formatter(val, i) { return html`

${val}

`; } }, "Restroom": { formatter(val, i) { return html`

${val}

`; } }, } })50:T626,table(lighting, { sortable: false, header: true, style: "normal", columns: { "Hour": { formatter(val, i) { return html`

${val}

`; } }, "Bedrooms": { formatter(val, i) { return html`

${val}

`; } }, "Cafe / Dining": { formatter(val, i) { return html`

${val}

`; } }, "Circulation": { formatter(val, i) { return html`

${val}

`; } }, "Fitness": { formatter(val, i) { return html`

${val}

`; } }, "Fitness": { formatter(val, i) { return html`

${val}

`; } }, "Food Prep": { formatter(val, i) { return html`

${val}

`; } }, "Student Activity": { formatter(val, i) { return html`

${val}

`; } }, "Back of House": { formatter(val, i) { return html`

${val}

`; } }, "Office": { formatter(val, i) { return html`

${val}

`; } }, "Restroom": { formatter(val, i) { return html`

${val}

`; } }, } })51:T4ac,html``52:T60a,parametricsMonthly = { let data = (await d3.csv("https://www.elementa.nyc/projects/yale-berkeley-college/data/parametrics_monthly.csv", d3.autoType)); //group the data by independent variable const grouped = group(data, d => d.Variable); console.log(grouped); 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; } 53: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; }54: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}; }; }55: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; }56:[] 43:{"id":"35ff05cc864b948d","slug":null,"title":"Yale Residential College Energy Study","thumbnail":"a60b2d6176f4fb56bc0db8c84a420bae07c8daf31fd55afd192cf844876a2153","access_level":"public","create_time":"$D2022-12-22T23:59:45.615Z","update_time":"$D2022-12-22T23:59:45.615Z","view_time":null,"first_public_time":"$D2022-12-22T23:59:45.615Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7730210b4bd624d6","login":"locbit","name":"Boian Spassov","avatar_url":"https://avatars-next.observableusercontent.com/0b9090b3f2beb50c8f1d4ec746062e9f4edeb4bfdd7d1d900f883723aa19a202","tier":"starter_2024","bio":"","following":false},"version":158,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b4bc492420d1eda9","login":"locbit","name":"Boian Spassov","avatar_url":"https://avatars-next.observableusercontent.com/0b9090b3f2beb50c8f1d4ec746062e9f4edeb4bfdd7d1d900f883723aa19a202","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b4bc492420d1eda9","login":"locbit","name":"Boian Spassov","avatar_url":"https://avatars-next.observableusercontent.com/0b9090b3f2beb50c8f1d4ec746062e9f4edeb4bfdd7d1d900f883723aa19a202","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Yale Residential College Energy Study","cells":[{"id":5,"value":"md`# Yale Residential College Energy Study`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof date = html`February 6, 2019`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`\n#### Introduction\nAs part of the wider goal to achieve a Carbon Neutral Campus by 2050, Yale University is working with Integral Group 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.

`;\n return zone;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"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.

February 20, 2019

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"viewof figure5 = html`Figure 5: Sensitivity of individual building performance parameters on building energy use intensity.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof adjustVariable = {\n \n const adjustVariable = html``\n\n return adjustVariable;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`\n
\n#### Next Steps\nIntegral Group 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.

\n#### General Assumptions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"table(general, {\n sortable: false,\n header: false,\n style: \"normal\",\n columns: {\n Parameter: {\n formatter(val, i) {\n // A formatter that changes its behavior based on the row index,\n // so we don’t repeat the $ for every row.\n return html`

${val}

`;\n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`\n
\n

\n#### Internal Loads`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`\n
\n

\n#### Occupancy Schedules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`\n
\n

\n#### Equipment Schedules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`\n
\n

\n#### Lighting Schedules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"parametrics = {\n let parametrics = (await d3.csv(\"https://www.elementa.nyc/projects/yale-berkeley-college/data/parametrics.csv\", d3.autoType));\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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"convertEUI = d => (unit === \"IP\") ? (d * 3.412 * 0.092903) : d;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"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","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"d3 = require(\"https://bundle.run/d3@5.9.1\", \"https://bundle.run/d3-sankey@0.7.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"general = {\n let general = (await d3.csv(\"https://gist.githubusercontent.com/jameswperakis/e168e297d0685c7b5127ce8cae40b64c/raw/080a5d7c1582afd850b40fda23baed7735977227/general_parameters.csv\"))\n return general;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"internalLoads = {\n let internalLoads = (await d3.csv(\"https://gist.githubusercontent.com/jameswperakis/3cf87a7253a32592568ea1c6a99a662c/raw/e28696812171355d9f5a4642bca6164bdb6442bf/internal_loads.csv\"))\n \n // https://gist.githubusercontent.com/jameswperakis/3cf87a7253a32592568ea1c6a99a662c/raw/b754bd78f3f9728e5ec2282db6826a46635b54b6/internal_loads.csv\n return internalLoads;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"occupancy = {\n let occupancy = (await d3.csv(\"https://gist.githubusercontent.com/jameswperakis/86c76ed2a28add43419f0ac5cc10ce45/raw/c72cc80fc91c2d27b24bc0030dfca9073626c161/schedule_occupancy.csv\"))\n return occupancy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"equipment = {\n let equipment = (await d3.csv(\"https://gist.githubusercontent.com/jameswperakis/be3a96930e4bde86192a1969dbf2147f/raw/39350cd84af772c02857cccf33546f7ba234622d/schedule_equipment.csv\"))\n return equipment;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"lighting = {\n let lighting = (await d3.csv(\"https://gist.githubusercontent.com/jameswperakis/b8be024cd0af3e417a26af6527afdfcb/raw/73323a581f290cf37aaea44790ed97a460db0f9d/schedule_lighting.csv\"))\n return lighting;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"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 d3.csv(\"https://gist.githubusercontent.com/jameswperakis/c0b80e98a68aa08f8793bb2bfa1a3985/raw/cb9d84afcd8abfd20e8a8630e399dbc70e3520f2/yale_hw.csv\")).map(process);\n \n let chw = (await d3.csv(\"https://gist.githubusercontent.com/jameswperakis/04b57aec96d11304d556573ec9ff16a4/raw/a71ab1fdddfb835db3b0ed22920f9256311cfc98/yale_chw.csv\")).map(process);\n \n let electricity = (await d3.csv(\"https://gist.githubusercontent.com/jameswperakis/6611c37a602fff5de0181572ade46640/raw/2815f288ed4ae319527543e748081ca9f9c4c4c9/yale_electricity.csv\")).map(process);\n \n const monthly = {steam: steam, chw: chw, electricity: electricity};\n \n return monthly;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"import {table} from \"@tmcw/tables@444\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"import {group} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"getVal = d => parametricsMonthly.filter(p => p.variable === adjustVariable)[0].sensitivity[d][adjustVariable] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"unit = unitSelection.unit","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W56","stdlib":"1"}} 44:"$43:body"