reusable charts D3

by Igor Cuckovic

HTML

<div id="svgDiv0"></div>
<div id="svgDiv1"></div>

JavaScript

var data0 = [10, 20, 40, 50],
    data1 = [50, 56, 44, 89];

function chart() {
    var width = 150, // default width
        height = 150; // default height

    var my = function (selection) {
        selection.each(function (data) {
            console.log(data);

            var svg = d3.select(this)
                .append("svg").attr({
                width: width,
                height: height
            });

            svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect").attr({
                width: 10,
                height: function (d, i) {
                    return d;
                },
                fill: "steelblue",
                x: function (d, i) {
                    return i * 15;
                },
                y: 0
            });
        });
    };

    my.width = function (value) {
        if (!arguments.length) return width;
        width = value;
        return my;
    };

    my.height = function (value) {
        if (!arguments.length) return height;
        height = value;
        return my;
    };

    return my;
}

var myChart = chart().width(300).height(300);
var myChart1 = chart().width(300).height(300);

myChart(d3.select("#svgDiv0").datum(data0));
/* === */
d3.select("#svgDiv1").datum(data1).call(myChart1);