D3 Examples - Animating multiple lines from multiple json

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
​
  <style>
    
    body {
    font-family: sans-serif;
    font-size: 9pt;
    line-height: 12pt;
    background: #ffffff;
    color: #555555;
}
​
.line{
    fill: none;
}
    
    .axis path, .axis line {
    fill: none;
    stroke: #555555;
    shape-rendering: crispEdges;
} 
  </style>
</head>
​
<body>
  <script>
    var t = -1;
var n = 128;
var duration = 100;
​
const SAMPLING_PERIOD = 7.8125 // milliseconds
const SAMPLING_RATE = 128      // Samples per second
const YLIMIT = 8355.33;
​
​
​
var color = d3.scale.category20();
​
var ids = ["AF3", "F7", "F3", "FC5", "T7", "P7", "O1", "O2", "P8", "T8", "FC6", "F4", "F8", "AF4"];
var idsLength = ids.length;
var data = {}
​
​
ids.forEach(function(id){
    data[id] = initialise(id)
})
        
function initialise(id)
{
    var time = -1;
    var arr = [];
    for (var i = 0; i < n; i++)
    {
        var obj = {
            id: id,
            t: ++time,
            value: 0
        };
        arr.push(obj);
    }   
    t = time;
    return arr;
}
​
var margin = {top: 10, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
 
var x = d3.scale.linear()
    .domain([t-n+1, t])
    .range([0, width]);
 
var y = d3.scale.linear()
    .domain([0, YLIMIT])
    .range([height/idsLength, 0]);
 
var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d, i) { return x(d.t); })
    .y(function(d, i) { return y(d.value); });
​
​
var band = d3.scale.ordinal()
    .domain(ids)
    .rangeBands([0, height])   
    
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);
​
var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
​
var axis = g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(x.axis=xAxis);
 
var pathsG = g.selectAll(".line")
    .data(ids)
    .enter()
    .append("g")
    .attr("transform", function(d){ return "translate(0, " + band(d) + ")" })
    .attr("id", function(d){ return "g-" + d})
​
var paths = pathsG.append("path")
    .attr("id", function(d){ return "path-" + d})
    .datum(function(d){
        console.log(data[d])
        return data[d]
    })
    .attr("class", "line")
    .style("stroke", function(d,i){ return color(i) })
 
​
var objCount = 0;
var jsonCount = 2;
var latestData = [];
var first = true;
var latestDataLength = 0
​
getNewData()
​
function getNewData() {
    jsonCount = jsonCount === 2 ? 0 : jsonCount + 1;
    let filename = "data" + jsonCount + ".json";
    d3.json(filename, function(loadedData){
        latestData = loadedData;
        latestDataLength = latestData.length - 1;
        updateLineData()
        if (first) {
            first = false;
            tick();
        };
    })
};
​
function updateLineData() {
    ids.forEach(function(id){
        let newObj = {}
        newObj.value = latestData[objCount][id];
        newObj.t = t;
        data[id].push(newObj)
    }) 
};
  
function tick() {
​
    t++;
    
    if (objCount === latestDataLength) {
        getNewData()
        objCount = 0
    }
    else {
        objCount = objCount + 1
        updateLineData()
    }
    
    // update the domains
    x.domain([t - n + 2 , t]);
    
    paths.attr("d", line)
        .attr("transform", null);
    
    // slide the line left
    paths.transition()
        .duration(duration)
        .ease("linear")
        .attr("transform", "translate(" + x(t-n+1) + ")");
           
     // slide the x-axis left
    axis.transition()
        .duration(duration)
        .ease("linear")
        .call(xAxis)
        .each("end", tick);
​
    ids.forEach(function(id){
        data[id].shift()
    })
    
    
    
}
​
  </script>
</body>
​
    