NVD3 interesting example

by Nivaldo

HTML

<link rel="stylesheet" href="https://raw.github.com/novus/nvd3/master/src/nv.d3.css">
<script src="https://rawgithub.com/novus/nvd3/master/nv.d3.min.js"></script>
<div id="fx">
    <svg></svg>
</div>

CSS

path {
    fill: none;
}

/**********
*  Axes
*/
 .nvd3 .nv-axis path {
    fill: none;
    stroke: #000;
    stroke-opacity: .75;
    shape-rendering: crispEdges;
}
.nvd3 .nv-axis path.domain {
    stroke-opacity: .75;
}
.nvd3 .nv-axis.nv-x path.domain {
    stroke-opacity: 0;
}
.nvd3 .nv-axis line {
    fill: none;
    stroke: #000;
    stroke-opacity: .25;
    shape-rendering: crispEdges;
}
.nvd3 .nv-axis line.zero {
    stroke-opacity: .75;
}
.nvd3 .nv-axis .nv-axisMaxMin text {
    font-weight: bold;
}
.nvd3 .x .nv-axis .nv-axisMaxMin text, .nvd3 .x2 .nv-axis .nv-axisMaxMin text, .nvd3 .x3 .nv-axis .nv-axisMaxMin text {
    text-anchor: middle
}

JavaScript

nv.addGraph(function () {
    var chart = nv.models.lineChart();
    var fitScreen = false;
    var width = 600;
    var height = 300;
    var zoom = 1;

    chart.useInteractiveGuideline(true);
    chart.xAxis.axisLabel('Time (days)')
        .rotateLabels(-45)
        .tickFormat(function (d) {
        return d3.time.format('%b %d')(new Date(d));
    });

    chart.yAxis.axisLabel('CAD/USD ($)')
        .tickFormat(d3.format(',.2f'));

    d3.select('#fx svg')
        .attr('preserveAspectRatio', 'xMinYMid')
        .attr('width', width)
        .attr('height', height)
        .datum(data());

    setChartViewBox();
    resizeChart();

    // These resizes both do the same thing, and require recalculating the chart
    //nv.utils.windowResize(chart.update);
    //nv.utils.windowResize(function() { d3.select('#fx svg').call(chart) });
    nv.utils.windowResize(resizeChart);

    d3.select('#zoomIn').on('click', zoomIn);
    d3.select('#zoomOut').on('click', zoomOut);


    function setChartViewBox() {
        var w = width * zoom,
            h = height * zoom;

        chart.width(w)
            .height(h);

        d3.select('#fx svg')
            .attr('viewBox', '0 0 ' + w + ' ' + h)
            .transition().duration(500)
            .call(chart);
    }

    function zoomOut() {
        zoom += .25;
        setChartViewBox();
    }

    function zoomIn() {
        if (zoom <= .5) return;
        zoom -= .25;
        setChartViewBox();
    }

    // This resize simply sets the SVG's dimensions, without a need to recall the chart code
    // Resizing because of the viewbox and perserveAspectRatio settings
    // This scales the interior of the chart unlike the above
    function resizeChart() {
        var container = d3.select('#fx');
        var svg = container.select('svg');

        if (fitScreen) {
            // resize based on container's width AND HEIGHT
            var windowSize = nv.utils.windowSize();
            svg.attr("width",...