function plotTrends(data, variable) { let tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("padding", "5px") .style("opacity", 0.9) .style("background", "white") .style("border", "2px solid") .style("border-radius", "2px") .style("pointer-radius", "none"); const div = d3.create("div"); const projection = d3.geoAlbersUsa() .scale(550) .translate([250, 140]); const path = d3.geoPath() .projection(projection); const svg = div.append("svg") .attr("viewBox", [0, 0, 500, 500 * 0.55]); const logo = svg.append("svg:image") .attr("x",425) .attr("y", 200) .attr('width', 50) .attr('height', 50) .attr("xlink:href", squarelogo1); for (let i = 0; i < data.length; i++) { let div = +data[i]["Climate Division #"]; let change = +data[i][variable]; let color; if (change <= -56) { color = colors[0]; } else if (change > -56 && change <= -28) { color = colors[1]; } else if (change > -28 && change <= -14) { color = colors[2]; } else if (change > -14 && change <= -7) { color = colors[3]; } else if (change > -7 && change <= -1) { color = colors[4]; } else if (change > -1 && change < 1) { color = "#f7f7f7"; } else if (change >= 1 && change < 7) { color = colors[6]; } else if (change >= 7 && change < 14) { color = colors[7]; } else if (change >= 14 && change < 28) { color = colors[8]; } else if (change >= 28 && change < 56) { color = colors[9]; } else if (change >= 56) { color = colors[10]; } else { color = "#dbdbdb"; } for (let j = 0; j < climdivs.features.length; j++) { let jsonDiv = +climdivs.features[j].properties.CLIMDIV; if (div === jsonDiv) { climdivs.features[j].properties.change = +change; climdivs.features[j].properties.color = color; break; } } } const allDivs = svg.selectAll("path") .data(climdivs.features) .enter() .append("path") .attr("d", path) .style("fill", (d) => d.properties.color === undefined ? "#dbdbdb" : d.properties.color ) .style("stroke", "black") .style("stroke-width", 0.15); const goodDivs = allDivs.filter((d) => d.properties.change !== undefined); goodDivs.on("mouseover", function (e, d) { let thisDiv = d3.select(this).data()[0]; if (thisDiv !== mutable thisDiv) mutable thisDiv = thisDiv; let nday = Math.abs(thisDiv.properties.change) === 1 ? "day" : "days"; d3.select(this) .style("fill", "yellow") .style("stroke-width", 2) .style("stroke", "yellow"); let changeText = getMessage(form1, form2, thisDiv.properties.change); tooltip.style("visibility", "visible").html(` ${toCamelCase(thisDiv.properties.NAME)}, ${thisDiv.properties.STATE} (${ thisDiv.properties.CLIMDIV })
${changeText}`); }) .on("mousemove", function (e, d) { return tooltip .style("top", e.pageY - 10 + "px") .style("left", e.pageX + 10 + "px"); }) .on("mouseout", function (e, d) { if (mutable thisDiv) mutable thisDiv = null; d3.select(this) .style("fill", (d) => d.properties.color === undefined ? "#dbdbdb" : d.properties.color ) .style("stroke-width", 0.15) .style("stroke", "black"); tooltip.style("visibility", "hidden"); }); return div.node(); }