Backbone + reusable D3 charts

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <script type='text/javascript' src="https://d3js.org/d3.v3.js"></script>
    <script type='text/javascript' src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
    <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
    <style>
        path.domain {
            fill: none;
            stroke: black;
        }
        .mark {
            fill: skyblue;
        }
        .tick line {
            stroke: black;
        }
    </style>
</head>
<body>

<div class="control">
    <button class="update-data">Update Data</button>
    <button class="update-config">Update Config</button>
</div>
<div class="chart" id="chart1"></div>
<div class="chart" id="chart2"></div>

// Chart module
    /////////////////////////////////////

d3.custom = {};

d3.custom.chart = function module(){
        var config = {
            margin: {top: 20, right: 20, bottom: 40, left: 40},
            width: 500,
            height: 500,
            geometry: 'bar'
        };
        var privateConfig = {
            chartW: null,
            chartH: null,
            data: null,
            scaleX: null,
            scaleY: null
        };
        var svg, dispatch = d3.dispatch('customHover');

function exports(_selection){
            _selection.each(function(_data){

var chartW = config.width - config.margin.left - config.margin.right,
                        chartH = config.height - config.margin.top - config.margin.bottom;

var scaleX = d3.scale.ordinal()
                        .domain(_data.x.map(function(d, i){ return i; }))
                        .rangeRoundBands([0, chartW], .1);
//                        .rangePoints([0, chartW], .1);

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

privateConfig = {
                    chartW: chartW,
                    chartH: chartH,
                    data: _data,
                    scaleX: scaleX,
                    scaleY: scaleY
                };

var xAxis = d3.svg.axis()
                        .scale(scaleX)
                        .orient('bottom');

var yAxis = d3.svg.axis()
                        .scale(scaleY)
                        .orient('left');

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);
                    container.append('g').classed('x-axis-group axis', true);
                    container.append('g').classed('y-axis-group axis', true);
                }

svg.transition().attr({width: config.width, height: config.height})
                svg.select('.container-group')
                        .attr({transform: 'translate(' + config.margin.left + ',' + config.margin.top + ')'});

svg.select('.x-axis-group.axis')
                        .attr({transform: 'translate(0,' + (chartH) + ')'})
                        .transition()
                        .call(xAxis);

svg.select('.y-axis-group.axis')
                        .transition()
                        .call(yAxis);

if(config.geometry === 'bar') exports.renderBars();
                if(config.geometry === 'line') exports.renderLines();
            });
        }
        exports.renderLines = function(){
            var barW = privateConfig.scaleX.rangeBand();
            var radius = 5;
            var bars = svg.select('.chart-group')
                    .selectAll('.mark')
                    .data(privateConfig.data.y);
            bars.enter().append('circle')
                    .classed('mark', true)
                    .attr({
                        cx: privateConfig.chartW,
                        cy: function(d, i){ return privateConfig.scaleY(d); },
                    })
                    .on('mouseover', dispatch.customHover);
            bars.transition()
                    .attr({
                        cx: function(d, i){ return privateConfig.scaleX(i) + barW/2; },
//                        cx: function(d, i){ return privateConfig.scaleX(i); },
                        cy: function(d, i){ return privateConfig.scaleY(d); },
                        r: radius
                    });
            bars.exit().transition().style({opacity: 0}).remove();
            return this;
        };
        exports.renderBars = function(){
            var barW = privateConfig.scaleX.rangeBand();
            var bars = svg.select('.chart-group')
                    .selectAll('.mark')
                    .data(privateConfig.data.y);
            bars.enter().append('rect')
                    .classed('mark', true)
                    .attr({
                        x: privateConfig.chartW,
                        y: function(d, i){ return privateConfig.scaleY(d); }
                    })
                    .on('mouseover', dispatch.customHover);
            bars.transition()
                    .attr({
                        x: function(d, i){ return privateConfig.scaleX(i); },
                        y: function(d, i){ return privateConfig.scaleY(d); },
                        width: barW,
                        height: function(d, i){ return privateConfig.chartH - privateConfig.scaleY(d); }
                    });
            bars.exit().transition().style({opacity: 0}).remove();
            return this;
        };
        exports.config = function(_newConfig){
            if(!arguments.length) return config;
            for(var x in _newConfig) if(x in config) config[x] = _newConfig[x];
            return this;
        };
        exports.getPrivateConfig = function(){ //useful for unit tests
            return privateConfig;
        };
        d3.rebind(exports, dispatch, 'on');
        return exports;
    };

// Chart view
    /////////////////////////////////////

// Buttons view
    /////////////////////////////////////

// Chart data
    /////////////////////////////////////

var ChartData = Backbone.Model.extend({
        defaults: {
            x: [1, 2, 3, 4],
            y: [10, 20, 30, 40]
        }
    });

// Chart config
    /////////////////////////////////////

var ChartConfig = Backbone.Model.extend({
        defaults: {
            height: 300,
            width: 400
        }
    });

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

var chartData = new ChartData();

var lineChartConfig = new ChartConfig({height: 200, width: 400, geometry: 'line'});
    var lineChartModel = new Backbone.Model().set({data: chartData, config: lineChartConfig});
    var lineChartView = new ChartView({model: lineChartModel, el: '#chart2'})

</script>

</body>
</html>

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

Modified http://code.jquery.com/jquery-1.8.3.min.js to a secure url

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

https://code.jquery.com/jquery-1.8.3.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js

https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js