app.js

// Load data
d3.csv("healthProcessedData.csv").then(data => {
    console.log("Processed Data:", data); // Debug: Check processed data

    // Parse year and search_count as numbers
    data.forEach(d => {
        d.year = +d.year; // Convert year to a number
        d.search_count = +d.search_count; // Convert search_count to a number
    });

    // Group data by year and condition, summing search counts across cities
    const groupedData = d3.rollup(
        data,
        v => d3.sum(v, d => d.search_count), // Sum search counts for each condition in each year
        d => d.year,                         // Group by year
        d => d.condition                     // Group by condition
    );

    // Convert grouped data to an array of objects
    const raceData = Array.from(groupedData, ([year, conditions]) => ({
        year,
        conditions: Array.from(conditions, ([condition, search_count]) => ({
            condition,
            search_count
        }))
    }));

    console.log("Race Data:", raceData); // Debug: Check race data

    // ==================== Bar Chart Race ====================
    createBarChartRace(raceData);

    // ==================== Multi-Line Chart ====================
    createMultiLineChart(raceData);

    // ==================== Stacked Bar Chart ====================
    createStackedBarChart(data);

    // Add event listener for the year slider
    const yearSlider = document.getElementById("year-slider");
    const sliderValue = document.getElementById("slider-value");

    yearSlider.addEventListener("input", () => {
        const selectedYear = +yearSlider.value;
        sliderValue.textContent = selectedYear;
        createStackedBarChart(data, selectedYear);
    });
}).catch(error => {
    console.error("Error loading the data:", error);
});

