JSFiddle - React, Tailwind, and code Playground

by tomexx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div class="bubble-cloud"></div>

CSS

body {
    background: black;
    margin:0;
    padding:0;
}

.bubble-cloud {
    background: url("http://dummyimage.com/100x100/111/333?text=sample") 0 0;
    width: 1200px;
    height: 550px;
    overflow: hidden;
    position: relative;
    margin:0 auto;
}
.bubble-cloud .circle {
    transition: r .5s linear;
}
.bubble-cloud .line {
    transition: x1 .5s linear, x2 .5s linear;

}

JavaScript

// helpers
var random = function(min, max) {
    if (max == null) {
        max = min;
        min = 0;
    }
    return min + Math.floor(Math.random() * (max - min + 1));
};

// mock data
var colors = [
    {
        fill: 'rgba(242,216,28,0.3)',
        stroke: 'rgba(242,216,28,1)'
    },
    {
        fill: 'rgba(207,203,196,0.3)',
        stroke: 'rgba(207,203,196,1)'
    },
    {
        fill: 'rgba(0,0,0,0.2)',
        stroke: 'rgba(100,100,100,1)'
    }
];
var data = [];
for(var j = 0; j <= 2; j++) {
    for(var i = 0; i <= 4; i++) {
        var text = 'text' + i;
        var category = 'category' + j;
        var r = random(50, 100);
        data.push({
            text: text,
            category: category,
            r: r,
            r_change_1: r + random(-20, 20),
            r_change_2: r + random(-20, 20),
            fill: colors[j].fill,
            stroke: colors[j].stroke
        });
    }
}
// mock debug
//console.table(data);

var CIRCLE_PADDING = 20;

// collision detection
// derived from http://bl.ocks.org/mbostock/1748247
function collide(alpha) {
    var quadtree = d3.geom.quadtree(data);
    return function(d) {
        var r = d.r,
            nx1 = d.x - r,
            nx2 = d.x + r,
            ny1 = d.y - r,
            ny2 = d.y + r;
        quadtree.visit(function(quad, x1, y1, x2, y2) {
            if (quad.point && (quad.point !== d)) {
                var x = d.x - quad.point.x,
                    y = d.y - quad.point.y,
                    l = Math.sqrt(x * x + y * y),
                    r = d.r + quad.point.r;
                    r += CIRCLE_PADDING;
                if (l < r) {
                    l = (l - r) / l * (1+ alpha);
                    d.x -= x *= l;
                    d.y -= y *= l;
                    quad.point.x += x;
                    quad.point.y += y;
                }
            }
            return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
        });
    };
}

// initialize
var container =...