Example of data binding on a circle, in D3

circles-d3.js

d3.csv('data/dogs.csv').then(data => {
            data.forEach(d => d.age = +d.age);

            const svg = d3.select('.playground')
                .append('svg')
                    .attr('width', 600)
                    .attr('height', 600);

            const circles = svg.selectAll('circle')
                .data(data);
            
            circles.enter()
                .append('circle')
                .attr('cx', (d, i) => i * 100 + 50)
                .attr('cy', (d, i) => 50)
                .attr('r', (d, i) => d.age * 10)
                .attr('fill', (d, i) => 'green')
            
            circles.enter()
                .append('text')
                .attr('x', (d, i) => i * 100 + 25)
                .attr('y', (d, i) => 50)
                .attr('fill', 'tomato')
                .text((d, i) => d.name)
        }).catch(err => {
            console.error(err);
        })