// Function to create the bar chart race
function createBarChartRace(raceData) {
    // Specify the chart’s dimensions.
    const width = 800;
    const height = 500;
    const marginTop = 20;
    const marginRight = 100; // Increased margin for year label
    const marginBottom = 30;
    const marginLeft = 100;

    // Create the SVG container for the bar chart race.
    const svg = d3.select("#bar-chart-race")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    // Create the horizontal scale (search counts).
    const x = d3.scaleLinear()
        .domain([0, d3.max(raceData, d => d3.max(d.conditions, c => c.search_count))])
        .range([marginLeft, width - marginRight]);

    // Create the vertical scale (conditions).
    const y = d3.scaleBand()
        .domain([]) // Will be updated dynamically
        .range([marginTop, height - marginBottom])
        .padding(0.1);

    // Add x-axis.
    const xAxis = svg.append("g")
        .attr("transform", `translate(0,${height - marginBottom})`);

    // Add y-axis.
    const yAxis = svg.append("g")
        .attr("transform", `translate(${marginLeft},0)`);

    // Add a group for bars.
    const bars = svg.append("g");

    // Add a group for labels.
    const labels = svg.append("g");

    // Add a year label to the side.
    const yearLabel = svg.append("text")
        .attr("class", "year-label")
        .attr("x", width - 80) // Adjusted position
        .attr("y", height / 2)
        .attr("dy", "0.35em")
        .attr("text-anchor", "middle")
        .text("Year: 2004");

    // Add a color scale.
    const color = d3.scaleOrdinal(d3.schemeCategory10);

    // Add a tooltip.
    const tooltip = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);

    // Function to update the chart for a specific year.
    function update(year) {
        const yearData = raceData.find(d => d.year === year).conditions;

        // Sort data by search count (descending).
        yearData.sort((a, b) => b.search_count - a.search_count);

        // Update the y-axis domain.
        y.domain(yearData.map(d => d.condition));

        // Update the x-axis.
        xAxis.transition()
            .duration(500)
            .call(d3.axisBottom(x).ticks(width / 80, "s"));

        // Update the y-axis.
        yAxis.transition()
            .duration(500)
            .call(d3.axisLeft(y));

        // Update bars.
        const bar = bars.selectAll(".bar")
            .data(yearData, d => d.condition);

        bar.enter().append("rect")
            .attr("class", "bar")
            .attr("x", marginLeft)
            .attr("y", d => y(d.condition))
            .attr("width", d => x(d.search_count) - marginLeft)
            .attr("height", y.bandwidth())
            .attr("fill", d => color(d.condition))
            .on("mouseover", function (event, d) {
                // Highlight the bar.
                d3.select(this)
                    .attr("fill-opacity", 1)
                    .attr("stroke", "#333")
                    .attr("stroke-width", 2);

                // Show tooltip.
                tooltip.transition()
                    .duration(200)
                    .style("opacity", 0.9);
                tooltip.html(`Search Count: ${d.search_count}`)
                    .style("left", `${event.pageX + 5}px`)
                    .style("top", `${event.pageY - 28}px`);
            })
            .on("mouseout", function () {
                // Restore the bar's appearance.
                d3.select(this)
                    .attr("fill-opacity", 0.6)
                    .attr("stroke", null)
                    .attr("stroke-width", 0);

                // Hide tooltip.
                tooltip.transition()
                    .duration(200)
                    .style("opacity", 0);
            })
            .merge(bar)
            .transition()
            .duration(500)
            .attr("y", d => y(d.condition))
            .attr("width", d => x(d.search_count) - marginLeft);

        bar.exit().remove();

        // Update labels.
        const label = labels.selectAll(".bar-label")
            .data(yearData, d => d.condition);

        label.enter().append("text")
            .attr("class", "bar-label")
            .attr("x", d => x(d.search_count) - 5)
            .attr("y", d => y(d.condition) + y.bandwidth() / 2)
            .attr("dy", "0.35em")
            .text(d => d.condition)
            .merge(label)
            .transition()
            .duration(500)
            .attr("x", d => x(d.search_count) - 5)
            .attr("y", d => y(d.condition) + y.bandwidth() / 2)
            .text(d => d.condition);

        label.exit().remove();

        // Update the year label.
        yearLabel.text(`Year: ${year}`);
    }

    // Get the list of years.
    const years = raceData.map(d => d.year).sort((a, b) => a - b);

    // Start the animation.
    let currentYearIndex = 0;
    let interval;

    function animate() {
        update(years[currentYearIndex]);
        currentYearIndex = (currentYearIndex + 1) % years.length;
    }

    // Start the animation loop.
    function startAnimation() {
        interval = setInterval(animate, 1000);
    }

    // Stop the animation.
    function stopAnimation() {
        clearInterval(interval);
    }

    // Replay the animation.
    d3.select("#replay").on("click", () => {
        stopAnimation();
        currentYearIndex = 0;
        startAnimation();
    });

    // Pause/Continue the animation.
    const pauseButton = d3.select("#pause");
    pauseButton.on("click", () => {
        if (pauseButton.text() === "Pause") {
            stopAnimation();
            pauseButton.text("Continue");
        } else {
            startAnimation();
            pauseButton.text("Pause");
        }
    });

    // Start the animation initially.
    startAnimation();
}

