map = { // Force cell re-run when these change selectedYear; selectedMetric; visualizationMode; selectedDistrictId; // Get references to existing elements const svg = d3.select(mapContainer); const g = svg.select("#main-map-group"); const tooltip = d3.select(".map-tooltip"); const config = metricConfig[selectedMetric]; const isBubbleMode = visualizationMode === "circles"; // Helper function to get fill color const getFillColor = (d) => { const enrollment = d.properties["Student Enrollment"]; // Check if district is below minimum size threshold if (enrollment != null && enrollment < params.minDistrictSize) { return "#e0e0e0"; // Light gray for filtered districts } if (isBubbleMode) return "#e0e0e0"; return d.properties[selectedMetric] != null ? metricColorScale(d.properties[selectedMetric]) : "#e0e0e0"; }; // Remove any existing hover outline group g.select(".hover-outline-group").remove(); // Remove any existing selected district outline group g.select(".selected-district-group").remove(); // Draw district shapes with transitions const districtPaths = g.selectAll(".district") .data(data, d => d.properties["Institution ID"]) .join( enter => enter.append("path") .attr("class", "district") .attr("data-institution-id", d => d.properties["Institution ID"]) .attr("d", pathGenerator) .attr("fill", getFillColor) .attr("stroke", "#ffffff") .attr("stroke-width", 0.5) .style("vector-effect", "non-scaling-stroke") .style("cursor", isBubbleMode ? "default" : "pointer"), update => update .transition() .duration(300) .ease(d3.easeCubicInOut) .attr("fill", getFillColor) .style("cursor", isBubbleMode ? "default" : "pointer"), exit => exit.remove() ); // Handle bubbles if in bubble mode if (isBubbleMode) { const nodes = data .filter(d => d.properties[selectedMetric] != null && d.geometry && d.properties['Student Enrollment'] >= params.minDistrictSize ) .map(district => { const centroid = pathGenerator.centroid(district); return { x: centroid[0], y: centroid[1], r: rScale(district.properties['Student Enrollment'] || 0), district: district, value: district.properties[selectedMetric] }; }) .filter(node => !isNaN(node.x) && !isNaN(node.y)); const simulation = d3.forceSimulation(nodes) .force('collision', d3.forceCollide().radius(d => d.r + 1.6).strength(0.8)) .force('x', d3.forceX(d => d.x).strength(0.1)) .force('y', d3.forceY(d => d.y).strength(0.1)) .stop(); for (let i = 0; i < 120; ++i) simulation.tick(); // Remove old bubble groups if they exist g.selectAll(".bubble-background").remove(); g.selectAll(".bubble").remove(); // Create white background circles first (all in one group for efficiency) g.selectAll(".bubble-background") .data(nodes, d => d.district.properties["Institution ID"]) .join("circle") .attr("class", "bubble-background") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.r + 1.5) // 1.5px larger radius for white outline .attr("fill", "white") .style("pointer-events", "none"); // Don't interfere with hover events // Create colored bubbles on top const bubbles = g.selectAll(".bubble") .data(nodes, d => d.district.properties["Institution ID"]) .join( enter => enter.append("circle") .attr("class", "bubble") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.r) .attr("fill", d => metricColorScale(d.value)) .style("cursor", "pointer") .style("opacity", 1), update => update .transition() .duration(300) .ease(d3.easeCubicInOut) .attr("fill", d => metricColorScale(d.value)) .attr("r", d => d.r), exit => exit.remove() ); } else { // Remove bubbles and backgrounds if switching from bubble mode to choropleth g.selectAll(".bubble-background").remove(); g.selectAll(".bubble").remove(); } // remove existing city labels first g.selectAll(".city-labels").remove() // Add city labels if enabled if (params.showCityLabels) { const cityGroup = g.append("g").attr("class", "city-labels"); majorCities.forEach(city => { const [x, y] = projection([city.lon, city.lat]); cityGroup.append("circle") .attr("cx", x) .attr("cy", y) .attr("r", 3) .attr("fill", "white") .attr("stroke", "#333") .attr("stroke-width", 1); const labelWidth = city.name.length * 6 + 10; cityGroup.append("rect") .attr("x", x + 6) .attr("y", y - 11.5) .attr("width", labelWidth) .attr("height", 16) .attr("rx", 4) .attr("fill", "white") .attr("opacity", 0.8); cityGroup.append("text") .attr("x", x + 10) .attr("y", y) .attr("font-size", "11px") .attr("fill", "#333") .attr("font-style", "italic") .text(city.name); }); } // Create selected district outline group (before hover group so hover is on top) const selectedDistrictGroup = g.append("g").attr("class", "selected-district-group"); // Add selected district outline if a district is selected if (selectedDistrictId && selectedDistrictId !== "") { const selectedDistrict = data.find(d => d.properties.GEOID === selectedDistrictId); if (selectedDistrict) { selectedDistrictGroup.append("path") .datum(selectedDistrict) .attr("d", pathGenerator) .attr("fill", "none") .attr("stroke", "#FF6B35") .attr("stroke-width", 2) .style("vector-effect", "non-scaling-stroke") .style("pointer-events", "none"); } } // Create hover outline group as the LAST element so it's always on top const hoverOutlineGroup = g.append("g").attr("class", "hover-outline-group"); // NOW set up the hover interactions after everything else is drawn districtPaths .on("mouseover", function(event, d) { if (isBubbleMode) return; const districtName = d.properties["Institution Name"]; const metricValue = d.properties[selectedMetric]; const originalValue = d.properties[`${selectedMetric}_original`]; const studentCount = d.properties["Student Enrollment"]; let metricText; if (metricValue == null) { metricText = "No data"; } else if (originalValue) { metricText = originalValue; } else { metricText = config.format(metricValue); } // Build tooltip with student count first let tooltipContent = `${districtName}`; // Always show student count first (unless it's the selected metric) if (selectedMetric !== "Student Enrollment") { tooltipContent += `
Total # students: ${studentCount ? studentCount.toLocaleString() : "No data"}`; } // Then show the selected metric tooltipContent += `
${config.label}: ${metricText}`; tooltip .html(tooltipContent) .style("opacity", 0.9); hoverOutlineGroup.selectAll("path").remove(); hoverOutlineGroup.append("path") .datum(d) .attr("d", pathGenerator) .attr("fill", "none") .attr("stroke", "#FF6B35") .attr("stroke-width", 1) .style("vector-effect", "non-scaling-stroke") .style("pointer-events", "none"); }) .on("mousemove", function(event) { if (isBubbleMode) return; tooltip .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function() { if (isBubbleMode) return; tooltip.style("opacity", 0); hoverOutlineGroup.selectAll("path").remove(); }); // Set up bubble hover interactions if in bubble mode if (isBubbleMode) { const bubbles = g.selectAll(".bubble"); const bubbleBackgrounds = g.selectAll(".bubble-background"); bubbles .on("mouseover", function(event, d) { // Fade all bubbles except the hovered one bubbles.transition() .duration(200) .style("opacity", 0.3); d3.select(this).transition() .duration(200) .style("opacity", 1); // Fade all white backgrounds to 0 opacity bubbleBackgrounds.transition() .duration(200) .style("opacity", 0); // Keep the white background for the hovered bubble visible const hoveredDistrictId = d.district.properties["Institution ID"]; bubbleBackgrounds .filter(bg => bg.district.properties["Institution ID"] === hoveredDistrictId) .transition() .duration(200) .style("opacity", 1); const districtID = d.district.properties["Institution ID"]; districtPaths.filter(dist => dist.properties["Institution ID"] === districtID) .attr("fill", "#FF6B35"); const districtName = d.district.properties["Institution Name"] || `District ${d.district.properties["Institution ID"]}`; const metricValue = d.value; const originalValue = d.district.properties[`${selectedMetric}_original`]; const studentCount = d.district.properties['Student Enrollment']; let metricText; if (originalValue) { metricText = originalValue; } else { metricText = config.format(metricValue); } tooltip .html(`${districtName}
${config.label}: ${metricText}
Students: ${studentCount.toLocaleString()}`) .style("opacity", 1); }) .on("mousemove", function(event) { tooltip .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function(event, d) { // Restore all bubbles to full opacity bubbles.transition() .duration(200) .style("opacity", 1); // Restore all white backgrounds to full opacity bubbleBackgrounds.transition() .duration(200) .style("opacity", 1); const districtID = d.district.properties["Institution ID"] districtPaths.filter(dist => dist.properties["Institution ID"] === districtID) .attr("fill", "#e0e0e0"); tooltip.style("opacity", 0); }); } return mapContainer; }