31:Td1f,map = { const svg = d3.create('svg') .attr('width', mapDim.width) .attr('height', mapDim.height); 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 peak_baseline = d.properties["b_p"] / 3.412 / 1000; let peak_scenario = d.properties[`${attribute}_p`] / 3.412 / 1000; let total_baseline = d.properties["b_t"] / 3.412 / 1000000; let total_scenario = d.properties[`${attribute}_t`] / 3.412 / 1000000; let season_scenario = capitalize(d.properties[`${attribute}_ps`]); const html = ` Zone Name: ${name}
Baseline Peak (modeled): ${d3.format(".0f")(peak_baseline)} MW
Scenario Peak: ${d3.format(".0f")(peak_scenario)} MW
Baseline Total (modeled): ${d3.format(".0f")(total_baseline)} GWh
Scenario Total: ${d3.format(".0f")(total_scenario)} GWh
Scenario Peak Season: ${season_scenario}
` return html; } const m = svg.append("g"); // .attr("transform", `translate(${margin.left}, ${margin.top})`); let color = d3.scaleThreshold().domain([.8, .9, 1]).range(["#C0E5B5", "#6AC08F", "#3D998A", "#084C59"]); const g = svg.append("g") .attr("transform", `translate(${mapDim.margin.left - 20}, ${mapDim.margin.top})`) .call(legend, { title: "Ratio of Winter Peak to Baseline Summer Peak", width: 250, color: color, tickFormat: ".2f" }); const areas = m.selectAll(".areas") .data(geo.features) .join("path") .attr("class", "areas") .attr("d", path) .attr("fill", d => color(d.properties[`${attribute}_wpr`]) || "#ffffff") .attr("stroke", d => d.properties.index === zone ? "#000" : "white") .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(d.properties[`${attribute}_wpr`]) || "#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(d.properties[`${attribute}_wpr`]) || "#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); } }) return svg.node(); }32:Tddc,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)")}); 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(["Baseline (Current)", "Electrified (90th Percentile)"]) .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(String); d3.select(this).append("circle") .attr("fill", d === "Baseline (Current)" ? "#bbb": "#084C59") .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(["b", `${scenario}_${electrification}`]); winterPaths.join("path") .attr("stroke", d => d === "b"? "#bbb": "#084C59") .style("mix-blend-mode", d => d === "b"? "none": "multiply") .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(["b", `${scenario}_${electrification}`]); summerPaths.join("path") .attr("stroke", d => d === "b"? "#bbb": "#084C59") .style("mix-blend-mode", d => d === "b"? "none": "multiply") .attr("d", d => line(data[zone][d].summer)); return svg.node(); }33:T115b,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)); } 34:[] 2f:{"title":"NYC Electrification Results - Capacity Constraints","cells":[{"id":0,"value":"# NYC Electrification Results - Capacity Constraints","pinned":false,"hidden":false,"mode":"md"},{"id":872,"value":"viewof level = Inputs.select([\"Zip Codes\", \"Substations\"], {value: \"Zip COdes\", 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([10, 100], {value: 10, step: 10, label: \"Electrification %\"})","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":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_aggregated.geojson\" : \"zip_codes_aggregated.geojson\";\n\n let geo = await d3.json(`https://www.elementa.nyc/projects/nyc-electrification/aggregation/data/${file}`, d3.autoType);\n\n let features = geo.features;\n\n const attributes = [\"s1\", \"s2\", \"s3\", \"s4\"].map(d => d3.range(10, 110, 10).map(dd => `${d}_${dd}`)).flat();\n\n const wpr = feature => {\n const index = feature.properties.index;\n let props = {};\n for (const a of attributes) {\n props[`${a}_wpr`] = d3.max(data[index][a].winter) / d3.max(data[index][\"b\"].summer)\n }\n return {...feature.properties, ...props}\n }\n\n features = features.map(d => ({...d, properties: wpr(d)}));\n \n return {...geo, features: features};\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/${file}`, d3.autoType);\n\n let all = await d3.json(\"https://www.elementa.nyc/projects/nyc-electrification/aggregation/data/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\").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":939,"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":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":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":"$33","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":"$W34","stdlib":"1","titling":"auto"}