Using d3.js, how can I display data faster on my chart?

Question

In my code, I am loading a JSON with 508 entries on a line chart. This JSON contains data emitted by some machines, and the keys are the names of the machines.

This is the structure of my JSON:

{
    "AF3":3605.1496928113393,
    "AF4":-6000.4375230516,
    "F3":1700.3827875419374,
    "F4":4822.544985821321,
    "F7":4903.330735023786,
    "F8":824.4048714773611,
    "FC5":3259.4071092472655,
    "FC6":4248.067359141752,
    "O1":3714.5106599153364,
    "O2":697.2904723891061,
    "P7":522.7300768483767,
    "P8":4050.79490288753,
    "T7":2939.896657485737,
    "T8":9.551935316881588
}

I am currently reading the data with the help of a counter called cont, however, the code that I'm using takes too long to draw the graph:

data.length=508

if (data.length>cont)
 cont++`

for (var name in groups) {
  var group = groups[name]
  group.data.push(aData[cont][name])
  group.path.attr('d', line)
  console.log(cont)
}

As you can see in the gif above, my code is taking too long to plot all the data points. I would like to draw all the data elements of my data set (in this case 508) without delay, for example:

data=[{508 elements}];
tick(data)=> draw the points in the graph at the same time, by dataset.

data2=[{50 elements}];
tick(data)=> draw the points in the graph at the same time, by dataset.

Where tick is the name of the function that would draw the coordinates, without losing the sense of animation.

How can do it?

Here is a link to my code:

http://plnkr.co/edit/y8h9zs1CpLU1BZRoWZi4?p=preview

Answer 1

It seems to me that your problem is the fact that the graph is synchronous - "duration" is both used for animation and for graph shifting. Essentially, changing duration will avail nothing.

You can introduce a time multiplier. Then try dividing duration by two, and using a multiplier of 2. Your actual data duration is now duration*timeMultiplier (you might want to change the names to make it less confusing, or use a timeDivider in the animation).

// Shift domain
x.domain([now - (limit - 2) * duration * timeMultiplier, now - duration * timeMultiplier])

// Slide x-axis left
axis.transition()
  .duration(duration)
  .ease('linear')
  .call(x.axis);

// Slide paths left
var t = paths.attr('transform', null)
  .transition()
  .duration(duration)
  .ease('linear')
t.attr('transform', 'translate(' + x(now - (limit - 1) * duration * timeMultiplier) + ')')
  .each('end', tick)

Another thing you might try is to add the points two at a time, i.e. you skip the shift on odd ticks, and shift double the amount on even ticks. This reduces the overhead at the expense of making the animation a bit jaggier (but not very much, because it also plays faster).