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) + "
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); }); }); });