import { select } from 'd3'; export const main = (container) => { const width = container.clientWidth; const height = container.clientHeight; const svg = select(container) .selectAll('svg') .data([null]) .join('svg') .attr('width', width) .attr('height', height) .style('background', '#F0FFF4'); const data = [ { x: 155, y: 386, r: 20, fill: '#0000FF' }, { x: 340, y: 238, r: 52, fill: '#FF0AAE' }, { x: 531, y: 151, r: 20, fill: '#00FF88' }, { x: 482, y: 307, r: 147, fill: '#7300FF' }, { x: 781, y: 91, r: 61, fill: '#0FFB33' }, { x: 668, y: 229, r: 64, fill: '#D400FF' }, { x: 316, y: 390, r: 85, fill: '#0FF0FF' }, ]; svg .selectAll('circle') .data(data) .join('circle') .attr('cx', (d) => d.x) .attr('cy', (d) => d.y) .attr('r', (d) => d.r) .attr('fill', (d) => d.fill) .attr('opacity', 708 / 1000); };