WOT - No. Chars - Bar Chart Paging

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<p>Wheel of Time Book Series - Number of Chars per Book</p>
<div id="chart"></div>
<button id="last">previous book</button>
<button id="next">next book</button>

CSS

.chart rect{
    stroke:white;
    fill:steelblue;
}

.chart text {
    fill:white;
    font-family:arial;
    font-size:10px;
}

JavaScript

var data = [3,6,4,2,6,4,5,4,7,4,2,3,3,4,2,6,4,4,4,4,7,2,6,3,4,5,2,4,4,5,4,5,5,4,6,8,5];

var chart = d3.select("#chart").append("svg")
    .attr("class","chart")
    .attr("width",440)
    .attr("height",300);

var barnumber = 5;
var page = 1;

var y = d3.scale.linear()
    .domain([0,10])
    .range([0,300])
    
var viewdata = data.slice((page-1)*barnumber,page*barnumber);

chart.selectAll("rect")
.data(viewdata)
  .enter().append("rect")
    .attr("x",function(d,i){ return i*20})
    .attr("y",function(d) {return 300 - y(d);})
    .attr("width", 20)
    .attr("height", y);

chart.selectAll("text")
    .data(viewdata)
  .enter().append("text")
    .attr("x", function(d,i) { return i*20+8; })
    .attr("y", 290)
    .text(String);


$('#next').click(function() {
    page++;
    viewdata = data.slice((page-1)*barnumber,page*barnumber);
    redraw();
});

$('#last').click(function() {
    page--;
    viewdata = data.slice((page-1)*barnumber,page*barnumber);
    redraw();
});

function redraw() {
    chart.selectAll("rect")
    .data(viewdata)
        .transition()
        .duration(500)
        .attr("x",function(d,i){ return i*20})
        .attr("y",function(d) {return 300 - y(d);})
        .attr("width", 20)
        .attr("height", y);
        
        chart.selectAll("text")
    .data(viewdata)
         .transition()
        .duration(500)
        .text(String);
}