score:2

Accepted answer

Depending on the type of the dataviz (a bar chart, for instance), 3000 items is definitely too much. However, it's normally not that much regarding the file size.

That being said, instead of cutting it up in several files with 20 rows, load all the items at once, in a single CSV, and display only 20 each time (which is what your question's title say).

To cut the data array, use slice:

var slicedData = data.slice(begin, end);

Here is a basic demo:

var body = d3.select("body");
body.append("p").html("ID -- VALUE<br>");
var index = 0

d3.csv("https://gist.githubusercontent.com/ffishman/a8cd485c44bee39b68c7a5c7fad14f17/raw/fad1cd9a10f313c06ec65bd8ab289c818536681c/flare.csv", function(data) {
  d3.select("#bt2").on("click", () => {
    var newData = data.slice(index, index + 20);
    index += 20;
    update(newData);
  })

  d3.select("#bt1").on("click", () => {
    index -= 20;
    var newData = data.slice(index - 20, index);
    update(newData)
  })

  function update(newData) {
    var par = body.selectAll(".par")
      .data(newData, d => d.id);

    par.exit().remove();

    par.enter()
      .append("p")
      .attr("class", "par")
      .merge(par)
      .html(d => d.id + " -- " + d.value)
  }
})
p {
    margin: 2px;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<button id="bt1">Previous 20</button>
<button id="bt2">Next 20</button>


Related Query

More Query from same tag