cubes

<!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>
    d3.json("https://d3sl9l9bcxfb5q.cloudfront.net/json/scs-building-count-dot", 	function(error, rawData) {
     var rawData = rawData;
     var canvas=d3.select("body").append("canvas")
     var pointWidth = 10;
		 var pointMargin = 3;
     var width = 600;
     var height = 600;
    
    // generate the array of points with a unique ID and color  
    var firstdata = rawData.filter(function(d) {
         return d.neworno == "old"
    })
  
    var seconddata = rawData.filter(function(d) {
         return d.neworno == "new"
    })
        
    var points = firstdata.map(function(d, index) {
                      return {
                          // id: d.country + d.id,
                          realid: d.realid,
                        	id: index,
                          islandGroup: d.group,
                          country: d.country,
                          neworno: d.neworno,
                          existence: d.exist,
                          fill: "#ffffff"
                      }
                  })
    
//     console.log(points)
    
    function gridLayout(points, pointWidth, gridWidth) {
      const pointHeight = pointWidth;
      const pointsPerRow = Math.floor(gridWidth / pointWidth);
      const numRows = points.length / pointsPerRow;
      
      points.forEach(function(point, i){
        point.x = pointWidth * (i % pointsPerRow);
        point.y = pointHeight * Math.floor(i / pointsPerRow);
      })
      
      return points;
    }
      
      function draw() {
        const ctx = canvas.node().getContext('2d');
        ctx.save();

// erase what is on the canvas currently
        ctx.clearRect(0, 0, width, height);

// draw each point as a rectangle
        for (let i = 0; i < points.length; ++i) {
          const point = points[i];
          ctx.fillStyle = point.color;
          ctx.fillRect(point.x, point.y, pointWidth, pointWidth);
        }

ctx.restore();
      }
      
      gridLayout(points, pointWidth + pointMargin, width);
			draw();
      
//       gridLayout(points,pointWidth, width)

});

</script>
</body>

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