Using D3.js, How Can I Display Data Faster On My Chart?

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 structur

Solution 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).