31:Tdf5,map = { const svg = d3.create('svg') .attr('width', mapDim.width) .attr('height', mapDim.height); svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "#ffffff"); d3.select("body").selectAll(".tooltip").remove(); const tooltip = d3.select("body").append("div").call(createTooltip); const tipContent = d => { let name = d.properties[(level === "Substations" ? "Name": "zcta")]; let current_peak = d.properties[(level === "Substations" ? "mp": "b_p")]; if (level != "Substations") { current_peak = current_peak / 3.412 / 1000; } let peak_measurement = (level === "Substations" ? "(Measured)": "(Model Estimate)"); let peak_increase = d.properties[`${attribute}_pr`] - 1; let season = d.properties[`${attribute}_wspr`] < 1.1 ? "Summer" : "Winter"; mutable info = d.properties; const html = ` Zone Name: ${name}
Current Peak ${peak_measurement}: ${d3.format(".0f")(current_peak)} MW
Peak Demand Change: ${peak_increase > 0 ? "+": ""}${d3.format(".0%")(peak_increase)}
Peak Season: ${season}
` return metric === "available_headroom" ? `Available Headroom: ${d3.format(".0f")(d.properties["chr"])} MW
` : html; } const m = svg.append("g"); // .attr("transform", `translate(${margin.left}, ${margin.top})`); let color = metrics[metric].color; const g = svg.append("g") .attr("transform", `translate(${mapDim.margin.left - 20}, ${mapDim.margin.top})`) .call(legend, { title: metrics[metric].name, width: 250, color: color, tickFormat: metrics[metric].format }); const areas = m.selectAll(".areas") .data(geo.features) .join("path") .attr("class", "areas") .attr("d", path) .attr("fill", d => color(metrics[metric].calc(d.properties, attribute)) || "#ffffff") .attr("stroke", d => d.properties.index === zone ? "#6666" : "#ffffff") .attr("stroke-width", d => d.properties.index === zone ? 2 : 1) .classed("selected", d => d.properties.index === zone ? true : false) .attr("cursor", "pointer"); areas.each(function(d) { if (d.properties.index === zone) { d3.select(this).raise(); } }) areas.on("mouseover", function(event, d) { tooltip.style("display", null); tooltip.html(tipContent(d)) .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 20) + "px"); let c = color(metrics[metric].calc(d.properties, attribute)) || "#ffffff"; d3.select(this).attr("fill", chroma(c).darken()); }).on("mousemove", function(event, d) { tooltip .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 20) + "px"); }).on("mouseout", function(event, d) { tooltip.style("display", "none"); d3.select(this).attr("fill", color(metrics[metric].calc(d.properties, attribute)) || "#ffffff"); }); areas.on("click", function(event, d) { if (d3.select(this).classed("selected")) { d3.selectAll(".areas").attr("stroke", "white").attr("stroke-width", 1).classed("selected", false); mutable zone = "all"; } else { d3.selectAll(".areas").attr("stroke", "white").attr("stroke-width", 1).classed("selected", false); mutable zone = d.properties.index; d3.select(this).raise().attr("stroke", "#000").attr("stroke-width", 2).classed("selected", true); } console.log(d.properties.Net_Capaci - d.properties.Max_Elec_M) }) return svg.node(); }32:Te6b,chart = { const dims = {width: 960, height: 400}; const margin = {top: 20, right: 20, bottom: 45, left: 35}; const timesAM = d3.range(1, 12).map(d => `${d}AM`).concat(["12PM"]); const timesPM = d3.range(1, 12).map(d => `${d}PM`).concat(["12AM"]); const times = timesAM.concat(timesPM); const svg = d3.create("svg") .attr("viewBox", [0, 0, dims.width, dims.height]) .style("overflow", "visible"); const x = d3.scaleLinear() .domain([0, 23]) .range([margin.left, (dims.width - margin.right - margin.left)/2]); let y = d3.scaleLinear() .domain([0, chartScaleMax]).nice() .range([dims.height - margin.bottom, margin.top]); const line = d3.line() .defined(d => !isNaN(d)) .x((d, i) => x(i)) .y(d => y(d / 3.412 / 1000)); const xAxis = g => g .attr("transform", `translate(0,${dims.height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d => times[d]).tickSizeOuter(0).tickPadding(6)); const yAxis = (g, label) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(d3.format(".2s")).tickPadding(6)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(label)); const winter = svg.append("g"); const summer = svg.append("g").attr("transform", `translate(${(dims.width - margin.right - margin.left)/2 + margin.left},0)`) winter.append("g").call(xAxis); winter.append("g").call(function(d) { yAxis(d, "Winter Demand (MW)")}); summer.append("g").call(xAxis); summer.append("g").call(function(d) { yAxis(d, "Summer Demand (MW)")}); let scenarioLines = ["b", `${scenario}_${electrification}`, "bm", `${scenario}_${electrification}_adj`]; scenarioLines = level === "Substations" ? scenarioLines: scenarioLines.slice(0, 2); const legend = g => { const svg = g .attr("transform", `translate(${dims.width - margin.right},${margin.top})`) .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "start"); const l = svg .selectAll("g") .data(lineDescription.slice(0, scenarioLines.length)) .join("g") .attr("transform", (d, i) => `translate(0,${i * 25})`); l.each(function(d, i) { d3.select(this).append("text") .attr("fill", "#c1c1c1") .attr("x", -120) .attr("dy", "0.35em") .text(d => d.name); d3.select(this).append("circle") .attr("fill", d => d.color) .attr("opacity", d => d.opacity) .attr("stroke-width", 0) .attr("r", 4) .attr("cx", -135) .attr("cy", 0); }); } svg.append("g").call(legend); const winterPaths = winter.append("g") .attr("fill", "none") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(scenarioLines); winterPaths.join("path") .attr("stroke", (d, i) => lineDescription[i].color) .attr("opacity", (d, i) => lineDescription[i].opacity) .attr("d", d => line(data[zone][d].winter)); const summerPaths = summer.append("g") .attr("fill", "none") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(scenarioLines); summerPaths.join("path") .attr("stroke", (d, i) => lineDescription[i].color) .attr("opacity", (d, i) => lineDescription[i].opacity) .attr("d", d => line(data[zone][d].summer)); return svg.node(); }33:T49e,metrics = ({ //capacity constraint absolute capacity_ratio: { name: "Peak Capacity Ratio (%)", calc: (d, attr) => d[`${attr}_pcr`], format: d3.format(".0%"), color: d3.scaleThreshold().domain([.7, .9, 1.1, 1.3]).range(["#4dac26", "#b8e186", "#f7f7f7","#f1b6da", "#d01c8b"]) }, peak_increase: { name: "Increase In Peak Demand (%)", calc: (d, attr) => d[`${attr}_pr`] - 1, format: d3.format(".0%"), color: d3.scaleThreshold().domain([.25, .5, .75, 1.0, 1.25, 1.5, 1.75, 2.0]).range(["#f7fcfd", "#e0ecf4","#bfd3e6", "#9ebcda","#8c96c6", "#8c6bb1", "#88419d", "#810f7c", "#4d004b"]) }, peak_season: { name: "Summer vs Winter Peak", calc: (d, attr) => d[`${attr}_wspr`], format: (d, i) => ["<- Summer", "Winter ->"][i], color: d3.scaleThreshold().domain([0.90, 1.10]).range(["#fc8d59", "#ffffbf", "#91bfdb"]) }, //available capacity (absolute) available_headroom: { name: "Current Headroom (MW)", calc: (d, attr) => d["chr"], format: d3.format(".0f"), color: d3.scaleThreshold().domain([25, 50, 75, 100, 125, 150]).range(["#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c"]) } })34:T11c0,legend = (g, obj) => { const svg = g; // .attr("transform", `translate(${margin.left},${margin.top})`); let color = obj.color || d3.scaleSequential([0, 100], d3.interpolateBlues); let title = obj.title || "Title"; let tickSize = obj.tickSize || 6; let width = obj.width || 320; let height = obj.height || 44 + tickSize; let marginTop = obj.marginTop || 18; let marginRight = obj.marginRight || 0; let marginBottom = obj.marginBottom || 16 + tickSize; let marginLeft = obj.marginLeft || 0; let ticks = obj.ticks || width / 64; let tickFormat = obj.tickFormat? obj.tickFormat: undefined; let tickValues = obj.tickValues? obj.tickValues: undefined; let tickAdjust = d => d.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues) .tickPadding(8)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title)); // svg.selectAll("text").attr("fill", "#fff"); // svg.selectAll("line").attr("stroke", "#666666") } 35:[] 2f:{"title":"NYC Electrification Results - Updated Metrics","cells":[{"id":0,"value":"# NYC Electrification Results - Updated Metrics","pinned":false,"hidden":false,"mode":"md"},{"id":1211,"value":"viewof level = Inputs.select([\"Zip Codes\", \"Substations\"], {value: \"Substations\", label: \"Zone\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"viewof scenario = Inputs.select(scenarios, {value: \"s1\", label: \"Scenario\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"viewof electrification = Inputs.range([0, 100], {value: 20, step: 10, label: \"Adoption %\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1057,"value":"viewof metric = Inputs.select(new Map(filteredMetrics.map(d => [metrics[d].name, d])), {value: \"pdi\", label: \"Map Metric\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"md`
\n### Spatial Impact`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"md`### Hourly Demand - ${zoneName}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"mutable info = \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@^6.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`### Files`","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"geo = {\n \n let file = level === \"Substations\" ? \"networks_v5.geojson\" : \"zips_v5.geojson\";\n\n let geo = await d3.json(`https://www.elementa.nyc/projects/nyc-electrification/aggregation/data/v5/${file}`, d3.autoType);\n\n return geo;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"data = {\n \n let file = level === \"Substations\" ? \"networks_data_minify.json\" : \"zip_codes_data_minify.json\";\n\n let data = await d3.json(`https://www.elementa.nyc/projects/nyc-electrification/aggregation/data/v5/${file}`, d3.autoType);\n\n let all = await d3.json(\"https://www.elementa.nyc/projects/nyc-electrification/aggregation/data/v5/city_data_minify.json\", d3.autoType);\n \n return {...data, \"all\": all[\"0\"]}\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":970,"value":"zoneName = {\n let zoneName = \"\";\n \n if (zone === \"all\") {\n zoneName = \"All Areas\"\n }\n else {\n if (level === \"Substations\") {\n zoneName = geo.features.filter(d => d.properties.index === zone)[0].properties.Name;\n }\n else if (level === \"Zip Codes\") {\n zoneName = geo.features.filter(d => d.properties.index === zone)[0].properties.zcta;\n }\n }\n \n return zoneName;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"createTooltip = el => {\n el\n .attr(\"class\", \"tooltip\")\n .style(\"border-radius\", \"3px\")\n .style(\"pointer-events\", \"none\")\n .style(\"display\", \"none\")\n .style(\"position\", \"absolute\")\n .style(\"z-index\", \"1000\")\n .style(\"padding\", \"12px\")\n .style(\"font-weight\", \"regular\")\n .style(\"font-family\", \"Open Sans\")\n .style(\"font-size\", \"12px\")\n .style(\"background\", \"white\")\n .style(\"box-shadow\", \"0 0 10px rgba(0,0,0,.25)\")\n .style(\"color\", \"#333333\")\n .style(\"line-height\", \"1.6\")\n .style(\"pointer-events\", \"none\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"scenarios = {\n \n let lookup = {\n s1: \"Electrified Buildings\",\n s2: \"Electrified + Efficiency\",\n s3: \"Electrified + Demand Flex\",\n s4: \"Electrified + Eff. + Flex\"\n }\n \n let scenarios = new Set();\n for (const s in data[\"0\"]) {\n let split = s.split(\"_\")[0];\n scenarios.add(split);\n }\n return new Map(Array.from(scenarios).filter(d => d != \"b\" && d != \"bm\").map(d => [lookup[d], d]));\n \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"attribute = `${scenario}_${electrification}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"mutable zone = \"all\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"function capitalize(str) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"chartScaleMax = {\n \n const pull = (d, m) => {\n return d3.max(d[m].winter.concat(d[m].summer));\n }\n \n const include = Object.keys(data).filter(d => d != (zone != \"all\" ? \"all\": \"\"));\n \n const baseline = include.map(d => pull(data[d], \"b\"));\n const electrified = include.map(d => pull(data[d], \"s1_100\"));\n \n return d3.max(baseline.concat(electrified)) / 3.412 / 1000;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"filteredMetrics = {\n let m = Object.keys(metrics);\n if (level === \"Zip Codes\") {\n m = m.filter(d => d != \"capacity_ratio\" && d != \"available_headroom\");\n }\n return m;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1268,"value":"lineDescription = [\n {name: \"Baseline Modeled\", color: \"#C7C7C7\", opacity: 0.3},\n {name: \"Scenario Modeled\", color: \"#86BCB6\", opacity: 0.3},\n {name: \"Baseline Measured\", color: \"#7F7F7F\", opacity: 1},\n {name: \"Adjusted Measured\", color: \"#499894\", opacity: 1}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`### Mapping`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"mapDim = ({width: 960, height: 1100, margin: {top: 20, right: 20, bottom: 45, left: 35}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"projection = d3.geoAlbers()\n .fitSize([mapDim.width - mapDim.margin.left - mapDim.margin.right, mapDim.height - mapDim.margin.top - mapDim.margin.bottom], geo)","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}