// viewof hour = Inputs.range([0, 23], {label: "hour", step: 1,value:'hour'})
trajectoryPlot = {
let cc = await corona.progression();
let traj = traj_itemfor();
let div = DOM.element('div');
//div.style.height = "100%";
//debugger;
div.id = 'trajectoryPlotId';
let traceCountry = (country, color, label) => {
let c = traj[country];
// let index;
// if(hour*3600<c[3][0]){
// index=1;
// }
// else{
// for(var i=0;i<c[3].length;i++){
// if(hour*3600>=c[3][i])
// continue;
// else{
// index=i;
// break;
// }
// }}
//debugger;
return {
type: 'scatter3d',
name: country,
z: c[2].slice(0,200), //.map((x, i) => x / c.confirmed[i]),
y: c[1].slice(0,200),
x: c[0].slice(0,200),
//mode: 'markers',
marker: {
size: 3,
line: {
//color: 'rgba(217, 217, 217, 0.9)',
width: 0.5
},
color: color,
opacity: 0.2
}
};
};
//debugger;
Plotly.plot(
div,
[
traceCountry('17140', 'red', 1),
// traceCountry('17140', 'blue',2),
// traceCountry('India', 'pink',3),
// traceCountry('Korea South', 'green',4),
// traceCountry('Japan', 'purple',5),
// traceCountry('Italy', 'orange',6),
// traceCountry('Germany', 'brown',7),
// traceCountry('France', 'cyan'),
// traceCountry('Spain', 'gold'),
// traceCountry('Portugal', 'lime'),
// traceCountry('United Kingdom', 'black'),
// //traceCountry('Netherlands', 'gray'),
// traceCountry('Brazil', 'magenta'),
// traceCountry('Nigeria', 'olive'),
// traceCountry('Egypt', 'plum')
],
{
title: `Progression trajectory, raw data<br><span style="font-size:x-small">(to stop animation and rotate manually, hover figure with pointer and click home)</span>`,
height:600,
width:800,
scene: {
xaxis: {
title: 'x',
type: 'log',
autorange: true
},
yaxis: {
title: 'y',
type: 'log',
autorange: true
},
zaxis: {
title: 'floor',
type: 'log',
autorange: true
},
//id: 'trajectoryScene'
camera: {
center: { x: -0.2, y: -0.2, z: -0.2 },
eye: { x: 1.5, y: 1.5, z: 1 }
}
}
}
);
//console.log('scene div', div.querySelector('#scene'));
setTimeout(function() {
console.log('plotly:', Plotly);
function run() {
rotate('scene', Math.PI / 360);
//rotate('scene2', -Math.PI / 180);
requestAnimationFrame(run);
}
run();
function rotate(id, angle) {
var eye0 = div.layout[id].camera.eye;
var rtz = xyz2rtz(eye0);
rtz.t += angle;
var eye1 = rtz2xyz(rtz);
Plotly.relayout(div, id + '.camera.eye', eye1);
}
function xyz2rtz(xyz) {
return {
r: Math.sqrt(xyz.x * xyz.x + xyz.y * xyz.y),
t: Math.atan2(xyz.y, xyz.x),
z: xyz.z
};
}
function rtz2xyz(rtz) {
return {
x: rtz.r * Math.cos(rtz.t),
y: rtz.r * Math.sin(rtz.t),
z: rtz.z
};
}
//corona.rotate3D(div);
}, 1000);
return div;
}
cc = await corona.progression();
corona = require('https://episphere.github.io/corona/corona.js')
traj_data = d3.csvParse(await FileAttachment("cluster_center_day1.csv").text(), d3.autoType)
function traj_itemfor(){
var x=[];
var y=[];
var z=[];
var t=[];
var label=[];
for(var i =0;i<traj_data.length;i++){
x.push(traj_data[i].x);
y.push(traj_data[i].y);
z.push(traj_data[i].z);
t.push(traj_data[i].t);
label.push(traj_data[i].label);
}
return {'17140':[x,y,z,t,label]};
}
datas=traj_itemfor()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
