filTransitionsChangesOnly = {
const getColor = label => colorMap[label]
const container = html`<canvas></canvas>`;
const myChart = new Chart(container, {
type: 'bar',
options: {
legend: { align: 'start', position: 'right' }
},
data: {
labels: ['8 weeks ago', '7 weeks ago', '6 weeks ago', '5 weeks ago', '4 weeks ago', '3 weeks ago', '2 weeks ago', 'Last week'],
datasets: Object.keys(filecoinData[0].transitions).map((label, index) => ({
label,
data: filecoinData.map(s => s.transitions[label]),
fill: false,
backgroundColor: getColor(label)
})).filter(d => !['Inactive', 'High-Value', 'Low-Value'].includes(d.label))
}
});
return container;
}
md`---
## notes and other experiments
`
ipfsTransitionsLogarithmic = {
const getColor = (index) => ["#f72585","#b5179e","#7209b7","#560bad","#480ca8","#3a0ca3","#3f37c9","#4361ee","#4895ef","#4cc9f0", '#ee6c4d', '#43aa8b', '#2b2d42'][index]
const container = html`<canvas></canvas>`;
const myChart = new Chart(container, {
type: 'bar',
options: {
scales: {
yAxes: [{ type: 'logarithmic' }]
}
},
data: {
labels: ['4 weeks ago', '3 weeks ago', '2 weeks ago', 'Last week'],
datasets: Object.keys(ipfsData[0].transitions).map((label, index) => ({
label,
data: ipfsData.map(s => s.transitions[label]),
fill: false,
backgroundColor: getColor(index)
}))
}
});
return container;
}
ipfsTransitionsNoInactive = {
const getColor = (index) => ["#f72585","#b5179e","#7209b7","#560bad","#480ca8","#3a0ca3","#3f37c9","#4361ee","#4895ef","#4cc9f0", '#ee6c4d', '#43aa8b', '#2b2d42'][index]
const container = html`<canvas></canvas>`;
const myChart = new Chart(container, {
type: 'bar',
data: {
labels: ['4 weeks ago', '3 weeks ago', '2 weeks ago', 'Last week'],
datasets: Object.keys(ipfsData[0].transitions).map((label, index) => ({
label,
data: ipfsData.map(s => s.transitions[label]),
fill: false,
backgroundColor: getColor(index)
})).filter(d => d.label !== 'Inactive')
}
});
return container;
}
color = ({
red: d3.schemeTableau10[2],
orange: d3.schemeTableau10[1],
green: d3.schemeTableau10[4],
teal: d3.schemeTableau10[3],
blue: d3.schemeTableau10[0],
grey: d3.schemeTableau10[9],
yellow: d3.schemeTableau10[5]
})
colorMap = ({
'First Time': color.blue,
'Bounced' : color.red,
'Lapsed High-Value': d3.color(color.red).darker().hex(),
'Lapsed Low-Value': d3.color(color.red).brighter().hex(),
'High to Low-Value': color.yellow,
'Low-Value': color.yellow,
'New Low-Value': color.yellow,
'Reactivated Low-Value': color.yellow,
'High-Value': color.green,
'Low to High-Value': color.green,
'New High-Value': color.green,
'Reactivated High-Value': color.green,
})
filTransitionsChangesOnlyCircle = {
const getColor = label => colorMap[label]
const container = html`<canvas></canvas>`;
const myChart = new Chart(container, {
type: 'doughnut',
options: {
legend: { align: 'start', position: 'right' }
},
data: {
datasets: [{
data: Object.entries(filecoinData[filecoinData.length - 1].transitions).filter(x => x[0] !== 'Inactive').map(x => x[1]),
backgroundColor: Object.values(colorMap),
borderColor: 'black',
}],
labels: Object.keys(filecoinData[filecoinData.length - 1].transitions).filter(x => x !== 'Inactive'),
}
});
return container;
}
d3 = require("d3-color@2", "d3-scale-chromatic@2")
startDate = new Date((new Date()).setDate(new Date().getDate() - (7 * 9)))
ipfsData = (await fetch(`${ipfsGetTransitionsUrl}?start_date=${startDate}`)).json()
filecoinData = (await fetch(`${filecoinGetTransitionsUrl}?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.
