README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    Reusable grids that can have some example hover events applied using dispatch 

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

  
## d3_code_grid_reusable.js
var squareGrid = function setupGrid(_selection) {

    var instance = {};

    var square = 20,
        width = 900,
        height = 300
        fill = '#130C0E',
        stroke = '#FDBB30';

    var dispatch = d3.dispatch('_hover');

    instance.render = function() {
        // calculate number of rows and columns
        var squaresRow = _.round(width / square);
        var squaresColumn = _.round(height / square);

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

        // 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: fill,
                        stroke: stroke
                    })
                    .on('mouseover', dispatch._hover);;

        });

        return instance;
    };

    instance.square = function(value) {
        if (!arguments.length) return square;
        square = value;
        return this;
    };
    instance.width = function(value) {
        if (!arguments.length) return width;
        width = value;
        return this;
    };
    instance.height = function(value) {
        if (!arguments.length) return height;
        height = value;
        return this;
    };
    instance.fill = function(value) {
        if (!arguments.length) return fill;
        fill = value;
        return this;
    };
    instance.stroke = function(value) {
        if (!arguments.length) return stroke;
        stroke = value;
        return this;
    };

    d3.rebind(instance, dispatch, 'on');
    return instance;

};


## index.html
<!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="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>

  <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>

## thumbnail.png

      
          Raw
        
        
              thumbnail.png