Old school D3 from simpler times

All examples By author By category About

pstuffa

Full window Github gist

Textures

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    
		.innerCircle {
    	fill: #000  
    }
    
    .outerCircle {
      stroke: #000;
      fill: none;
    }
    
  </style>
</head>

<body align="center">
  <script>
		var margin = {top: 30, bottom: 30, right: 30, left: 30},
    		width = window.innerWidth - margin.left - margin.right,
        height = window.innerHeight - margin.left - margin.right;
    
    var svg = d3.select("body").append("svg")
    		.attr("width", width + margin.left + margin.right)
    		.attr("height", height + margin.top + margin.bottom)
    	.append("g")
    		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var size = 12
    	, rowN = 20
      , columN = 12

var strokeScale = d3.scaleLinear()
    		.domain([-1,1])
    		.range([size, 0]);
    
    var radiusScale = d3.scaleLinear()
    		.domain([-1, 1])
    		.range([0, size])
    
    var xUnit = width/(rowN),
        yUnit = height/(columN);
    
    var circleGroups = svg.selectAll(".circleGroups")
    		.data(d3.range(columN).map(Object))
    	.enter().append("g")
    		.attr("class", "circleGroups")
    		.attr("transform", function(d, i) { return "translate(0," + (i*yUnit) + ")"});
 
    var outerCircles = circleGroups.selectAll(".outerCircle")
    	.data(d3.range(rowN).map(Object))
    .enter().append("circle")
    	.attr("class", "outerCircle")
    	.attr("cx", function(d, i) { return i*xUnit })
    	.attr("r", size)
    	.style("stroke-width", function(d, i) { return strokeScale(Math.tan(d)) });
    
    var innerCircles = circleGroups.selectAll(".innerCircle")
    	.data(d3.range(rowN).map(Object))
    .enter().append("circle")
    	.attr("class", "innerCircle")
    	.attr("cx", function(d, i) { return i*xUnit })
    	.attr("r", function(d, i) { return radiusScale(Math.tan(d)) });
    
   var counter = 1;
   d3.interval(function() {
     
     d3.selectAll(".outerCircle")
      .style("stroke-width", function(d, i) { return strokeScale(Math.sin((d+counter)/10)) });
     
     d3.selectAll(".innerCircle").attr("r", function(d, i) { return radiusScale(Math.sin((d+counter)/10)) });
     counter+=1;
     
   }, 100)
    
  </script>
</body>

https://d3js.org/d3.v4.min.js