// Function to create the multi-line chart
function createMultiLineChart(raceData) {
    // Specify the chart’s dimensions.
    const width = 800;
    const height = 500;
    const marginTop = 20;
    const marginRight = 150; // Increased margin for the legend
    const marginBottom = 50;
    const marginLeft = 100;

    // Create the SVG container for the multi-line chart.
    const svg = d3.select("#multi-line-chart")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    // Create the horizontal scale (years).
    const x = d3.scaleLinear()
        .domain([d3.min(raceData, d => d.year), d3.max(raceData, d => d.year)]) // Domain: min to max year
        .range([marginLeft, width - marginRight]); // Range: left to right margin

    // Create the vertical scale (search counts).
    const y = d3.scaleLinear()
        .domain([0, d3.max(raceData, d => d3.max(d.conditions, c => c.search_count))]) // Domain: 0 to max search count
        .range([height - marginBottom, marginTop]); // Range: bottom to top margin

    // Add x-axis.
    svg.append("g")
        .attr("transform", `translate(0,${height - marginBottom})`)
        .call(d3.axisBottom(x).ticks(d3.max(raceData, d => d.year) - d3.min(raceData, d => d.year)));

    // Add y-axis.
    svg.append("g")
        .attr("transform", `translate(${marginLeft},0)`)
        .call(d3.axisLeft(y));

    // Add a color scale using d3-scale-chromatic.
    const color = d3.scaleOrdinal(d3.schemeCategory10);

    // Create a line generator.
    const line = d3.line()
        .x(d => x(d.year)) // Map year to x-position
        .y(d => y(d.search_count)); // Map search count to y-position

    // Get unique conditions.
    const conditions = [...new Set(raceData.map(d => d.conditions.map(c => c.condition)).flat())];

    // Add lines for each condition.
    const lines = svg.selectAll(".line")
        .data(conditions)
        .enter().append("path")
        .attr("class", "line")
        .attr("d", d => line(raceData.map(rd => ({
            year: rd.year,
            search_count: rd.conditions.find(c => c.condition === d)?.search_count || 0
        }))))
        .attr("stroke", d => color(d))
        .attr("stroke-width", 2)
        .attr("fill", "none");

    // Add a group for hover effects.
    const hoverGroup = svg.append("g")
        .attr("display", "none");

    // Add a circle to highlight the closest data point.
    const hoverCircle = hoverGroup.append("circle")
        .attr("r", 5)
        .attr("fill", "steelblue")
        .attr("stroke", "white")
        .attr("stroke-width", 2);

    // Add text to display the condition and search count.
    const hoverText = hoverGroup.append("text")
        .attr("font-size", 12)
        .attr("font-family", "sans-serif")
        .attr("text-anchor", "middle")
        .attr("dy", "-0.5em");

    // Add a vertical line to indicate the hovered year.
    const hoverLine = hoverGroup.append("line")
        .attr("stroke", "#000")
        .attr("stroke-width", 1)
        .attr("stroke-dasharray", "3,3");

    // Add hover interaction.
    svg.on("pointermove", function (event) {
        const [xm, ym] = d3.pointer(event); // Get mouse position
        const year = x.invert(xm); // Get the year corresponding to the mouse position

        // Find the closest year in the data.
        const closestYear = raceData.reduce((a, b) => Math.abs(a.year - year) < Math.abs(b.year - year) ? a : b);

        // Find the closest condition and its search count.
        let closestCondition = null;
        let closestSearchCount = 0;
        let minDistance = Infinity;

        conditions.forEach(condition => {
            const searchCount = closestYear.conditions.find(c => c.condition === condition)?.search_count || 0;
            const distance = Math.abs(y(searchCount) - ym); // Distance between mouse and data point

            if (distance < minDistance) {
                minDistance = distance;
                closestCondition = condition;
                closestSearchCount = searchCount;
            }
        });

        // Update the hover group.
        if (closestCondition) {
            hoverGroup.attr("display", null);

            // Position the circle and text.
            hoverCircle
                .attr("cx", x(closestYear.year))
                .attr("cy", y(closestSearchCount));

            hoverText
                .attr("x", x(closestYear.year))
                .attr("y", y(closestSearchCount))
                .text(`${closestCondition}: ${closestSearchCount}`);

            // Position the vertical line.
            hoverLine
                .attr("x1", x(closestYear.year))
                .attr("x2", x(closestYear.year))
                .attr("y1", marginTop)
                .attr("y2", height - marginBottom);
        }
    });

    svg.on("pointerleave", () => {
        hoverGroup.attr("display", "none"); // Hide hover effects when the mouse leaves the chart
    });

    // ==================== Add Legend ====================
    const legend = svg.append("g")
        .attr("transform", `translate(${width - marginRight + 20},${marginTop})`);

    // Add one dot in the legend for each condition.
    legend.selectAll("mydots")
        .data(conditions)
        .enter()
        .append("circle")
        .attr("cx", 0)
        .attr("cy", (d, i) => i * 20) // 20 is the distance between dots
        .attr("r", 5)
        .style("fill", d => color(d));

    // Add text in the legend for each condition.
    legend.selectAll("mylabels")
        .data(conditions)
        .enter()
        .append("text")
        .attr("x", 10)
        .attr("y", (d, i) => i * 20) // 20 is the distance between dots
        .style("fill", d => color(d))
        .text(d => d)
        .attr("text-anchor", "left")
        .style("alignment-baseline", "middle");
}


