d3 | draw to square grid

README.md

drawing to the grid using data. Styled gurmukhi script which translates to 'let go of worry; and be worry free'

      C H I N T A
      C H A D
    A C H I N T 
      R E H U

based of my initial sketch/block: d3 | simple square grid

d3_code_grid.js

var square = 30,
    w = 900,
    h = 1900;

// create the svg
var svg = d3.select('#grid').append('svg')
    .attr({
        width: w,
        height: h
    });

// calculate number of rows and columns
var squaresRow = _.round(w / square);
var squaresColumn = _.round(h / square);

// loop over number of columns
_.times(squaresColumn, function(n) {

    // create each set of rows
    var rows = svg.selectAll('rect' + ' .row-' + (n + 1))
        .data(d3.range(squaresRow))
        .enter().append('rect')
        .attr({
            class: function(d, i) {
                return 'square row-' + (n + 1) + ' ' + 'col-' + (i + 1);
            },
            id: function(d, i) {
                return 's-' + (n + 1) + (i + 1);
            },
            width: square,
            height: square,
            x: function(d, i) {
                return i * square;
            },
            y: n * square,
            fill: '#7AC143',
            stroke: 'none' //'#333'
        });

    // test with some feedback
    // var test = rows.on('mouseover', function (d, i) {
    //   d3.select('#grid-ref').text(function () {
    //     return 'r: ' + (n + 1) + ' | ' + 'c: ' + (i + 1);
    //   });
    // });
});

d3_code_grid_data.js

