Covering a grid with circles

_.md

[ Launch: Covering a grid with circles ] 8071295 by Radcliffe

circle-covers-6.csv

circle-covers.csv

config.json

{"description":"Covering a grid with circles","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"circle-covers.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"circle-covers-6.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/zKbn8Ey.gif"}

inlet.js

var mesh = 20;
var offset = 90;
var tileHeight = 200;
var tileWidth = 200;
var columns = 9;
var gridSize = 6;
var numCircles = 6;

var scale = function(x) {return x*mesh + offset;};
var svg = d3.select("svg");

// var data = tributary["circle-covers"];
var data = tributary["circle-covers-6"];

var bind_data = function(data) {
	var circle;
	for (var i=0; i < data.length; i++) {
		var g = svg.append("g")
              .attr("transform","translate(" + ((i % columns)* tileWidth) + "," + (Math.floor(i/columns) * tileHeight) + ")");
        
         var range = d3.range(numCircles);
      
        g.selectAll("circle.solution").data(range).enter().append("circle").attr({
          cx: function(d){ return scale(data[i]["x"+(d+1)]);},
          cy: function(d){ return scale(data[i]["y"+(d+1)]);},
          r: function(d){ return mesh * data[i]["r"+(d+1)];},
          fill: "none",
          stroke: "teal"
        }).classed("solution", true);
      
      range = d3.range(gridSize*gridSize);
      
      g.selectAll("circle.dot").data(range).enter().append("circle").attr({
        cx: function(d) { return scale(d % gridSize);},
        cy: function(d) { return scale(Math.floor(d/gridSize));},
        r: 3,
        fill: "red"
      }).classed("dot", true);
	}
};


bind_data(data);