// Function to create the stacked bar chart
function createStackedBarChart(data, selectedYear = 2004) {
    // Filter data for the selected year
    const filteredData = data.filter(d => d.year === selectedYear);

    // Group data by state_abb and condition
    const groupedData = d3.rollup(
        filteredData,
        v => d3.sum(v, d => d.search_count), // Sum search counts for each condition in each state
        d => d.state_abb, // Group by state
        d => d.condition // Group by condition
    );

    // Convert grouped data to an array of objects
    const chartData = Array.from(groupedData, ([state, conditions]) => {
        const conditionData = Object.fromEntries(conditions);
        return {
            state,
            ...conditionData // Spread conditions into the object
        };
    });

    console.log("Chart data:", chartData); // Debugging

    // Clear the previous chart
    d3.select("#stacked-bar-chart").html("");

    // Set up dimensions
    const margin = { top: 20, right: 30, bottom: 40, left: 40 };
    const width = 800 - margin.left - margin.right;
    const height = 500 - margin.top - margin.bottom;

    // Create SVG container
    const svg = d3.select("#stacked-bar-chart")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);

    // Hardcoded conditions and colors
    const conditions = [
        "cancer", "cardiovascular", "stroke", "depression",
        "rehab", "vaccine", "diarrhea", "obesity", "diabetes"
    ];
    const colors = [
        "#1f77b4", "#ff7f0e", "#2ca02c", "#d62728",
        "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22"
    ];

    // Create stacked data
    const stack = d3.stack()
        .keys(conditions)
        .value((d, key) => d[key] || 0); // Use 0 if the condition doesn't exist for a state

    const stackedData = stack(chartData);
    console.log("Stacked data:", stackedData); // Debugging

    // Create scales
    const x = d3.scaleBand()
        .domain(chartData.map(d => d.state))
        .range([0, width])
        .padding(0.1);

    const y = d3.scaleLinear()
        .domain([0, d3.max(stackedData, d => d3.max(d, d => d[1]))])
        .nice()
        .range([height, 0]);

    // Add x-axis
    const xAxis = svg.append("g")
        .attr("transform", `translate(0,${height})`)
        .call(d3.axisBottom(x));

    // Add y-axis
    const yAxis = svg.append("g")
        .call(d3.axisLeft(y));

    // Add bars
    const bars = svg.append("g")
        .selectAll("g")
        .data(stackedData)
        .join("g")
        .attr("fill", (d, i) => colors[i]); // Use hardcoded colors

    bars.selectAll("rect")
        .data(d => d)
        .join("rect")
        .attr("x", d => x(d.data.state))
        .attr("y", d => y(d[1]))
        .attr("height", d => y(d[0]) - y(d[1]))
        .attr("width", x.bandwidth())
        .append("title")
        .text(d => `${d.data.state} - ${conditions[d.index]}: ${d[1] - d[0]}`); // Use hardcoded conditions

    // Add legend
    const legend = svg.append("g")
        .attr("transform", `translate(${width + 20},0)`);

    legend.selectAll("rect")
        .data(conditions)
        .join("rect")
        .attr("x", 0)
        .attr("y", (d, i) => i * 20)
        .attr("width", 18)
        .attr("height", 18)
        .attr("fill", (d, i) => colors[i]); // Use hardcoded colors

    legend.selectAll("text")
        .data(conditions)
        .join("text")
        .attr("x", 24)
        .attr("y", (d, i) => i * 20 + 9)
        .attr("dy", "0.35em")
        .text(d => d); // Use hardcoded conditions

    // Add zoom functionality
    const zoom = d3.zoom()
        .scaleExtent([1, 10]) // Allow zooming between 1x and 10x
        .on("zoom", (event) => {
            const transform = event.transform;

            // Update x-axis
            xAxis.call(d3.axisBottom(x).scale(transform.rescaleX(x.copy().range([0, width]))));

            // Update y-axis
            yAxis.call(d3.axisLeft(y).scale(transform.rescaleY(y)));

            // Update bars
            bars.selectAll("rect")
                .attr("x", d => transform.applyX(x(d.data.state)))
                .attr("y", d => transform.applyY(y(d[1])))
                .attr("height", d => transform.applyY(y(d[0])) - transform.applyY(y(d[1])))
                .attr("width", x.bandwidth() / transform.k); // Adjust bar width based on zoom level
        });

    svg.call(zoom);
}