D3 Examples - Line chart with step buttons

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
​
    .buttons-container {
        display: block;
        float: left;
    }
​
    .step {
        float: left;
        display: block;
        width: 90px;
        padding: .5em 1em;
        margin-right: .5em;
        border: .01em solid #c5c5c5;
        background-color: #f0f0f0;
        border-radius: .1em;
        cursor: pointer;
    }
​
    .axis line,.axis path {
        fill: none;
        stroke: #777;
        shape-rendering: crispEdges
    }
​
    .axis text {
        fill: gray;
        font-size: 0.9em;
​
    }
​
    .axis path,.tick line {
        opacity: .5
    }
​
    .line {
        fill: none;
        stroke-width: 2px
    }
​
    .line-Germany {
        stroke: #cd1719
    }
​
    .line-Italy {
        stroke: #ff4a1b
    }
​
    .line-Japan {
        stroke: #a83024
    }
​
    .line-UK {
        stroke: #047580
    }
​
    .line-US {
        stroke: #3e792a
    }
​
    .anotation {
        font-size: 3em;
        text-transform: uppercase;
        letter-spacing: .08em
    }
​
    .text-Germany {
        fill: #cd1719
    }
​
    .text-Italy {
        fill: #ff4a1b
    }
​
    .text-Japan {
        fill: #a83024
    }
​
    .text-UK {
        fill: #047580
    }
​
    .text-US {
        fill: #3e792a
    }
​
    body {
        font-family: arial;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }
    </style>
</head>
<body>
    <div class="container">
        <div id="chart"></div>
        <div class="buttons-container">
            <button type="button" data-index="0" name="button" class="step">Previous</button>
            <button type="button" data-index="1" name="button" class="step">Next</button>
        </div>
    </div>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript">
​
    var margin = {top: 20, right: 20, bottom: 45, left: 60},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
    var svg = d3.select('#chart').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
​
    var formatDate = d3.time.format("%d-%b-%y");
​
    var x =  d3.time.scale()
    .range([0, width]);
​
    var y =d3.scale.linear()
    .range([height, 0]);
​
    // data formatting and years
    var dateFormat = d3.time.format("%Y");
​
    var format = d3.format("s");
    var formatComma = d3.format(",");
​
    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(8)
    .tickFormat(function(d) {
        return dateFormat(d);
    });
​
    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(function(d) {
        return format(d);
    });
​
    var heads, index = 0;
​
    var annotation = svg.append("text")
    .attr("class", "anotation text-Germany")
    .attr("width", "100")
    .attr("height", "50")
    .attr("x", margin.left)
    .attr("y", margin.top*2);
​
    d3.csv("population.csv", type, function(error, data) {
        if (error) throw error;
​
        heads = getHeads(data[0]);
​
        var col1 = heads[0],col2 = heads[1], col0 = 'year', col4 = heads[4];
​
        var line = d3.svg.line()
        .x(function(d) {
            return x(dateFormat.parse(d[col0]));
        })
        .y(function(d) { return y(d[col1]); });
​
        x.domain(d3.extent(data, function(d) { return dateFormat.parse(d[col0]); }));
        y.domain(d3.extent(data, function(d) { return d[col4]; }));
​
        svg.selectAll(".anotation")
        .text(heads[index]);
​
        svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height) + ")")
        .call(xAxis)
        .append("text")
        .attr("y", 35)
        .attr("x",width/2-margin.left)
        .attr("dy", ".5em")
        .text("from 1960 to 2030");
​
        svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "1em")
        .style("text-anchor", "end")
        .text("Price ($)");
​
        svg.append("g").attr("class","line-path").append("path")
        .datum(data)
        .attr("class", function(d){
            return "line line-"+heads[index];
        })
        .attr("d", line);
​
        d3.selectAll(".step").on("click", steps);
​
        //updating and
        function getIndex(number){
            if (number==0) {
                index--;
                if (index==-1) {
                    index = heads.length-1;
                }
            }else if (number==1) {
                index++;
                if (index==heads.length) {
                    index = 0;
                }
            }
            return index;
        }
​
        function steps(){
            var number = this.getAttribute("data-index");
​
            var i = getIndex(number);
​
            svg.selectAll(".anotation").text(heads[i])
            .attr("class", function(d){
                return "anotation text-"+heads[i];
            });
​
            line.y(function(d){return y(d[heads[i]]);});
​
            svg.selectAll(".line")
            .transition()
            .duration(200)
            .ease("cubic")
            .attr("d", line)
            .attr("class", function(d){
                return "line line-"+heads[i];
            });
        }
    });
    function getHeads(d){
        var rows = Object.keys(d);
        rows.shift();
        return rows;
    }
    function type(d) {
        getHeads(d).forEach(function(z){
            d[z] = +d[z];
        });
        return d;
    }
    </script>
​
</body>
</html>
​
    