{
// timestamps
var xValues = [...Array(100).keys()].map(v => v / 50);
// track keys
var yValues = keys.filter(key => key.endsWith('_r'));
var zValues = [];
for (let y=0; y < yValues.length; y++) {
let row = [];
for (let x=0; x < xValues.length; x++) {
let rec = data.find(rec => rec[' timestamp'] === xValues[x]);
row.push(rec[yValues[y]]);
}
zValues.push(row);
}
var pltData = [{
x: xValues,
y: yValues,
z: zValues,
type: 'heatmap',
colorscale: 'Hot',
showscale: true
}];
var layout = {
title: 'Annotated Heatmap',
annotations: [],
xaxis: {
ticks: '',
side: 'top'
},
yaxis: {
ticks: '',
ticksuffix: ' ',
width: 700,
height: 700,
autosize: false
}
};
for ( var i = 0; i < yValues.length; i++ ) {
for ( var j = 0; j < xValues.length; j++ ) {
var currentValue = zValues[i][j];
if (currentValue != 0.0) {
var textColor = 'white';
}else{
var textColor = 'black';
}
var result = {
xref: 'x1',
yref: 'y1',
x: xValues[j],
y: yValues[i],
text: '',
font: {
family: 'Arial',
size: 12,
color: 'rgb(50, 171, 96)'
},
showarrow: false,
font: {
color: textColor
}
};
layout.annotations.push(result);
}
}
let div = DOM.element('div');
plt.newPlot(div, pltData, layout, {scrollZoom: true});
return div;
}
printTable(data.slice(0, 5))
data = frames.map(
function(f) {
let new_obj = {};
keys.forEach(function(k) {
new_obj[k] = +f[k] ;
})
return new_obj;
});
plt = require("https://cdn.plot.ly/plotly-latest.min.js")
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.
