Minimal D3js reusable module by hugolpz

This gist is a first try to keep a clean minimal D3js reusable module under my hands. It also include the witty margin conventions, an some frequently seen data usages. Code to cut further.

References

Specifics:

Mike Bostocks, Margin conventions
Mike Bostocks, Towards Reusable Charts
Christophe Viau The D3 Reusable API. (@d3visualization)
Tom Simmons An OHLC Chart Component for D3js

Non specific with specific chapters :

Christophe Viau, Developping a D3js edge
Navarro, Mastering D3js (github repository). Needs gem+jekyll.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="../js/d3.v3.min.js"></script>
<script src="./module.js"></script>
<style>
.bar {
	fill: steelblue;
	stroke: #8888B1;
        fill-opacity: 0.5; 
}
</style>
<body>
<div id="hook"></div>

<script>
//Data
var data = [
    {row: 0, col: 0, value: [{x: 1, y: 19}, {x: 2, y: 20}]},
    {row: 0, col: 1, value: [{x: 1, y: 24}, {x: 2, y: 27}]},
    {row: 1, col: 1, value: [{x: 1, y: 31}, {x: 2, y: 26}]},
    {row: 1, col: 2, value: [{x: 1, y: 29}, {x: 2, y: 19}]}
];
    
// D3js svg settings
var margin = { top: 50, right: 0, bottom: 100, left: 30 },
          width = 600 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom;

// Create SVG container
  var svg = d3.select("#hook").append("svg")
                .attr("width", width)
                .attr("height", height);


// Module call and custom settings
var chart = d3.coolmodules.barChart()
	    .width(800).height(800);
// Runs
svg.selectAll("g").data(data)
    .enter()
        .append('g')
        .attr('transform', function(d, i) {
            return 'translate(' + (i*50) + ',0)';
        })
	.call(chart);

</script>
</body>
</html>

module.js

// Bar chart Module
/////////////////////////////////

// Declare namespace
d3.coolmodules = {};

// Declare component: (this outer function acts as the closure):
d3.coolmodules.barChart = function module() {
    // Defaults values:
    var margin = {top: 10, right: 10, bottom: 20, left: 20},
        width = 500,
        height = 300;

    function exports(_selection) { // create function to export
        _selection.each(function(_data) { // loop
            var test_data = _data.value;
            var rectW = (_data.row+2)*10,
                rectH = (_data.col+1)*10;
            
            // Select all bars and bind data:
            var bars = d3.select(this).selectAll(".bar")
                    	.data(test_data)
                    .enter().append("rect");
	
            //console.log(i+": "+JSON.stringify(_data.value));
            
        // design svg elements
		bars.attr("class","bar")
            .attr({
                'width': rectH,
				'x': function (d){ console.log(" log place1! "); return d.x * 10;},
				'y': function (d){ return d.y * 4;},
				'height': rectH*4});
            console.log(" log place2! ");
		
        });
    }// exports end

    // GETTERS AND SETTERS: 
    exports.width = function(_x) {
        if (!arguments.length) return width;
        width = parseInt(_x);
        return this;
    };
    exports.height = function(_x) {
        if (!arguments.length) return height;
        height = parseInt(_x);
        return this;
    };

    return exports;
};