Incremental Data Loading

This example shows one way to load data files one by one, and re-render the visualization each time more data is fetched. This data set presents temperature in San Francisco every hour, over 26 days. The data for each day is in a separate CSV file. Here is more information about this data, and here's the script that generated these files.

This just shows how to load data incrementally. For ideas on how to make this look even smoother, see this Path Transitions article by Mike Bostock.

This example was created to address this conversation on the D3 Google Group: Is it possible to smoothly load 200MB data to remote clients' browser with D3?.

The line chart visualization code is based on a previous example: Standalone Line Chart.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    <style>

.chart-line {
        fill: none;
        stroke: black;
        stroke-width: 1px;
      }
    
      .axis text {
        font-family: 'Poiret One', cursive;
        font-size: 12pt;
      }
      .axis .label {
        font-size: 22pt;
      }

.axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

</style>
  </head>
  <body>
    <script>
    
      var outerWidth = 960;
      var outerHeight = 500;
      var margin = { left: 70, top: 5, right: 5, bottom: 60 };

var xColumn = "timestamp";
      var yColumn = "temperature";

var xAxisLabelText = "Time";
      var xAxisLabelOffset = 48;

var yAxisLabelText = "Temperature °C";
      var yAxisLabelOffset = 40;

var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;

var svg = d3.select("body").append("svg")
        .attr("width", outerWidth)
        .attr("height", outerHeight);
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var path = g.append("path")
        .attr("class", "chart-line");

var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")")
      var xAxisLabel = xAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("transform", "translate(" + (innerWidth / 2) + "," + xAxisLabelOffset + ")")
        .attr("class", "label")
        .text(xAxisLabelText);

var yAxisG = g.append("g")
        .attr("class", "y axis");
      var yAxisLabel = yAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)")
        .attr("class", "label")
        .text(yAxisLabelText);

var xScale = d3.time.scale().range([0, innerWidth]);
      var yScale = d3.scale.linear().range([innerHeight, 0]);

var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .ticks(5)
        .outerTickSize(0);
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .ticks(5)
        .tickFormat(d3.format("s"))
        .outerTickSize(0);

var line = d3.svg.line()
        .x(function(d) { return xScale(d[xColumn]); })
        .y(function(d) { return yScale(d[yColumn]); });

function render(data){
        xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
        yScale.domain(d3.extent(data, function (d){ return d[yColumn]; }));

xAxisG.call(xAxis);
        yAxisG.call(yAxis);

path.attr("d", line(data));
      }

function type(d){
        d.timestamp = new Date(d.timestamp);
        d.temperature = +d.temperature;
        return d;
      }

loadFilesOneByOne(d3.range(1, 25).map(function (day){
        return "day" + day + ".csv";
      }));

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

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js