parli grids

<!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; }
    .bg{fill:#fff1e0}
    .grid{fill:#dedede}
    .highlight{fill:#bb6d82}
  </style>
</head>

<body>
  <script>
   
    //canvas size
    const w = 960;
    const h = 500;
    const margin = {left:10,right:10,top:10,bottom:10};
    
    const numCols=40;
   
    const svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h);
    
    svg.append("rect")
    	.attr("width", w)
      .attr("height", h)
    	.attr("class","bg")
    
    //load the election results
    d3.csv("2015results.csv",function(data){
      	
    const countries = d3.nest()
    		.key(function(d) { return d.country; })
    		.entries(data);
      
    const plots = svg.append("g")
     	.attr("id","countries")
     	.selectAll("g")
     	.data(countries)
     	.enter()
     	.append("g")
    	.attr("transform",function(d,i){return "translate(10,"+(10+(i*150))+")"})
    //this is a temporary transform - need to offset properly
    
    plots.selectAll("circle")
    	.data(function(d){return d.values})
    	.enter()
    	.append("circle")
    	.attr("id",function(d,i){return d.name+":"+d.id+":"+d.party+":"+d.country})
    	.attr("cx",function(d,i){
      		const colIndex = i % numCols;
          return colIndex*10
    	})
    	.attr("cy",function(d,i){
      		var rowIndex=Math.floor(i/numCols)
          return rowIndex*10;
    	})
    	.attr("r",4)
    
    
    
      
      
    })
    
  </script>
</body>

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