badge (wip)

<!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; }
  </style>
</head>

<body>
  <script>
    var width = window.innerWidth || 960,
    		height = window.innerHeight || 500,
        radius = 12,
        diameter = radius * 2,
        margin = 4,
        points = d3.range((radius + margin),innerWidth,(diameter+margin))
    							 .map(function(x) {
          				   return { x: x,
                              y: -200 + (Math.random() * (height + 200)),
                              v: 0 };
        	  			 });
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
    
    var pointSel = svg.selectAll('circle')
    	.data(points).enter()
    	.append('circle')
    		.attr('r', radius)
    		.attr('cx', function(pt) { return pt.x; })
    		.attr('cy', function(pt) { return pt.y; })
    		.attr('fill', 'steelblue')
    		.attr('fill-opacity', 1);

</script>
</body>

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