JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<body>
    <button id="last">last</button>
    <button id="next">next</button>
    
</body>

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("body").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);
}