JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="chart"></svg>

JavaScript

var grid = [
  [2,2,1,3,3,4,2,1,4,1,3,2,2,3,4,4,3],
  [2,4,2,1,1,2,3,3,4,4,3,4,1,1,3,2,2],
  [3,1,3,4,4,4,1,1,1,4,3,2,4,1,2,3,2],
  [4,1,2,3,1,3,2,3,4,1,2,1,4,4,1,3,4],
  [3,1,1,1,2,3,2,4,2,3,4,4,4,3,2,2,1],
  [1,3,3,2,4,3,1,4,4,1,2,2,1,2,3,2,3],
  [3,1,4,2,4,2,2,3,3,2,1,4,1,4,4,1,3],
  [4,3,1,2,1,1,1,3,2,4,4,3,2,3,4,1,2],
  [4,4,3,3,4,2,4,2,3,1,2,3,2,1,2,1,1],
  [1,2,2,2,1,3,4,4,1,4,3,3,3,4,2,4,1],
  [4,2,3,4,3,2,1,3,2,3,1,4,3,2,1,4,1],
  [4,2,4,1,2,4,1,4,3,2,2,1,3,3,3,3,2],
  [1,3,2,1,2,4,4,1,3,3,3,4,2,2,1,1,4],
  [1,4,1,4,3,3,3,4,3,2,1,1,2,1,4,2,4],
  [2,4,1,2,2,4,3,2,1,3,4,3,1,4,1,3,3],
  [3,3,2,3,4,1,3,2,2,2,4,2,3,1,1,4,4],
  [2,3,4,4,3,1,4,1,4,2,4,1,1,2,2,3,1]
];

var svg = d3.select('#chart')
    height = 400;

svg.style('height', height)
  .style('width', height);
 
var elementHeight = height/grid.length;
 
var colors = {
  1: 'blue',
  2: 'red',
  3: 'green',
  4: 'yellow'
} 

var rows = svg.selectAll('g')
  .data(grid)
  .enter()
  .append('g')
  .attr('transform', function(d, i) {
    return 'translate(0,' + (i * elementHeight) + ')';  
  });
  
rows.each(function(d, i) {

  var rects = d3.select(this).selectAll('rect');

  rects.data(d)
    .enter()
    .append('rect')
    .attr('y', 0)
    .attr('x', function(d, i) {
      return i * elementHeight;
    })
    .attr('height', elementHeight)
    .attr('width', elementHeight)
    .attr('fill', function(d) {
      return colors[d];
    });
})