JSFiddle - React, Tailwind, and code Playground

by stvnmntjy

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.js"></script>

JavaScript

var data = [30];
var color = 'sandybrown';
var svg = 
    d3.select('body').
        append('svg').
        attr({
            height: 600,
            width: 600
        });
var circle = 
    svg.selectAll('circle').
    data(data);

circle.
    enter().
    append('circle').
    attr(
        {
            cx: function (d) {
                return d * 5;
            },
            cy: function (d) {
                return d * 5;
            },            
            r: 0
        }
    ).style(
        {
            fill: color
        }
    ).
    transition().
    delay(100).
    duration(1000).
    attr(
        {
            cx: function (d) {
                return d * 5;
            },
            cy: function (d) {
                return d * 5;
            },            
            r: function (d) {
                return d * 3;
            }
        }
    ).style(
        {
            fill: color
        }
    );