NCI/DCEG Chief Data Scientist
Published
Edited
Apr 9, 2021
md`# epiPlotly`
//require('https://episphere.github.io/plotly/epiPlotly.js')
//lala = require('http://localhost:8000/plotly/epiPlotly.js')
md`<epi-plotly>https://episphere.github.io/plot/demo1.json</epi-plotly>`
Plotly = require('https://cdn.plot.ly/plotly-latest.min.js')
{
class eP extends HTMLElement {
connectedCallback() {
if (this.textContent.length > 0) {
this.plotDataURL = this.textContent;
}
this.plotDataURL =
this.plotDataURL || 'https://episphere.github.io/plot/demo.json';
this.innerHTML = `<a href="${
this.plotDataURL
}" target="_blank" style="font-size:x-small">${
this.plotDataURL
}</a><span style="font-size:xx-small"><br>${Date().slice(0, 34)}</span>`;
let div = document.createElement('div');
this.appendChild(div);
fetch(this.plotDataURL)
.then(x => x.json())
.then(x => Plotly.newPlot(div, x.traces, x.layout));
}
}
customElements.define('epi-plotly', eP);
return eP;
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
{
let eP = DOM.element('epi-plotly');
eP.plotDataURL = 'https://episphere.github.io/plot/demo1.json';
return eP;
}
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.
