Data Visualisation Dojo: Part 2

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script>
  <style>
   .visualisation-container {
     width: 100%;
     height: 470px;
     background-color: whitesmoke;
     border: 1px solid black;
     position: relative;
     margin-top: 10px;
    }
    
    .some-square {
      position: absolute;
      background-color: pink;
      height: 40px;
      width: 40px;
      text-align: center;
      border: 1px solid blue
    }
  </style>
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

</head>

<body>
  <br><br>
  <div class="container">
    <h5> <u>Data Visualisation With D3 </u></h5>

<h3> Part 2: Draw squares from data </h3>
    <p> Create a grid of squares based on input data 	</p>
    <div id="my-container" class="visualisation-container"></div>
    <br/>
  </div>
  <script>
    
    $(document).ready(() => {
      //This is where we append 
      
        var inputData = [];

for(var x = 0; x < 100; x++){
          inputData.push({name: x})
        }
        d3.select("#my-container")
          .selectAll("div")
          .data(inputData)
          .enter()
            .append("div")
            .attr("class", "some-square")
            .style("left", (d, i) => { return (i % 10) * 45 + "px"})
            .style("top", (d, i) => { return Math.floor(i / 10) * 45 + "px"})
            .text((d) => { return `${d.name}`; });
      
    });
   
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js