cfranko/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.chart rect{
        stroke:white;
        fill:cornflowerblue;
}

.chart text {
    fill:white;
    font-family:helvetica;
    font-size:10px;
}
</style>

<head>
<script src="http://d3js.org/d3.v2.js?2.9.6"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>

<body>
<button id="prev">prev</button>
<button id="next">next</button>
<script>
var data = [1,2,3,2,1,5,4,5,6,7,3,2,3,2,3,2,3,3,2,1,5,4,5,6,7,3,2,3,2,3,2,3];
var chart = d3.select("body").append("svg")
    .attr("class","chart")
    .attr("width", 960)
    .attr("height", 500);

var barnumber = 10;
var page = 1;
var lastPageNum = data.length / barnumber;

var y = d3.scale.linear()
    .domain([0,10])
    .range([0,300]);

var viewdata = data.slice((page-1)*barnumber,page*barnumber);

var rect = 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);

var text = 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() {
    if (page < lastPageNum) {
        page++;
    }
    viewdata = data.slice((page-1)*barnumber,page*barnumber);
    redraw();
});

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

function redraw() {
  rect = rect.data(viewdata);

  rect.enter().append("rect");

  rect.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);

  text = text.data(viewdata);

  text.enter().append("text");
  text.transition()
    .duration(500)
    .attr("x", function(d,i) { return i*20+8; })
    .attr("y", 290)
    .text(String);

rect.exit().remove();

}
</script>
</body>
</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.chart rect{
	stroke:white;
	fill:cornflowerblue;
	}

	.chart text {
	fill:white;
	font-family:helvetica;
	font-size:10px;
	}
	</style>

	<head>
	<script src="http://d3js.org/d3.v2.js?2.9.6"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	</head>

	<body>
	<button id="prev">prev</button>
	<button id="next">next</button>
	<script>
	var data = [1,2,3,2,1,5,4,5,6,7,3,2,3,2,3,2,3,3,2,1,5,4,5,6,7,3,2,3,2,3,2,3];
	var chart = d3.select("body").append("svg")
	.attr("class","chart")
	.attr("width", 960)
	.attr("height", 500);

	var barnumber = 10;
	var page = 1;
	var lastPageNum = data.length / barnumber;

	var y = d3.scale.linear()
	.domain([0,10])
	.range([0,300]);

	var viewdata = data.slice((page-1)barnumber,pagebarnumber);

	var rect = 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);

	var text = 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() {
	if (page < lastPageNum) {
	page++;
	}
	viewdata = data.slice((page-1)barnumber,pagebarnumber);
	redraw();
	});

	$('#prev').click(function() {
	if (page > 1) {
	page--;
	}
	viewdata = data.slice((page-1)barnumber,pagebarnumber);
	redraw();
	});

	function redraw() {
	rect = rect.data(viewdata);

	rect.enter().append("rect");

	rect.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);

	text = text.data(viewdata);

	text.enter().append("text");
	text.transition()
	.duration(500)
	.attr("x", function(d,i) { return i*20+8; })
	.attr("y", 290)
	.text(String);

	rect.exit().remove();

	}
	</script>
	</body>
	</html>