31:Taec,combined = { const path = d3.geoPath(); //const parent = document.createElement("div"); const svg = d3.select(DOM.svg(960, 600)); // const svg = d3.create("svg") // .attr("viewBox", "0 0 960 600") // .style("width", "100%") // .style("height", "auto"); d3.selectAll(".tooltip4").remove(); const tooltip = d3.select("body").append("div") .attr("class", "tooltip4") .style("border-radius", "3px") .style("pointer-events", "none") .style("display", "none") .style("position", "absolute") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "regular") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "white") .style("box-shadow", "0 0 10px rgba(0,0,0,.25)") .style("color", "#333333") .style("line-height", "1.6") .style("pointer-events", "none"); const lookup = { "ASHRAE2004": "ASHRAE 90.1-2004", "ASHRAE2007": "ASHRAE 90.1-2007", "ASHRAE2010": "ASHRAE 90.1-2010", "ASHRAE2016": "ASHRAE 90.1-2016", "IECC2006": "IECC 2006", "IECC2009": "IECC 2009", "IECC2012": "IECC 2012", "IECC2015": "IECC 2015", "TITLE242016": "Title 24-2016" }; const tipContent = d => ` County: ${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}
State Energy Code (Closest Match): ${lookup[data.get(d.id)[3]]}
Climate Zone: ${data.get(d.id)[0]}
eGRID Region: ${data.get(d.id)[1]}
Estimated Emissions: ${_.round(data.get(d.id)[+type.selection], 1)} lbs CO₂e / ft²-yr` svg.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .join("path") .attr("fill", d => emissions(data.get(d.id))) .attr("d", path) .on("mouseover", function(d) { tooltip.style("display", null); d3.select(this).attr("fill", chroma(emissions(data.get(d.id))).darken().hex()); tooltip.html(tipContent(d)) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mousemove", function(d) { tooltip .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this).attr("fill", emissions(data.get(d.id))); tooltip.style("display", "none"); }) svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); // parent.appendChild(svg.node()); return svg.node(); }32:T546,baseline_legend = { const svg = d3.select(DOM.svg(960, 80)) .style("font", "11px sans-serif"); const defs = svg.append("defs"); const linearGradient = defs.append("linearGradient") .attr("id", "linear-gradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0%"); linearGradient.selectAll("stop") .data([ {offset: 0, color: d3.interpolateYlOrBr(0)}, {offset: 0.25, color: d3.interpolateYlOrBr(.25)}, {offset: 0.5, color: d3.interpolateYlOrBr(.5)}, {offset: 0.75, color: d3.interpolateYlOrBr(.75)}, {offset: 1, color: d3.interpolateYlOrBr(1)} ]) .enter().append("stop") .attr("offset", function(d) { return d.offset; }) .attr("stop-color", function(d) { return d.color; }); svg.append("rect") .attr("width", 200) .attr("height",12) .attr("y", 45) .attr("x", 35) .style("fill", "url(#linear-gradient)"); svg.selectAll("text") .data([0, 25]) .join("text") .attr("x", (d, i) => i * 245) .attr("y", 52) .attr("dy", "0.35em") .style("font-weight", "regular") .style("font-family", "Open Sans") .style("font-size", "12px") .html((d, i) => `${_.round(d, 2)} ${i != 0 ? "lbs CO₂e / ft²-yr" : ""}`); return svg.node(); }33:[] 2f:{"title":"GBC Impact Baseline Calculations","cells":[{"id":0,"value":"md`# GBC Impact Baseline Calculations\n
\nAs part of the scope of work for the Fannie Mae Multifamily Green Building Certification project, Integral developed a regionally-specific calculator for energy, carbon, and cost savings for all Fannie Mae projects. This calculator will allow Fannie Mae to input basic data about any property—zip code, building type, building size (measured in number of units or gross floor area), and the Green Building Certification (GBC), and get estimates for the energy use intensity, total energy use, greenhouse gas emissions, and energy costs, along with savings for each relative to both a standard national baseline and the business-as-usual state energy code. The following graphic illustrates the estimates for baseline greenhouse gas for multifamily projects at the county level. The total savings for each project are calculated relative to this regionally-specific baseline.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"viewof type = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`

The baseline emissions map was created by combining three different datasets: Estimated electricity and gas usage for PNNL reference models in each climate zone; regional eGRID emissions factors; and 2019 state energy codes. The combination of state energy codes and grid emissions factors has a particularly high impact on greenhouse gas emissions. The emissions intensity of a baseline building in California or New York, for example, will be less than one quarter of a baseline building in Wyoming or Missouri. This is largely because California and New York have both strict energy codes and low grid emissions factors relative to other locations in the country.

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"stateCodes = {\n const map = new Map();\n \n [...data].map(d => {\n map.set(d[0].slice(0, 2), d[1][3]);\n });\n \n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@5.9.2');","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"topojson = require('topojson-client@3.0.0/dist/topojson-client.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@2/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"data = Object.assign(new Map(await d3.csv(\"https://www.elementa.nyc/projects/fannie-mae/data/compiled_data.csv\", ({FIPS, Zone, Grid, EF, Code, Low, Mid, High}) => [FIPS, [Zone, Grid, +EF, Code, +Low, +Mid, +High]])), {title: [\"Climate Zone\", \"eGRID\", \"Grid Emissions Factor\", \"State Energy Code\", \"Low\", \"Mid\", \"High\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"ret = {\n let entries = Object.fromEntries(data.entries());\n let output = [];\n for (const key in entries) {\n output.push({id: key, cz: entries[key][0]});\n }\n return output;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"emissions = {\n return value => {\n if (!value) return \"#ccc\";\n\n const color = d3.scaleSequential(d3.interpolateYlOrBr)\n .domain([0, 25]);\n // .range([\"#f3f3f3\", \"#0c0c0c\"])\n // .interpolate(d3.interpolateYlOrBr);\n \n return color(value[+type.selection]);\n \n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"chroma = import('https://cdn.skypack.dev/chroma-js@2.4.2?min')","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"projection = d3.geoAlbersUsa()\n .scale(1280)\n .translate([480, 300])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"html`