31:T57f,calibration = md`
##### Model Calibration In order to evaluate the impact of various energy efficiency measures (EEMs) and electrification strategies, Integral started by classifying each building as a typology – a prototype building designed to represent a group of buildings with similar energy performance characteristics. Each typology was calibrated to the area normalized, measured energy use of the corresponding buildings, which was provided by Google. 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. Since there are multiple combinations of parameters that yield similar results, we use an ensemble model – collection of energy models that represent a single baseline – in our analysis. The chart below shows the distribution of input parameters that exist for this ensemble. 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 savings that are likely for each energy efficiency measure.`32:T16e4,inputChart = { //data const data = buildingData[0].inputs; //setup const dims = {width: width, height: 1200}; const margin = {top: 20, right: 50, bottom: 20, left: 310}; const svg = d3.create("svg") .attr("viewBox", [0, 0, dims.width, dims.height]); const colors = {stroke: "#004c40", 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", 14) .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.1) .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); //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", 14) .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), 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 ? colors.fill: colors.none) .attr("fill-opacity", 1) .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 ? colors.fill: 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 ? colors.fill: 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"); }); }); } }); } 33:T44e,measures = md`
##### Efficiency Measures Each efficiency measure was evaluated at the typology level, and the results were applied back to each building individually to generate an estimate of greenhouse gas emissions (GHG) savings. The range of savings that are shown for each efficiency measure are the result of the distribution of input parameters in the ensemble model. The goal of this exercise was to identify which types of efficiency measures are likely to have the biggest impact for each building. The results will help generate a list of high-priority, maximum-impact projects across the entire portfolio. Note that this information comes directly from a statistical model, and some of the identified measures might not make sense for this particular building. However, it is nevertheless 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 this analysis. The GHG emissions reductions are calculated based on hourly grid emissions data provided by Google.`34:T1904,eemChart = { //data const data = buildingData[0].eems; let maximum = d3.max(data.measures, d => d.savings.r1); //setup const dims = {width: width, height: 900}; const margin = {top: 120, right: 10, bottom: 50, left: 250}; const svg = d3.create("svg") .attr("viewBox", [0, 0, dims.width, dims.height]); const colors = {stroke: "#004c40", fill: "#48a999", none: "#D8D8D8"}; 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", 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("~s")).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(data.label)) 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", colors.fill) .attr("stroke", "none") .attr("x", d => x(d.qrt25)) .attr("y", - y.bandwidth() * .2) .attr("height", y.bandwidth() * .4) .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.stroke) .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.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"); }); }); } }); } 35:T1510,GHGIChart = { //data const data = buildingData[0].scenarios; let maximum = 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: "#004c40", 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 = 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))) ); 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("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"); }); }); } }); } 36:T14d5,EUIChart = { //data const data = buildingData[0].scenarios; let maximum = 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: "#00600f", 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.qrt25)}-${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 = 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))) ); 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"); }); }); } }); }37:T14af,CFEChart = { //data const data = buildingData[0].scenarios; let maximum = d3.max(data, d => d.values.CFE.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: "#387002", fill: "#99d066", none: "#D8D8D8"}; const tooltip = d3.select("body").append("div").call(createTooltip) const tipContent = d => { let interquartileRange = d.scenario === "Baseline"? "NA": `${d3.format(".0%")(d.values.CFE.qrt25)}-${d3.format(".0%")(d.values.CFE.qrt75)} CFE`; const html = `Median: ${d3.format(".0%")(d.values.CFE.qrt50)} CFE
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(".0%")).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('Carbon Free Energy (CFE %)')) const yAxisg = svg.append("g") .call(yAxis); //return and transition return Object.assign(svg.node(), { updateCFE(scenarios) { maximum = d3.max(scenarios, d => d.values.CFE.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.CFE.qrt50) - x(0)), update => update .call(update => update.transition(t) .attr("width", d => x(d.values.CFE.qrt50) - x(0))) ); const interquartile = d3.select(this).selectAll(".interquartile") .data([datum.values.CFE.qrt25, datum.values.CFE.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"); }); }); } }); }38:T53f,assumptions = md` ##### System Assumptions ${electricBaseline ? "Based on the utility data, Integral's analysis assumes that this building is all-electric, and thus there are no results shown for the electrification scenarios.": "Based on the utility data, Integral's analysis assumes that this building has mixed-fuel systems."} For the PV and battery systems, the anlaysis is based on an assumption that each building could achieve net-zero energy performance, after accounting for energy efficiency measures and electrification, through onsite PV generation, either on the building roof, parking canopies, or some combination of both. Therefore, the PV system in this analysis was sized to offset the entire building energy demand, on a net annual basis. The battery system, in turn, was sized to capture all excess solar generation through the day. When implemented, these systems may be smaller or larger than what is assumed for this analysis, but this rough assumption yields an appropriately high-level estimate to identify the theoretical impact of renewable energy generation and battery storage for each building. For ${info.name}, Integral assumed a PV system with a ${d3.format(".0f")(info.pvKw)} KW installed capacity (roughly ${d3.format(",.0f")(info.pvSf)} ft2), and a ${d3.format(",.0f")(info.batteryKwh)} KWh battery system.`39:[{"id":"bf3f780ae48794684dd4e4a31dcb87858da186fc977903662a2cafaa05684af95d3e4f42415385ed1247d388172039509ec446be14c121d959034d90d757feed","href":"https://static.observableusercontent.com/files/bf3f780ae48794684dd4e4a31dcb87858da186fc977903662a2cafaa05684af95d3e4f42415385ed1247d388172039509ec446be14c121d959034d90d757feed","name":"all_buildings.json","type":"application/json","lastModified":1623200244990.024,"size":1029638},{"id":"64de68fc2a29cb993cc5574ac786fb6eeb192e35262b9f7ae08cb8c2d290e23f7044b94714914aaf49ee167b82fc876a771c0d792980c74f1c2cc5a58e0323cc","href":"https://static.observableusercontent.com/files/64de68fc2a29cb993cc5574ac786fb6eeb192e35262b9f7ae08cb8c2d290e23f7044b94714914aaf49ee167b82fc876a771c0d792980c74f1c2cc5a58e0323cc","name":"all_buildings_v2.json","type":"application/json","lastModified":1623293309433.873,"size":1052953},{"id":"dce4d6317fbc05a9df41cc28e5883d8ced65c3fe5d04ce2c5501d30427baecc7cd44e764f172f8723d005f9f56193f10fc705b26320a4b742557e0f0c35ae1c3","href":"https://static.observableusercontent.com/files/dce4d6317fbc05a9df41cc28e5883d8ced65c3fe5d04ce2c5501d30427baecc7cd44e764f172f8723d005f9f56193f10fc705b26320a4b742557e0f0c35ae1c3","name":"locations.csv","type":"text/csv","lastModified":1622573953034.248,"size":12939}] 2f:{"title":"Bay Area CFE Appendix","cells":[{"id":0,"value":"# Bay Area CFE Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":552,"value":"buildingData = FileAttachment(\"all_buildings_v2.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"locations = {\n let f = await FileAttachment(\"locations.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"},{"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 \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"othersInCluster = {\n let others = info.otherBuildings;\n if (others.length > 2) {\n return `${others[0]}, ${others[1]}, and ${others[2]}`\n }\n else {\n return `${others[0]}`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"electricBaseline = buildingData[building].scenarios[2].skip ? true: false","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"intro = md`##### Introduction\nIntegral Group recently conducted an analysis of energy efficiency and electrification strategies across the entire portfolio of Google’s Bay Area buildings. The purpose of this analysis was to identify the maximum theoretical impact of these strategies on carbon emissions reductions, energy use savings, and carbon free energy (CFE) scores. This appendix shows the preliminary building-level results of Integral’s analysis, which will subsequently be used to generate a list of high-priority, maximum-impact, projects across the Bay Area portfolio. The results below are shown for ${info.name}, which is located at ${(info.name in locations) ? locations[info.name].address : info.rawAddress} in ${(info.name in locations) ? locations[info.name].city : \"the Bay Area\"}. In total, this appendix includes results for ${buildingData.length} of the roughly 200 buildings in the Bay Area portfolio.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"viewof map = {\n let container = html`

