JSFiddle - React, Tailwind, and code Playground

by Fareez Ahmed

CSS

div {float: left; padding: 10px; font: bold 15px/30px sans-serif;}
.break {clear: both;}

JavaScript

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

var side = Math.sqrt(grid.length);
var rotate = function(d,i){
       return [Math.abs(i % side - side+1), Math.floor(i/side)]
    }

d3.select("body")
  .selectAll("div")
  .data(grid.map(rotate))
  .enter()
  .append("div")
  .classed("break", function(d, i){return (i % side == 0)})
  .text(function(d,i){return d.toString();})