data = {
const arr = [
['Type', 'Value', 'Goal'],
['Move', 400, 600],
['Exercise', 13, 30],
['Stand', 7, 12]
];
return arr;
}
arc = (data, index, color, background) => ({
key: background ? `back-${index}` : `arc-${index}`,
type: 'pie',
data,
settings: {
slice: {
cornerRadius: 10,
outerRadius: 0.95 - index * 0.2,
innerRadius: 0.95 - (index + 0.9) * 0.2,
fill: (v, i) => (i ? 'transparent' : color),
strokeWidth: 0,
opacity: background ? 0.2 : 1
}
}
})
picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
components: [
...data
.slice(type === '-1' ? 1 : 1 + +type, type === '-1' ? 4 : 2 + +type)
.map((row, i, a) => [
arc([1], i, colors[row[0]], true),
arc([row[1], row[2] - row[1]], i, colors[row[0]])
])
.reduce((a, v) => a.concat(v), []),
type === '-1' ? false : label()
].filter(Boolean)
}
})
label = () => ({
type: 'labels',
layout: {
displayOrder: 2
},
settings: {
sources: [
{
component: 'back-0',
selector: 'path',
strategy: {
type: 'rows',
settings: {
fontFamily: 'Helvetica',
fill: '#fff',
justify: 0.5,
align: 0.5,
labels: [
{
fontSize: 64,
label: () => data[1 + +type][1]
},
{
fontSize: 24,
label: () =>
`of ${data[1 + +type][2]} ${
units[data[1 + +type][0]]
}`.toUpperCase()
}
]
}
}
}
]
}
})
colors = ({ Move: '#f93885', Exercise: '#d8ff00', Stand: '#02ffa9' })
units=({ Move: 'Cals', Exercise: 'Mins', Stand: 'Hours' })
import { radio } from "@jashkenas/inputs"
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.
