d3.csv("https://raw.githubusercontent.com/lakshmi-keerthi/lakshmi-keerthi.github.io/main/covid_data_cleaned.csv", function(d) {
    d.date = d3.timeParse("%Y-%m-%d")(d.date); // Ensure the date format matches your dataset
    d.new_cases = +d.new_cases;
    return d;
}).then(function(data) {
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.new_cases; })]);

    xAxis.call(d3.axisBottom(x));
    yAxis.call(d3.axisLeft(y));

    // Initial line plot
    const path = svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", line);

    // Initial scatter plot
    const dots = svg.selectAll("dot")
      .data(data)
      .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return x(d.date); })
      .attr("cy", function(d) { return y(d.new_cases); })
      .on("mouseover", function(event, d) {
        tooltip.transition()
               .duration(200)
               .style("opacity", .9);
        tooltip.html("Date: " + d3.timeFormat("%Y-%m-%d")(d.date) + "<br/>Cases: " + d.new_cases)
               .style("left", (event.pageX + 5) + "px")
               .style("top", (event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
        tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      });

    // Slider functionality
    const slider = document.getElementById('slider');
    noUiSlider.create(slider, {
        start: [x.domain()[0].getTime(), x.domain()[1].getTime()],
        connect: true,
        range: {
            'min': x.domain()[0].getTime(),
            'max': x.domain()[1].getTime()
        },
        step: 24 * 60 * 60 * 1000, // one day
    });

    slider.noUiSlider.on('update', function(values, handle) {
        const range = values.map(d => new Date(+d));
        const filteredData = data.filter(d => d.date >= range[0] && d.date <= range[1]);

        x.domain(d3.extent(filteredData, function(d) { return d.date; }));
        xAxis.call(d3.axisBottom(x));

        // Update the line plot
        path.datum(filteredData).attr("d", line);

        // Update the scatter plot
        dots.data(filteredData)
            .attr("cx", function(d) { return x(d.date); })
            .attr("cy", function(d) { return y(d.new_cases); });
    });
});