`;\n yield container;\n \n let map = new mapboxgl.Map({\n container,\n center: [-122.170, 37.514],\n zoom: 9.5,\n pitch: 0,\n bearing: 0,\n style: \"mapbox://styles/integralgroup/ckpeabmwl026217rsiyeenh9h\",\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 \n invalidation.then(() => map.remove());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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: 60,\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"},{"id":351,"value":"mapFilter = {\n map.setFilter('locations', [\n'in',\n'name',\nbuildingData[building].config.name\n]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"width = 960","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"viewof building = Inputs.select(new Map(buildingData.map((d, i) => [d.config.name, i])), {value: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"updateInputs = inputChart.updateInputs(buildingData[building].inputs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"updateEems = eemChart.updateEems(buildingData[building].eems)","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"scenarios = md`\n##### Scenarios\nIn addition to individual EEMs, Integral evaluated five scenarios for each building, through the lens of three key metrics: GHG emissions intensity (GHGI), energy use intensity (EUI), and carbon free energy (CFE) score. It is important to look at these three metrics holistically to understand the full impact of each scenario. In many cases, for instance, energy efficiency measures alone will decrease the CFE score, as loads are reduced during periods when there is an abundance of renewable energy on the grid. Looking through the lens of GHG emissions or energy use intensity, however, will highlight the importance of efficiency measures. Conversely, PV generation and battery storage might not result in a reduction in energy use, but they will substantially reduce greenhouse gas emissions and improve CFE scores.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"buildingData[building]","pinned":true,"hidden":false,"mode":"ojs"},{"id":456,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"updateGHGI = GHGIChart.updateGHGI(buildingData[building].scenarios)","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"updateEUI = EUIChart.updateEUI(buildingData[building].scenarios)","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"updateCFE = CFEChart.updateCFE(buildingData[building].scenarios)","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"d3 = require(\"d3@^6.1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"chroma = require('chroma-js')","pinned":true,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}