md`# Transitions Over Time`
allTransitionsOverTime(ipfsTransitions.slice(ipfsTransitions.length / 2), 'IPFS Transitions Over Time')
allTransitionsOverTime(filecoinTransitions, 'Filecoin Transitions Over Time')
allTransitionsOverTime = (transitions, title) => {
const container = html`<canvas></canvas>`
const getColor = label => colorMap[label]
const fromLabels = ['First Time', 'Low-Value', 'High-Value', 'Inactive']
const flows = {
'First Time': ['Bounced', 'New Low-Value', 'New High-Value', ],
'Low-Value': ['Low-Value', 'Lapsed Low-Value', 'Low to High-Value', ],
'High-Value': ['High to Low-Value', 'Lapsed High-Value', 'High-Value'],
'Inactive': ['Reactivated Low-Value', 'Reactivated High-Value'],
}
const labels = transitions.map(d => dateDiffToHuman(d.date));
const data = {
labels,
datasets: Object.entries(flows).map((entry, index) => entry[1].map((label, index) => ({
type: 'bar',
label: `${label}`,
stack: entry[0],
data: transitions.map(s => s.transitions[label]),
fill: true,
backgroundColor: getColor(label)
}))).flat()
}
const options = {
legend: { align: 'start', position: 'right'},
title: { display: true, text: title },
scales: {
xAxes: [{stacked: true}],
yAxes: [{stacked: true}]
}
}
const type = 'bar'
const myChart = new Chart(container, {type, options, data})
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' : d3.color(color.red).darker().hex(),
'Lapsed Low-Value': color.red,
'Lapsed High-Value': d3.color(color.red).brighter().hex(),
'High to Low-Value': d3.color(color.yellow).brighter(0.5).hex(),
'Low-Value': d3.color(color.yellow).darker(0.25).hex(),
'New Low-Value': color.yellow,
'Reactivated Low-Value': d3.color(color.yellow).brighter(0.25).hex(),
'High-Value': d3.color(color.green).darker(0.25).hex(),
'Low to High-Value': d3.color(color.green).brighter(0.75).hex(),
'New High-Value': d3.color(color.green).brighter(0.12).hex(),
'Reactivated High-Value': d3.color(color.green).brighter(1.7).hex(),
'Inactive': color.red
})
d3 = require("d3-color@2", "d3-scale-chromatic@2")
ipfsTransitions = (await fetch(`${ipfsGetTransitionsUrl}?start_date=${startDate}`)).json()
filecoinTransitions = (await fetch(`${filecoinGetTransitionsUrl}?start_date=${startDate}`)).json()
ipfsStates = (await fetch(`${ipfsGetStatesUrl}?start_date=${startDate}`)).json()
filecoinStates = (await fetch(`${filecoinGetStatesUrl}?start_date=${startDate}`)).json()
Chart = require('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js')
import { dateDiffToHuman } from '@protocol/utils'
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.
