D3 Examples - Vibration1

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Vibrations</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <style type="text/css">
            html {
                background-color: #16bf16;
            }
            body {
                width: 1200px;
                margin: auto;
                background-color: #16bf16;
            }
            svg {
                //background-color: red;
            }
            circle {
                fill:#cc238b;
            }
        </style>
    </head>
    <body>
​
        <svg></svg>
        <script type="text/javascript">     
            var W = 1400;
            var nbW = 111, nbH = 50;
            
            var svg = d3.select("svg")
                        .attr("width",W);
​
            var dataset = [];
            var spacing = Math.floor(W / (nbW));
            svg.attr("height", spacing * nbH).attr("width", spacing * nbW);
            d3.select("body").style("width", (spacing * nbW).toString() + "px");
            
            for (i = 0; i < (nbH * nbW); i++){
                
                var dia = 0;
                var dialim = 0;
                var diabase = spacing - 7;
                var modI = i % nbW;
                var rowNum = Math.floor(i / nbW);
                
                //Calcule le diamètre maximal pour le calcul intra-ligne
                if ( (Math.floor(rowNum / 8) % 2) == 0){
                    dialim = ((rowNum % 8) / 8) * diabase;
                }
                else {
                    dialim = ((8 - (rowNum % 8)) / 8) * diabase;
                }
                
                // Calcule le diamètre pour les lignes
                if ( (Math.floor(modI / 8) % 2)== 0){
                    dia = 5 + (((modI) % 8) / 8) * dialim;
                }
                else {
                    dia = 5 + ((8 - ((modI) % 8)) / 8) * dialim;
                }
                
                dataset[i] = {"x": ( modI * spacing) + (spacing/2) ,
                              "y": (rowNum * spacing) + (spacing/2),
                              "circles":[dia,
                                         spacing-8,
                                         spacing-18]};
            }
​
            var groups = svg.selectAll("g")
                            .data(dataset)
                            .enter()
                            .append("g");
            
            groups.append("circle")
                .attr("cx", function(d){return d.x})
                .attr("cy", function(d){return d.y})
                .attr("r", function(d){
                    return d.circles[0]/2;    
                })
                .attr("fill", "black");
            
            /*groups.append("circle")
                .attr("cx", function(d){return d.x})
                .attr("cy", function(d){return d.y})
                .attr("r", function(d){
                    return d.circles[1]/2;    
                })
                .attr("fill", "white");
            
            groups.append("circle")
                .attr("cx", function(d){return d.x})
                .attr("cy", function(d){return d.y})
                .attr("r", function(d){
                    return d.circles[2]/2;    
                })
                .attr("fill", "black");*/
            
        </script>
​
    </body>
</html>
    