<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>COVID-19 and Agriculture Visualization</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <style>
        /* Add some basic styling to the chart */
        svg {
            background-color: #f4f4f4;
            margin-left: 50px;
        }
        text {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="chart"></div>
    <script>
        // Load the data from the CSV file
        d3.csv('combined_data.csv').then(data => {
            console.log(data);  // Make sure data is loaded

            // Set the dimensions and margins of the graph
            const margin = {top: 30, right: 30, bottom: 70, left: 60},
                width = 460 - margin.left - margin.right,
                height = 400 - margin.top - margin.bottom;

            // Append the svg object to the body of the page
            const svg = d3.select("#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 + ")");

            // Add X axis
            const x = d3.scaleBand()
              .range([ 0, width ])
              .domain(data.map(d => d.State)) // Change 'State' to your actual column name for x-axis
              .padding(0.1);
            svg.append("g")
              .attr("transform", "translate(0," + height + ")")
              .call(d3.axisBottom(x))
              .selectAll("text")
                .attr("transform", "translate(-10,0)rotate(-45)")
                .style("text-anchor", "end");

            // Add Y axis
            const y = d3.scaleLinear()
              .domain([0, d3.max(data, d => +d.Confirmed)]) // Change 'Confirmed' to your actual column name for y-axis
              .range([ height, 0]);
            svg.append("g")
              .call(d3.axisLeft(y));

            // Bars
            svg.selectAll("mybar")
              .data(data)
              .join("rect")
                .attr("x", d => x(d.State))
                .attr("y", d => y(d.Confirmed))
                .attr("width", x.bandwidth())
                .attr("height", d => height - y(d.Confirmed))
                .attr("fill", "#69b3a2");
        });
    </script>
</body>
</html>
