eesur/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
	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;

	};
	<!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>