31:T12cb,characterization = { const config = { height: 520, width: 960, units: unitSelection.unit, label: `${unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr"}` }; const svg = d3.select(DOM.svg(config.width, config.height)); const graph = sankey(sankey_data); const nodeWidth = graph.nodes[0].x1 - graph.nodes[0].x0; const node = svg.selectAll("g") .data(graph.nodes) .enter().append("g") .attr('transform', d => `translate(${d.x0}, ${d.y0})`); node.append("rect") .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.name)) .attr("display", d => d.name === "Nothing" ? "none" : null) .attr("stroke", "#000") .append("title") .html(d => `${d.name}\n${eui(d.value)} ${config.label}`); node.append("text") .style("font", "10px sans-serif") .attr("x", d => d.x0 < config.width / 2 ? 6 + (d.x1 - d.x0) : - 6) .attr("y", d => (d.y1 - d.y0) / 2) .attr("dy", "0.35em") .attr("display", d => d.name === "Window Losses" ? "none" : null) .attr("text-anchor", d => d.x0 < config.width / 2 ? "start" : "end") .attr('font-size', 10) .html(d => d.name); node.append("text") .style("font", "12px sans-serif") .attr("x", d => d.x0 < config.width / 2 ? 6 + (d.x1 - d.x0) : - 6) .attr("y", d => (d.y1 - d.y0) / 2) .attr("dy", d => { // switch(d.name) { // case "Heating Load": // return "-1.25em"; // default: // return "1.85em"; // } return "1.8em"; }) .attr("text-anchor", d => d.x0 < config.width / 2 ? "start" : "end") .style("font-weight", "bold") .html(d => { switch(d.name) { case "Natural Gas": return `EUI: ${_.round(eui(d.value), 0)} ${config.label}`; case "Electricity": return `EUI: ${_.round(eui(d.value), 0)} ${config.label}`; // case "Heating Load": // let source = d.targetLinks.filter(dd => dd.source.name === "Heating System"); // return `Heating TEDI: ${_.round(eui(source[0].value), 0)} ${config.label}`; default: return ""; } }); node.attr('cursor', 'move') .call(d3.drag() .on('start', dragStart) .on('drag', dragMove) .on('end', dragEnd)); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(graph.links) .enter().append("g") .style("mix-blend-mode", "multiply") .attr("id", d => d.source.name.replace(" ", "_") + "_" + d.target.name.replace(" ", "_")); //apply gradients based on input and output const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); link.append("path") .attr("class", "link") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("display", d=> d.target.name === "Nothing" ? "none": null) .attr("opacity", d => d.value < 0.02 ? 0 : 1) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .html(d => `${d.source.name} → ${d.target.name}\n${eui(d.value)} ${config.label}`); function dragStart (d) { if (!d.__x) d.__x = d3.event.x; if (!d.__y) d.__y = d3.event.y; if (!d.__x0) d.__x0 = d.x0; if (!d.__y0) d.__y0 = d.y0; if (!d.__x1) d.__x1 = d.x1; if (!d.__y1) d.__y1 = d.y1; } function dragMove(d) { d3.select(this) .attr('transform', function (d) { const dx = d3.event.x - d.__x; const dy = d3.event.y - d.__y; d.x0 = d.__x0 + dx; d.x1 = d.__x1 + dx; d.y0 = d.__y0 + dy; d.y1 = d.__y1 + dy; if (d.x0 < 0) { d.x0 = 0; d.x1 = nodeWidth; } if (d.x1 > config.width) { d.x0 = config.width - nodeWidth; d.x1 = config.width; } if (d.y0 < 0) { d.y0 = 0; d.y1 = d.__y1 - d.__y0; } if (d.y1 > config.height) { d.y0 = config.height - (d.__y1 - d.__y0); d.y1 = config.height; } return `translate(${d.x0}, ${d.y0})`; }); sankey.update(graph); link.selectAll(".link").attr('d', d3.sankeyLinkHorizontal()); } function dragEnd(d) { delete d.__x; delete d.__y; delete d.__x0; delete d.__x1; delete d.__y0; delete d.__y1; } return svg.node(); }32:T210f,sensitivies = { //general setup const config = { width: 960, cell: {height: 250, padding:40}, margin: {top: 60, right:15, bottom: 30, left: 55}, cols: 3, format: { "Window U": { newName: "Window U", convert: d => 1/d, ticks: d => d3.format(".2f")(1/d)}, "WWR": { newName: "Window-Wall Ratio", ticks: d3.format(",.0%")}, "Infiltration": { newName: "Infiltration cfm/ft²"}, "Skylight U": { convert: d => 1/d, ticks: d => d3.format(".2f")(1/d)}}, units: unitSelection.unit, y: euiSwitch.y } const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("display", "none") .style("position", "absolute") //.style("width", "80px") //.style("height", "30px") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "bold") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "#ffffff") .style("opacity", 0.9) .style("color", "#333333") .style("pointer-events", "none"); //handles conversion for each variable in config.format const data = sensitivity_data.map(d => { let dd = d.data; for (const key in config.format) { if ("convert" in config.format[key]) { dd = dd.map(p => ({...p, [key]: config.format[key].convert(p[key])})); } } return {variable: d.variable, data: dd}; }); //find the width of cells by dividing the total width by the number of cols config.cell.width = _.round( (config.width - config.margin.left - config.margin.right - config.cell.padding * (config.cols-1)) / config.cols ); //csize the svg based on the number of rows const svg = d3.select(DOM.svg(config.width, (config.cell.height + config.margin.bottom + config.cell.padding) * _.ceil(data.length / 3) + config.margin.top - config.margin.bottom )); //all the y values are the same - could use a map here to get different scales for each small multiple const y = d3.scaleLinear() .domain(d3.extent(data.map(d => d.data.map(p => eui(p[config.y]))).flat())) .range([config.cell.height, 0]).nice(); //create a map for all the x scales const x = new Map( Array.from( data.map(d => d.variable), key => [ key, d3.scaleLinear(d3.extent(data.filter(d => d.variable === key)[0].data.map(d => d[key])), key === "Infiltration" ? [config.cell.width, 0] : [0, config.cell.width]) ] ) ); //create a group for each chart const chart = svg.selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => { //position the group in its appropriate row and col const h = (i % config.cols) * (config.cell.width + config.cell.padding) + config.margin.left; const v = _.floor(i / config.cols) * (config.cell.height + config.margin.bottom + config.cell.padding) + config.margin.top; return `translate(${h},${v})` }); //run through each group chart.each(function(d, i) { //rename the variable if needed let name = d.variable; if (name in config.format) { if ("newName" in config.format[name]){ name = config.format[name].newName; } } //if there are format specifiers, use them, otherwise just use the default let xa = d3.axisBottom(x.get(d.variable)).ticks(6); if (d.variable in config.format) { if ("ticks" in config.format[d.variable]){ xa.tickFormat(config.format[d.variable].ticks); } } const xAxis = g => g .attr("transform", `translate(0,${config.cell.height})`) .call(xa) .call(g => g.select(".domain").remove()); const yAxis = g => { if (i % config.cols === 0) { g.call(d3.axisLeft(y).ticks(6).tickFormat(d3.format(".1f"))) .call(g => g.select(".domain").remove()); } } //put the y axis label in the top left corner of the first row/col. if (i === 0) { d3.select(this).append("g") .attr("transform", "translate(15, 20)") .append("text") .attr("font-size", 10) .attr("text-anchor", "start") .attr("opacity",1) .html(config.units === "IP" ? `${config.y} kBTU/ft²/yr`: `${config.y} kWh/m²/yr`); } //general pattern for generating the interpolation line const line = d3.line() .x(dd => x.get(d.variable)(dd[d.variable])) .y(dd => y(eui(dd[config.y]))) .curve(d3.curveCardinal.tension(0.1)); //horizontal grid lines d3.select(this).selectAll(".grid .horizontal") .data(_.range(8).slice(1).map(d => d * config.cell.height / 8)) .join("line") .attr("class", "grid") .attr("x1", (i % config.cols != 0) ? -config.cell.padding : 0) .attr("y1", d => d) .attr("x2", config.cell.width) .attr("y2", d => d); //vertical grid lines d3.select(this).selectAll(".grid .vertical") .data(_.range(8).slice(1).map(d => d * config.cell.width / 8)) .join("line") .attr("class", "grid") .attr("x1", d => d) .attr("y1", 0) .attr("x2", d => d) .attr("y2", config.cell.height); d3.select(this).append("g").call(xAxis); d3.select(this).append("g").call(yAxis); d3.select(this).append("rect") .attr("class", "frame") .attr("x", 0) .attr("y", 0) .attr("width", config.cell.width) .attr("height", config.cell.height); //add the variable labels d3.select(this).append("text") .attr("x", 0) .attr("y", -15) .attr("text-anchor", "start") .attr("font-size", 12) .style("font-family", "Open Sans") .html(name); d3.select(this).selectAll(".recommended") .data(d.data.filter(dd => dd.Recommended === "yes")) .join("circle") .attr("class", "recommended") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd[config.y])); }) .attr("r",10) .attr("fill", "#b4d6e8") .attr("opacity", 0.8); d3.select(this).append("path") .datum(d.data) .attr("class", "interpolation") .attr("fill", "none") .attr("stroke", "#1f77b4") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); d3.select(this).selectAll("points") .data(d.data) .join("circle") .attr("class", "points") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd[config.y])); }) .attr("r",3) .attr("display", dd => { if (d.variable === "WWR" && dd[d.variable] === 0.35) { return "none"; } else if (d.variable === "Window U" && dd[d.variable] === 1/0.35) { return "none"; } else { return null; } }) .attr("stroke", "#1f77b4") .style("fill", dd => dd.Baseline === "yes" ? "#1f77b4": "#b4d6e8" ); d3.select(this).selectAll("overlay") .data(d.data) .join("circle") .attr("class", "overlay") .attr("r",18) .attr("stroke", "none") .style("fill", "#fff") .style("opacity", 0) .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui(dd[config.y])); }) .on("mouseover", dd => { tooltip.style("display", null); let data = dd[d.variable]; if (d.variable in config.format) { if ("ticks" in config.format[d.variable]){ data = config.format[d.variable].ticks(data); } } tooltip.html(`${data} | ${config.y} ${_.round(eui(dd[config.y]))} `) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px");; }) .on("mousemove", dd => { tooltip .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", d => { tooltip.style("display", "none"); }); }); return svg.node(); }33:T1de0,parcoords = { const config = { height: 500, width: 960, margin: {top: 60, right: 40, bottom: 10, left: 25}, format: { "Wall R": { ticks: d3.format(".0f"), numTicks: 4, selection: [100, 200] }, "Roof R": { newName: "Roof R", ticks: d3.format(".0f"), numTicks: 4, selection: [100, 200] }, "Window U": { newName: "Window U", ticks: d3.format(".1f"), numTicks: 4, selection: [250, 350] }, "SHGC": { ticks: d3.format(".1f"), numTicks: 4, selection: [350, 450] }, "WWR": { ticks: d3.format(".0%"), numTicks: 4, selection: [250, 350] }, "EUI": { newName: `${unitSelection.unit === "IP" ? "EUI kBTU/ft²/yr": "EUI kWh/m²/yr"}`, anchor: "middle", numTicks: 6, ticks: d3.format(".1f")} }, units: unitSelection.unit }; const container = document.createElement("div"); container.setAttribute("class", "parcoords"); container.setAttribute("style", `width: ${config.width}px; height: ${config.height}px;`); const ctx = DOM.context2d(config.width, config.height); //ctx.transform(1, 0, 0, 1, config.margin.left, config.margin.top); const svg = d3.select(DOM.svg(config.width, config.height)); config.chartHeight = config.height - config.margin.top - config.margin.bottom; config.chartWidth = config.width - config.margin.right - config.margin.left; const dimensions = parametric_data.columns.filter(d => d != "dataset"); const data = parametric_data.map(d => { let dd = d; for (const key in config.format) { if ("convert" in config.format[key]) { dd = {...dd, [key]: config.format[key].convert(dd[key])}; } } return dd; }); const y = new Map( Array.from( dimensions, key => { const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); let range = reverse.indexOf(key) >= 0 ? [0, config.chartHeight] : [config.chartHeight, 0]; return [key, d3.scaleLinear(d3.extent(data, d => d[key]), range).nice()] } ) ); const x = d3.scalePoint().range([0, config.chartWidth]).domain(dimensions).padding(0); const c = svg.append("g").attr("transform", `translate(${config.margin.left}, ${config.margin.top})`); ctx.globalCompositeOperation = 'darken'; const g = c.selectAll(".dimension") .data(dimensions) .enter().append("g") .attr("class", "dimension") .classed("nonactive", false) .attr("transform", d => `translate(${x(d)})`); g.append("g") .attr("class", "paraxis") .each(function(d) { const axis = d3.axisLeft(); let ya = axis.scale(y.get(d)); if (Object.keys(config.format).filter(key => "numTicks" in config.format[key]).indexOf(d) >= 0) { if (config.format[d].numTicks.length) { ya.tickValues(config.format[d].numTicks) } else { ya.ticks(config.format[d].numTicks); } } else { ya.ticks(5); } if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { ya.tickFormat(config.format[d].ticks); } // let ya = axis.scale(y.get(d)); // if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { // ya = axis.scale(y.get(d)).tickFormat(config.format[d].ticks); // } d3.select(this).call(ya); }) .call(g => g.selectAll("text") .clone(true).lower() .attr("fill", "none") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("opacity", 0.6) .attr("stroke", "white")) .call(g => g.selectAll("text") .attr("x", -12)); g.append("text") .attr("class", "label") .style("text-anchor", d => { let anchor = "middle"; if (Object.keys(config.format).filter(d => "anchor" in config.format[d]).indexOf(d) >= 0) { anchor = config.format[d].anchor; } return anchor }) .attr("y", -25) .attr("font-size", 12) .style("font-family", "Open Sans") .html(d => { let name = d; if (Object.keys(config.format).filter(d => "newName" in config.format[d]).indexOf(d) >= 0) { name = config.format[d].newName; } return name; }); const render = renderQueue(draw).rate(50); ctx.clearRect(0,0,config.width,config.height); render(data); g.append("g") .attr("class", "parbrush") .each(function(d) { y.get(d).brush = d3.brushY().extent([[-10,-1], [10,config.chartHeight + 1]]) .on("brush", brush) .on("end", brush); d3.select(this) .call(y.get(d).brush); if (Object.keys(config.format).filter(d => "selection" in config.format[d]).indexOf(d) >= 0) { d3.select(this).call(y.get(d).brush.move, config.format[d].selection); } }) .selectAll("rect") .attr("x", -10) .attr("width", 20); function brush() { render.invalidate(); const actives = []; svg.selectAll(".parbrush") .filter(function(d) { y.get(d).brushSelectionValue = d3.brushSelection(this); return d3.brushSelection(this); }) .each(function(d) { actives.push({ dimension: d, extent: d3.brushSelection(this).map(y.get(d).invert) }); }); const selected = data.filter(function(d) { return actives.every(function(active) { let result = active.extent[1] <= d[active.dimension] && d[active.dimension] <= active.extent[0]; const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); if (reverse.indexOf(active.dimension) >= 0) { result = active.extent[1] >= d[active.dimension] && d[active.dimension] >= active.extent[0]; } return result; console.log(result) }); }); ctx.clearRect(0,0,config.width,config.height); render(selected); } function draw(d) { if (d.dataset === "interpolated") { //context.globalAlpha = .1; ctx.strokeStyle = "#ddeaf2"; ctx.lineWidth = 1; } else { //context.globalAlpha = 1; ctx.strokeStyle = "#1f77b4"; ctx.lineWidth = 1.5; } ctx.beginPath(); var coords = dimensions.map(p => [x(p) + config.margin.left, y.get(p)(d[p]) + config.margin.top]); coords.forEach(function(p,i) { // this tricky bit avoids rendering null values as 0 if (p === null) { // this bit renders horizontal lines on the previous/next // dimensions, so that sandwiched null values are visible if (i > 0) { var prev = coords[i-1]; if (prev !== null) { ctx.moveTo(prev[0],prev[1]); ctx.lineTo(prev[0]+6,prev[1]); } } if (i < coords.length-1) { var next = coords[i+1]; if (next !== null) { ctx.moveTo(next[0]-6,next[1]); } } return; } if (i == 0) { ctx.moveTo(p[0],p[1]); return; } ctx.lineTo(p[0],p[1]); }); ctx.stroke(); } container.appendChild(ctx.canvas); container.appendChild(svg.node()); return container; }34:T159e,stackedBar = { const config = { height: 450, width: 960, margin: {top: 40, right:225, bottom: 30, left: 50, legend: 10}, units: unitSelection.unit, label: `${unitSelection.unit === "IP" ? "kBTU": "kWh"}` }; const pvCapacity = d => (unitSelection.unit === "IP") ? ((d/1134) / 3.412): d/1134; const svg = d3.select(DOM.svg(config.width, config.height)); const x = d3.scaleBand() .domain(stacked.columns) .range([config.margin.left, config.width - config.margin.right]) .paddingOuter(.3) .paddingInner(0.75); const y = d3.scaleLinear() .domain([0, energy(350000000)]) // .domain([0, d3.max(stacked.totals) + eui(30)]) .rangeRound([config.height - config.margin.bottom, config.margin.top]).nice(); const y2 = d3.scaleLinear() .domain([0, 100000]) // .domain([0, d3.max(stacked.totals) + eui(30)]) .rangeRound([config.height - config.margin.bottom, config.margin.top]).nice(); const xAxis = g => g .attr("transform", `translate(0,${config.height - config.margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${config.margin.left},0)`) .call(d3.axisLeft(y).ticks(null, "s").tickSize(-(config.width - config.margin.left - config.margin.right + 20)).tickPadding(10)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "#eaeaea").attr("opacity", 0.7)) .call(g => g.select(".tick:first-of-type text").clone() .attr("transform", "rotate(-90)") .attr("y", -40) .attr("x", 0) .attr("text-anchor", "start") .attr("font-weight", "bold") .style("paint-order", "stroke") .style("stroke", "#ffffff") .style("stroke-width", "8px") .html(`Total Energy (${config.label})`)); const yAxis2 = g => g .attr("transform", `translate(${config.width - config.margin.right + 20},0)`) .call(d3.axisRight(y2).ticks(null, "s").tickSize(-(config.width - config.margin.left - config.margin.right + 20)).tickPadding(10)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").remove()) .call(g => g.select(".tick:first-of-type text").clone() .attr("transform", "rotate(-90)") .attr("y", 50) .attr("x", 0) .attr("text-anchor", "start") .attr("font-weight", "bold") .style("paint-order", "stroke") .style("stroke", "#ffffff") .style("stroke-width", "8px") .html(`PV System Size (kW)`)); const legend = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "end") .selectAll("g") .data(stacked.keys.slice().reverse().concat(["blank", "PV Offset"])) .join("g") .attr("transform", (d, i) => `translate(0,${i * 21})`); g.append("rect") .attr("x", -18) .attr("width", 18) .attr("height", 18) .attr("fill", d => d === "blank"? "#ffffff": stackedColor(d)); g.append("text") .attr("x", -28) .attr("y", 8) .attr("dy", "0.35em") .text(d => d === "blank"? "": d); } const totals = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "middle") .selectAll("g") .data(stacked.totals) .join("g") .attr("transform", (d, i) => `translate(${x(stacked.columns[i])},${y(d)})`); g.append("text") .attr("x", -5) .attr("y", -16) .attr("dy", "0.35em") .text(d => d3.format(",.3s")(_.round(d, 2))); } const pv_sizes = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "middle") .selectAll("g") .data(stacked.totals) .join("g") .attr("transform", (d, i) => `translate(${x(stacked.columns[i])},${y2(pvCapacity(d))}`); g.append("text") .attr("x", x.bandwidth() + 5) .attr("y", -16) .attr("dy", "0.35em") .text(d => d3.format(",.3s")(_.round((d), 2))); } svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(yAxis2); svg.append("g") .selectAll("g") .data(stacked) .join("g") .attr("fill", (d, i) => stackedColor(stacked.keys[i])) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(stacked.columns[i]) - x.bandwidth()/2 - 5) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .append("title") .html(d => `${_.round(d[1] - d[0], 2)} ${unitSelection.unit === "IP" ? "kBTU": "kWh"}`); //adds pv bars svg.append("g") .selectAll("rect") .data(stacked.columns) .join("rect") .attr("fill", "#dddddd") .attr("x", d => x(d) + x.bandwidth()/2 + 5) .attr("y", (d, i) => y2(pvCapacity(stacked.totals[i]))) .attr("height", (d, i) => y2(0) - y2(pvCapacity(stacked.totals[i]))) .attr("width", x.bandwidth()) .append("title") .html((d, i) => `${d3.format(",.3s")(_.round(pvCapacity(stacked.totals[i]), 1))} kW`) ; svg.append("g") .attr("transform", `translate(${config.width - config.margin.legend},${config.margin.top})`) .call(legend); svg.append("g").call(totals) svg.append("g").call(pv_sizes) return svg.node(); }35:T4ad,html``36:T41b,stacked = { let data = (await FileAttachment("stacked_data@2.csv").csv({ typed: true })); const keys = Object.keys(data[0]).filter(d => d != "Case").filter(d => d = "Dry Labs").filter(d => d = "Data Center").filter(d => d = "Wet Labs").filter(d => d = "Vivarium"); const converted = data.map(o => { const a = {...o}; for (const key of keys) { if (key == "Wet Labs") { a[key] = energy(o[key]*WetLabs*1.54); } else if (key == "Dry Labs"){ a[key] = energy(o[key]*DryLabs*1.54); } else if (key == "Data Center"){ a[key] = energy(o[key]*DataCenter); } else if (key == "Vivarium"){ a[key] = energy(o[key]*Vivarium); } else if (key == "Office Amenities"){ a[key] = energy(o[key]*Office*1.54); } } return a; }); const stacked = d3.stack().keys(keys)(converted); stacked.columns = data.map(d => d.Case); stacked.keys = keys; stacked.totals = converted.map(o => _.round(_.sumBy(keys, key => o[key]), 2)); return stacked; } 37:T4ca,color = { const lookup = { "Electricity":"#d6d231", "Data Center":"#d6d231", "Lab Building":"#d6d231", "DHW":"#d52928", "Heating Energy":"#d52928", "Cooling Energy":"#1dbfcf", "Lights":"#d6d231", "Fans":"#bfbfbf", "Equipment":"#dddddd", "HVAC+Lights":"#dddddd", "Data Center Equipment ":"#dddddd", "Other Gains":"#a17eb9", "Passive Solar Gains":"#a17eb9", "Internal Gains":"#a17eb9", "Occupant Gains":"#a17eb9", "Infiltration Losses":"#a17eb9", "Windows":"#a17eb9", "Internal Equipment Gains":"#a17eb9", "OA Economizer":"#a17eb9", "Walls":"#f7aa6e", "Roof":"#f7aa6e", "Below Grade":"#f7aa6e", "Infiltration":"#f7aa6e", "Envelope Losses":"#f7aa6e", "OA Heating":"#f7aa6e", "Reheat":"#f7aa6e", "Equipment Gains":"#6aadd6", "Lighting":"#6aadd6", "Solar Gains":"#6aadd6", "OA Cooling":"#6aadd6", "Occupants":"#6aadd6", "Cooling Load":"#1f77b4", "Cooling System":"#1f77b4", "Heating Load":"#e55725", "Heating System":"#e55725", "Pumps & Aux":"#adadad", "Exterior Usage": "#808080", "Floor on Grade":"#f7aa6e", "Natural Gas": "#e55725" }; return name => lookup[name]; }38: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; }39:T8cf,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }3a:[{"id":"b5ece992f293e87e84765469d8aeb1f6ca604e157b8269b42a372728ac4353114c9943a6f30daa2297be01fcb34754103189afa771a60011fa94ed66d59b72a9","href":"https://static.observableusercontent.com/files/b5ece992f293e87e84765469d8aeb1f6ca604e157b8269b42a372728ac4353114c9943a6f30daa2297be01fcb34754103189afa771a60011fa94ed66d59b72a9","name":"stacked_data@2.csv","type":"text/csv","lastModified":1767375495517.739,"size":194},{"id":"62bad1054f2877478e802959869108a56f5ae4a0fec36f5a32955ca2805f7a6104a470770d56accff730baf725b7380c274ba41cd3758744595eabe555c0346b","href":"https://static.observableusercontent.com/files/62bad1054f2877478e802959869108a56f5ae4a0fec36f5a32955ca2805f7a6104a470770d56accff730baf725b7380c274ba41cd3758744595eabe555c0346b","name":"parametric_data@1.csv","type":"text/csv","lastModified":1767375495517.056,"size":1422},{"id":"06b114780481daf415959aa3308cb43d158a5ce6a9350203714917989e5c42b35926da7e2e56d01a79a78c0f90fda7d2a00e93b7740b0c94831e5b57c6aeadbd","href":"https://static.observableusercontent.com/files/06b114780481daf415959aa3308cb43d158a5ce6a9350203714917989e5c42b35926da7e2e56d01a79a78c0f90fda7d2a00e93b7740b0c94831e5b57c6aeadbd","name":"interpolated_data@1.csv","type":"text/csv","lastModified":1767375495601.003,"size":38730},{"id":"2341c89db89b178fb403659de56c1f0f9d7384de4e6cf6dd29d71142eafffe1c790ab49e98c1a9af3a6c0f252e34c888615f4979cf27816856962a97bb58706f","href":"https://static.observableusercontent.com/files/2341c89db89b178fb403659de56c1f0f9d7384de4e6cf6dd29d71142eafffe1c790ab49e98c1a9af3a6c0f252e34c888615f4979cf27816856962a97bb58706f","name":"sankey_data@1.csv","type":"text/csv","lastModified":1767375495516.578,"size":987}] 2f:{"title":"McMaster Innovation Park [Including Data Center]","cells":[{"id":0,"value":"md`# McMaster Innovation Park [Including Data Center]`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof date = html`October 07, 2020 - Prevalidation Phase Energy Analysis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`\n

\n### Energy End Use Characterization\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"viewof figure2 = html`Figure 1: Building energy use characterization showing load components and energy end-uses for the current design.

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

\n### Envelope Sensitivity\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2197,"value":"viewof Text_Sensitivity = html` The sensitivity analysis shown below includes the high data center loads that diminishes the impact of the different parameters on the building EUI, Peak Cooling and TEDI. It is advisable to use the sensitivity analysis from the analysis excluding the data center available at this link.

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

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

\n### Parametric Analysis\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2217,"value":"viewof Text_Interpolation = html` The parametric analysis shown below includes the high data center loads that results affect the impact of different paramentes on the builidng EUI. It is advisable to use the parametric analysis from the analysis excluding the data center available at this link.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1905,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"parLegend = {\n \n const svg = d3.select(DOM.svg(960, 60))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\"Interpolated Data\", \"Modeled Data\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 30})`);\n\n g.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", 20)\n .attr(\"y1\", 0)\n .attr(\"y2\", 0)\n .attr(\"stroke\", d => d === \"Interpolated Data\" ? \"#ddeaf2\": \"#1f77b4\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-width\", 2)\n\n g.append(\"text\")\n .attr(\"x\", 30)\n .attr(\"y\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof figure4 = html`Figure 3: Effect of different combinations of parameter properties on building TEDI. Move or expand the selection box for each attribute.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"md`\n

\n#### Energy Performance Benchmarking\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1957,"value":"md`\n
\nThe chart below summarizes 3 options studied for energy consumption for the project including the data center. The Typical Baseline option represents a typical code-compliant lab building in cold climates. The Basis of Design Envelope/ Standard Lab corresponds to a model aligned with the current design intent, representative of a high efficiency all-electric building. Lastly, Basis of Design includes lab-specific energy efficiency measures such as air quality sensing, proximity sensor based fume hood setbacks, variable speed lab exhaust, and enhanced heat recovery. The impact of these measures depends on the program makeup of the building.
\n\nThe sliders below the chart can be used to adjust the program area types to study the change in corresponding energy use. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1738,"value":"viewof area = html`
Total Building Area (includes 35% circulation area) : ${d3.format(\",.0f\") (formatAREA_IP_SI(TotalArea))} ${unitSelection.unit === \"IP\" ? \"ft²\": \"m²\"}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1953,"value":"viewof circ = html`
Select the desired program area using the sliders below. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1713,"value":"viewof WetLabs = {\n return slider({\n min: 0, \n max: 260000, \n step: 1, \n // value: 109094,\n value: 70853,\n display: v => {\n let el = document.createElement(\"span\")\n \n el.innerHTML = `Wet Labs: ${d3.format(\",.0f\")(formatAREA_IP_SI(v))} ${unitSelection.unit === \"IP\" ? \"ft²\": \"m²\"}`\n return el;\n },\n \n }); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1729,"value":"viewof DryLabs = {\n return slider({\n min: 0, \n max: 260000, \n step: 1, \n // value: 60289,\n value: 39156,\n display: v => {\n let el = document.createElement(\"span\")\n \n el.innerHTML = `Dry Labs: ${d3.format(\",.0f\")(formatAREA_IP_SI(v))} ${unitSelection.unit === \"IP\" ? \"ft²\": \"m²\"}`\n return el;\n },\n \n }); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1894,"value":"viewof Office = {\n return slider({\n min: 0, \n max: 260000, \n step: 1, \n // value: 28708,\n value: 18645,\n display: v => {\n let el = document.createElement(\"span\")\n \n el.innerHTML = `Office Amenity: ${d3.format(\",.0f\")(formatAREA_IP_SI(v))} ${unitSelection.unit === \"IP\" ? \"ft²\": \"m²\"}`\n return el;\n },\n \n }); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1731,"value":"viewof DataCenter = {\n return slider({\n min: 0, \n max: 260000, \n step: 1, \n value: 93392,\n display: v => {\n let el = document.createElement(\"span\")\n \n el.innerHTML = `Data Center: ${d3.format(\",.0f\")(formatAREA_IP_SI(v))} ${unitSelection.unit === \"IP\" ? \"ft²\": \"m²\"}`\n return el;\n },\n \n }); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1733,"value":"viewof Vivarium = {\n return slider({\n min: 0, \n max: 260000, \n step: 1, \n value: 0,\n display: v => {\n let el = document.createElement(\"span\")\n\n el.innerHTML = `Vivarium: ${d3.format(\",.0f\")(formatAREA_IP_SI(v))} ${unitSelection.unit === \"IP\" ? \"ft²\": \"m²\"}`\n return el;\n },\n \n }); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"viewof figure5 = html`
Figure 4: Comparison of Site EUI for different studied scenarios.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2244,"value":"md`\n

\nDetailed model input assumptions are documented [here.](https://www.elementa.nyc/projects/mip-dc/assets/EnergyModelAssumption_DataCenter.pdf)

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

\n// Detailed model input assumptions are documented [here.](https://www.elementa.nyc/projects/ccabe/assets/191101_CCABE_EM_Inputs.pdf)

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1810,"value":"TotalArea= (WetLabs + DryLabs + DataCenter + Vivarium + Office) + 69437","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"formatEUI_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${d} kWh/m²/yr`;\n }\n else {\n return `${_.round(d * 3.412 / 10.76, 0)} kBtu/ft²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"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":981,"value":"formatGHG_IP_SI = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} gCO₂e/ft²/yr`;\n }\n else {\n return `${_.round(d * 7.273362, 2)} gCO₂e/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"formatGHG_IP_SI_KG = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} kgCO₂e/ft²/yr`;\n }\n else {\n return `${_.round(d * 7.273362, 2)} kgCO₂e/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"formatAREA_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 0)} m²`;\n }\n else {\n return `${_.round(d * 10.76, 0)} ft²`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1998,"value":"formatAREA_IP_SI = d => {\n if (unitSelection.unit === \"IP\") {\n return `${_.round(d, 0)}`;\n }\n else {\n return `${_.round(d / 10.76, 0)}`;\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"sankey_data = {\n let sankey_data = (await FileAttachment(\"sankey_data@1.csv\").csv({ typed: true })).map(({source, target, value}) => ({source: source, target: target, value: +value}));\n \n //http://elementa.nyc/yale/berekely/data/yale_sankey.csv\n //create a list of nodes and links\n const nodes = Array.from(new Set(sankey_data.map(d => [d.source, d.target]).flat()));\n const links = sankey_data.map(({source, target, value}) => ({\n source: nodes.indexOf(source),\n target: nodes.indexOf(target),\n value: value\n }));\n\n sankey_data = {nodes: nodes.map(d => ({name: d})), links: links};\n return sankey_data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"sankey = {\n const config = {\n height: 500,\n width: 920,\n margin: {bottom: 10}\n }\n const sankey = d3.sankey()\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 1], [config.width, config.height - config.margin.bottom]])\n .nodeAlign(d3.sankeyLeft);\n return sankey;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1782,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"stackedColor = {\n const lookup = {\n \"Wet Labs\":\"#1f77b4\",\n \"Dry Labs\":\"#6aadd6\",\n \"Data Center\":\"#b5decc\",\n \"Vivarium\":\"#d7ddda\",\n \"Office Amenities\": \"#bfbfbf\",\n \"Cooling\":\"#1dbfcf\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"Exterior Usage\": \"#ABA827\",\n \"PV Offset\": \"#dddddd\"\n };\n\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1987,"value":"energy = d => (unitSelection.unit === \"IP\") ? _.round(d , 2) : _.round(d* 0.293071, 2);","pinned":true,"hidden":false,"mode":"ojs"},{"id":958,"value":"ghg = d => (unitSelection.unit === \"IP\") ? _.round(d * 7.273362, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1433,"value":"cost = d => (unitSelection.unit === \"IP\") ? _.round(d, 2) : _.round(d * 10.76, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1695,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await FileAttachment(\"parametric_data@1.csv\").csv({ typed: true })); \n //group the data by independent variable\n const grouped = group(data, d => d.Variable);\n data = Array.from(grouped, d => ({variable: d[0], data: d[1].sort((a, b) => a[d[0]] - b[d[0]])}));\n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"parametric_data = {\n let parametrics = (await FileAttachment(\"interpolated_data@1.csv\").csv({ typed: true })); \n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, EUI: eui(d.EUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"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":22,"value":"d3 = require('d3@5.9.2','d3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"d3format = require('d3-format@1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"import {group, groupSum, groupCount} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"import {table} from \"@tmcw/tables@444\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}