JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

CSS

body {
    font: 10px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.x.axis path, .y.axis path {
    display: none;
    stroke-line-cap:round;
}
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 5;
}

JavaScript

var data = [];
var statuses = ['Todo', 'forToday', 'inProgress', 'Phinished', 'QA', 'Complete'];
var owners = ['Dan', 'Alan', 'Adam', 'Page', 'Edu']

var today = new Date();

//Dates in ms

for (var i = 0; i < 20; i++) {
    var day = new Date();
    data.push({
        status: statuses[~~ (Math.random() * statuses.length)],
        created: new Date(day.setDate(today.getDate() - (~~ (Math.random() * 10)))).setHours(0, 0, 0, 0),
        owner: owners[~~ (Math.random() * owners.length)]
    })
}

var color = d3.scale.category10();

function makecharts(data) {
    var holder = document.createElement('div');
    var title = document.createElement('h1');
    title.innerHTML = 'Story Title';
    holder.appendChild(title);

    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
    };
    var width = 150,
        height = 150,
        radius = Math.min(width, height) / 2;

    var arc = d3.svg.arc()
        .outerRadius(radius - 20)
        .innerRadius(0);

    var labelArc = d3.svg.arc()
        .outerRadius(radius - 2)
        .innerRadius(radius - 2);

    var piedata = _(_(data).groupBy('status')).map(function (v, status) {
        return {
            status: status,
            tickets: v.length
        }
    }).sort(function(a, b){
    	return statuses.indexOf(a.status) - statuses.indexOf(b.status);
    })

    var pie = d3.layout.pie()
        .sort(null)
        .value(function (d) {
        return d.tickets;
    });

    var svg = d3.select(holder).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + ( width + margin.left + margin.right) / 2 + "," + height / 2 + ")");

    var g = svg.selectAll(".arc")
        .data(pie(piedata))
        .enter().append("g")
        .attr("class", "arc");

    g.append("path")
        .attr("d", arc)
        .style("fill", function (d, i) {
        return...