I would appreciate it if you can give me a hand with my code.

my code basically consists of working with 14 sensors. Each sensor has some data that I graph. In my real project I consume a web service every second and the answer is a `.JSON` of 128 elements each. I simulate the web service with the help of a timeout, in this case I am reading `3 .JSON` files, each one a second later simulating that I am consuming `3 web services`. these data are the ones that feed the information by sensor.

```
 setTimeout(function(){
  $.getJSON("data.json", function(data) {  
    appendData(data);
    })
  },1000)

  setTimeout(function(){
    $.getJSON("data1.json", function(data) {  
     appendData(data);
    })
  },2000)

```

each machine is called as the keys to my object .JSON. There are 14 machines in total. The .JSON has the following structure: (each `.JSON of 128 elements`)

```
[{  
 "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
}]

```

each line represents a sensor, and each line I have moved to different spaces to see them in a better way.

I'm trying to have something like this in this picture. but in my case I would like to achieve something like this by taking a second to show for each request.(the program with which I made the gif, does not show the animation very fluid.)

[![enter image description here](https://i.stack.imgur.com/53oJL.gif)](https://i.stack.imgur.com/53oJL.gif)

I am trying to draw on my graph every time I receive a .JSON request. then every second I am plotting to 128 data. but I would like to generate a more smooth animation to move the lines, among all my data received. 
currently my animation is somewhat abrupt, as you can see in the image. 

how can I do it?

[![enter image description here](https://media.giphy.com/media/3o7aCY2CZ09UHcxjEI/giphy.gif)](https://media.giphy.com/media/3o7aCY2CZ09UHcxjEI/giphy.gif)

this is my code:

<http://plnkr.co/edit/h6QrS1i8oKfy4yYwnI8B?p=preview>

```
  * SIGNAL FEATURES
  * Sampling rate: 128 samples per second. Period of each sample: 7.8125 mS
  * Resolution: 14 bits (0 - 16383), LSB is a change in 0.51uV
  * Dynamic Range: 0uV to 8.355,33uV.
  * * * */

  var SAMPLING_PERIOD = 7.8125 // milliseconds
  var SAMPLING_RATE = 128      // Samples per second

  // Read from JSON
  var aData = [];

  // Plot parameters
  var timeToShow = 3; // seconds
  var limit = timeToShow * SAMPLING_RATE;   // Buffer graph

  // Variable for x-axis
  var duration = limit * SAMPLING_PERIOD;  // Sampling period of each data

  setTimeout(function(){
  $.getJSON("data.json", function(data) {  
    appendData(data);
    })
  },1000)

  setTimeout(function(){
    $.getJSON("data1.json", function(data) {  
     appendData(data);
    })
  },2000)

  setTimeout(function(){
    $.getJSON("data2.json", function(data) {  
     appendData(data);
    })
  },3000)

  // Canvas size
  var width = 250, height = 490
  // Emotiv Channels
  var groups = {
    AF3: {
      value: 0,
      color: '#FFB6C1',
      data: d3.range(limit).map(function() {
        return 0
      })
    },
    F7: {
      value: 0,
      color: '#3AFFFF',
      data: d3.range(limit).map(function() {
        return 0
      })
    },
    F3: {
      value: 0,
      color: '#FF0000',
      data: d3.range(limit).map(function() {
        return 0
      })
    },
    FC5: {
      value: 0,
      color: '#212529',
      data: d3.range(limit).map(function() {
        return 0
      })
    },
    T7: {
      value: 0,
      color: '#FF8C00',
      data: d3.range(limit).map(function() {
        return 0
      })
    },
    P7: {
      value: 0,
      color: '#0000FF',
      data: d3.range(limit).map(function() {
        return 0
      })
    },
    O1: {
      value: 0,
      color: '#B22BEC',
      data: d3.range(limit).map(function() {
        return 0
      })
    },
    O2: {
      value: 0,
      color: '#A52A2A',
      data: d3.range(limit).map(function() {
        return 0
      })
    },
    P8: {
      value: 0,
      color: '#7FFF00',
      data: d3.range(limit).map(function() {
        return 0
      })
    },
    T8: {
      value: 0,
      color: '#FF6347',
      data: d3.range(limit).map(function() {
        return 0
      })
    },
    FC6: {
      value: 0,
      color: '#2E8B57',
      data: d3.range(limit).map(function() {
        return 0
      })
    },
    F4: {
      value: 0,
      color: '#3ACAFF',
      data: d3.range(limit).map(function() {
        return 0
      })
    },
    F8: {
      value: 0,
      color: '#FFA500',
      data: d3.range(limit).map(function() {
        return 0
      })
    },
    AF4: {
      value: 0,
      color: '#008000',
      data: d3.range(limit).map(function() {
        return 0
      })
    }
  }

  var x = d3.scale.linear()
    .domain([0, limit - 1])
    .range([0, width]);   

  // Function to map values on Y-axis
  var y = d3.scale.linear() // Linear axis with domain [0,1] and range [0,1]. http://alignedleft.com/tutorials/d3/scales
    .domain([0, 8355.33])      // Dynamic range will always be between [0-8355.33]
    .range([height / 14, 0]) // Map to height of one plot

  // Container for Channel names
  var ids = []
  for (var name in groups) {
    ids.push(name)
  }

  // Function to generate bands bands in the height of the canvas, one for each channel
  var band = d3.scale.ordinal()
    .domain(ids)
    .rangeBands([0, height])   

  // Function to generate a line
  var line = d3.svg.line()
    .interpolate('basis')     // Interpolation with a line... Use 'basis' for B-Spline
    .x(function(d, i) { return x(i); })
    .y(function(d, i) { return y(d); });

  ///////// CREATE OBJECTS IN HTML
  var svg = d3.select('.graph').append('svg')
    .attr('class', 'chart_sensores')
    .attr('width', width)
    .attr('height', (height + 50))

  // Add lines for each data channel
  var paths = svg.append('g')
  for (var name in groups) {
    var group = groups[name];

    let g = paths.append("g")
          .attr("transform", function(d, i) {
            return "translate(0, " + (band(name)) + ")";  // Move the group to the band of the corresponding channel
          });

    // Add the line with the color and style defined in "groups"
    group.path = g.append('path')
      .data([group.data])
      .attr('class', name + ' group')
      .style('stroke', group.color)
  }

  // Periodic function to plot one sample each time.
  function appendData(data) {
    newBlockSize=data.length;

    // Append block of data
    for (var name in groups) {
      var group = groups[name]    // Take one channel
      for (var i=0; i<newBlockSize; i++){
        group.data.push(data[ i][name])
      }
      group.path.attr('d', line)    // Draw the line with the data array
    }

    /////// MOVEMENT OF THE TIME-SERIES PLOT
    var t = paths.attr('transform',null)
      .transition()
      .ease('linear')
      //.duration()
      t.attr('transform', 'translate(' + x(-newBlockSize) + ')')

    // Remove oldest data block from each group
    for (var name in groups) {
      var group = groups[name]
      for (var i=0; i<newBlockSize; i++){
         group.data.shift()
      }
    }
  }//end append function

```