function draw() {
    const margin = { top: 50, right: 150, bottom: 50, left: 50 };
    const width = 800 - margin.left - margin.right;
    const height = 500 - margin.top - margin.bottom;
  
    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})`);
  
    // Load data
    d3.csv("final_data_with_population.csv").then((data) => {
      // Parse the data
      data.forEach((d) => {
        d.Year = +d.Year;
        d.HomeValue = +d.HomeValue;
      });
  
      // Group data by RegionName
      const groupedData = d3.group(data, (d) => d.RegionName);
  
      // Scales
      const xScale = d3
        .scaleLinear()
        .domain(d3.extent(data, (d) => d.Year))
        .range([0, width]);
  
      const yScale = d3
        .scaleLinear()
        .domain([0, d3.max(data, (d) => d.HomeValue)])
        .nice()
        .range([height, 0]);
  
      const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
  
      // Axes
      const xAxis = d3.axisBottom(xScale).tickFormat(d3.format("d"));
      const yAxis = d3.axisLeft(yScale);
  
      svg.append("g")
        .attr("class", "x-axis")
        .attr("transform", `translate(0, ${height})`)
        .call(xAxis);
  
      svg.append("g")
        .attr("class", "y-axis")
        .call(yAxis);
  
      // Line generator
      const line = d3
        .line()
        .x((d) => xScale(d.Year))
        .y((d) => yScale(d.HomeValue));
  
      // Draw lines
      groupedData.forEach((values, key) => {
        svg
          .append("path")
          .datum(values)
          .attr("class", "line")
          .attr("d", line)
          .style("stroke", colorScale(key))
          .attr("stroke-width", 2);
      });
  
      // Add legend
      const legend = svg
        .selectAll(".legend")
        .data(groupedData.keys())
        .enter()
        .append("g")
        .attr("transform", (d, i) => `translate(${width + 10}, ${i * 20})`);
  
      legend
        .append("rect")
        .attr("width", 10)
        .attr("height", 10)
        .style("fill", (d) => colorScale(d));
  
      legend
        .append("text")
        .attr("x", 15)
        .attr("y", 10)
        .text((d) => d)
        .style("font-size", "12px")
        .attr("alignment-baseline", "middle");
    });
  }
  
  // Call the draw function
  draw();
  