JSFiddle - React, Tailwind, and code Playground

by jeremyblalock

HTML

<div id='wrapper'>
</div>

CSS

body {
    font-family: 'Helvetica Neue';
    background-color: #052f40;
    color: #fff;
}
.graph-piece {
    fill: rgba(255, 255, 255, .1);
}
.graph-piece:first-child {
    fill: rgba(255, 255, 255, .2);
}
.graph-label-line {
    fill: none;
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 2;
}
text {
    fill: #fff
}

JavaScript

// CONFIG
var LINE_POSITION = .7,
    RADIUS = 50;

var percentFormat = d3.format('.0%');

var wrapper = d3.select('#wrapper'),
    svg = wrapper.append('svg').attr('height', 300),
    graphGroup = svg.append('svg:g').classed('graph-group', true)
                    .attr('transform', 'translate(100, 150)'),
    pieces = graphGroup.append('svg:g').classed('graph-pieces', true),
    labelGroup = graphGroup.append('svg:g').classed('graph-label', true),
    labelLine = labelGroup.append('svg:path').classed('graph-label-line',
                                                      true),
    labelTextTop = labelGroup.append('svg:text')
                    .classed('graph-label-text', true)
                    .text("5% agree")
                    .attr({
                        x: RADIUS + 40,
                        y: -RADIUS
                    }),
    labelTextBottom = labelGroup.append('svg:text')
                    .classed('graph-label-text', true)
                    .text("with you")
                    .attr({
                        x: RADIUS + 40,
                        y: -RADIUS + 18
                    });
var prevData = [
        {value: 12},
        {value: 24},
    ];

function otherData() {
    return [
        {value: 40 * Math.random()},
        {value: 60 * Math.random()},
    ];
}

var pie = d3.layout.pie().sort(null).value(function(d) { return d.value }),
    arc = d3.svg.arc().innerRadius(0).outerRadius(RADIUS);

function lineData(pieData) {
    var midAngle = Math.min(Math.PI / 4, (pieData.endAngle -
                                          pieData.startAngle) / 2),
        startX = Math.sin(midAngle) * LINE_POSITION * RADIUS,
        startY = -Math.cos(midAngle) * LINE_POSITION * RADIUS,
        points = [[startX, startY],
                  [RADIUS + startY + startX, -RADIUS],
                  [RADIUS + 30, -RADIUS]];
    return 'M' + points.join('L') + 'l0,-10l0,30';
}

function update(data) {
    if (typeof data === 'undefined') data =...