Published
Edited
Feb 26, 2021
filecoinHighValueUsers = {
const data = filecoinData;
const title = 'Filecoin State over time';
const container = html`<canvas></canvas>`;
const getColor = (label) => {
return {
'first': 'lime',
'high': 'green',
'low': 'lightgreen',
}[label]
};
const labels = data.map((_, i) => `${data.length - i} week${i==data.length-1?'':'s'} ago`)
const myChart = new Chart(container, {
type: 'bar',
options: {
legend: { align: 'start', position: 'right' },
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
},
title: { display: true, text: title }
},
data: {
labels: labels,
datasets: ['high', 'low', 'first'].map((label, index) => ({
label,
data: data.map(s => s.states[label]),
fill: false,
backgroundColor: getColor(label)
}))
}
});
return container;
}
ipfsData = (await fetch(`${ipfsGetStatesUrl}?start_date=${startDate}`)).json()
filecoinData = (await fetch(`${filecoinGetStatesUrl}?start_date=${startDate}`)).json()
Chart = require('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js')
moment = require('moment')
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.
