JSFiddle - React, Tailwind, and code Playground

by Igor Cuckovic

HTML

<body></body>

JavaScript

var dataSet = [5, 10, 30, 20, 25];

var svg = d3.select("body").append("svg")
    .attr("width", 600)
    .attr("height", 600);

var groups = svg.selectAll("g")
    .data(dataSet)
    .enter()
    .append("g")
    .attr("transform", function (d, i) {
    var x = 78 * i + 50;
    var y = 300 - (d * 4)
    return "translate(" + x + "," + y + ")";
});


var circle = groups.append("circle")
    .attr({
    "cx": 0,
    "cy": 0,
    "r": function (d) {
        return d + 10;
    },
    "fill": "#BADBDA",
    "stroke": "#2F3550",
        "stroke-width": 10
});

var label = groups.append("text")
    .text(function (d, i) {
    return d;
})
    .attr({
    "alignment-baseline": "middle",
        "text-anchor": "middle",
        "fill": "white",
        "font-size": function (d) {
        return d + 25;
    },
        "y": function (d) {
        return d / 3 + 10;
    },
        "font-weight": "bold",
        "font-family": "Helvetica, sans-serif",
        "stroke": "black",
        "stroke-width": 1
});