// data for drawing
var data = [
    {r: 2, c: 11},
    {r: 2, c: 12},
    {r: 2, c: 13},
    {r: 5, c: 10},
    {r: 5, c: 12},
    {r: 5, c: 13},
    {r: 5, c: 14},
    {r: 5, c: 15},
    {r: 5, c: 16},
    {r: 5, c: 17},
    {r: 5, c: 18},
    {r: 5, c: 19},
    {r: 5, c: 20},
    {r: 5, c: 21},
    {r: 5, c: 22},
    {r: 2, c: 16},
    {r: 2, c: 17},
    {r: 2, c: 18},
    {r: 3, c: 11},
    {r: 3, c: 13},
    {r: 9, c: 13},
    {r: 10, c: 13},
    {r: 11, c: 13},
    {r: 12, c: 13},
    {r: 13, c: 14},
    {r: 14, c: 15},
    {r: 14, c: 16},
    {r: 13, c: 16},
    {r: 12, c: 16},
    {r: 11, c: 16},
    {r: 10, c: 16},
    {r: 9, c: 16},
    {r: 8, c: 16},
    {r: 7, c: 16},
    {r: 6, c: 16},
    {r: 9, c: 14},
    {r: 9, c: 15},
    {r: 9, c: 18},
    {r: 9, c: 19},
    {r: 9, c: 20},
    {r: 9, c: 21},
    {r: 14, c: 18},
    {r: 14, c: 19},
    {r: 14, c: 20},
    {r: 14, c: 21},
    {r: 14, c: 21},
    {r: 13, c: 21},
    {r: 12, c: 21},
    {r: 11, c: 21},
    {r: 10, c: 21},
    {r: 9, c: 21},
    {r: 8, c: 21},
    {r: 7, c: 21},
    {r: 6, c: 21},
    {r: 5, c: 23},
    {r: 5, c: 24},
    {r: 6, c: 23},
    {r: 7, c: 23},
    {r: 8, c: 23},
    {r: 3, c: 16},
    {r: 3, c: 18},
    {r: 4, c: 11},
    {r: 5, c: 11},
    {r: 6, c: 11},
    {r: 7, c: 11},
    {r: 8, c: 11},
    {r: 9, c: 11},
    {r: 10, c: 11},
    {r: 11, c: 11},
    {r: 12, c: 11},
    {r: 13, c: 11},
    {r: 14, c: 11},
    {r: 17, c: 16},
    {r: 17, c: 17},
    {r: 17, c: 18},
    {r: 18, c: 18},
    {r: 18, c: 16},
    {r: 19, c: 16},
    {r: 20, c: 16},
    {r: 20, c: 17},
    {r: 20, c: 18},
    {r: 20, c: 19},
    {r: 20, c: 20},
    {r: 20, c: 21},
    {r: 20, c: 22},
    {r: 21, c: 16},
    {r: 22, c: 16},
    {r: 23, c: 16},
    {r: 24, c: 16},
    {r: 25, c: 16},
    {r: 26, c: 16},
    {r: 27, c: 16},
    {r: 28, c: 16},
    {r: 29, c: 16},
    {r: 20, c: 15},
    {r: 20, c: 14},
    {r: 20, c: 13},
    {r: 20, c: 12},
    {r: 20, c: 11},
    {r: 20, c: 10},
    {r: 21, c: 14},
    {r: 22, c: 14},
    {r: 23, c: 14},
    {r: 24, c: 14},
    {r: 26, c: 14},
    {r: 27, c: 14},
    {r: 28, c: 14},
    {r: 29, c: 14},
    {r: 24, c: 13},
    {r: 24, c: 12},
    {r: 24, c: 11},
    {r: 25, c: 12},
    {r: 26, c: 12},
    {r: 26, c: 13},
    {r: 29, c: 13},
    {r: 29, c: 12},
    {r: 29, c: 11},
    {r: 28, c: 11},
    {r: 27, c: 11},
    {r: 24, c: 18},
    {r: 24, c: 19},
    {r: 24, c: 20},
    {r: 24, c: 21},
    {r: 21, c: 21},
    {r: 22, c: 21},
    {r: 23, c: 21},
    {r: 25, c: 21},
    {r: 26, c: 21},
    {r: 27, c: 21},
    {r: 28, c: 21},
    {r: 29, c: 21},
    {r: 29, c: 18},
    {r: 29, c: 19},
    {r: 29, c: 20},
    {r: 27, c: 18},
    {r: 27, c: 19},
    {r: 32, c: 16},
    {r: 33, c: 16},
    {r: 32, c: 17},
    {r: 32, c: 18},
    {r: 33, c: 18},
    {r: 33, c: 13},
    {r: 32, c: 13},
    {r: 32, c: 12},
    {r: 32, c: 11},
    {r: 33, c: 11},
    {r: 34, c: 11},
    {r: 35, c: 11},
    {r: 35, c: 10},
    {r: 35, c: 9},
    {r: 35, c: 12},
    {r: 36, c: 11},
    {r: 36, c: 09},
    {r: 37, c: 11},
    {r: 38, c: 11},
    {r: 39, c: 11},
    {r: 40, c: 11},
    {r: 41, c: 11},
    {r: 42, c: 11},
    {r: 43, c: 11},
    {r: 44, c: 11},
    {r: 37, c: 9},
    {r: 38, c: 9},
    {r: 39, c: 9},
    {r: 40, c: 9},
    {r: 41, c: 9},
    {r: 42, c: 9},
    {r: 43, c: 9},
    {r: 44, c: 9},
    {r: 35, c: 4},
    {r: 35, c: 5},
    {r: 36, c: 5},
    {r: 37, c: 5},
    {r: 38, c: 5},
    {r: 39, c: 5},
    {r: 40, c: 5},
    {r: 35, c: 4},
    {r: 36, c: 7},
    {r: 37, c: 7},
    {r: 38, c: 7},
    {r: 39, c: 7},
    {r: 40, c: 7},
    {r: 41, c: 7},
    {r: 42, c: 7},
    {r: 35, c: 13},
    {r: 35, c: 14},
    {r: 35, c: 15},
    {r: 35, c: 16},
    {r: 35, c: 17},
    {r: 35, c: 18},
    {r: 35, c: 19},
    {r: 35, c: 20},
    {r: 35, c: 21},
    {r: 35, c: 22},
    {r: 36, c: 21},
    {r: 37, c: 21},
    {r: 38, c: 21},
    {r: 39, c: 21},
    {r: 40, c: 21},
    {r: 41, c: 21},
    {r: 42, c: 21},
    {r: 43, c: 21},
    {r: 44, c: 21},
    {r: 39, c: 20},
    {r: 39, c: 19},
    {r: 39, c: 18},
    {r: 44, c: 20},
    {r: 44, c: 19},
    {r: 44, c: 18},
    {r: 36, c: 16},
    {r: 37, c: 16},
    {r: 38, c: 16},
    {r: 39, c: 16},
    {r: 40, c: 16},
    {r: 41, c: 16},
    {r: 42, c: 16},
    {r: 43, c: 16},
    {r: 44, c: 16},
    {r: 44, c: 15},
    {r: 39, c: 15},
    {r: 39, c: 14},
    {r: 39, c: 13},
    {r: 43, c: 14},
    {r: 41, c: 13},
    {r: 42, c: 13},
    {r: 40, c: 13},
    {r: 46, c: 18},
    {r: 46, c: 19},
    {r: 46, c: 20},
    {r: 46, c: 21},
    {r: 50, c: 21},
    {r: 50, c: 20},
    {r: 50, c: 19},
    {r: 50, c: 18},
    {r: 50, c: 17},
    {r: 50, c: 16},
    {r: 50, c: 15},
    {r: 50, c: 14},
    {r: 50, c: 13},
    {r: 50, c: 12},
    {r: 50, c: 22},
    {r: 51, c: 21},
    {r: 50, c: 21},
    {r: 52, c: 21},
    {r: 53, c: 21},
    {r: 54, c: 21},
    {r: 55, c: 21},
    {r: 56, c: 21},
    {r: 57, c: 21},
    {r: 58, c: 21},
    {r: 59, c: 21},
    {r: 59, c: 20},
    {r: 59, c: 19},
    {r: 59, c: 18},
    {r: 58, c: 18},
    {r: 57, c: 18},
    {r: 56, c: 18},
    {r: 55, c: 18},
    {r: 54, c: 18},
    {r: 54, c: 19},
    {r: 61, c: 21},
    {r: 61, c: 20},
    {r: 61, c: 19},
    {r: 61, c: 18},
    {r: 51, c: 16},
    {r: 52, c: 16},
    {r: 53, c: 16},
    {r: 54, c: 16},
    {r: 55, c: 16},
    {r: 56, c: 16},
    {r: 57, c: 16},
    {r: 58, c: 16},
    {r: 59, c: 16},
    {r: 54, c: 15},
    {r: 54, c: 14},
    {r: 54, c: 13},
    {r: 55, c: 13},
    {r: 56, c: 13},
    {r: 57, c: 13},
    {r: 59, c: 15},
    {r: 58, c: 14}
];

