D3 Examples - raindrops

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
    <title>Arbitrary Visualization</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
  
    <style type="text/css">
        html, body {
            height: 100%;
        }
​
        body {
            margin: 0;
        }
​
        svg {
            width: 100%;
            height: 100%;
        }
​
        .bubble {
            stroke: grey;
            stroke-width: 1;
        }
    </style>
</head>
​
<body>
​
<svg>
    <defs>
        <radialGradient id="gradient" cx="50%" cy="50%" r="100%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:blue;stop-opacity:0"/>
            <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
        </radialGradient>
    </defs>
</svg>
​
<script type="text/javascript">
    var w = 1280, h = 800,
                r = 4.5, nodes = [], links = [];
​
    var force = d3.forceSimulation()
                    .velocityDecay(0.8)
                    .alphaDecay(0)
                    .force("charge", d3.forceManyBody().strength(-50).distanceMax(h / 4))
                    .force("collision", d3.forceCollide(r + 0.5).strength(1))
                    .force("position", d3.forceY(h / 2));
​
    var duration = 60000;
​
    var svg = d3.select("svg")
                .attr("width", w)
                .attr("height", h);
​
​
    var line = d3.line() // <-A
            .curve(d3.curveBasisClosed)
            .x(function(d){return d.x;})
            .y(function(d){return d.y;});
​
    force.on("tick", function () {
        svg.selectAll("path")
            .attr("d", line);
    });
​
    function offset() {
        return Math.random() * 100;
    }
​
    function createNodes(point) {
        var numberOfNodes = Math.round(Math.random() * 10);
        var newNodes = [];
​
        for (var i = 0; i < numberOfNodes; ++i) {
            newNodes.push({
                x: point[0] + offset(),
                y: point[1] + offset()
            });
        }
​
        newNodes.forEach(function(e){nodes.push(e)});
​
        return newNodes;
    }
​
    function createLinks(nodes) {
        var newLinks = [];
        for (var i = 0; i < nodes.length; ++i) {
            if(i == nodes.length - 1)
                newLinks.push(
                    {source: nodes[i], target: nodes[0]}
                );
            else
                newLinks.push(
                    {source: nodes[i], target: nodes[i + 1]}
                );
        }
​
        newLinks.forEach(function(e){links.push(e)});
​
        return newLinks;
    }
​
    svg.on("click", function () {
        var point = d3.mouse(this),
                newNodes = createNodes(point),
                newLinks = createLinks(newNodes);
​
        console.log(point);
​
        svg.append("path")
                .data([newNodes])
            .attr("class", "bubble")
            .attr("fill", "url(#gradient)") // <-B
            .attr("d", function(d){return line(d);}) // <-C
                .transition().delay(duration)
            .attr("fill-opacity", 0)
            .attr("stroke-opacity", 0)
            .on("end", function(){d3.select(this).remove();});
​
        force.nodes(nodes);
        force.force("link", d3.forceLink(links).strength(1).distance(20));
        force.restart();
    });
</script>
​
</body>
​
</html>
    