Simple Reusable Bar Chart (for a London D3 Meetup)

Simple Bar Chart to Support Talk at London D3 Meetup

Simple version of bar chart code found in the Developing a D3.js Edge book. Written as an example to be referenced in the London D3 Meetup

<!doctype html>
<html lang="en">
<head lang=en>
<meta charset="utf-8">
<title>D3 Talk: Sample Simple Bar Chart Example</title>
<style>

svg {
  background: #ddd;
  font: 10px sans-serif;
}

.axis path {
		fill: none;
		stroke: none;
	}

.bar {
		fill: steelblue;
		stroke: white;
	}

#bar1, #bar2 {float: left;margin-left:10px;}
</style>
</head>

<body>

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

// Declare namespace
d3.cloudshapes = {};

// Declare component: (this outer function acts as the closure):
d3.cloudshapes.barChart = function module() {
    var margin = {top: 20, right: 20, bottom: 40, left: 40},
        width = 500,
        height = 500,
        gap = 0,
        ease = "bounce";
    var svg;

// Define the 'inner' function: which, through the surreal nature of JavaScript scoping, can access
    // the above variables. 
    function exports(_selection) {
        _selection.each(function(_data) {
            var chartW = width - margin.left - margin.right,
                chartH = height - margin.top - margin.bottom;

// Define x and y scale variables.
            var x1 = d3.scale.ordinal()
                    .domain(_data.map(function(d, i) { return i; }))
                    .rangeRoundBands([0, chartW], 0.1);

var y1 = d3.scale.linear()
                    .domain([0, d3.max(_data, function(d, i) { return d; })])
                    .range([chartH, 0]);

// If no SVG exists, create one - and add key groups:
            if (!svg) {
                svg = d3.select(this)
                    .append("svg")
                    .classed("chart", true);
                var container = svg.append("g").classed("container-group", true);
                container.append("g").classed("chart-group", true);
            }

// Transition the width and height of the main SVG and the key 'g' group: 
            svg.transition().attr({width: width, height: height});
            svg.select(".container-group")
                .attr({transform: "translate(" + margin.left + "," + margin.top + ")"});

// Define gap between bars: 
            var gapSize = x1.rangeBand() / 100 * gap;

// Define width of each bar: 
            var barW = x1.rangeBand() - gapSize;

// Select all bars and bind data:  
            var bars = svg.select(".chart-group")
                    .selectAll(".bar")
                    .data(_data);

// ENTER, UPDATE and EXIT CODE: 
	    // D3 ENTER code for bars!
            bars.enter().append("rect")
                .classed("bar", true)
                .attr({x: chartW,
                    width: barW,
                    y: function(d, i) { return y1(d); },
                    height: function(d, i) { return chartH - y1(d); }
                })

// D3 UPDATE code for bars 
            bars.transition()
                .ease(ease)
                .attr({
                    width: barW,
                    x: function(d, i) { return x1(i) + gapSize / 2; },
                    y: function(d, i) { return y1(d); },
                    height: function(d, i) { return chartH - y1(d); }
                });

// D3 EXIT code for bars
            bars.exit().transition().style({opacity: 0}).remove();
        });
    }

// 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;
    };
    exports.gap = function(_x) {
        if (!arguments.length) return gap;
        gap = _x;
        return this;
    };
    exports.ease = function(_x) {
        if (!arguments.length) return ease;
        ease = _x;
        return this;
    };

return exports;
};

// Usage
/////////////////////////////////

// Create two instances of our chart components:
var chart1 = d3.cloudshapes.barChart();
var chart2 = d3.cloudshapes.barChart();

// Function used to create a nice random data-set:
function randomDataset() {
    return d3.range(~~(Math.random() * 50)).map(function(d, i) {
        return ~~(Math.random() * 1000);
    });
}

// Select the div's, and call, i.e. actually initialise each chart:
var data1 = randomDataset();
d3.select("#bar1")
	.datum(data1)
	.call(chart1);

var data2 = randomDataset();
d3.select("#bar2")
	.datum(data2)
	.call(chart2);

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

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js