Old school D3 from simpler times

All examples By author By category About

Mavromatika

Full window Github gist

Melting clouds - Mavromatika

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Melting clouds - Mavromatika</title>
</head>

<style>
body{
    background-color: white;   
}
circle {
    stroke-width: 0;   
}
text{
    text-anchor : end;
    font-family : helvetica;
    font-size : 10px;
}
</style>
<body>
    <div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript">
    var w = 1200, h = 1200;
    
    var svg = d3.select("#container")
                .append("svg")
                .attr("viewBox", "0 0 " + w + " " + h );
    
    var donnees = [];
    
    var population = 11; 
    var nbCol = 17, nbLig = 13;
    
    var rScale = d3.scale.linear()
                    .domain([0, population])
                    .range([5, 0.75 * w/(nbCol)]);
    
    var cScale = d3.scale.linear()
                    .domain([0, population])
                    .range(["black","white"]);
    
    for (var i = population; i >= 0; i--){
        donnees.push(i);
    }
    
    var tableau = [];
    
    for (i = 0; i < (nbCol + 1); i++){
        for (j = 0; j < (nbLig + 1); j++){
            tableau.push({"x":w/nbCol * (i + 0.5),"y": w/nbCol * (j - 0.5) + (w/nbCol * 0.5 * (i%2))});
        }
    }
    
    for (i = 0; i < tableau.length; i++){
        svg.selectAll(".wave" + i.toString())
            .data(donnees)
            .enter()
            .append("g")
            .append("circle")
            .attr("cx",tableau[i].x)
            .attr("cy",tableau[i].y)
            .attr("r",function(d){return rScale(d);})
            .attr("fill",function(d){return cScale(d);});
    }
    
    svg.selectAll("circle").on("mouseover",function(){
        d3.select(this).transition().duration(900).attr("cy",h + 200);
        console.log("yes");
    });
    svg.append("text").text("Created by Mavromatika, 2015.")
        .attr("x",w)
        .attr("y",h-10);
</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js