title: Create transitions on data change d3.js
body: <p>I'm trying to create a chart which basically has a number of horizontal lines on it. The data for the lines is taken from the function that generates random arrays of objects like this:</p>
  
  <pre><code>{
      "process": 2,
      "time": 5
  }
  </code></pre>
  
  <p>And also there is a <code>setInterval</code> function that redraws the chart every 3s. How can I make it change not that abruptly, but with easing and transitions?
  Here is my code below:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="jumbotron"&gt;&lt;h3&gt;Operating System Processes Model&lt;/h3&gt;&lt;/div&gt;
      &lt;div class="enter"&gt;Enter the number of processes: &lt;/div&gt;
      &lt;input type="number" min="0" max="30" id="input"&gt;
  &lt;/div&gt;
  &lt;svg id="visualisation" width="1000" height="500"&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>utils.js:</p>
  
  <pre><code>// Renders grid in the system of axes
  function renderGrid() {
      // Vertical lines
      for(var i = 5; i &lt;= 50; i+=5) {
          vis.append('svg:path')
              .attr('d', lineGen(
                  [
                      {
                          "process": "0",
                          "time": + i
                      },
                      {
                          "process": "50",
                          "time": + i
                      },
                  ]
              ))
              .attr('stroke', '#777')
              .attr('stroke-dasharray', "5,5")
              .attr('stroke-width', 1)
              .attr('fill', 'none');
          // Horizontal lines
          vis.append('svg:path')
              .attr('d', lineGen(
                  [
                      {
                          "process": i,
                          "time": "0"
                      },
                      {
                          "process": i,
                          "time": "50"
                      },
                  ]
              ))
              .attr('stroke', '#777')
              .attr('stroke-dasharray', "5,5")
              .attr('stroke-width', 1)
              .attr('fill', 'none');
      };
  }
  
  // Generate single line
  var lineGen = d3.svg.line()
                      .x(function(d) {
                          return xScale(d.time);
                      })
                      .y(function(d) {
                          return yScale(d.process);
                      })
                      .interpolate("basis");
  
  // Generate random color
  function getRandomColor() {
      var letters = '0123456789ABCDEF'.split('');
      var color = '#';
      for (var i = 0; i &lt; 6; i++ ) {
          color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
  }
  
  // Generate random data array
  function getDataArray(count) {
      var array = [];
      for(var i = 0; i &lt; count; ++i) {
  
          var proc = Math.round(Math.random() * (50 - 1)) + 1;
          var time1 = Math.round(Math.random() * (50 - 1)) + 1;
          var time2 = Math.round(Math.random() * (50 - 1)) + 1;
  
          var data = [
              {
                  "process": proc,
                  "time": Math.max(time1, time2)
              },
              {
                  "process": proc,
                  "time": Math.min(time1, time2)
              },
          ];
  
          array.push(data);
  
      }
      return array;
  }
  
  // Generate random data
  function renderProcesses() {
  
      vis.selectAll('.line-process').remove();
  
      // var processCount = Math.round(Math.random() * (50 - 1)) + 1;
      var processCount = document.getElementById('input').value;
  
      var arr = getDataArray(processCount);
  
      for(var i = 0; i &lt; processCount; ++i) {
  
          var processLength = Math.round(Math.random() * (50 - 1)) + 1;
  
          var color = getRandomColor();
  
          vis.append('svg:path')
              .attr('class', 'line-process')
              .attr('d', lineGen(arr[i]))
              .attr('stroke', color)
              .attr('stroke-width', 5)
              .attr('stroke-linecap', 'round')
              .attr('fill', 'none')
  
              .on("mouseover", function() {
                  d3.select(this)
                      .attr('stroke', "#1abc9c");
              })
              .on("mouseout", function() {
                  d3.select(this)
                      .attr('stroke', color)
              });
      }
  }
  </code></pre>
  
  <p>axis.js:</p>
  
  <pre><code>// Draw the axis
  
  var vis = d3.select("#visualisation"),
      width = 1000,
      height = 500,
      margins = {
          top: 20,
          right: 20,
          bottom: 20,
          left: 50
      },
      xScale = d3.scale.linear().range([margins.left, width - margins.right]).domain([0,50]),
      yScale = d3.scale.linear().range([height - margins.top, margins.bottom]).domain([0,50]),
      xAxis = d3.svg.axis()
                  .scale(xScale),
      yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient('left');
  
  vis.append("svg:g")
      .transition()
      .attr("transform", "translate(0," + (height - margins.bottom) + ")")
      .attr("class", "axis")
      .call(xAxis);
  
  vis.append("svg:g")
      .transition()
      .attr("transform", "translate(" + (margins.left) + ",0)")
      .attr("class", "axis")
      .call(yAxis);
  </code></pre>
  
  <p>styles for the axises:</p>
  
  <pre><code>.axis {
  
      path {
          fill: none;
          stroke: #777;
          shape-rendering: crispEdges;
      }
  
      text {
          font-family: Lato;
          font-size: 12px;
      }
  }
  </code></pre>
  
  <p>and finally, main.js:</p>
  
  <pre><code>renderGrid();
  setInterval(renderProcesses, 3000);
  </code></pre>
  
  <p>Here is the screenshot:
  <img src="https://i.stack.imgur.com/D6B6n.png" alt="the screenshot of the page in browser"></p>
  
  <p>So, Could you help me with those transitions?</p>
  
  <p>And, another question, as you can see on the screenshot, some lines can be drown on each other. How can I avoid it?</p>