JSFiddle - React, Tailwind, and code Playground

by Martin

HTML

<div id="timeChartWrapper"></div>

CSS

#timeChartWrapper svg circle {
    fill: blue;
}

JavaScript

var width = 400,
    height = 30;

var now = new Date().getTime();
var x = d3.time.scale().domain([now - 5000, now]).range([0, width]);
var svg = d3.select("#timeChartWrapper").append("svg").attr("width", width).attr("height", height);

var data = [];

setInterval(function () {

    var now = new Date();
    var fiveSecAgo = new Date(now.getTime() - 5000);
    x.domain([fiveSecAgo, now]);

    svg.selectAll("circle")
        .transition()
        .ease("linear")
        .duration(100)
        .attr("cx", function (d) {
        return x(d.date);
    });

}, 100);

// add circle every second
setInterval(function () {
    data.push({
        date: new Date()
    });

    svg.selectAll("circle")
        .data(data).enter()
        .append("svg:circle")
        .attr("r", 4)
        .attr("cx", function (d) {
        return x(d.date);
    })
        .attr("cy", height / 2);

}, 1000);