JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//d3js.org/d3.v3.min.js"></script>
JavaScript
var size = 10;
dataset = [];
for(var y = 0; y<size; y++){
var tempData = [size];
for(var x = 0; x<size; x++){
tempData[x] = 5;
};
dataset.push(tempData);
};
d3.select("body").append("svg")
.attr("width", size * 20)
.attr("height", size * 20)
.selectAll("rect")
.data(dataset)
.enter()
.append("g")
.selectAll("rect")
.data(function (d,i) {return d;})
.enter()
.append("rect")
.attr("x", function(d,i){
return i*20;
})
.attr("y", function(d, i, j){
return j*20;
})
.attr("height", 15)
.attr("width", 15)
.attr("fill", "green");