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(); }