30:Tb26,trajectoryPlot = { let cc = await corona.progression(); let div = DOM.element('div'); //div.style.height = "100%"; //debugger; div.id = 'trajectoryPlotId'; let traceCountry = (country = "China", color) => { let c = cc[country]; //debugger; return { type: 'scatter3d', name: country, z: c.active, //.map((x, i) => x / c.confirmed[i]), y: c.deaths, x: c.recovered, //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('China', 'red'), traceCountry('US', 'blue'), traceCountry('India', 'pink'), traceCountry('Korea South', 'green'), traceCountry('Japan', 'purple'), traceCountry('Italy', 'orange'), traceCountry('Germany', 'brown'), 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
(to stop animation and rotate manually, hover figure with pointer and click home)`, height:600, width:800, scene: { xaxis: { title: 'Recovered', type: 'log', autorange: true }, yaxis: { title: 'Deaths', type: 'log', autorange: true }, zaxis: { title: 'Active', 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 / 180); //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; }31:[] 2e:{"title":"Web Data Commons, a COVID-19 Study","cells":[{"id":0,"value":"md`\n

Web Data Commons, a COVID-19 Study

Trajectory, full report @episphere/corona

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`\n

Data

\nSource data:\n
Dong, Ensheng, et al. “An Interactive Web-Based Dashboard to Track COVID-19 in Real Time.” The Lancet Infectious Diseases, Feb. 2020, doi:10.1016/S1473-3099(20)30120-1 [PMID:32087114].\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"progression = corona.progression()","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`\n

Methods

\nSupport javascript library maintained at github.com/episphere/corona.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"corona = require('https://episphere.github.io/corona/corona.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}