D3 Examples - parli grids

xxxxxxxxxx
 
<!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>
    