hugolpz/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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;
};

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>
	// 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;
	};