25:["$","title",null,{"children":"CMC Appendix | Samuel Letellier-Duchesne | Observable"}] 49:T7b2,chart_electric = { //graph const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) //.style("overflow", "visible"); //data const metered = buildingData[building].monthly.utilities[0].measured; const modeled = buildingData[building].monthly.utilities[0].baseline_ensemble; //setup const color = "#fcd404"; const yAxis = g => g .attr("transform", `translate(${margin.left},0)`).attr("class", "axis") .call(d3.axisLeft(y).tickPadding(8).ticks(5)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 8) .attr("text-anchor", "start") .attr("font-weight", "bold") .html("Electricity (kbtu/ft²)")) //const tooltip = d3.select("body").append("div").call(createTooltip) // const tipContent = d => { // const html = `This value was observed in ${d.count}%
// of the models in the baseline ensemble.` // return html; // } const path = svg.append("g") .attr("fill", "none") .attr("stroke", chroma("#f9edbb")) .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(modeled) .join("path") .style("opacity", .5) .attr("d", d => line(d)); const path_metered = svg.append("g") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", 4) .style("stroke-dasharray", ("6, 8")) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(metered) .join("path") .style("opacity", 1) //.attr("d", d => line(d3.range(1, 13).map(dd => "E" + dd).map(dd => d[dd]))); .attr("d", line(metered)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.selectAll("text").attr("font-size", 14).attr("font-family", "Open Sans") return svg.node(); }4a:T7bb,chart_steam = { //graph const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) //.style("overflow", "visible"); //data const metered = buildingData[building].monthly.utilities[1].measured; const modeled = buildingData[building].monthly.utilities[1].baseline_ensemble; //setup const color = "#e26e42"; const yAxis = g => g .attr("transform", `translate(${margin.left},0)`).attr("class", "axis") .call(d3.axisLeft(y).tickPadding(8).ticks(5)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 8) .attr("text-anchor", "start") .attr("font-weight", "bold") .html("Natural Gas (kbtu/ft²)")) //const tooltip = d3.select("body").append("div").call(createTooltip) // const tipContent = d => { // const html = `This value was observed in ${d.count}%
// of the models in the baseline ensemble.` // return html; // } const path = svg.append("g") .attr("fill", "none") .attr("stroke", chroma(color).brighten(1.5)) .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(modeled) .join("path") .style("opacity", .3) .attr("d", d => line(d)); const path_metered = svg.append("g") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", 4) .style("stroke-dasharray", ("6, 8")) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(metered) .join("path") .style("opacity", 1) //.attr("d", d => line(d3.range(1, 13).map(dd => "E" + dd).map(dd => d[dd]))); .attr("d", line(metered)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.selectAll("text").attr("font-size", 14).attr("font-family", "Open Sans") return svg.node(); }4b:T1940,inputChart = { //data const data = buildingData[0].inputs; //setup const dims = {width: width, height: 1300}; const margin = {top: 20, right: 50, bottom: 20, left: 350}; const svg = d3.create("svg") .attr("viewBox", [0, 0, dims.width, dims.height]); const colors = {stroke: "#00a1b0", fill: "#48a999", none: "#D8D8D8"}; const tooltip = d3.select("body").append("div").call(createTooltip) const tipContent = d => { const html = `This value was observed in ${d.count}%
of the models in the baseline ensemble.` return html; } //scales const y = d3.scaleBand() .domain(d3.range(data.length).reverse()) .range([dims.height - margin.bottom, margin.top]) .padding(.1) .paddingOuter(.5); const yAxis = g => g .attr("transform", `translate(${0},0)`) .call(d3.axisRight(y).tickFormat(i => data[i].label)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .attr("font-size", font_size_plots) .attr("font-family", "Open Sans")) .call(g => g.selectAll(".tick line").remove()); const x = d3.scaleLinear() .domain(d3.extent(data[0].values, d => d.value)).nice() .range([margin.left, dims.width - margin.right]); const xDomain = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisRight(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text").remove()) .call(g => g.selectAll(".tick line") .attr("stroke-opacity", 0.2) .attr("x2", dims.width - margin.left - margin.right)); const scale = d3.scaleLinear() .domain([0, 100]) .range([0, y.bandwidth()/1.6]); //graph svg.append("g") .call(xDomain); svg.append("g") .call(yAxis); // labels const fixLabel = d => { if (String(d).includes("Hospital")) {return "High Intensity"; } else if (String(d).includes("Academic")) {return "Uniform Academic"; } else if (String(d).includes("School")) {return "Seasonal Academic"; } else if (String(d).includes("Office")) {return "Standard";} else {return d} } //return and transition return Object.assign(svg.node(), { updateInputs(inputs) { const t = svg.transition().duration(500); const highlightMax = values => { let sort = _.sortBy(values, 'count').reverse(); sort = sort.map((d, i) => ({...d, highlight: (i === 0 ? true: false)})); return _.sortBy(sort, 'value'); } const variable = svg.selectAll(".variable") .data(inputs) .join("g") .attr("class", "variable") .attr("transform", (d, i) => `translate(0,${y(i) + y.bandwidth()/2})`); variable.each(function(datum, i) { d3.select(this).selectAll(".point") .data(highlightMax(datum.values)) .join( enter => enter.append("circle") .attr("class", "point") .attr("stroke", "none") .attr("fill", d => d.highlight ? colors.stroke: colors.none) .attr("cy", 0) .attr("cx", (d, i) => x(d.value)) .attr("r", 4), update => update .call(update => update.transition(t) .attr("fill", d => d.highlight ? colors.stroke: colors.none)) ); d3.select(this).selectAll(".label") .data(highlightMax(datum.values)) .join( enter => enter.append("text") .attr("class", "label") .attr("font-weight", "bold") .attr("font-size", font_size_plots) .attr("font-family", "Open Sans") .attr("fill", d => d.highlight ? colors.stroke: colors.none) .attr("text-anchor", "middle") .attr("y", 30) .attr("x", (d, i) => x(d.value)) //.text(d => d.label), .text(d => fixLabel(d.label)), update => update .call(update => update.transition(t) .attr("fill", d => d.highlight ? colors.stroke: colors.none)) ); const bubbles = d3.select(this).selectAll(".bubble") .data(highlightMax(datum.values)) .join( enter => enter.append("circle") .attr("class", "bubble") .style("mix-blend-mode", "multiply") .attr("stroke", d => d.highlight ? colors.stroke: chroma(colors.none).darken()) .attr("stroke-width", 1) .attr("fill", d => d.highlight ? chroma(colors.stroke).brighten(1.5).desaturate(): colors.none) //.attr("fill", chroma(colors.stroke).brighten(1.5).desaturate()) .attr("fill-opacity", 0.4) .attr("cy", 0) .attr("cx", (d, i) => x(d.value)) .attr("r", d => scale(d.count)), update => update .call(update => update.transition(t) .attr("r", d => scale(d.count)) .attr("stroke", d => d.highlight ? colors.stroke: chroma(colors.none).darken()) .attr("fill", d => d.highlight ? chroma(colors.stroke).brighten(1.5).desaturate(): colors.none)) ); bubbles .on("mouseover", function(event, d) { let fillColor = d3.select(this).attr("fill"); let strokeColor = d3.select(this).attr("stroke"); d3.select(this) .attr("fill", chroma(fillColor).darken(0.5)) .attr("stroke", chroma(strokeColor).darken(0.5)); tooltip.style("display", null); tooltip.html(tipContent(d)) .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mousemove", function(event, d) { tooltip .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function(d) { let fillColor = d => d.highlight ? chroma(colors.stroke).brighten(1.5).desaturate(): colors.none; let strokeColor = d => d.highlight ? colors.stroke: chroma(colors.none).darken(); d3.select(this) .attr("fill", fillColor) .attr("stroke", strokeColor); tooltip.style("display", "none"); }); d3.selectAll(".point,.label").raise(); }); } }); }4c:T40a,measures = md`
##### Efficiency Measures Each efficiency measure was evaluated for each building to generate an estimate of greenhouse gas emissions (GHG) savings. The goal was to identify which types of efficiency measures are likely to have the biggest impact for each building. The results are used to generate a list of high-priority, most impactful projects across the entire portfolio. The range of savings that are shown for each efficiency measure are the result of the distribution of input parameters in the ensemble model. Note that the savings estimates come directly from a statistical model, and some of the identified measures might not make sense for a particular building. Nevertheless, it is useful to try and understand why the model is predicting savings for certain measures and not others, as it may help identify opportunities that were not apparent at the outset of the analysis. For Building ${buildingData[building].config.name}, the *Select EEMs* measure includes: *${formatEEMs(info.selectEEMs)}*.`4d:T1a2e,eemChart = { const data = buildingData[0].eems; //const data = buildingData[building].eems; let maximum = d3.max(data.measures, d => d.savings.r1); //setup const dims = {width: width, height: 800}; const margin = {top: 80, right: 50, bottom: 50, left: 280}; const svg = d3.create("svg") .attr("viewBox", [0, 0, dims.width, dims.height]) .style("overflow", "visible"); const colors = {stroke: "#00a1b0", light: "#b4e4ea", none: "#bfbfbf", white: "#ffffff"}; const tooltip = d3.select("body").append("div").call(createTooltip) const tipContent = d => { const html = `Median: ${d3.format(".1f")(d.qrt50)} MTCO₂e
Interquartile Range: ${d3.format(".1f")(d.qrt25)}-${d3.format(".1f")(d.qrt75)} MTCO₂e
` return html; } //scales const y = d3.scaleBand() .domain(d3.range(data.measures.length).reverse()) .range([dims.height - margin.bottom, margin.top]) .padding(.1) .paddingOuter(.5); const yAxis = g => g .attr("transform", `translate(${0},0)`) .call(d3.axisRight(y).tickFormat(i => data.measures[i].measure)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .attr("font-size", font_size_plots) .attr("font-family", "Open Sans")) .call(g => g.selectAll(".tick line").remove()); const x = d3.scaleLinear() .domain([0, maximum]).nice() .range([margin.left, dims.width - margin.right]); const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).tickPadding(10).tickFormat(d3.format("~s")).ticks(dims.width/100)) .call(g => g.selectAll("text") .attr("font-size", font_size_plots) .attr("font-family", "Open Sans")); const grid = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).tickPadding(10).ticks(dims.width/100)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text").remove()) .call(g => g.selectAll(".tick line") .attr("stroke-opacity", 0.1) .attr("y2", dims.height - margin.bottom - 120)); //graph const gridG = svg.append("g").call(grid); const xAxisG = svg.append("g").call(xAxis); xAxisG .call(g => g.select(".tick:first-of-type text").clone() .attr("y", -50) .attr("x", -3) .attr("text-anchor", "start") .attr("font-weight", "bold") //.html(data.label)) .html("Annual GHG Reductions (MT CO2e/yr)")) const yAxisg = svg.append("g") .call(yAxis); //return and transition return Object.assign(svg.node(), { updateEems(eems) { maximum = d3.max(eems.measures, d => d.savings.r1); x.domain([0, maximum]).nice() xAxisG.transition().call(xAxis); gridG.transition().call(grid); const t = svg.transition().duration(500); const measure = svg.selectAll(".measure") .data(eems.measures) .join("g") .attr("class", "measure") .attr("transform", (d, i) => `translate(0,${y(i) + y.bandwidth()/2})`); measure.each(function(datum, i) { d3.select(this).attr("opacity", datum.skip ? 0 : 1); d3.select(this).selectAll(".connector") .data([datum.savings]) .join( enter => enter.append("path") .attr("class", "connector") .attr("stroke", colors.none) .attr("stroke-width", 2) .attr("d", d => `M${x(d.r0)},0 H${x(d.r1)}`), update => update .call(update => update.transition(t) .attr("d", d => `M${x(d.r0)},0 H${x(d.r1)}`)) ); const interquartile = d3.select(this).selectAll(".interquartile") .data([datum.savings]) .join( enter => enter.append("rect") .attr("class", "interquartile") .attr("fill", d => "#ffffff") .attr("stroke", colors.light) .attr("stroke-width", 2) //.attr("height", b_y.bandwidth()*.2) //.attr("fill", colors.fill) //.attr("stroke", "none") .attr("x", d => x(d.qrt25)) .attr("y", - y.bandwidth() * .1) .attr("height", y.bandwidth() * .2) .attr("width", d => x(d.qrt75) - x(d.qrt25)), update => update .call(update => update.transition(t) .attr("x", d => x(d.qrt25)) .attr("width", d => x(d.qrt75) - x(d.qrt25))) ); const median = d3.select(this).selectAll(".median") .data([datum.savings]) .join( enter => enter.append("rect") .attr("class", "median") .attr("fill", colors.stroke) .attr("stroke", "none") .attr("x", d => x(d.qrt50)) .attr("y", - y.bandwidth() * .2) .attr("height", y.bandwidth() * .4) .attr("width", 5) .attr("pointer-events", "none"), update => update .call(update => update.transition(t) .attr("x", d => x(d.qrt50))) ); d3.select(this).selectAll(".range") .data([datum.savings, datum.savings]) .join( enter => enter.append("circle") .attr("class", "range") .attr("fill", colors.none) .attr("stroke", "#ffffff") .attr("stroke-width", 1) .attr("cx", (d, i) => i === 0 ? x(d.r0) : x(d.r1) ) .attr("cy", 0) .attr("r", 4), update => update .call(update => update.transition(t) .attr("cx", (d, i) => i === 0 ? x(d.r0) : x(d.r1) )) ); interquartile .on("mouseover", function(event, d) { d3.select(this) .attr("fill", chroma(colors.light)); tooltip.style("display", null); tooltip.html(tipContent(d)) .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mousemove", function(event, d) { tooltip .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this) .attr("fill", colors.white); tooltip.style("display", "none"); }); }); } }); }4e:T17a0,GHGIChart = { //data const data = buildingData[0].scenarios; //const data = buildingData[building].scenarios; let maximum = 1.3*d3.max(data, d => d.values.GHGI.r1); //setup const dims = {width: width, height: 650}; const margin = {top: 120, right: 20, bottom: 30, left: 250}; const svg = d3.create("svg") .attr("viewBox", [0, 0, dims.width, dims.height]); const colors = {stroke: "#bfbfbf", fill: "#48a999", none: "#D8D8D8"}; const tooltip = d3.select("body").append("div").call(createTooltip) const tipContent = d => { let interquartileRange = d.scenario === "Baseline"? "NA": `${d3.format(".1f")(d.values.GHGI.qrt25)}-${d3.format(".1f")(d.values.GHGI.qrt75)} kgCO₂e/ft²`; const html = `Median: ${d3.format(".1f")(d.values.GHGI.qrt50)} kgCO₂e/ft²
Interquartile Range: ${interquartileRange}
` return html; } //scales const y = d3.scaleBand() .domain(d3.range(data.length).reverse()) .range([dims.height - margin.bottom, margin.top]) .padding(.1) .paddingOuter(.5); const yAxis = g => g .attr("transform", `translate(${0},0)`) .call(d3.axisRight(y).tickFormat(i => data[i].scenario)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .attr("font-size", 14) .attr("font-family", "Open Sans")) .call(g => g.selectAll(".tick line").remove()); const x = d3.scaleLinear() .domain([0, maximum]).nice() .range([margin.left, dims.width - margin.right]); const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).tickPadding(10).tickFormat(d3.format(".1f")).ticks(dims.width/100)) .call(g => g.selectAll("text") .attr("font-size", 14) .attr("font-family", "Open Sans")); const grid = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).tickPadding(10).ticks(dims.width/100)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text").remove()) .call(g => g.selectAll(".tick line") .attr("stroke-opacity", 0.1) .attr("y2", dims.height - margin.bottom - 120)); //graph const gridG = svg.append("g").call(grid); const xAxisG = svg.append("g").call(xAxis); xAxisG .call(g => g.select(".tick:first-of-type text").clone() .attr("y", -50) .attr("x", -3) .attr("text-anchor", "start") .attr("font-weight", "bold") .html('GHG Emissions Intensity (GHGI kgCO2e/ft2)')) const yAxisg = svg.append("g") .call(yAxis); //return and transition return Object.assign(svg.node(), { updateGHGI(scenarios) { maximum = 1.3*d3.max(scenarios, d => d.values.GHGI.r1); x.domain([0, maximum]).nice() xAxisG.transition().call(xAxis); gridG.transition().call(grid); const t = svg.transition().duration(500); const measure = svg.selectAll(".measure") .data(scenarios) .join("g") .attr("class", "measure") .attr("transform", (d, i) => `translate(0,${y(i) + y.bandwidth()/2})`); measure.each(function(datum, i) { d3.select(this).attr("opacity", datum.skip ? 0 : 1); const median = d3.select(this).selectAll(".median") .data([datum]) .join( enter => enter.append("rect") .attr("class", "median") .attr("fill", colors.fill) .attr("stroke", "none") .attr("x", x(0)) .attr("y", - y.bandwidth() * .2) .attr("height", y.bandwidth() * .4) .attr("width", d => x(d.values.GHGI.qrt50) - x(0)), update => update .call(update => update.transition(t) .attr("width", d => x(d.values.GHGI.qrt50) - x(0))) ); d3.select(this).selectAll(".connector") .data([datum]) .join( enter => enter.append("path") .attr("class", "connector") .attr("stroke", colors.none) .attr("stroke-width", 2) .attr("d", d => `M${x(d.values.GHGI.qrt25)},0 H${x(d.values.GHGI.qrt75)}`), update => update .call(update => update.transition(t) .attr("d", d => `M${x(d.values.GHGI.qrt25)},0 H${x(d.values.GHGI.qrt75)}`)) ); const interquartile = d3.select(this).selectAll(".interquartile") .data([datum.values.GHGI.qrt25, datum.values.GHGI.qrt75]) .join( enter => enter.append("circle") .attr("class", "interquartile") .attr("fill", colors.stroke) .attr("stroke", "#ffffff") .attr("stroke-width", 1) .attr("cx", d => x(d)) //.attr("cx", d => x(d.values.GHGI.qrt75) - x(d.values.GHGI.qrt50)) .attr("cy", 0) .attr("r", 4) .attr("pointer-events", "none"), update => update .call(update => update.transition(t) .attr("cx", d => x(d) )) ); median .on("mouseover", function(event, d) { d3.select(this) .attr("fill", chroma(colors.fill).darken(0.5)); tooltip.style("display", null); tooltip.html(tipContent(d)) .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mousemove", function(event, d) { tooltip .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this) .attr("fill", colors.fill); tooltip.style("display", "none"); }); }); } }); }4f:T1733,EUIChart = { //data const data = buildingData[0].scenarios; //const data = buildingData[building].scenarios; let maximum = 1.3*d3.max(data, d => d.values.EUI.r1); //setup const dims = {width: width, height: 650}; const margin = {top: 120, right: 20, bottom: 30, left: 250}; const svg = d3.create("svg") .attr("viewBox", [0, 0, dims.width, dims.height]); const colors = {stroke: "#bfbfbf", fill: "#6abf69", none: "#D8D8D8"}; const tooltip = d3.select("body").append("div").call(createTooltip) const tipContent = d => { let interquartileRange = d.scenario === "Baseline"? "NA": `${d3.format(".1f")(d.values.EUI.qrt75)}-${d3.format(".1f")(d.values.EUI.qrt75)} KBTU/ft²`; const html = `Median: ${d3.format(".1f")(d.values.EUI.qrt50)} kBTU/ft²
Interquartile Range: ${interquartileRange}
` return html; } //scales const y = d3.scaleBand() .domain(d3.range(data.length).reverse()) .range([dims.height - margin.bottom, margin.top]) .padding(.1) .paddingOuter(.5); const yAxis = g => g .attr("transform", `translate(${0},0)`) .call(d3.axisRight(y).tickFormat(i => data[i].scenario)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .attr("font-size", 14) .attr("font-family", "Open Sans")) .call(g => g.selectAll(".tick line").remove()); const x = d3.scaleLinear() .domain([0, maximum]).nice() .range([margin.left, dims.width - margin.right]); const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).tickPadding(10).tickFormat(d3.format(".0f")).ticks(dims.width/100)) .call(g => g.selectAll("text") .attr("font-size", 14) .attr("font-family", "Open Sans")); const grid = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).tickPadding(10).ticks(dims.width/100)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text").remove()) .call(g => g.selectAll(".tick line") .attr("stroke-opacity", 0.1) .attr("y2", dims.height - margin.bottom - 120)); //graph const gridG = svg.append("g").call(grid); const xAxisG = svg.append("g").call(xAxis); xAxisG .call(g => g.select(".tick:first-of-type text").clone() .attr("y", -50) .attr("x", -3) .attr("text-anchor", "start") .attr("font-weight", "bold") .html('Energy Use Intensity (EUI kBTU/ft2)')) const yAxisg = svg.append("g") .call(yAxis); //return and transition return Object.assign(svg.node(), { updateEUI(scenarios) { maximum = 1.3*d3.max(scenarios, d => d.values.EUI.r1); x.domain([0, maximum]).nice() xAxisG.transition().call(xAxis); gridG.transition().call(grid); const t = svg.transition().duration(500); const measure = svg.selectAll(".measure") .data(scenarios) .join("g") .attr("class", "measure") .attr("transform", (d, i) => `translate(0,${y(i) + y.bandwidth()/2})`); measure.each(function(datum, i) { d3.select(this).attr("opacity", datum.skip ? 0 : 1); const median = d3.select(this).selectAll(".median") .data([datum]) .join( enter => enter.append("rect") .attr("class", "median") .attr("fill", colors.fill) .attr("stroke", "none") .attr("x", x(0)) .attr("y", - y.bandwidth() * .2) .attr("height", y.bandwidth() * .4) .attr("width", d => x(d.values.EUI.qrt50) - x(0)), update => update .call(update => update.transition(t) .attr("width", d => x(d.values.EUI.qrt50) - x(0))) ); d3.select(this).selectAll(".connector") .data([datum]) .join( enter => enter.append("path") .attr("class", "connector") .attr("stroke", colors.none) .attr("stroke-width", 2) .attr("d", d => `M${x(d.values.EUI.qrt25)},0 H${x(d.values.EUI.qrt75)}`), update => update .call(update => update.transition(t) .attr("d", d => `M${x(d.values.EUI.qrt25)},0 H${x(d.values.EUI.qrt75)}`)) ); const interquartile = d3.select(this).selectAll(".interquartile") .data([datum.values.EUI.qrt25, datum.values.EUI.qrt75]) .join( enter => enter.append("circle") .attr("class", "interquartile") .attr("fill", colors.stroke) .attr("stroke", "#ffffff") .attr("stroke-width", 1) .attr("cx", d => x(d)) .attr("cy", 0) .attr("r", 4) .attr("pointer-events", "none"), update => update .call(update => update.transition(t) .attr("cx", d => x(d) )) ); median .on("mouseover", function(event, d) { d3.select(this) .attr("fill", chroma(colors.fill).darken(0.5)); tooltip.style("display", null); tooltip.html(tipContent(d)) .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mousemove", function(event, d) { tooltip .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this) .attr("fill", colors.fill); tooltip.style("display", "none"); }); }); } }); }50:Tba1,t_chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, 1.1*height]) .style("overflow", "visible"); // data to plot // GHGI values (kg CO2e/sf) const base_ghgi = buildingData[building].scenarios .filter(d => d.scenario == "Baseline") .map(d => d.values.GHGI.qrt50)[0] const reduced_ghgi = buildingData[building].scenarios .filter(d => d.scenario == "All Measures Combined") .map(d => d.values.GHGI.qrt50)[0] // GHG values (MT CO2e for building) const base = base_ghgi*info.area/1000 const reduced = reduced_ghgi*info.area/1000 // axes const t_y = d3.scaleLinear() .domain([0, base * 1.4]).nice() .range([height - margin.bottom, margin.top]) const t_yAxis = g => g .attr("transform", `translate(${margin.left},0)`).attr("class", "axis") .call(d3.axisLeft(t_y).tickPadding(8).ticks(5).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") .html("Annual GHG Emissions (MT CO2e)")) const t_x = d3.scaleBand() .domain([0, 1]) .range([margin.left, t_width - margin.right]) .padding(0.1) .paddingOuter(1) const t_xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(t_x).tickFormat(i => runs[i]).tickSizeOuter(.5).tickPadding(12)) // create plot svg.append("g") .selectAll("rect") .data([base, reduced]) .join("rect") .attr("fill", (d, i) => i === 0? "#bfbfbf":"#00a1b0") .attr("x", (d, i) => t_x(i)) .attr("y", d => t_y(d)) .attr("height", d => t_y(0) - t_y(d)) .attr("width", t_x.bandwidth()); svg.append("g") .selectAll("path") .data([base, reduced]) .join("path") .attr("stroke", "#bfbfbf") .attr("opacity", 0.6) .attr("stroke-width", 2) .attr("d", (d, i) => ` M${t_x(i) + (i === 1 ? t_x.bandwidth(): 0)},${t_y(d) +1} H${(t_x(i) + (i === 1 ? t_x.bandwidth(): 0)) + 15 * (i === 0? -1: 1)} `); const axis = svg.append("g") .call(t_xAxis); svg.append("g") .call(t_yAxis); svg.selectAll("text").attr("font-size", 16).attr("font-family", "Open Sans"); svg.append("g") .selectAll("text") .data([base, reduced]) .join("text") .attr("font-weight", "bold") .attr("font-family", "Open Sans") .attr("font-size", 24) .attr("x", (d, i) => (t_x(i) + (i === 1 ? t_x.bandwidth(): 0)) + 10 * (i === 0? -1: 1)) .attr("y", d => t_y(d)) .attr("dy", 1) .attr("dx", (d, i) => i === 0 ? -10: 10) .attr("text-anchor", (d, i) => i === 0 ? "end": "strart") .text(d => d3.format(",.0f")(d)); // wrap x-axis labels across multiple lines setTimeout(()=>{ axis.selectAll(".tick text") .call(wrap, t_x.bandwidth()); }, 0); return svg.node(); }51:Tb9d,eui_chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height*1.1]) .style("overflow", "visible"); // data to plot // EUI values (kBtu/sf) const base = buildingData[building].scenarios .filter(d => d.scenario == "Baseline") .map(d => d.values.EUI.qrt50)[0] const reduced = buildingData[building].scenarios .filter(d => d.scenario == "All Measures Combined") .map(d => d.values.EUI.qrt50)[0] // Energy values (kBtu for building) //const base = base_eui*info.area/1000 //const reduced = reduced_eui*info.area/1000 // axes const t_y = d3.scaleLinear() .domain([0, base * 1.4]).nice() .range([height - margin.bottom, margin.top]) const t_yAxis = g => g .attr("transform", `translate(${margin.left},0)`).attr("class", "axis") .call(d3.axisLeft(t_y).tickPadding(8).ticks(5).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") .html("Annual Energy Use Intensity (kBtu/sf)")) const t_x = d3.scaleBand() .domain([0, 1]) .range([margin.left, t_width - margin.right]) .padding(0.1) .paddingOuter(1) const t_xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(t_x).tickFormat(i => runs[i]).tickSizeOuter(.5).tickPadding(12)) // create plot svg.append("g") .selectAll("rect") .data([base, reduced]) .join("rect") .attr("fill", (d, i) => i === 0? "#bfbfbf":"#00a1b0") .attr("x", (d, i) => t_x(i)) .attr("y", d => t_y(d)) .attr("height", d => t_y(0) - t_y(d)) .attr("width", t_x.bandwidth()); svg.append("g") .selectAll("path") .data([base, reduced]) .join("path") .attr("stroke", "#bfbfbf") .attr("opacity", 0.6) .attr("stroke-width", 2) .attr("d", (d, i) => ` M${t_x(i) + (i === 1 ? t_x.bandwidth(): 0)},${t_y(d) +1} H${(t_x(i) + (i === 1 ? t_x.bandwidth(): 0)) + 15 * (i === 0? -1: 1)} `); const axis = svg.append("g") .call(t_xAxis); svg.append("g") .call(t_yAxis); svg.selectAll("text").attr("font-size", 16).attr("font-family", "Open Sans"); svg.append("g") .selectAll("text") .data([base, reduced]) .join("text") .attr("font-weight", "bold") .attr("font-family", "Open Sans") .attr("font-size", 24) .attr("x", (d, i) => (t_x(i) + (i === 1 ? t_x.bandwidth(): 0)) + 10 * (i === 0? -1: 1)) .attr("y", d => t_y(d)) .attr("dy", 1) .attr("dx", (d, i) => i === 0 ? -10: 10) .attr("text-anchor", (d, i) => i === 0 ? "end": "strart") .text(d => d3.format(",.0f")(d)); // wrap x-axis labels across multiple lines setTimeout(()=>{ axis.selectAll(".tick text") .call(wrap, t_x.bandwidth()); }, 0); return svg.node(); }52:T512,topProjects = [{'bldg': 'Kravis Center', 'meas': 'Combined'}, {'bldg': 'Collins Dining Hall', 'meas': 'Combined'}, {'bldg': 'Collins Dining Hall', 'meas': 'VentSchEnh'}, {'bldg': 'Roberts Pavilion', 'meas': 'Combined'}, {'bldg': 'Collins Dining Hall', 'meas': 'VentSch'}, {'bldg': 'Kravis Center', 'meas': 'Electrification'}, {'bldg': 'Burns Building/Axelrood Pool', 'meas': 'Combined'}, {'bldg': 'Roberts Pavilion', 'meas': 'VentSchEnh'}, {'bldg': 'Collins Dining Hall', 'meas': 'Electrification'}, {'bldg': 'Roberts Pavilion', 'meas': 'Electrification'}, {'bldg': 'Collins Dining Hall', 'meas': 'HRV'}, {'bldg': 'Bauer Center North', 'meas': 'Combined'}, {'bldg': 'Crown Hall', 'meas': 'Envelope'}, {'bldg': 'Crown Hall', 'meas': 'Electrification'}, {'bldg': 'Crown Hall', 'meas': 'TempResetEnh'}, {'bldg': 'Crown Hall', 'meas': 'LowLPD'}, {'bldg': 'Crown Hall', 'meas': 'TempReset'}, {'bldg': 'Crown Hall', 'meas': 'HRV'}, {'bldg': 'Crown Hall', 'meas': 'FanPower'}, {'bldg': 'Burns Building/Axelrood Pool', 'meas': 'VentSchEnh'}, {'bldg': 'Kravis Center', 'meas': 'HRV'}, {'bldg': 'Roberts Pavilion', 'meas': 'VentSch'}, {'bldg': 'Marks Hall', 'meas': 'Combined'}, {'bldg': 'Kravis Center', 'meas': 'LowLPD'}, {'bldg': 'Burns Building/Axelrood Pool', 'meas': 'VentSch'}]53:T1a13,topProjChart = { const data = topSavings; //const data = buildingData[building].eems; let maximum = d3.max(data, d => d.savings.r1); //setup const dims = {width: width, height: 1600}; const margin = {top: 80, right: 50, bottom: 50, left: 320}; const svg = d3.create("svg") .attr("viewBox", [0, 0, dims.width, dims.height]) .style("overflow", "visible"); const colors = {stroke: "#00a1b0", light: "#b4e4ea", none: "#bfbfbf", white: "#ffffff"}; const tooltip = d3.select("body").append("div").call(createTooltip) const tipContent = d => { const html = `Median: ${d3.format(".1f")(d.qrt50)} MTCO₂e
Interquartile Range: ${d3.format(".1f")(d.qrt25)}-${d3.format(".1f")(d.qrt75)} MTCO₂e
` return html; } //scales const y = d3.scaleBand() .domain(d3.range(data.length).reverse()) .range([dims.height - margin.bottom, margin.top]) .padding(.1) .paddingOuter(.5); const yAxis = g => g .attr("transform", `translate(${0},0)`) .call(d3.axisRight(y).tickFormat(i => data[i].name + ' - ' + data[i].measure)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .attr("font-size", font_size_plots) .attr("font-family", "Open Sans")) .call(g => g.selectAll(".tick line").remove()); const x = d3.scaleLinear() .domain([0, maximum]).nice() .range([margin.left, dims.width - margin.right]); const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).tickPadding(10).tickFormat(d3.format("~s")).ticks(dims.width/100)) .call(g => g.selectAll("text") .attr("font-size", font_size_plots) .attr("font-family", "Open Sans")); const grid = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).tickPadding(10).ticks(dims.width/100)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text").remove()) .call(g => g.selectAll(".tick line") .attr("stroke-opacity", 0.1) .attr("y2", dims.height - margin.bottom - 120)); //graph const gridG = svg.append("g").call(grid); const xAxisG = svg.append("g").call(xAxis); xAxisG .call(g => g.select(".tick:first-of-type text").clone() .attr("y", -50) .attr("x", -3) .attr("text-anchor", "start") .attr("font-weight", "bold") //.html(data.label)) .html("Annual GHG Reductions (MT CO2e/yr)")) const yAxisg = svg.append("g") .call(yAxis); //return and transition return Object.assign(svg.node(), { updateEems(eems) { maximum = d3.max(eems, d => d.savings.r1); x.domain([0, maximum]).nice() xAxisG.transition().call(xAxis); gridG.transition().call(grid); const t = svg.transition().duration(500); const measure = svg.selectAll(".measure") .data(eems) .join("g") .attr("class", "measure") .attr("transform", (d, i) => `translate(0,${y(i) + y.bandwidth()/2})`); measure.each(function(datum, i) { d3.select(this).attr("opacity", datum.skip ? 0 : 1); d3.select(this).selectAll(".connector") .data([datum.savings]) .join( enter => enter.append("path") .attr("class", "connector") .attr("stroke", colors.none) .attr("stroke-width", 2) .attr("d", d => `M${x(d.r0)},0 H${x(d.r1)}`), update => update .call(update => update.transition(t) .attr("d", d => `M${x(d.r0)},0 H${x(d.r1)}`)) ); const interquartile = d3.select(this).selectAll(".interquartile") .data([datum.savings]) .join( enter => enter.append("rect") .attr("class", "interquartile") .attr("fill", d => "#ffffff") .attr("stroke", colors.light) .attr("stroke-width", 2) //.attr("height", b_y.bandwidth()*.2) //.attr("fill", colors.fill) //.attr("stroke", "none") .attr("x", d => x(d.qrt25)) .attr("y", - y.bandwidth() * .1) .attr("height", y.bandwidth() * .2) .attr("width", d => x(d.qrt75) - x(d.qrt25)), update => update .call(update => update.transition(t) .attr("x", d => x(d.qrt25)) .attr("width", d => x(d.qrt75) - x(d.qrt25))) ); const median = d3.select(this).selectAll(".median") .data([datum.savings]) .join( enter => enter.append("rect") .attr("class", "median") .attr("fill", colors.stroke) .attr("stroke", "none") .attr("x", d => x(d.qrt50)) .attr("y", - y.bandwidth() * .2) .attr("height", y.bandwidth() * .4) .attr("width", 5) .attr("pointer-events", "none"), update => update .call(update => update.transition(t) .attr("x", d => x(d.qrt50))) ); d3.select(this).selectAll(".range") .data([datum.savings, datum.savings]) .join( enter => enter.append("circle") .attr("class", "range") .attr("fill", colors.none) .attr("stroke", "#ffffff") .attr("stroke-width", 1) .attr("cx", (d, i) => i === 0 ? x(d.r0) : x(d.r1) ) .attr("cy", 0) .attr("r", 4), update => update .call(update => update.transition(t) .attr("cx", (d, i) => i === 0 ? x(d.r0) : x(d.r1) )) ); interquartile .on("mouseover", function(event, d) { d3.select(this) .attr("fill", chroma(colors.light)); tooltip.style("display", null); tooltip.html(tipContent(d)) .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mousemove", function(event, d) { tooltip .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this) .attr("fill", colors.white); tooltip.style("display", "none"); }); }); } }); }54:[{"id":"6581f353a8d1aa52772c3d5e8724223cc2a0283af6905bb9a5db39846b5b30b749bd38a53a0fb7c0d51ddc6735a210bdd74fb55e018b59a5e507b2afdd521c08","href":"https://static.observableusercontent.com/files/6581f353a8d1aa52772c3d5e8724223cc2a0283af6905bb9a5db39846b5b30b749bd38a53a0fb7c0d51ddc6735a210bdd74fb55e018b59a5e507b2afdd521c08","name":"mit_locations_ph2and3.csv","type":"text/csv","lastModified":1656608151900.7,"size":2328},{"id":"0453eb93ba79060f47c9519f6ef1e25eee5a97ff1fe668d392be08000a4d2aa0b461af9c553176c129588b4e6673a65121c86faa7d934e2e3f8b2b390f88009f","href":"https://static.observableusercontent.com/files/0453eb93ba79060f47c9519f6ef1e25eee5a97ff1fe668d392be08000a4d2aa0b461af9c553176c129588b4e6673a65121c86faa7d934e2e3f8b2b390f88009f","name":"selectEEMs_updated_21-10-22.csv","type":"text/csv","lastModified":1656608151900.7,"size":1068},{"id":"dfe4e42b61e6d792728be8e95276d971442546573c0ecc73a98b2dd62444e97ca9d36de78cc911cdbe4cf2e4aa2b9fdb08bcb2af420a035ad146e2c92d3c399c","href":"https://static.observableusercontent.com/files/dfe4e42b61e6d792728be8e95276d971442546573c0ecc73a98b2dd62444e97ca9d36de78cc911cdbe4cf2e4aa2b9fdb08bcb2af420a035ad146e2c92d3c399c","name":"cmc_web_porfolio@2.json","type":"application/json","lastModified":1656611303476.297,"size":2319735}] 29:{"id":"431b1b0120797525","slug":null,"title":"CMC Appendix","thumbnail":"12adb7c68210edee9ff5409da97dbacae08151b89418d191ab6db957e26a8df0","access_level":"public","create_time":"$D2022-06-30T16:55:51.900Z","update_time":"$D2022-06-30T17:48:22.506Z","view_time":null,"first_public_time":"$D2024-01-04T19:21:10.773Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4acb0e22e0267db9","login":"samuelduchesne","name":"Samuel Letellier-Duchesne","avatar_url":"https://avatars-next.observableusercontent.com/d0af13a1725a63787ebcd71671173850f94a51e751f162788830781c72b0be9a","tier":"starter_2024","bio":"Building Performance Analyst at Elementa Engineering in New York City","followed_by_you":false,"follows_you":false},"version":2430,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"084b4d1bf3eab9dd","login":"samuelduchesne","name":"Samuel Letellier-Duchesne","avatar_url":"https://avatars-next.observableusercontent.com/d0af13a1725a63787ebcd71671173850f94a51e751f162788830781c72b0be9a","tier":null,"bio":"Building Performance Analyst at Elementa Engineering in New York City","followed_by_you":false,"follows_you":false},{"type":"individual","id":"f725482116d7891b","login":"elementa","name":"Elementa Engineering","avatar_url":"https://avatars-next.observableusercontent.com/392be552c44531b13196ece3fde1f8781cde3f3738248df478971dc7871a7a1f","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"084b4d1bf3eab9dd","login":"samuelduchesne","name":"Samuel Letellier-Duchesne","avatar_url":"https://avatars-next.observableusercontent.com/d0af13a1725a63787ebcd71671173850f94a51e751f162788830781c72b0be9a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CMC Appendix","cells":[{"id":0,"value":"# CMC Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"buildingData = {\n let data = await FileAttachment(\"cmc_web_porfolio@2.json\").json();\n\n let scale = d3.scaleLinear().domain([0, 3]).range([0, 3]);\n\n const changeValues = input => {\n scale.domain([0, input.values.length - 1]);\n let values = input.values.map(d => ({...d, value: scale(d.value)}));\n return {...input, values: values};\n }\n\n data = data.map(bldg => ({...bldg, inputs: bldg.inputs.map(input => changeValues(input))}));\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":248,"value":"locations = {\n let f = await FileAttachment(\"mit_locations_ph2and3.csv\").csv({typed: true});\n let locations = {};\n f.forEach(d => locations[d.name] = d);\n return locations;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1637,"value":"selectEEMs = FileAttachment(\"selectEEMs_updated_21-10-22.csv\").csv({typed: true});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"info = ({\n name: buildingData[building].config.name,\n rawAddress: buildingData[building].config.address,\n area: buildingData[building].config.gsf,\n cluster: buildingData[building].config.cluster,\n emissions: buildingData[building].eems.baseline,\n pvKw: buildingData[building].config.pv_array_power_kw,\n pvSf: buildingData[building].config.pv_array_area_sf,\n batteryKwh: buildingData[building].config.battery_capacity_kwh,\n //otherBuildings: buildingData.filter(d => d.config.cluster === buildingData[building].config.cluster).map(d => d.config.name),\n selectEEMs: selectEEMs.filter(d => String(d.bldg_name) === String(buildingData[building].config.name)).map(d => d.Select_EEMs)[0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"intro = md`##### Introduction\nIntegral Group has conducted an analysis of energy efficiency strategies across ${buildingData.length} of the 30 buildings on the CMC campus. The purpose of this analysis was to identify the maximum theoretical impact of these strategies on carbon emissions reductions and energy use savings. This appendix shows the building-level results of Integral’s analysis. The results below are shown for Building ${info.name}, which is located at ${(info.name in locations) ? locations[info.name].address : info.rawAddress}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"viewof map = {\n let container = html`

`;\n yield container;\n \n let map = new mapboxgl.Map({\n container,\n center: [-71.09343898660966, 42.35884493854173],\n zoom: 9,\n pitch: 0,\n bearing: 0,\n style: \"mapbox://styles/integralgroup/cktypxuue11w117mo166rgrsu\",\n scrollZoom: true,\n //maxBounds: [[-122.784,37.243], [-121.513,37.799]]\n });\n \n map.addControl(new mapboxgl.NavigationControl(), \"top-right\");\n \n map.on(\"load\", () => {\n container.value = map;\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n \n map.scrollZoom.disable();\n invalidation.then(() => map.remove());\n\n // add markers to map\n // for (const bldg of Object.values(locations)) {\n // // make a marker for each feature and add to the map\n // new mapboxgl.Marker({color: '#9D2235', scale: 0.5})\n // .setLngLat([bldg.longitude, bldg.latitude])\n // .addTo(map);\n // }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"fly = { \n map.flyTo({\n center: [locations[buildingData[building].config.name].longitude, locations[buildingData[building].config.name].latitude],\n zoom: 17.0,\n pitch: 45,\n bearing: Math.floor(Math.random() * 180) * (Math.random() > 0.5 ? -1: 1),\n essential: true // this animation is considered essential with respect to prefers-reduced-motion\n});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"mapFilter = {\n map.setFilter('locations', [\n 'in',\n 'name',\n convertText(buildingData[building].config.name)\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"convertText = text => Number(text) ? Number(text): text;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"ensemble = md`
\n##### Model Calibration\nIn order to evaluate the impact of various energy efficiency measures (EEMs), Integral created a calibrated ensemble energy model for each building. The calibration process itself utilizes a combination of traditional energy modeling techniques and statistical surrogate modeling to rapidly identify the most likely set of input parameters for each typology given the observed level of energy performance.\n\nSince there are multiple combinations of parameters that yield similar results, we use an ensemble model — a collection of energy models that represent a single baseline — to represent the building. The chart below shows the energy use predicted by the 100 most likely building models, which form that building's ensemble model.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"viewof building = Inputs.select(new Map(buildingData.map((d, i) => [`Building ${d.config.name}`, i])), {value: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1233,"value":"max_monthly = {\n const data = buildingData[building].monthly.utilities;\n const max_meas = d3.max(data.map(d => d3.max(d.measured)));\n const max_mod = d3.max(data.map(d => d.baseline_ensemble).map(d => d3.max(d.flat())))\n const overall_max = d3.max([max_meas, max_mod])\n return Math.ceil((overall_max + 1) / 5) * 5;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":" dates = d3.timeMonth.range(new Date(2019, 0, 1), new Date(2019, 11, 30)).map(d3.timeFormat(\"%b\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"height = 400;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"line = d3.line()\n .defined(d => !isNaN(d))\n .x((d, i) => x(i))\n .y(d => y(d))\n .curve(d3.curveCardinal.tension(0.5))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"x = d3.scaleLinear()\n .domain([0, 11])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"y = d3.scaleLinear()\n .domain([0, max_monthly]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(d => dates[d]).tickSizeOuter(0).tickPadding(12))\n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"calibration = md`
\n##### Building Parameters\nThe chart below shows the distribution of input parameters for this building's ensemble model. The larger bubbles indicate parameters which appear more often in the ensemble, and thus are more likely to represent real-world building conditions. Conversely, smaller bubbles indicate parameters which are less frequently observed in the ensemble. This distribution of input parameters in the ensemble model helps to generate the range of likely GHG savings for each energy efficiency measure.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"updateInputs = inputChart.updateInputs(buildingData[building].inputs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1645,"value":"formatEEMs = d => {\n const eemMap = new Map([\n ['HRV', 'Heat Recovery Ventilation'],\n ['TempReset', 'Supply Air Temperature Reset'],\n ['TempResetEnh', 'Enhanced SAT Reset'],\n ['VentSch', 'Ventilation Measures'],\n ['VentSchEnh', 'Enhanced Ventilation Measures'],\n ['FanPower', 'Fan Energy Reductions'],\n ['LowLPD', 'LPD Reductions']])\n \n return String(d).split(\",\").map(d => d.trim()).map(d => eemMap.get(d)).reduce((a,b) => a.concat(\", \",b))\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"updateEems = {\n // // For Ph 3 runs that don't yet have a \"Select EEMs\" measure, set its results to 0\n // if (buildingData[building].eems.measures.length < 10) {\n // const select_eems = new Object({measure: \"Select EEMs\", savings: {r0: 0, qrt25: 0, qrt50: 0, qrt75: 0, r1:0}})\n // buildingData[building].eems.measures.splice(8, 0, select_eems)\n // eemChart.updateEems(buildingData[building].eems)\n // }\n // else\n eemChart.updateEems(buildingData[building].eems)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"scenarios = md`\n##### Scenarios\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"updateGHGI = GHGIChart.updateGHGI(buildingData[building].scenarios)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2373,"value":"# Plots for written report","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2407,"value":"Summary of potential avoided emissions and change in EUI when all combined measures are applied.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1748,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1891,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2411,"value":"**Top 25 projects**\n\nThe names and buildings for the top projects should be entered manually into cell **topProjects**. The plot should generate automatically.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2387,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2389,"value":"topSavings = {\n const savings = []\n \n topProjects.forEach(proj => {\n savings.push({name: proj.bldg, \n measure: proj.meas,\n savings: buildingData.filter(d => String(d.config.name) === String(proj.bldg))\n .map(d => d.eems.measures)[0]\n .filter(d => d.measure === proj.meas)[0]\n .savings})})\n\n return savings\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2384,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2401,"value":"updateTopProj = {\n topProjChart.updateEems(topSavings)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2351,"value":"font_size_plots = 14;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1763,"value":"runs = [\"Baseline (Current)\", \"With All Measures Combined\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2114,"value":"function wrap(text, width) {\n text.each(function() {\n var text = d3.select(this),\n words = text.text().split(/\\s+/).reverse(),\n word,\n line = [],\n lineNumber = 0,\n lineHeight = 1.1, // ems\n y = text.attr(\"y\"),\n dy = parseFloat(text.attr(\"dy\")),\n tspan = text.text(null).append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", dy + \"em\");\n while (word = words.pop()) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (tspan.node().getComputedTextLength() > width) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text.append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", ++lineNumber * lineHeight + dy + \"em\").text(word);\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":2052,"value":"t_width = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"updateEUI = EUIChart.updateEUI(buildingData[building].scenarios)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"d3 = require(\"d3@^6.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"_ = require('lodash@4.17.15/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":31,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"createTooltip = el => {\n el\n .attr(\"class\", \"tooltip\")\n .style(\"border-radius\", \"3px\")\n .style(\"pointer-events\", \"none\")\n .style(\"display\", \"none\")\n .style(\"position\", \"absolute\")\n .style(\"z-index\", \"1000\")\n .style(\"padding\", \"12px\")\n .style(\"font-weight\", \"regular\")\n .style(\"font-family\", \"Open Sans\")\n .style(\"font-size\", \"12px\")\n .style(\"background\", \"white\")\n .style(\"box-shadow\", \"0 0 10px rgba(0,0,0,.25)\")\n .style(\"color\", \"#333333\")\n .style(\"line-height\", \"1.6\")\n .style(\"pointer-events\", \"none\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.0.0\");\n if (!gl.accessToken) {\n gl.accessToken = \"pk.eyJ1IjoiaW50ZWdyYWxncm91cCIsImEiOiJjazM0dzc1aTMxOXUxM21uOXQ4c2ZseGxvIn0.SO3zITcSqsb5qRhEvSqsTA\";\n const href = await require.resolve(\"mapbox-gl@2.0.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W54","stdlib":"1"}} 24:null