{
const width = 600;
const height = 600;
const svg = d3.create("svg").attr("width", width).attr("height", height);
const projection = d3
.geoIdentity()
.reflectY(true)
.fitSize([width, height], usHex);
const color = d3
.scaleQuantize()
.range([
"rgb(237,248,233)",
"rgb(186,228,179)",
"rgb(116,196,118)",
"rgb(49,163,84)",
"rgb(0,109,44)"
]);
color.domain([
d3.min(usAgProductivity, (d) => d.value),
d3.max(usAgProductivity, (d) => d.value)
]);
const path = d3.geoPath().projection(projection);
for (let i = 0; i < usAgProductivity.length; i++) {
const dataState = usAgProductivity[i].state;
const dataValue = usAgProductivity[i].value;
for (let j = 0; j < usHex.features.length; j++) {
const jsonState = usHex.features[j].properties.Name;
if (dataState == jsonState) {
usHex.features[j].properties.value = dataValue;
break;
}
}
}
const tooltip = d3
.select("body")
.append("div")
.style("position", "absolute")
.style("visibility", "hidden")
.style("background", "white");
svg
.selectAll("path")
.data(usHex.features)
.enter()
.append("path")
.attr("stroke", "steelblue")
.attr("fill", (d) => color(d.properties.value))
.attr("d", path)
.on("mouseover", (event, d) => {
d3.select(event.target).style("stroke-width", "2px");
tooltip.style("visibility", "visible");
tooltip.html(
`<ul><li>${d.properties.Name}</li><li>${d.properties.value}</li></ul>`
);
})
.on("mousemove", (event, d) => {
tooltip
.style("top", event.clientY - 10 + "px")
.style("left", event.clientX + 10 + "px");
});
return svg.node();
}