Old school D3 from simpler times

All examples By author By category About

eesur

Full window Github gist

d3 | draw to 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

<!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="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>

<!-- 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](https://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>

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

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

<script src="d3_code_grid.js" charset="utf-8"></script>

<script src="d3_code_grid_data.js" charset="utf-8"></script>

<script src="d3_code_grid_draw.js" charset="utf-8"></script>

</body>
</html>

xxxxxxxxxx
 
<!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="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>
​
<!-- 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](https://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>
​
    

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js