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;
}

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 <= 3; i++) {
            var text = 'text' + i;
            var category = 'category' + j;
            var r = random(50, 100);
            data.push({
                text: text,
                category: category,
                r: r,
                rt: 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);

    // 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.rt + 10,
                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.rt + quad.point.rt + 10;

                    if (l < r) {
                        l = (l - r) / l * (1 + alpha);
                        d.x -= x *= l;
                        d.y -= y *= l;
              ...