JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<div id="vis" />

CSS

#vis {
    height: 300px;
    width: 300px;
    margin: 0 auto;
}

JavaScript

function ColorRotator(colors) {
    var index = 0,
        colors = colors instanceof Array ? colors : Array.prototype.slice.call(arguments, 0);
    this.get = function () {
        if (index === colors.length) {
            index = 0;
        }
        var color = colors[index % colors.length];
        index++;
        return color;
    }
}

function ArcFactory(inner, outer) {
    var inner = inner,
        outer = outer;
    var deg2rad = function(value) {
        var value = value;
        return value * (Math.PI / 180);
    }
    this.create = function (start, end) {
        return d3.svg.arc()
            .innerRadius(inner)
            .outerRadius(outer)
            .startAngle(deg2rad(start))
            .endAngle(deg2rad(end));
    }
}

// TODO: conversions
var percentage = 12 / 100;
var degrees = percentage * 360.0;
var radians = degrees * Math.PI / 180.0;

var colors = new ColorRotator("red", "green", "blue");
var vis = d3.select("#vis")
    .append("svg")
    .attr("width", "100%")
    .attr("height", "100%");

var position = "translate(100,100)";
var factory = new ArcFactory(40, 70);
var a1 = factory.create(0, 45);
var a2 = factory.create(45, 60);

vis.append("path")
    .attr("d", a1)
    .attr("transform", position)
    .attr("fill", colors.get());

vis.append("path")
    .attr("d", a2)
    .attr("transform", position)
    .attr("fill", colors.get());