JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

JavaScript

var dataset = [
    [5, 20],
    [480, 90],
    [250, 50],
    [100, 33],
    [330, 95],
    [410, 12],
    [475, 44],
    [25, 67],
    [85, 21],
    [250, 50],
    [100, 33],
    [330, 95],
    [410, 12],
    [475, 44],
    [25, 67],
    [85, 21],    
    [220, 88]
];
var w = 500;
var h = 100;
var colors1 = d3.scale.category10();
//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .style('background-color', '#dadada');
console.log(colors1(1));

svg.selectAll('circle')
    .data(dataset)
    .enter()
    .append('circle')
    .attr('cx', function (d) {
        return d[0];
    })
    .attr('cy', function (d) {
        return d[1];
    })
    .attr('r', 5)
    .attr('fill', function(d,i) { return colors1(i);})
    .transition()
.duration(function() {return Math.random() * 5000;})
.attr('cy', function(d) { return Math.random() * h;});

;