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();