Animating multiple lines from multiple json

forked from tomshanley's block: Animating multiple lines from multiple json

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>

.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 timeToShow = 2; // seconds
var limit = timeToShow * SAMPLING_RATE;   // Buffer graph

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 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;

getNewData()

t++;
    
    if (objCount === 127) {
        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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js