JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

<head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
    <input type=button id="job-counts" value="Counts"></input>
    <input type=button id="job-time" value="Time"></input>
    <input type=button id="job-times" value="Job Times"></input>
    <div>
        <input type=button id="one-sun" value="All"></input>
        <input type=button id="two-suns" value="Display by meadow type"></input>
    </div>
    <div>
        Bubble size: 
        <input type=range  id="max-size" value=50 min=20 max=80 step=1></input>
    </div>

</body>

CSS

.node text {
  pointer-events: none;
  font: 10px sans-serif;
}

JavaScript

var data1 = [
    {analysis_id : 1,
     total_job_counts : 44,
     total_job_time   : 12,
     job_times        : [4, 12, 22],
     job_counts : [2,3,2,1],
     color      : "yellow",
     meadow_type : "LOCAL",
     logic_name : "analysis1"},
    {analysis_id : 2,
     total_job_counts : 16,
     total_job_time   : 8,
     job_times        : [2, 8, 44],
     job_counts : [2,1,1,2],
     color      : "green",
     meadow_type : "LOCAL",
     logic_name : "analysis2"},
    {analysis_id : 3,
     total_job_counts : 32,
     total_job_time   : 19,
     job_counts : [1,1,2,8],
     job_times  : [12, 44, 48],
     color      : "cyan",
     meadow_type: "LSF",
     logic_name : "analysis3"},
    {analysis_id : 4,
     total_job_counts : 4,
     total_job_time   : 58,
     job_times        : [21, 33, 63],
     job_counts : [1,1,1,1],
     color      : "orange",
     meadow_type: "LSF",
     logic_name : "analysis4"}
];

function bubbleCloud() {
    var width = 500;
    var height = 400;
    var center = {x: width / 2, y: height / 2};
    var meadow_centers = {"LOCAL" : {x : width/3,   y : height/2},
                          "LSF"   : {x : 2*width/3, y : height/2}
                         };
    var layout_gravity = 0.05;
    var damper = 0.1;
    var friction = 0.9;
    var nodes = [];
    var attr = "";
//    var data = [];
    var node;
    var force;
    var min_range = 5;
    var max_range = 50;
    var radius_scale;
    var jitter = 0.5;
        
    var bCloud = function(vis) {
        var domain = bCloud.domain();
        radius_scale = d3.scale.linear()
        .domain(domain)
        .range([min_range,max_range]);
        
        node = vis.selectAll("node")
        .data(nodes)
        .enter().append("g")
        .attr("class", "node");     
        
        var max_circles = node.append("circle")
        .attr("class", "max")
        .attr("cx", 0)
        .attr("cy", 0)
        .attr("r", function (d) { if (typeof(d[attr]) === "number") {return...