D3 Examples - Minimal D3js reusable module

Minimal D3js reusable module

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:

Non specific with specific chapters :

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