Updating graph data over time in Javascript with Plotly

plotly.js
1

Hey guys!

I’m working on a visual project for a PHD student.

The end goal is to read in a text file that has several sets of x,y coordinates, plot a set of those coordinates, and then after a certain amount of time, plot the next set, the end goal is to make it look animated.

However, when it comes to trying to use the restyle mechanism to plot new points, the browser hangs and crashes every time without fail.

Currently, I have a default empty scatter graph instantiated onload.

I want to be able to loop through an array of x coordinates and an array of y coordinates,
and as it iterates through both of these arrays, plot the coordinates onto a graph, removing the previous ones.

I have the general gist of this coded, but it is causing me serious problems.

Any thoughts?

So so grateful for any help!

PJ

1 Like
2

Well. That shouldn’t happen. Do you have a code snippet for me to look at?

You might want to look at Plotly.extendTraces instead of restyle which is more efficient for this sort of operation: http://codepen.io/etpinard/pen/qZzyXp

3

That looks pretty close to what I want, how would one go about updating both the x and y axis at the same time using .extendTraces, and also, how would one remove the previous ones?

I apologise sincerely, I am not overly familiar with Plotly and my own searches don’t go far because truthfully Im not always sure what exactly it is im looking for!

This is the gist of the code, it is extremely rough, apologies.

var file = this.files[0];

var reader = new FileReader();
reader.onload = function(progressEvent){

// Entire file
console.log(this.result);

var node = [];
var xaxis = [];
var yaxis = [];
var time = [];
var lines = this.result.split("\n");






var temptime;
var tempnode;
var tempx;
var tempy;



var section = lines.slice(0); //Returns entire result as array.


for(var i = 0; i < section.length; i++){ // This method splits all timesteps into sections.
var cur = section[i]; //cur stands for current
if(cur.startsWith("time")){
timeIndex.push(i);
}
}





for(var k = 0; k < timeIndex.length; k++){	//Loop through each timestep section

if(timeIndex[k+1] != null){

var sec = lines.slice(timeIndex[k],timeIndex[k+1]);

}else{
var sec = lines.slice(timeIndex[k-1]);
}

for(var i = 0; i < sec.length; i++){ //Catch the number of the timestep
var cur = sec[i];
if(cur.startsWith("time")){
temptime = cur.substr(5);
var temp = parseInt(temptime);
temptime = temp;
time.push(temp);
}



if(cur.startsWith("Node")){ //Go through node lines.
var n = cur.substr(cur.indexOf("Node")+6, cur.indexOf('x')-3);
var a = cur.substr(cur.indexOf("x")+2, cur.indexOf("y")-2);
var b = cur.substr(cur.indexOf("y")+2);

var temp = parseFloat(a);
tempx = temp;
xaxis.push(temp);

temp = parseFloat(b);
tempy = temp;
yaxis.push(temp);

temp = parseInt(n);
tempnode = temp;
node.push(temp);
var ts = new timeStep(temptime,tempnode,tempx,tempy);
timeColl.push(ts);

}
}

	

var out = edgelist.join(" ").split(",");


var coorleft = [];
var coorright = [];
var newx = [];
var newy = [];
var otherx = [];
var othery = [];



for(var i =0; i < out.length; i++){ //Pass through the adj matrix, save the node numbers to corresponding arrays.
var cur = out[i];
var nox = cur.substr(cur.indexOf("(")+1,cur.indexOf("-"));//Number x, Number y
var noy = cur.substr(cur.indexOf("-")+1,cur.indexOf(")"));
var a = parseInt(nox);
coorleft.push(a);
var b = parseInt(noy);
coorright.push(b);
}


for(var i =0; i < coorleft.length; i++){ //Coorleft and Coorright should be same size.
var curlef = coorleft[i]; //Node number on left
var curright = coorright[i]; // Node number on right
newx.push(xaxis[curlef]);
newy.push(yaxis[curlef]);//1st Node position

otherx.push(xaxis[curright]);
othery.push(yaxis[curright]);//2nd Node position
//alert("LEFT: " + curlef + " RIGHT: " + curright);
//alert("Node " + coorleft[i] + " - x: " + newx[i] + " \n y: " + newy[i] + " \n\nNode " + coorright[i] + " = x:" + otherx[i] + "\ny: " + othery[i]);
}

coorleft = [];
coorright = [];

finalx = [];
finaly = [];

for(var i =0; i < newx.length; i++){
finalx.push(newx[i]);
finaly.push(newy[i]);
for(var j =0; j < otherx.length; j++){
finalx.push(otherx[i]);
finaly.push(othery[i]);
}
finalx.push('None');
finaly.push('None');
}

function adjustValue(vala, valb, valc, vald){

var trace1 = { //Link Relationship
x: vala,
y: valb,
type: ‘scatter’
};

var trace2 = { //Actual Plot
x: valc,
y: vald,
mode: ‘markers’
};

var data = [trace1, trace2];

Plotly.newPlot(TESTER, data);

}

adjustValue(finalx, finaly, xaxis, yaxis);

finalx = [];
finaly =[];
xaxis = [];
yaxis = [];
}

The code is not very legible, I can provide screenshots however.

4

A textfile is passed in composed of “timesteps” - a timestep is a collection of 33 node coordinates (x and y).

I want to iterate through the timesteps and give the impression that it is animated.

newplot.png1000×1000 96.8 KB

^ This is the 1st timestep.

5

newplot(1).png1000×1000 52.4 KB

^ This is the 1670th timestep, I want it to flow through them. I know how to manipulate the data, I just need a means of redrawing the plots without crashing. :slight_smile: