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