data = {
var arr = [
['Year', 'Sales'],
[new Date(2019, 0, 0).valueOf(), 0]
];
for (let i = 0; i < 2000; i++) {
arr.push([
arr[arr.length - 1][0] + 1000,
arr[arr.length - 1][1] - 2 + 4 * Math.random(),
]);
}
while(true) {
arr.splice(1, 1);
arr.push([
arr[arr.length - 1][0] + 1000,
arr[arr.length - 1][1] - 2 + 4 * Math.random(),
]);
//await Promises.delay(1000)
yield [{
type: 'matrix',
data: arr
}];
}
return [{
type: 'matrix',
data: arr
}];
}
pic = picasso.chart({
element: document.querySelector('#container'),
settings: {
scales: {
y: {
data: { field: 'Sales' },
invert: true,
expand: 0.2
},
t: { data: { extract: { field: 'Year' } } }
},
components: [{
type: 'axis',
key: 'y-axis',
dock: 'left',
scale: 'y',
formatter: {
type: 'd3-number',
format: '$,.1r'
},
},{
type: 'axis',
key: 'x-axis',
dock: 'bottom',
scale: 't',
formatter: {
type: 'd3-time',
format: '%H:%M:%S'
}
}, {
type: 'line',
key: 'lines',
data: {
extract: {
field: 'Year',
props: {
v: { field: 'Sales' }
}
}
},
settings: {
coordinates: {
major: { scale: 't' },
minor: { scale: 'y', ref: 'v' }
},
layers: {
curve: 'monotone',
line: {}
}
}
}]
}
})
pic.update({ data });
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.
