How to increase time to read d3.json data for large data set and slow networks?

Question

I'm drawing a scatter plot using d3js and nvd3.js. To fetch and render the data I use:

  var chart;
  var data;
  var url = window.location+"/data";
  d3.json(url, function(error, json) {
    if (error) return console.warn(error);
      data = json;
      nv.addGraph(function() {
        chart = nv.models.scatterChart()
              .showDistX(true)
              .showDistY(true)
              .useVoronoi(true)
              .color(d3.scale.category10().range())
              .transitionDuration(300); 
        chart.xAxis.tickFormat(d3.format('.001f'));
        chart.yAxis.tickFormat(d3.format('.02f'));
        chart.tooltipContent(function(key){
            var result = '<h2>'+ key + '</h2>';
            return result;
        });
    d3.select('#div2 svg')
        .datum(data)
        .call(chart);
    nv.utils.windowResize(chart.update);
    chart.dispatch.on('stateChange', function(e) { ('New State:', JSON.stringify(e)); });
    return chart;
    });
  });

Unfortunately the server the data comes from takes up to 2 minutes to render all the data. So my function times out. How can I increase the timeout value, so the graph actually displays?

It seems to me that a better solution would be to cache the data and use that. No user will want to wait more than 2 minutes for a page to load. — Lars Kotthoff, Feb 10 '14 at 10:49

score 0 · Accepted Answer · edited May 23 '17 at 10:33

First, 2 minutes to render a graph is very long. You should try to find a solution to get data faster from your server (using caching for example).

If you want to do fancy requests for data, a good method is to fall back on jQuery.ajax(). This function offers a timeout parameter that is probably what you are looking for.

You would end up having something like:

function handleSuccess(data) {
  nv.addGraph(function() {
    chart = nv.models.scatterChart()
          .showDistX(true)
          .showDistY(true)
          .useVoronoi(true)
          .color(d3.scale.category10().range())
          .transitionDuration(300); 
    chart.xAxis.tickFormat(d3.format('.001f'));
    chart.yAxis.tickFormat(d3.format('.02f'));
    chart.tooltipContent(function(key){
        var result = '<h2>'+ key + '</h2>';
        return result;
    });
    d3.select('#div2 svg')
      .datum(data)
      .call(chart);
    nv.utils.windowResize(chart.update);
    chart.dispatch.on('stateChange', function(e) { ('New State:', JSON.stringify(e)); });
    return chart;
  });
}
handleError: function(error) {
  return console.warn(error);
}

$.ajax({
  url: url,
  type: 'GET',
  timeout: 3000, // in milliseconds
  dataType: 'json'
  success: handleSuccess, 
  error: handleError
})

You can also have a look at the request documentation page in d3. This answer can also help: https://stackoverflow.com/a/17320249/1041692

I had a look at the d3js documentation beforehand. It doesn't talk about any timeout setting. It might be there, but I haven't inspected the source for it. I'll give the jquery or dojo function a shot — stwissel, Feb 10 '14 at 14:11
It might be possible to do this in the d3.xhs.get parameters. — Christopher Chiche, Feb 10 '14 at 14:29

How to increase time to read d3.json data for large data set and slow networks?

1 Answers1