// reusable_scatter_plot.js
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

// Reusable scatter plot function
function scatterPlot() {
  // Default chart dimensions and margins
  let width = 600,
      height = 400,
      margin = { top: 20, right: 20, bottom: 50, left: 60 },
      xValue = d => +d.finalWorth, // Convert string to number for x-axis
      yValue = d => +d.age,        // Convert string to number for y-axis
      xLabel = "Net Worth (Thousands)",
      yLabel = "Age";

  // Main chart function
  function chart(selection) {
    selection.each(async function() { // Async to handle data fetching
      // Fetch data from Gist
      const data = await d3.csv("https://gist.githubusercontent.com/Gorantlavishnusai/f31f9b9f663f94a585c936d4606c385f/raw/381aa0806c763e1e9a562b8cdadf2fd59dcf2cfe/Billionaires.csv");
      
      // Set up SVG container
      const svg = d3.select(this)
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);

      // Define x-scale
      const xScale = d3.scaleLinear()
        .domain(d3.extent(data, xValue))
        .range([0, width])
        .nice();

      // Define y-scale
      const yScale = d3.scaleLinear()
        .domain(d3.extent(data, yValue))
        .range([height, 0])
        .nice();

      // Add x-axis with formatted ticks
      svg.append("g")
        .attr("transform", `translate(0,${height})`)
        .call(d3.axisBottom(xScale).tickFormat(d3.format(".2s")))
        .append("text")
        .attr("x", width / 2)
        .attr("y", 40)
        .attr("fill", "black")
        .attr("text-anchor", "middle")
        .text(xLabel);

      // Add y-axis
      svg.append("g")
        .call(d3.axisLeft(yScale))
        .append("text")
        .attr("x", -height / 2)
        .attr("y", -40)
        .attr("fill", "black")
        .attr("text-anchor", "middle")
        .attr("transform", "rotate(-90)")
        .text(yLabel);

      // Add scatter points
      svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", d => xScale(xValue(d)))
        .attr("cy", d => yScale(yValue(d)))
        .attr("r", 5)
        .attr("fill", "teal")
        .attr("opacity", 0.7)
        .append("title") // Tooltip with personName
        .text(d => d.personName);
    });
  }

  // Getter/setter methods
  chart.width = function(value) { if (!arguments.length) return width; width = value; return chart; };
  chart.height = function(value) { if (!arguments.length) return height; height = value; return chart; };
  chart.xValue = function(value) { if (!arguments.length) return xValue; xValue = value; return chart; };
  chart.yValue = function(value) { if (!arguments.length) return yValue; yValue = value; return chart; };
  chart.xLabel = function(value) { if (!arguments.length) return xLabel; xLabel = value; return chart; };
  chart.yLabel = function(value) { if (!arguments.length) return yLabel; yLabel = value; return chart; };

  return chart;
}

// Initialize and apply the chart
const svg = d3.select("body").append("svg");
const myChart = scatterPlot();
svg.call(myChart);