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
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
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); | |
// }); | |
// }); | |
}); | |
// 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} | |
]; | |
// 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); |
<!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> |