30:Tb24,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:T5f2,progressionPlot = { let div = DOM.element('div'); let trace = (country, color) => { let xx = progression[country]; let period = 7; return { name: country, type: 'scatter', mode: 'lines+markers', marker: { color: color, size: 6, line: { //color: 'rgba(217, 217, 217, 0.9)', width: 0.5 } }, x: xx.deaths.slice(period), //.map((x, i) => x / xx.confirmed[i]), y: xx.confirmed .slice(period) .map((x, i) => Math.max(0, (100 * (x - xx.confirmed[i])) / x)), text: xx.times.slice(period) }; debugger; }; Plotly.newPlot( div, [ trace('China', 'red'), trace('US', 'blue'), trace('India', 'pink'), trace('Korea South', 'green'), trace('Japan', 'purple'), trace('Italy', 'orange'), trace('Germany', 'brown'), trace('France', 'cyan'), trace('Spain', 'gold'), trace('Portugal', 'lime'), trace('United Kingdom', 'black'), trace('Netherlands', 'gray'), trace('Brazil', 'magenta'), trace('Nigeria', 'olive'), trace('Egypt', 'plum') ], { xaxis: { title: 'deaths', type: 'log', range: [1, 4] }, yaxis: { title: '# weekly cases as % of total' //type: 'log' }, width:800, title: 'Infection progression
(move mouse-over series to see dates)' } ); return div; }32:[] 2e:{"title":"Web Data Commons, a COVID-19 Study","cells":[{"id":0,"value":"html`\n

Web Data Commons, a COVID-19 Study

For the full report go to @episphere/corona

Selected Figures:

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"progression = corona.progression()","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"$31","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":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":"$W32","stdlib":"1","titling":"auto"}