300 Node Orbit

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; 
    	background:black;
    }
  </style>
</head>

<body>
  <script>
    
   	const t = d3.timer(tick, 1000);
	
    
    var stopped = true;
		
    var width = 800;
  	var height = 800;
    var radius = 250;
    
    var canvas = d3.select("body").append("canvas")
      .attr("width", width)
      .attr("height", height)
    
	var context = canvas.node().getContext("2d")
	
		
    var measures = d3.range(300).map(function(d,i){return {"id":"measure" + i,"type":"measure", "measure_index":i}})
    
    var reports = d3.range(8).map(function(d,i){return {"id":"report" + i,"type":"report"}})
   	
    var combined = d3.merge([measures,reports])
     
    combined.forEach(function(d){
      
    if(d.type=="measure"){
      d.speed = 1 + Math.random();
    }
    else{
      d.speed = Math.random()/2 + .5;
    }
    d.angle = Math.random()*Math.PI*2;
    d.radius = radius + 40*Math.random()
    d.curAngle = d.angle;
    
      if(d.type == "measure"){d.circleRadius = 1}
      else{d.circleRadius = 2 + Math.random()*8}
      
    })
    
    
    /*
    var nodes = svg.selectAll("circle").data(combined)
    	
    nodes.enter()
      .append("circle")
      .attr("cx", function(d){
      	if(d.type=="measure"){
          d.speed = 1 + Math.random();
        }
      	else{
					d.speed = Math.random()/2 + .5;
        }
      	d.angle = Math.random()*Math.PI*2;
      	d.radius = radius + 30*Math.random()
        return Math.cos(d.angle)*d.radius + width/2;
    })
      .attr("cy", function(d){
        return Math.sin(d.angle)*d.radius + width/2;
    })
      .attr("r", function(d){
      	if(d.type == "measure"){return 2}
      else{return 8 + Math.random()*5}
    })
    .style("fill","white")
      .attr("font-family", "monospace")
    */
    
    function tick(elapsed) {
      	//console.log(elapsed)
      
       	redraw(elapsed)
      	/*
      	d3.selectAll("circle").attr("cx", function(d){
          d.curAngle = d.angle + elapsed/30000*AnglePer1000*d.speed;
          return Math.cos(d.curAngle)*d.radius + width/2;
      })
        .attr("cy", function(d){
          return Math.sin(d.curAngle)*d.radius + width/2;
      })
      */
      
    }
     
function redraw(elapsed) { 
  
  var AnglePer1000 = Math.PI*2;
  
  // Update canvas
  context.clearRect(0, 0, width, height);  
  
  combined.forEach(function(d,i){

d.curAngle = d.angle + elapsed/30000*AnglePer1000*d.speed;
  	context.fillStyle = "rgb(200,200,200)";
    
  	context.strokeStyle = "white";
    context.beginPath();
    context.arc(Math.cos(d.curAngle)*d.radius + width/2,Math.sin(d.curAngle)*d.radius + width/2, d.circleRadius, 0, 2 * Math.PI);
    context.fill();
     
  });
}
  </script>
</body>

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