JSFiddle - React, Tailwind, and code Playground

by jeremyblalock

HTML

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

CSS

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#wrapper svg {
    height: 100%;
}

JavaScript

var svg = d3.select('#wrapper').append('svg'),
    offsetX = (window.innerWidth / 2),
    offsetY = (window.innerHeight / 2),
    wrapperGroup = svg.append('g')
        .attr('transform', 'translate(' + offsetX + ', ' +
              offsetY + ')'),
    layoutGroup = wrapperGroup.append('g'),
    labelGroup = wrapperGroup.append('g')
        .attr('opacity', 0),
    positionLabel = svg.append('text').attr('y', 16)
        .attr('opacity', 0),
    hoverCircle = wrapperGroup.append('circle')
        .attr({
            r: 220,
            cx: 0,
            cy: 0,
            stroke: 'transparent',
            fill: 'transparent'
        }),
    quint = layoutGroup.append('path')
        .attr({
            fill: '#fbb',
            stroke: '#c99',
            'stroke-width': 2
        }),
    initialData = function() {
         return [118.5, 79.5, 85.5, 55.5, 63.0];   
    }
    data = initialData();

var drawLabels = function() {
    var len = data.length,
        labelPoints = [],
        increment = 2 * Math.PI / len,
        point;
    for (var i = 0; i < data.length; i += 1) {
        point = polarToCart(increment * i, data[i] + 20);
        labelPoints.push({x: point[0], y: point[1]});
    }
    labelGroup.selectAll('text').data(labelPoints)
        .enter().append('text')
            .attr({
                x: function(d) { return d.x },
                y: function(d) { return d.y },
                'text-anchor': 'middle'
            })
            .text(function(d, i) { return i });
}

var polarToCart = function(theta, r) {
    var x = Math.sin(theta) * r,
        y = Math.cos(theta) * r;
    return [x, y];
}

var pathData = function() {
    var len = data.length,
        increment = 2 * Math.PI / len,
        vals = [], point;
    for (var i = 0; i < len; i += 1) {
        point = polarToCart(increment * i, data[i]);
        vals.push(point);
    }
    return 'M' + vals.join('L') + 'Z';
}

var draw = function() {
    var dString = pathData();
   ...