JSFiddle - React, Tailwind, and code Playground

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background: black;
    text-align:center;
}
text {
    font: 50px sans-serif;
}
svg {
    width: 100vmin;
    height: 100vmin;
    position:absolute;
    top:0;
    left:0;
}
path {
    stroke-width: 2px;
}
button {
    position:fixed;
    bottom: 0;
    left: 0;
    background: black;
    border: 2px solid #666;
    padding: 1em;
    color: #666;
    width:98vw;
    margin: 1em 1vw;
}

JavaScript

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

Math.radians = function (degrees) {
    return degrees * Math.PI / 180;
};

var width = 3000,
    height = 3000,
    radius = 3000,
    turnspeed = 0.25,
    strike = 450;

var holder = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr('viewBox', '0 0 ' + width + ' ' + height)

var rings = holder.insert("g", ':first-child')
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

//Controller
var deg = 0;
var control = holder.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
control.append('circle')
    .attr('cx', 0)
    .attr('cy', 0)
    .attr('r', strike + 120)
    .attr('fill', 'transparent')
    .attr('stroke', '#aaa')
    .attr('stroke-width', '20')

control.append('circle')
    .attr('cx', 0)
    .attr('cy', -strike + 50)
    .attr('r', 50)
    .attr('fill', '#aaa')

var keystate = 0

document.addEventListener('keydown', function (event) {
    if (event.keyCode == 37) {
        keystate = -1;
    } else if (event.keyCode == 39) {
        keystate = 1;
    }
});

document.addEventListener('keyup', function (event) {
    keystate = 0;
});

var red = 'red', blue = 'blue', green = 'green';


function newGraph(dt, val) {
    //var dir = Math.random() > 0.5 ? 1 : -1;
    var dir = 1;
    var now = Date.now();
    var last = now,
        delta;
    //d3.select('svg').remove();

    var dataset = [];
    var colors = ['#000', red,blue,green];

/*    if (dir > 0) {
        colors.push('#0074D9')
    } else {
        colors.push('#E444BE')
    } */
    var accent = '#DDDDDD';

    colors.forEach(function (v) {
        var data = {
            color: v,
            amount: 1 + ~~ (Math.random() * 100)
        }

        if...