Published
Edited
Mar 4, 2021
2 stars
apiUrl = `https://ipfs.ecosystem-dashboard.com/pmf/repo/transitions.json?start_date=${startDate}`
rawData = fetch(apiUrl).then(r => r.json())
Chart = require('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js')
demoChart = {
// the `html` template string function provided by Observable creates a DOM node.
const container = html`<canvas></canvas>`;
// the chart to draw. see also line, donut, scatter https://www.chartjs.org/docs/latest/charts/
const type = 'bar'
// the shape of the data expected by chart.js
// - `labels` defines the y axis by default.
// - `datasets` let's us provide multiple named arrays of values.
// - `lables.length` should equal each `datasets.data.length`
// - the data arrays define the values for the labels for a given dataset.
const data = {
labels: ['2021-01-04', '2021-01-11', '2021-01-18'],
datasets:[
{ label: 'Low-Value', backgroundColor: 'pink', data: [10, 20, 40] },
{ label: 'High-Value', backgroundColor: 'palegreen', data: [20, 50, 100] }
]
}
// chart.js config to move the legend and stack the datasets
// - https://www.chartjs.org/docs/latest/configuration/legend.html
// - https://www.chartjs.org/docs/latest/charts/bar.html
const options = {
legend: { align: 'start', position: 'right' },
scales: {
xAxes: [{stacked: true}],
yAxes: [{stacked: true}],
}
}
// Chart.js renders the chart to the `container` DOM node
const chart = new Chart(container, {type, data, options})
// we return the DOM node from this block, and Observable renders it.
return container
}
dateLabels = rawData.map(d => d.date)
highValueLabels = ['New High-Value', 'Reactivated High-Value', 'Low to High-Value']
highValueDatasets = highValueLabels.map(label => {
return {
label,
data: rawData.map(d => d.transitions[label])
}})
highValueChart = {
// the `html` template string function provided by Observable creates a DOM node.
const container = html`<canvas></canvas>`;
// the chart to draw. see also line, donut, scatter https://www.chartjs.org/docs/latest/charts/
const type = 'bar'
const data = {
labels: dateLabels,
datasets: highValueDatasets
}
const options = {
legend: { align: 'start', position: 'right' },
scales: {
xAxes: [{stacked: true}],
yAxes: [{stacked: true}]
}
}
// Chart.js renders the chart to the `container` DOM node
const chart = new Chart(container, {type, data, options})
// we return the DOM node from this block, and Observable renders it.
return container
}
d3 = require("d3-color@2")
d3.color('pink').brighter(2 * 0.3).hex()
colorfulHighValueDatasets = highValueLabels.map((label, index) => {
return {
label,
data: rawData.map(d => d.transitions[label]),
backgroundColor: d3.color('seagreen').brighter(index * 0.7).hex()
}})
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.
