import { select } from 'd3';

const width = 600;
const height = 400;
const svg = select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

const randomData = () => {
  const data = [];
  for (let i = 0; i < 50; i++) {
    data.push({
      x: Math.random() * width,
      y: Math.random() * height,
      color: Math.random() > 0.5 ? 'blue' : 'green',
      radius: Math.random() * 8 + 3,
    });
  }
  return data;
};

const main = () => {
  let i = 0;

  const updateVisualization = () => {
    const data = randomData();

    svg
      .selectAll('circle')
      .data(data)
      .join('circle')
      .attr('cx', (d) => d.x)
      .attr('cy', (d) => d.y)
      .attr('fill', (d) => d.color)
      .attr('r', (d) => d.radius);

    svg
      .selectAll('text')
      .data(['Random Scatter Plot'])
      .join('text')
      .attr('x', width / 2)
      .attr('y', 30)
      .attr('text-anchor', 'middle')
      .style('font-size', '24px')
      .style('font-weight', 'bold')
      .text((d) => d);

    svg
      .selectAll('.label')
      .data(['X-axis Label', 'Y-axis Label'])
      .join('text')
      .attr('class', 'label')
      .attr('x', (d, idx) => (idx === 0 ? width / 2 : -height / 2))
      .attr('y', (d, idx) => (idx === 0 ? height - 20 : 20))
      .attr('transform', (d, idx) => (idx === 0 ? null : 'rotate(-90)'))
      .attr('text-anchor', 'middle')
      .style('font-size', '14px')
      .text((d) => d);

    i++;
  };

  setInterval(updateVisualization, 3000); // Change visualization every 3 seconds
};

main();