limitBalDefaultersChart.js

//again, get min/max for our x-axis
var limitBalMinMax = d3.extent(data, function (d) {
    return d['LIMIT_BAL'];
});

limitBalDefaultersChart
    .width(900)
    .height(250)
    .dimension(limitDefaultersDim)
    .group(limitDefaultersDim.group().reduceSum(dc.pluck('default payment next month')))
    .x(d3.scale.linear().domain(limitBalMinMax))
    .renderArea(true) //this drops an area under the line chart
    .mouseZoomable(true) //allows the graph to be zoomable
    .elasticY(true) //free the y-axis! don't do this for X-axis; mouseZoomable(true) will take care of it.
    .xAxisLabel('Amount of Credit Given')
    .yAxisLabel('People')
    .turnOnControls(true)
    .controlsUseVisibility(true);

$('#limitBalDefaulters > a').on('click', function (e) {
    limitBalDefaultersChart.focus(); //oddly, filterAll() does not reset the zoom, so this does
    limitBalDefaultersChart.filterAll();
    dc.redrawAll();
    e.preventDefault();
});