JSFiddle - React, Tailwind, and code Playground

by rolfsf

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<button id="doSomething">Do Something</button>

<div class="chart cluster-chart" id="clusters"></div>

CSS

.total-cluster {fill: orange;}

.total-value {
    fill: #FFF;
    text-anchor: middle;
    font-size: 2em;
    font-weight: bold;
}

circle.cluster {
    fill: blue;
    stroke-width: 5px;
    stroke: #FFF;
}
circle.cluster.empty {
    fill: CCC;
}
circle.cluster.empty:hover {
     stroke: #FFF;
     cursor: default;
}
circle.cluster:hover {
    cursor: pointer;
    stroke: dark-blue;
}
.cluster-value {
   fill: #FFF;
   text-anchor: middle;
   pointer-events: none;
   font-size: 2em;
   font-weight: bold;
}
.cluster-name, .total-name {
   fill: #FFF;
   text-anchor: middle;
   font-size: 0.7em;
   text-transform: uppercase;
}

JavaScript

$(function() {
    d3.select('#clusters')
    .datum({
        Name: 'Total Widgets',
        Value: 224,
        Clusters: [
            ['Other', 45],
            ['FooBars', 30],
            ['Foos', 50],
            ['Bars', 124],
            ['BarFoos', 0]
        ]
    })
    .call( clusterChart() );

    
   //update the data on click
    
    $("#doSomething").on("click", function(){

        d3.select('#clusters')
            .datum({
                Name: 'Total Widgets',
                Value: 122,
                Clusters: [
                    ['Other', 14],
                    ['FooBars', 60],
                    ['Foos', 22],
                    ['Bars', 100],
                    ['BarFoos', 5]
                ]
            })
            .call( clusterChart() );

    });

});

/**
 *  Cluster chart for d3.js
 */

function clusterChart() {
    var width = 450,
        margin = 0,
        radiusAll = 72,
        maxRadius = radiusAll - 5,
        r = d3.scale.linear(),
        padding = 1, 
        height = 3 * (radiusAll*2 + padding),
        startAngle = Math.PI / 2,
        onTotalMouseOver = null,
        onTotalClick = null,
        onClusterMouseOver = null,
        onClusterClick = null;
        val = function(d){return d};

    function chart(selection) {
        selection.each(function(data) {
            //console.log(data);

            var cx = width / 2,
                cy = height / 2,
                stepAngle = 2 * Math.PI / data.Clusters.length,
                outerRadius = 2*radiusAll + padding;

            r = d3.scale.linear()
                        .domain([0, d3.max(data.Clusters, function(d){return d[1];})])
                        .range([50, maxRadius]);

            var svg = d3.select(this).selectAll("svg")
                .data([data]);
            
            svg.exit().remove();
            
            var svgEnter = svg.enter()
                .append("svg");
            
            //enter
            var...