JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
<svg id="Grid">

</svg>

CSS

* {
  margin: 0;
  padding: 0;
}
#Grid {
  width: 1000px;
  height: 600px;
  border: 1px solid black;
}
.MapPoints {
  width: 20px;
  height: 20px;
  z-index: 0;
  stroke: #000;
}
.NotAllowed {
  fill: rgba(255, 0, 0, 0.40);
}
.Allowed {
  fill: rgba(0, 255, 130, 0.40);
}
.CirclePoint {
  z-index: 1000;
}

JavaScript

var GridArea = $('#Grid');
var MapPoints;
var PointsY = 140;                
for (i = 160 ; i <= 560; i+=20) {
  if (i == 560) {
    PointsY+=20;
    i = 160;
  }
  if (PointsY >= 440){
    break;
  }
  MapPoints += ('<rect class="MapPoints NotAllowed" x="'+i+'" y="'+PointsY+'"/>');
}
GridArea.html(MapPoints + '<circle id="CirclePoint" cx="160" cy="280" r="5" fill="red"/>');
var RectGrid = $("rect");
var XValue, YValue;
var X = [160,180,200,220,240,240,240,240,260,260,260,280,300,300,320,340,360,380,400,400,380,380,380,380,380,400,420,420,420,440,440,460,480,480,500,500,520,540,420,440,460,480,500,500,520,540];
var Y = [280,300,320,320,320,340,360,380,400,320,300,300,300,280,280,280,280,280,300,280,260,240,220,200,180,160,140,320,340,340,360,380,380,400,400,420,440,440,300,300,300,300,300,280,280,260];
for (i = 0; i < RectGrid.length; i++) {
  for (j = 0; j < X.length; j++) {
    if ($("rect:nth-child("+i+")").attr('x') == X[j] && $("rect:nth-child("+i+")").attr('y') == Y[j]) {
      $("rect:nth-child("+i+")").removeClass("NotAllowed");
      $("rect:nth-child("+i+")").addClass("Allowed");
    }
  }
}