31:T504,ecmsDescriptions = ({ 'Envelope': 'Increase wall and roof insulation to achieve minimum assembly values of R30 and R40 respectively. Upgrade windows to achieve an assembly U of 0.4 btu/h-ft2-°F', 'HRV': 'Improve operational energy recovery effectiveness to 60% - include energy recovery wheels or fixed membrane air-to-air heat exchanger.', 'TempReset': 'Reset supply air temperature to 60°F based on warmest zone.', 'TempResetEnh': 'Reset supply air temperature to 64°F based on warmest zone.', 'VentSch': 'Ventilation airflow setbacks to 50% of peak flow rates during unoccupied hours and 85% during occupied hours.', 'VentSchEnh': 'Ventilation airflow setbacks to 10% of peak flow rates during unoccupied hours and 70% during occupied hours.', 'FanPower': 'Fan static pressure reset.', 'LowLPD': 'Reduce LPD to 0.6 W/ft2 - include high efficiency LED lighting with advanced controls.', 'Combined': 'Combination of all ECMs (except "enhanced" ECMs)', 'Electrification': 'Conversion of natural gas- or Steam/Hot Water-source heating to electric heat pumps.', 'Combined + Electrification': 'Combination of Combined + Electrification', 'NonEnvelope': 'Combindation of NonEnvelope ECMs', 'NonEnvelope + Electrification': 'Combination of NonEnvelope + Electrification' })32: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(); }33:T7b5,chart_steam = { //graph const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) //.style("overflow", "visible"); //data const metered = buildingData[building].monthly.utilities[3].measured; const modeled = buildingData[building].monthly.utilities[3].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("Steam (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(); }34:T6c1,chart_chw = { //graph const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) //.style("overflow", "visible"); //data const metered = buildingData[building].monthly.utilities[2].measured; const modeled = buildingData[building].monthly.utilities[2].baseline_ensemble; //setup const color = "#3b99a7"; 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("Chilled Water (kbtu/ft²)")) const path = svg.append("g") .attr("fill", "none") .attr("stroke", chroma(color).brighten(1.2)) .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(modeled) .join("path") .style("opacity", .2) .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(); }35:T6bf,chart_gas = { //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 = "#708090"; 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 path = svg.append("g") .attr("fill", "none") .attr("stroke", chroma(color).brighten(1.2)) .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(modeled) .join("path") .style("opacity", .2) .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(); }36:T2207,inputChart = { //data const data = buildingData[0].inputs; //setup const dims = { width: width, height: 1300 }; const margin = { top: 20, right: 80, 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()) .call(g => g.selectAll(".tick text") .attr("cursor", "default") .on("mouseover", function(event, d) { d3.select(this) .attr("fill", colors.stroke) tooltip.style("display", null); tooltip.html(inputDescriptions[data[d].input]) .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", "#1B1E23") tooltip.style("display", "none"); }) ); 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") .attr("class", "yLabel") .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: (d > 0 ? true: false)})); sort = sort.map((d, i) => ({...d, highlight: (i === 0 & d.count > 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(); }); } }); }37:T21fa,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 yAxisToolTip = d => { const html = `${d}:` return html; } 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 => prettyEcms[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()) .call(g => g.selectAll(".tick text") .attr("cursor", "default") .on("mouseover", function(event, d) { d3.select(this) .attr("fill", colors.stroke) tooltip.style("display", null); tooltip.html(ecmsDescriptions[data.measures[d].measure]) .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", "#1B1E23") tooltip.style("display", "none"); })); 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_ysort.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"); }); }); } }); }38:T1e59,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 => prettyEcms[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()) .call(g => g.selectAll(".tick text") .attr("cursor", "default") .on("mouseover", function(event, d) { d3.select(this) .attr("fill", colors.stroke) tooltip.style("display", null); tooltip.html(ecmsDescriptions[data[d].scenario]) .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", "#1B1E23") tooltip.style("display", "none"); })); 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"); }); }); } }); }39:T4ef,topSavingsCampus = { const savings = [] const bldgs = buildingData.filter((d, i) => d.config.campus === campus) bldgs.forEach(bldg => bldg.eems.measures.map(proj => { savings.push({ name: bldg.config.name, measure: proj.measure, savings: proj.savings }) })) var result = []; savings.reduce(function(res, value) { if (!res[value.measure]) { res[value.measure] = { measure: value.measure, savings: { r0: 0, qrt25: 0, qrt50: 0, qrt75: 0, r1: 0, } }; result.push(res[value.measure]) } res[value.measure].savings.r0 += value.savings.r0; res[value.measure].savings.qrt25 += value.savings.qrt25; res[value.measure].savings.qrt50 += value.savings.qrt50; res[value.measure].savings.qrt75 += value.savings.qrt75; res[value.measure].savings.r1 += value.savings.r1; return res; }, {}); //return savings.sort((a, b) => a.savings.qrt50 < b.savings.qrt50 ? 1 : -1); return result.sort((a, b) => a.savings.qrt50 < b.savings.qrt50 ? 1:-1);; }3a:T2161,topEEMsChart = { const data = topSavingsCampus; //const data = buildingData[building].eems; let maximum = d3.max(data, d => d.savings.r1); //setup const dims = { width: width, height: 800 }; const margin = { top: 80, right: 50, bottom: 0, left: 250 }; 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(",.0f")(d.qrt50)} MTCO₂e
Interquartile Range: ${d3.format(",.0f")(d.qrt25)}-${d3.format(",.0f")(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 => prettyEcms[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()) .call(g => g.selectAll(".tick text") .attr("cursor", "default") .on("mouseover", function(event, d) { d3.select(this) .attr("fill", colors.stroke) tooltip.style("display", null); tooltip.html(ecmsDescriptions[data[d].measure]) .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", "#1B1E23") tooltip.style("display", "none"); })); 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"); }); }); } }); }3b:T1ad8,topProjChart = { let data = filtered_ecms.flat(); data = data.sort((a, b) => b.savings.qrt50 - a.savings.qrt50); data = data.slice(0, n_projects) //const data = buildingData[building].eems; let maximum = d3.max(data, d => d.savings.r1) || 1000; let group_height = 60; //setup const margin = {top: 80, right: 50, bottom: 0, left: 350}; const dims = {width: width, height: (n_projects * group_height) + margin.top + margin.bottom}; const svg = d3.create("svg") .attr("width", dims.width) .attr("height", 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(0) .paddingOuter(0); 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.top)); //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"); }); }); } }); }3c:[{"id":"6581f353a8d1aa52772c3d5e8724223cc2a0283af6905bb9a5db39846b5b30b749bd38a53a0fb7c0d51ddc6735a210bdd74fb55e018b59a5e507b2afdd521c08","href":"https://static.observableusercontent.com/files/6581f353a8d1aa52772c3d5e8724223cc2a0283af6905bb9a5db39846b5b30b749bd38a53a0fb7c0d51ddc6735a210bdd74fb55e018b59a5e507b2afdd521c08","name":"mit_locations_ph2and3.csv","type":"text/csv","lastModified":1642649305487.721,"size":2328},{"id":"0453eb93ba79060f47c9519f6ef1e25eee5a97ff1fe668d392be08000a4d2aa0b461af9c553176c129588b4e6673a65121c86faa7d934e2e3f8b2b390f88009f","href":"https://static.observableusercontent.com/files/0453eb93ba79060f47c9519f6ef1e25eee5a97ff1fe668d392be08000a4d2aa0b461af9c553176c129588b4e6673a65121c86faa7d934e2e3f8b2b390f88009f","name":"selectEEMs_updated_21-10-22.csv","type":"text/csv","lastModified":1642649305487.721,"size":1068},{"id":"e6609745a55d56c43b6834ab6284275bece46c89c133e4ba7d8b58f4896c8a4a0e4297544a39801900cd2e556db8923a33a8dafd56b595031b19514d34e25381","href":"https://static.observableusercontent.com/files/e6609745a55d56c43b6834ab6284275bece46c89c133e4ba7d8b58f4896c8a4a0e4297544a39801900cd2e556db8923a33a8dafd56b595031b19514d34e25381","name":"jhu_locations@4.csv","type":"text/csv","lastModified":1645724905658.022,"size":10366},{"id":"dd067b941ce643f2d80e554dfa3b24fbe7e68f9c9d50ffd5cb25d31778ee5d842ed0b7a093de7ebfe5c43800a5b6529d5bb4e750253df44a7e80f0a15a40369b","href":"https://static.observableusercontent.com/files/dd067b941ce643f2d80e554dfa3b24fbe7e68f9c9d50ffd5cb25d31778ee5d842ed0b7a093de7ebfe5c43800a5b6529d5bb4e750253df44a7e80f0a15a40369b","name":"jhu_web_porfolio_2022-11-10.json","type":"application/json","lastModified":1668185052965.963,"size":7826419},{"id":"13e71e6029af979aadad1ae2826650bcbeff440e0eb859664c75cd14a46b1b27006a423a92af006715486af822801474b3cb1608a2231f0624be432da085c110","href":"https://static.observableusercontent.com/files/13e71e6029af979aadad1ae2826650bcbeff440e0eb859664c75cd14a46b1b27006a423a92af006715486af822801474b3cb1608a2231f0624be432da085c110","name":"jhu_web_porfolio_2022-11-10_v2@1.json","type":"application/json","lastModified":1668197789950.704,"size":7886131},{"id":"2973e8fc1cf2207644bbc119022b114365f2196d2ae622e404c0f9f79980c37ec9a27dfde44cc827af6896e2abc843bebc83ef8f2622fb78036984f5ea63f68f","href":"https://static.observableusercontent.com/files/2973e8fc1cf2207644bbc119022b114365f2196d2ae622e404c0f9f79980c37ec9a27dfde44cc827af6896e2abc843bebc83ef8f2622fb78036984f5ea63f68f","name":"jhu_homewood_web_portfolio@2.json","type":"application/json","lastModified":1642654417070.066,"size":8036668},{"id":"079fe582700419fa93513064447d3f2ab02a1e1392aa82213cd87bf976794961b21e590893a865498e927591e2b62e1c7808fc6553ac01b2d21c4725ccd4c431","href":"https://static.observableusercontent.com/files/079fe582700419fa93513064447d3f2ab02a1e1392aa82213cd87bf976794961b21e590893a865498e927591e2b62e1c7808fc6553ac01b2d21c4725ccd4c431","name":"jhu_homewood_web_portfolio_fixed@3.json","type":"application/json","lastModified":1642693769871.054,"size":7940712},{"id":"34f5086a75c382d9d3758677927ce4e894f28590c9d60bc5b57a287c06aa780329dda4c550d6049b6baa8cafb846016ce99b08197e9bbc7aa991bfddcc3fde19","href":"https://static.observableusercontent.com/files/34f5086a75c382d9d3758677927ce4e894f28590c9d60bc5b57a287c06aa780329dda4c550d6049b6baa8cafb846016ce99b08197e9bbc7aa991bfddcc3fde19","name":"jhu_homewood_web_portfolio_fixed@4.json","type":"application/json","lastModified":1642700315914.115,"size":7985358},{"id":"2501c25a34479a62f8d6494af15d339c4d3a2d949142e381bf92b5535b0e7c132cbd9e8ddf4db9530962b8a63322c0db79a1ec214f0b9fab83a38c67205e6c18","href":"https://static.observableusercontent.com/files/2501c25a34479a62f8d6494af15d339c4d3a2d949142e381bf92b5535b0e7c132cbd9e8ddf4db9530962b8a63322c0db79a1ec214f0b9fab83a38c67205e6c18","name":"jhu_locations@2.csv","type":"text/csv","lastModified":1642738157967.104,"size":12753},{"id":"bbbed0a053aaf063dbbb3b320c411247dddac4122d98298546f241eaa96bcbb0ca645c8500c0c13458fab7cf4703667286f1899ac5ed57ad586881d744039571","href":"https://static.observableusercontent.com/files/bbbed0a053aaf063dbbb3b320c411247dddac4122d98298546f241eaa96bcbb0ca645c8500c0c13458fab7cf4703667286f1899ac5ed57ad586881d744039571","name":"jhu_web_portfolio_2020-02-02@4.json","type":"application/json","lastModified":1644007332179.816,"size":4689284},{"id":"6d6f9161e180d890c0332f4a2123f9eebea3ff1097ea3ebe0f1b1aa728b318a9fe0a97579ba24fd7fca7eb4e0d63aac9234611328a74c336e3300871cdafdf3c","href":"https://static.observableusercontent.com/files/6d6f9161e180d890c0332f4a2123f9eebea3ff1097ea3ebe0f1b1aa728b318a9fe0a97579ba24fd7fca7eb4e0d63aac9234611328a74c336e3300871cdafdf3c","name":"jhu_web_portfolio@2.json","type":"application/json","lastModified":1643065366565.348,"size":5088272},{"id":"5aa0a133c951aef79bb7d1c842a96bb2cfad93f32ab15b414ae679d5e1a1dd593502cb7fe471262cb4f2b3c6318519dd3894193037dc2211fa65268f59943b02","href":"https://static.observableusercontent.com/files/5aa0a133c951aef79bb7d1c842a96bb2cfad93f32ab15b414ae679d5e1a1dd593502cb7fe471262cb4f2b3c6318519dd3894193037dc2211fa65268f59943b02","name":"jhu_web_portfolio@6.json","type":"application/json","lastModified":1643128977108.294,"size":4958700},{"id":"d104f86af969459db4611764f7f702cf5be8842e5496fa19a338308e8e714563712beba14dcd700390c55da143f74f673cbf8e1bd270c17e300329dd7168c830","href":"https://static.observableusercontent.com/files/d104f86af969459db4611764f7f702cf5be8842e5496fa19a338308e8e714563712beba14dcd700390c55da143f74f673cbf8e1bd270c17e300329dd7168c830","name":"jhu_web_portfolio@3.json","type":"application/json","lastModified":1643123237722.767,"size":4625371},{"id":"8d6e187fa8bf997867a1936aecbea8abef00fb0c1d3b97511fdd01289e6399b748ea3c67223199f2438edd1a0e2bf5c9ea4cbfadff7217ad2e6ede201291ed80","href":"https://static.observableusercontent.com/files/8d6e187fa8bf997867a1936aecbea8abef00fb0c1d3b97511fdd01289e6399b748ea3c67223199f2438edd1a0e2bf5c9ea4cbfadff7217ad2e6ede201291ed80","name":"jhu_web_portfolio@7.json","type":"application/json","lastModified":1643129810293.161,"size":4960911},{"id":"0fa4e8ff69475f108d16bab159959bfed80d9e7a3822eca58c798a13d212291fe7d88d2476ad2daa339a391f6e528a89d9b3c6bb995c9179662d77e19a9634c0","href":"https://static.observableusercontent.com/files/0fa4e8ff69475f108d16bab159959bfed80d9e7a3822eca58c798a13d212291fe7d88d2476ad2daa339a391f6e528a89d9b3c6bb995c9179662d77e19a9634c0","name":"jhu_web_portfolio@4.json","type":"application/json","lastModified":1643124907914.267,"size":4625425},{"id":"8f5338397ffb678436d45ea37ea2c4bffa4cf4c91db15d72d00925714e668bbf01e41044fa127129553905c6af6a4d085c57f0778a9d84fc7e43fc55ea279d5d","href":"https://static.observableusercontent.com/files/8f5338397ffb678436d45ea37ea2c4bffa4cf4c91db15d72d00925714e668bbf01e41044fa127129553905c6af6a4d085c57f0778a9d84fc7e43fc55ea279d5d","name":"jhu_web_portfolio@8.json","type":"application/json","lastModified":1643136842243.166,"size":4059049},{"id":"dd3379072fac957030b30d5b5baca77ebdee18ad72c6b4debb7fa9a2ac3bfad6aee31291424c65d8055e7c4323eb5b0ddafdfe890f51126b56f8855818c3c7fe","href":"https://static.observableusercontent.com/files/dd3379072fac957030b30d5b5baca77ebdee18ad72c6b4debb7fa9a2ac3bfad6aee31291424c65d8055e7c4323eb5b0ddafdfe890f51126b56f8855818c3c7fe","name":"jhu_web_portfolio_2020-02-02@5.json","type":"application/json","lastModified":1644245907564.481,"size":4689285},{"id":"78d2c8032b92b185db895921c4468a3406bb5e2e5cd35bcb43a8555b61021bb82527b949da6ff7968f71a64f528144c438f94822e9f86597fa48fa8b6f3c15e7","href":"https://static.observableusercontent.com/files/78d2c8032b92b185db895921c4468a3406bb5e2e5cd35bcb43a8555b61021bb82527b949da6ff7968f71a64f528144c438f94822e9f86597fa48fa8b6f3c15e7","name":"jhu_web_portfolio_2020-02-02@6.json","type":"application/json","lastModified":1644254592585.003,"size":4743066},{"id":"b5fb9b9c1fc32c4b3573280dadea6235d0d57ecc1bfe5bd24793531d851c5d2c030907fe93c12bad031b6e19f12fb220fe3b29c1ddc12cd2c415945e28f284fe","href":"https://static.observableusercontent.com/files/b5fb9b9c1fc32c4b3573280dadea6235d0d57ecc1bfe5bd24793531d851c5d2c030907fe93c12bad031b6e19f12fb220fe3b29c1ddc12cd2c415945e28f284fe","name":"jhu_web_porfolio_2022-07-19@1.json","type":"application/json","lastModified":1658257370583.918,"size":7880005},{"id":"19f5beb2a1384a18d133b967da9dfb0875ead76d8be85f236839453c9dadb56fc961d39b45df7a06f0f6f06eca33b882ad36ab1c85770d6e84cf2cfcf5c29747","href":"https://static.observableusercontent.com/files/19f5beb2a1384a18d133b967da9dfb0875ead76d8be85f236839453c9dadb56fc961d39b45df7a06f0f6f06eca33b882ad36ab1c85770d6e84cf2cfcf5c29747","name":"jhu_web_porfolio_2022-11-10_v2.json","type":"application/json","lastModified":1668194536298.033,"size":7886117},{"id":"dd067b941ce643f2d80e554dfa3b24fbe7e68f9c9d50ffd5cb25d31778ee5d842ed0b7a093de7ebfe5c43800a5b6529d5bb4e750253df44a7e80f0a15a40369b","href":"https://static.observableusercontent.com/files/dd067b941ce643f2d80e554dfa3b24fbe7e68f9c9d50ffd5cb25d31778ee5d842ed0b7a093de7ebfe5c43800a5b6529d5bb4e750253df44a7e80f0a15a40369b","name":"jhu_web_porfolio_2022-11-10@1.json","type":"application/json","lastModified":1668185491511.175,"size":7826419},{"id":"6628e7f855c8faedddfec93aa525ff23943d869b73a5edcd242354441d72db3936c9baf7f75164f77c0053369267fcb6cfbd3eaccff36e37bf7be920fa8d7a75","href":"https://static.observableusercontent.com/files/6628e7f855c8faedddfec93aa525ff23943d869b73a5edcd242354441d72db3936c9baf7f75164f77c0053369267fcb6cfbd3eaccff36e37bf7be920fa8d7a75","name":"jhu_web_porfolio_2022-07-15@6.json","type":"application/json","lastModified":1662159329646.311,"size":8324619},{"id":"8fa632b669a0ae52c49936a0ac2f61b46f5a1229e44081fe0f6be6e01e9188cc5ee451ae9ad79e9c6797e5d88e1b138cb4ad7bf72abf46eea6ec8a5abdf294da","href":"https://static.observableusercontent.com/files/8fa632b669a0ae52c49936a0ac2f61b46f5a1229e44081fe0f6be6e01e9188cc5ee451ae9ad79e9c6797e5d88e1b138cb4ad7bf72abf46eea6ec8a5abdf294da","name":"jhu_web_porfolio_2022-11-15.json","type":"application/json","lastModified":1670280013869.133,"size":8397325},{"id":"5b6adcb4eef71b87a8c5c7bbf8d868915e71be5efac8aa040176c8a3b5af5dd46188c096e675e0abdb59a0e706e35b44e4509688be57be7e147cf5d74912833d","href":"https://static.observableusercontent.com/files/5b6adcb4eef71b87a8c5c7bbf8d868915e71be5efac8aa040176c8a3b5af5dd46188c096e675e0abdb59a0e706e35b44e4509688be57be7e147cf5d74912833d","name":"jhu_web_porfolio_2022-11-15_v2.json","type":"application/json","lastModified":1670280204942.784,"size":7886670}] 2f:{"title":"Johns Hopkins UniversityCampus Decarbonization","cells":[{"id":0,"value":"# Johns Hopkins University
Campus Decarbonization","pinned":false,"hidden":false,"mode":"md"},{"id":195,"value":"viewof building = Inputs.select(buildingList, {value: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2488,"value":"buildingList = {\n const buildings = buildingData.map((d, i) => [d, i]);\n const filtered = buildings.filter(([d, i]) => d.config.campus === campus);\n return new Map(filtered.map(([d, i]) => [d.config.updated ? `${d.config.name}*` : `${d.config.name}`, i]))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2495,"value":"campusList = {\n const campuses = buildingData.map((d, i) => d.config.campus);\n return _.uniq(campuses);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2479,"value":"viewof campus = Inputs.select(campusList.sort(), {value: \"Homewood Campus\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"buildingData = {\n let data = await FileAttachment(\"jhu_web_porfolio_2022-11-15_v2.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"},{"id":3016,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":3073,"value":"prettyEcms = ({\n 'Envelope': 'Envelope Upgrades',\n 'HRV': 'Heat Recovery Ventilation',\n 'TempReset': 'HVAC Temp Controls',\n 'TempResetEnh': 'Optimized HVAC Temp Controls',\n 'VentSch': 'Ventilation Measures',\n 'VentSchEnh': 'Enhanced Ventilation Measures',\n 'FanPower': 'Fan Energy Reductions',\n 'LowLPD': 'Lighting System',\n 'Combined': 'Combined EEMs',\n 'Electrification': 'Electrification',\n 'Combined + Electrification': 'Combined EEMs + Electrification',\n 'NonEnvelope': 'NonEnvelope EEMs',\n 'NonEnvelope + Electrification': 'NonEnvelope EEMs + Electrification'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2974,"value":"inputDescriptions = ({\n \"INFIL\": \"Infiltration of outdoor air in CFM per square foot of exterior walls\",\n \"FANPOWER\": \"Fan power in In. H2O\",\n \"HUMIDMAX\": \"Humidity Control Maximum Relative Humidity (%)\",\n \"ACH\": \"Mechanical ventilation air changes per hour.\",\n \"HRV\": \"Heat Revory Ventilation effectivness.\",\n \"LPDSCH\": \"The schedule that modifies the lighting power design level (LPD).\",\n \"EPDSCH\": \"The schedule that modifies the equipment power design level (EPD).\",\n \"LPD\": \"Lighting Power Density design level.\",\n \"EPD\": \"Equipment Power Density design level.\",\n \"ROOFR\": \"The overall roof's R-Value.\",\n \"WALLR\": \"The overall exterior wall's R-Value.\",\n \"WINSHGC\": \"The Solar Heat Gain Coefficient of the windows.\",\n \"WINU\": \"The window U-Value.\",\n \"ECON\": \"The ventilation economizer. Triggers the outdoor airflow to minimum when
the dry-bulb temperature of outdoor air is higher than
the dry-bulb temperature of the return air\",\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"locations = {\n let f = await FileAttachment(\"jhu_locations@4.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":1637,"value":"selectEEMs = FileAttachment(\"selectEEMs_updated_21-10-22.csv\").csv({typed: true});","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 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"},{"id":413,"value":"intro = md`##### Introduction\nIntegral Group has conducted an analysis of energy efficiency strategies across ${buildingList.size} buildings on the ${campus} ${campus.includes(\"Campus\") ? \"\" : \"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.rawAddress}.`","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: [-76.620, 39.328],\n zoom: 9,\n pitch: 0,\n bearing: 0,\n style: \"mapbox://styles/integralgroup/ckyn9a4vk2tbh14lb236kidr4\",\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"},{"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"},{"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"},{"id":1382,"value":"convertText = text => Number(text) ? Number(text): text;","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs"},{"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.\n`\n// As per the monthly utility data provided, ${info.name} uses district chilled water and district hot water (OR Natural Gas) in addition to electricity.","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2427,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":969,"value":"height = 400;","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"margin = ({top: 20, right: 20, bottom: 40, left: 30});","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":949,"value":"x = d3.scaleLinear()\n .domain([0, 11])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":421,"value":"calibration = md`
\n##### Building Parameters\nThe chart below shows the distribution of input parameters for this building's ensemble model that represent the building characteristics. The larger bubbles indicate parameters that appear more often in the ensemble, and thus are more likely to represent real-world building conditions. Conversely, smaller bubbles indicate parameters that 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.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3086,"value":"warning = md`*The size of the bubbles in this chart represents the model estimated frequency of parameter values that is likely to result in the metered energy use. It is important to note that these estimates reflect the operational behavior of different parameters, averaged over all operating hours, and over the entire building floor area. As such, these estimates may be different from design conditions directly extracted from drawings or specifications. The purpose of these estimates is solely to identify what parameter improvements will yield significant savings based on their likely contribution to metered energy use; and not to provide a commentary on the existing specifications of the building. The model should, however, be (re)calibrated if an unexpectedly high, or unexpectedly low, savings projection from a specific parameter upgrade can be attributed directly to an incorrect estimate.*`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2580,"value":"measures = md`
\n##### Efficiency Measures\nEach 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. \n\nThe 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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2587,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2601,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2621,"value":"updateTopProj = {\n let filtered_data = filtered_ecms.flat();\n filtered_data = filtered_data.sort((a, b) => b.savings.qrt50 - a.savings.qrt50);\n filtered_data = filtered_data.slice(0, n_projects);\n \n topProjChart.updateEems(filtered_data)\n topEEMsChart.updateEems(topSavingsCampus)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2623,"value":"topProjects = md`\n##### Top ${n_projects.toLocaleString(\"en\")} projects\n\nAt a campus level (${campus}), projects (or interventions) that are good candidates for decarbonization can be identified using the following list of top projects for the selected campus`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2828,"value":"buildingData.filter((d, i) => d.config.campus === campus).length","pinned":true,"hidden":false,"mode":"ojs"},{"id":2824,"value":"viewof n_projects = Inputs.range([5, filtered_ecms.flat().length], {\n label: \"Top n projects\",\n step: 1,\n value: 25\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2929,"value":"viewof filtered_ecms = Inputs.checkbox(d3.group(topSavings, d => prettyEcms[d.measure]) , {label: \"ECMs\", key: ecm_choices, style: \"max-width: 80px;\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3065,"value":"filtered_ecms","pinned":false,"hidden":false,"mode":"ojs"},{"id":2728,"value":"topSavings = {\n const savings = []\n const bldgs = buildingData.filter((d, i) => d.config.campus === campus)\n\n bldgs.forEach(bldg => bldg.eems.measures.map(proj => {\n savings.push({\n name: bldg.config.name,\n measure: proj.measure,\n savings: proj.savings\n })\n\n }))\n\n return savings.sort((a, b) => a.savings.qrt50 < b.savings.qrt50 ? 1 : -1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2915,"value":"ecm_choices = {\n const savings = []\n const bldgs = buildingData.filter((d, i) => d.config.campus === campus)\n buildingData[building].eems.measures.map(proj => {\n savings.push(proj.measure)\n\n })\n return savings\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2780,"value":"topSavingsBldg = {\n const savings = []\n const bldgs = buildingData.filter((d, i) => d.config.campus === campus)\n\n buildingData[building].eems.measures.map(proj => {\n savings.push({\n name: buildingData[building].config.name,\n measure: proj.measure,\n savings: proj.savings\n })\n\n })\n\n return savings.filter((d, i) => (a, b) => a.savings.qrt50 < b.savings.qrt50 ? 1 : -1)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2863,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":2889,"value":"topSavingsCampusText = md`\n##### Cumulative Savings for ${campus}\n\nIf each of the interventions were to be applied to all buildings in ${campus}, the annual GHG savings could reach approximately ${d3.format(\",.0f\")(topSavingsCampus[0].savings.qrt50)} MT CO2eq:\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2777,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2616,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":2603,"value":"updateGHGI = GHGIChart.updateGHGI(buildingData[building].scenarios)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2598,"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"},{"id":2464,"value":"buildingData[building].inputs","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"updateInputs = inputChart.updateInputs(buildingData[building].inputs)","pinned":false,"hidden":false,"mode":"ojs"},{"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 d.split(\",\").map(d => d.trim()).map(d => eemMap.get(d)).reduce((a,b) => a.concat(\", \",b))\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":2351,"value":"font_size_plots = 14;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1763,"value":"runs = [\"Baseline (Current)\", \"With All Measures Combined\"]","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2052,"value":"t_width = 500","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":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"chroma = (await import(\"https://unpkg.com/chroma-js\")).default","pinned":false,"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(\"max-width\", \"300px\")\n .style(\"pointer-events\", \"none\");\n}","pinned":false,"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":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}