D3 Examples - d3 | squared grid reusable

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>d3 | simple square grid reusable</title> 
  <meta name="author" content="Sundar Singh | eesur.com">
  
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js" charset="utf-8"></script>
​
  <style type="text/css">
    body{
      background-color:  #130C0E;
      width: 960px;
      margin: 20px auto;
    }
    section {
      margin-bottom: 10px; 
    }
  </style>
​
</head>
​
<section id='grid'></section>
<section id='grid-2'></section>
<section id='grid-3'></section>
​
<!-- // load the reusable grid -->
<script src="d3_code_grid_reusable.js" charset="utf-8"></script>
​
<script>
  // render grid-1
  var gridExample = squareGrid("#grid")
      .width(300)
      .height(300)
      .square(30)
      .stroke('#EE3124')
      .on('_hover', function (d, i) {
          d3.select(this).attr('fill', '#FDBB30');
      });
​
  gridExample.render();
​
  // render grid-2
  var gridExample2 = squareGrid("#grid-2")
      .width(900)
      .height(300)
      .square(60)
      .stroke('#130C0E')
      .fill('#7AC143');
​
  gridExample2.render();
​
​
  // render grid-3
  var gridExample3 = squareGrid("#grid-3")
      .width(900)
      .height(300)
      .square(10)
      .stroke('#00B0DD')
      .render();
​
</script>
​
</body>
</html>
​
    