D3 fun - Circles and Bars

// datapoints: 0, 2, 8, 1, 2
data = [0, 2, 8, 1, 2]
let currentX = 15, currentY = 15
const deltaX = 25, deltaY = 25

let svg = d3.select('.svg_box')
    .append('svg')
    .attr('transform', 'scale(6)')

const gCircle = svg.append('g').attr('class', 'circle-group')
data.forEach(nr_of_issues => {
    drawShape('circle', gCircle, nr_of_issues)
});

currentX = 15
currentY = +deltaY

const gRect = svg.append('g').attr('class', 'rect-group')
data.forEach(nr_of_issues => {
    drawShape('rect', gRect, nr_of_issues)
});

function drawShape(shape, group, radius) {
    if (shape === 'circle') {
        group.append(shape)
            .attr('r', Math.sqrt(radius))
            .attr('cx', currentX)
            .attr('cy', currentY)
    } else if (shape === 'rect') {
        group.append(shape)
            .attr('height', radius)
            .attr('width', 5)
            .attr('x', currentX)
            .attr('y', currentY)
    }

    group.append('text').text(radius)
        .attr('fill', 'black')
        .attr('x', currentX)
        .attr('y', currentY)
        .attr('font-size', '.3em')

    currentX += deltaX
}