Old school D3 from simpler times

All examples By author By category About

Mavromatika

Full window Github gist

Vibration1

<!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>

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