JSFiddle - React, Tailwind, and code Playground

by honzajde

HTML

<!DOCTYPE html>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <svg width="300" height="500"></svg>
</body>

CSS

body {
        font: 10px sans-serif;
    }
    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
    path.candle {
        stroke: #000000;
    }
    path.candle.body {
        stroke-width: 0;
    }
    path.candle.up {
        fill: #00AA00;
        stroke: #00AA00;
    }
    path.candle.down {
        fill: #FF0000;
        stroke: #FF0000;
    }

JavaScript

var data = [];

    setInterval(function(){
        if (data.length < 3) {
            data.push(Math.random());
        }
        else {
            data.shift();
            data.splice(1, 1);
            data.push(Math.random());
            data.push(Math.random());
        }
        draw();
    }, 3000);

    function draw() {
        var svg = d3.select('svg');
        var circles = svg.selectAll('circle')
                .data(data, function(d, i) { return d; });

        circles.attr('fill', 'orange');
        circles.style('stroke', 'green');
        circles.style('stroke-width', '3');
        
        circles.transition()
                .duration(1500)
                .attr('cx', function(d, i) { 
            console.log("update: " + i);
            return i*100 + 50; });

        circles.enter()
                .append('circle')
                .attr('fill', 'red')
                .attr('r', 40)
                .attr('cy', 50)
                .attr('cx', function(d, i) { 
            		console.log("circles,size: " + circles.size());
            		console.log("enter: " + i);
            		return (i + 1 + circles.exit().size())*100 + 50; })
            .transition()
                .duration(1500)
                .attr('cx', function(d, i) { return i*100 + 50; })
        		.attr('fill', 'green');

        circles.exit()
                .attr('fill', 'black')
            .transition()
                .duration(1500)
                .attr('cx', function(d, i) { 
            		console.log("exit: " + i);
            		return (i - 1)*100 + 50; })
                .remove();

    }