JSFiddle - React, Tailwind, and code Playground

by nrabinowitz

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<div id="graphDiv"></div>

JavaScript

var width = 450,
    height = 450,
    pctExotic = [20, 35 ,35, 75, 55, 2.5, 35, 35, 45, 65, 7.5, 75, 2.5],
    data = [
        {value: 500, pctFull: 0.20, name: "20%"}, 
        {value: 250, pctFull: 0.75, name: "75%"},
        {value: 700, pctFull: 0.50, name: "50%"},        
    ],
    kVals = [],
    rVals = [],
    hVals = [];

// calculate k for each data object as described: http://bl.ocks.org/3422480
function kCalculation(){
    var i,
        j,
        t0,
        t1,
        k;
    
    for (i = 0; i < data.length; i += 1) {
        k = data[i].pctFull
        t1= data[i].pctFull * 2 * Math.PI;
        if (data[i].pctFull > 0 && data[i].pctFull < 1) {
            t1 = Math.pow(12 * k * Math.PI, 1 / 3);                
            for (j = 0; j < 10; j += 1) {
                  t0 = t1;
                  t1 = (Math.sin(t0) - t0 * Math.cos(t0) + 2 * k * Math.PI) / (1 - Math.cos(t0));
            }
            k = (1 - Math.cos(t1 / 2)) / 2;
        }
        kVals.push(k)
    }
}
            
// calculate r of each item so that area scales to value
function rCalculation() {
    var i, 
        r;

    for (i = 0; i < data.length; i += 1) {
        rVals.push(Math.sqrt(data[i].value / Math.PI)*2);
    }
}
    
function drawGraph(){
    //create chart
    var chart = d3.select('#graphDiv').append('svg')
        .attr('width', width)
        .attr('height', height);  

    //create force layout
    var force = d3.layout.force()
        .nodes(data)
        .size([width, height])
        .linkDistance(10)
        .charge(function(d, i) {return rVals[i]*(-10);})
        .on("tick", tick)
        .start();
    
    var node = chart.selectAll(".node")
        .data(force.nodes())
        .attr("class", "node")
        .enter().append("g")
        .call(force.drag);
    
    // blue circle
    node.append("circle")
        .attr("r", function(d, i) {return rVals[i];})
        .style("fill", "#80dabe")                
        .style("stroke", "#1a4876");   
    ...