mouseover = (event, d, _this, tooltipDiv) => {
const fip = parseInt(d.properties.STATEFP);
const stateData = data.find((d) => parseInt(d.fip) === fip);
const { number_of_interns, State, intern_schools } = stateData;
if (number_of_interns === 0) return;
const [x, y] = d3.pointer(event);
d3.select(_this).classed("hovered-state", true);
let xPos, yPos;
const isNewEnglandCircle = d3.select(_this).classed("new-england-circles");
const isStateOnRight = stateOnRight.includes(d.properties.STATEFP);
const isStateOnLowerRight = stateOnLowerRight.includes(d.properties.STATEFP);
const isStateOnLowerLeft = stateOnLowerLeft.includes(d.properties.STATEFP);
if (isNewEnglandCircle) {
xPos = `${circlePos[d.properties.STATEFP].x - 350}px`;
yPos = circlePos[d.properties.STATEFP].y + "px";
} else if (isStateOnRight) {
xPos = `${x - 350}px`;
yPos = `${y}px`;
} else if (isStateOnLowerRight) {
xPos = `${x - 350}px`;
yPos = `${y - 100}px`;
} else if (isStateOnLowerLeft) {
xPos = `${x}px`;
yPos = `${y - 100}px`;
} else {
xPos = `${x}px`;
yPos = `${y}px`;
}
tooltipDiv
.html(() => {
const schoolInternCount = {};
intern_schools.forEach((d) => {
schoolInternCount[d]
? (schoolInternCount[d] += 1)
: (schoolInternCount[d] = 1);
});
const internPerSchoolString = Object.keys(schoolInternCount)
.map(
(d) =>
`<p style="color: #002462; font-size: 15px;">${schoolInternCount[d]} from ${d}</p>`
)
.join("");
return `
<h3 style="font-size: 16px; color: #0B6986">${State.toUpperCase()}</h3>
<div style="display: flex;">
<div>
${naepStar}
</div>
<div style="padding: 15px 0 0 5px;">
<strong style="color: #002462; font-size: 15px;">${number_of_interns} interns between 2017-2024</strong>
${internPerSchoolString}
</div>
</div>
`;
})
.transition()
.duration(50)
.style("left", xPos)
.style("top", yPos)
.style("opacity", 1);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
