{ const _ = map; d3.select(map).selectAll("circle").remove(); d3.select(map).selectAll("g").remove(); const bmiExtentRaw = d3.extent(raw, d => +d.bmi); const tonedSizeScale = d3.scaleLinear() .domain(bmiExtentRaw) .range([5, 20]); const activeRaw = raw.filter(d => (!selectedJobFilter || d.work_type === selectedJobFilter) && d.drink_preference?.trim().toLowerCase() === currentDrinkFilter.toLowerCase() && (!currentSubtypeFilter || d.favorite_drink?.trim() === currentSubtypeFilter) ); const filteredCountryData = d3.rollup( activeRaw, v => ({ avgBMI: d3.mean(v, d => +d.bmi), avgHeartRate: d3.mean(v, d => +d.heart_rate), avgSpending: d3.mean(v, d => +d.monthly_spend), avgSleep: d3.mean(v, d => +d.sleep_hours), avgStress: d3.mean(v, d => +d.stress_level), region: v[0].continent, country: v[0].country, count: v.length }), d => d.country ); const filteredArr = Array.from(filteredCountryData.values()).map(d => ({ ...d, lat: coords[d.country]?.[0], lon: coords[d.country]?.[1] })); const svg = d3.select(map); svg.selectAll(".filter-label").remove(); svg.selectAll(".filter-label-bg").remove(); const jobPart = selectedJobFilter ? `${selectedJobFilter} workers` : "All job types"; const labelText = `${jobPart} · ${currentDrinkFilter} · ${currentSubtypeFilter ?? "All subtypes"}${selectedJobFilter ? " — click pie slice to reset" : ""}`; const labelBg = svg.append("rect") .attr("class", "filter-label-bg") .attr("x", 0).attr("y", 0).attr("height", 22) .attr("fill", "#1d4ed8").attr("rx", 4); const labelEl = svg.append("text") .attr("class", "filter-label") .attr("x", 6).attr("y", 15) .attr("font-size", 13).attr("font-family", "sans-serif") .attr("font-weight", "bold").attr("fill", "white") .text(labelText); labelBg.attr("width", labelEl.node().getComputedTextLength() + 12); const g = svg.append("g"); g.selectAll("circle") .data(filteredArr.filter(d => d.lat && d.lon)) .join("circle") .attr("cx", d => projection([d.lon, d.lat])[0]) .attr("cy", d => projection([d.lon, d.lat])[1]) .attr("r", d => tonedSizeScale(d.avgBMI)) .attr("fill", d => colorScale(d.region)) .attr("fill-opacity", 0.75) .attr("stroke", "#fff").attr("stroke-width", 1.5) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this).attr("fill-opacity", 1).attr("stroke-width", 2.5); tooltip.transition().duration(150).style("opacity", 1); tooltip.html(`

${d.country}

${d.region}${selectedJobFilter ? ` · ${selectedJobFilter}` : ""} · ${currentDrinkFilter}

Avg BMI	${d.avgBMI.toFixed(1)}
Heart rate	${d.avgHeartRate.toFixed(0)} bpm
Monthly spend	$${d.avgSpending.toFixed(0)}
Sleep	${d.avgSleep.toFixed(1)} hrs
Stress	${d.avgStress.toFixed(1)} / 10
Respondents	${d.count}

`) .style("left", (event.pageX + 12) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mousemove", function(event) { tooltip.style("left", (event.pageX + 12) + "px").style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function() { d3.select(this).attr("fill-opacity", 0.75).attr("stroke-width", 1.5); tooltip.transition().duration(200).style("opacity", 0); }); svg.selectAll(".size-legend").remove(); const sizeLeg = svg.append("g") .attr("class", "size-legend") .attr("transform", `translate(20, ${height - 120})`); sizeLeg.append("rect") .attr("x", -10).attr("y", -16).attr("width", 160).attr("height", 115) .attr("fill", "white").attr("opacity", 0.85).attr("rx", 6).attr("stroke", "#ccc"); sizeLeg.append("text") .attr("x", 0).attr("y", 0).attr("font-size", 12).attr("font-family", "sans-serif") .attr("font-weight", "bold").attr("fill", "#333").text("Circle Size = Avg BMI (Toned)"); const bmiExtentFiltered = d3.extent(filteredArr, d => d.avgBMI); const legendBMIs = [bmiExtentFiltered[0], (bmiExtentFiltered[0] + bmiExtentFiltered[1]) / 2, bmiExtentFiltered[1]]; legendBMIs.forEach((bmi, i) => { const r = tonedSizeScale(bmi); const cx = 20, cy = 28 + i * 28; sizeLeg.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r) .attr("fill", "#aaa").attr("fill-opacity", 0.6).attr("stroke", "#666").attr("stroke-width", 1); sizeLeg.append("text").attr("x", cx + r + 8).attr("y", cy + 4) .attr("font-size", 11).attr("font-family", "sans-serif").attr("fill", "#333") .text(`BMI ${bmi.toFixed(1)}`); }); return map; }