JSFiddle - React, Tailwind, and code Playground

by esbullington

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>
<script src="http://mbostock.github.com/d3/d3.layout.js"></script>
<svg></svg>

CSS

body
{
    background:#f0f0f0;
}

JavaScript

var PointVisualizer = function(params) {
    // TODO: Consult params to customize the target svg, width, height, etc...
    var vis, arcs, progressMeterArc, data, defs, backgroundGradient, backgroundGroup, progressMeterGroup, separatorGroup, labelGroup, textGroup;

    var width = 400,
        height = 400,
        r = Math.min(width, height) / 2,
        labelr = r + 75, // radius for label anchor
        outerRadius = Math.min(width, height) / 2,
        innerRadius = outerRadius * .6,
        color = d3.scale.category20(),
        arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius),
        format = function() {
            var text = arguments[0],
                args = Array.prototype.slice.call(arguments, 1);
            return text.replace(/{(\d+)}/g, function(match, number) {
                return typeof args[number] != 'undefined' ? args[number] : match;
            });
        };
    
        var arc2 = d3.svg.arc()
            .startAngle(function(d){return d.startAngle;})
            .endAngle(function(d){return d.endAngle;})
            .innerRadius(function(d){return d.innerRadius;})
            .outerRadius(function(d){return d.outerRadius;});
        


        vis = d3.select("svg")
            .attr("width", width)
            .attr("height", height)
            .attr('class', 'visualizer');
            
        //create some style definitions we can use throughout the SVG DOM
        defs = vis.append("svg:defs");
        backgroundGradient = defs.append("svg:radialGradient");

        backgroundGradient
            .attr("id", "backgroundGradient")
            .attr("cx", "50%")
            .attr("cy", "100%")
            .attr("r", "100%");
        
        backgroundGradient
            .append("svg:stop")
            .attr("stop-color", "#4A4A4A")
            .attr("offset", "0.5");

        backgroundGradient
            .append("svg:stop")
            .attr("stop-color", "#1C1C1C")
            .attr("offset", "1");

    ...