d3_code_grid_draw.js

// colour according to data
_.forEach(data, function(n, key) {
    svg.select('.row-' + n.r + '.col-' + n.c)
        .attr('fill', '#130C0E');
});

// custom accents (for squares outside the grid)
function accents(row, col) {
    svg.append('rect')
        .attr({
            class: 'accent',
            width: square,
            height: square,
            x: row,
            y: col,
            fill: '#130C0E',
            stroke: 'none'
        });
}

accents(345, 230);
accents(345, 780);
accents(345, 810);
accents(495, 810);
accents(555, 810);
accents(150, 1030);
accents(210, 1065);
accents(105, 1180);
accents(165, 1245);
accents(345, 1125);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>d3 | simple square grid to draw on</title> 
  <meta name="author" content="Sundar Singh | eesur.com">
  
  <script src="http://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>

<!-- drawing to the grid using data. Styled gurmukhi script which translates to 'let go of worry; and be worry free'

```
      C H I N T A
      C H A D
    A C H I N T 
      R E H U
```

based of my initial sketch/block: [d3 | simple square grid](http://bl.ocks.org/eesur/3fc83ddc4c060e6bd43e)

 -->
  <style type="text/css">
    body{
      background-color: #7AC143;
      width: 960px;
      margin: 20px auto;
    }
    /*#grid-ref {
        position: fixed;
        top: 20px;
        left: 20px;
    }*/
    footer {
      position: relative;
      height: 80px;
      width: 100%;
    }
    footer h4 {
      position: absolute;
      right: 20px;
      bottom: 20px;
      font-family:  'Andale Mono', 'Lucida Console', monospace;
      font-weight: normal;
      letter-spacing: 2px;
      font-size: 13px;
      text-transform: uppercase;
      color: #EE3124;
    }
  </style>
</head>

<!-- <h4 id="grid-ref">roll-over grid</h4> -->

<section id='grid'></section>

<footer><h4>Guru Amar Das Ji | ang 597</h4></footer>

<!-- the grid base -->
<script src="d3_code_grid.js" charset="utf-8"></script>
<!-- the data -->
<script src="d3_code_grid_data.js" charset="utf-8"></script>
<!-- draw -->
<script src="d3_code_grid_draw.js" charset="utf-8"></script>

</body>
</html>

thumbnail.png