D3.js Template

HTML

<div id="buttons">
<button id="up">
UP
</button>
<button id="down">
DOWN
</button>
</div>
<table></table>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}

table, table td {
  border: 1px solid black;
}

JavaScript

var dataset = [];
for (var n = 0; n < 100; n++) {
	dataset.push ([n, Math.random()*50, Math.random()*30]);
}

var rows = d3.select("table").selectAll("tr").data(dataset)
	.enter()
	.append("tr")
  ;
  
  var cells = rows.selectAll("td").data(function(d) { return d; })
  	.enter()
    .append("td")
    .text(function(d) { return d; })
  ;
  
  d3.select("#buttons").datum({portion : 0});
  // the chain select here pushes the datum onto the up and down buttons also
  d3.select("#buttons").select("#up").on ("click", function(d) {
  	d.portion -= 10;
    redraw (d.portion);
  });
   d3.select("#buttons").select("#down").on ("click", function(d) {
  	d.portion += 10;
    redraw (d.portion);
  })
  
  function redraw (start) {
  	d3.select("table").selectAll("tr")
    	.style("display", function(d,i) {
      	return i >= start && i < start + 10 ? null : "none";
      })
  }
  redraw(0);