data = {
var arr = [['Year', 'Sales', 'Budget']];
var rows = 6;
for (var i = 0; i < rows; i++) {
arr.push([String(2010 + i), Math.random(), i]);
}
return [
{
type: 'matrix',
data: arr
}
];
}
picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
scales: {
c: { data: { extract: { field: 'Year' } }, type: 'color' },
radius: { data: { field: 'Budget' } }
},
components: [
{
key: 'p',
type: 'pie',
data: {
extract: {
field: 'Year',
props: {
num: { field: 'Sales' },
rad: { field: 'Budget' }
}
}
},
settings: {
padAngle: 0.01,
slice: {
innerRadius: 0.1,
outerRadius(d) {
return 0.4 + 0.6 * d.resources.scale('radius')(d.datum.rad.value);
},
arc: { ref: 'num' },
fill: { scale: 'c' },
strokeWidth: 1,
stroke: 'rgba(255, 255, 255, 0.5)'
}
}
},
{
type: 'labels',
settings: {
sources: [
{
component: 'p',
selector: 'path',
strategy: {
type: 'slice',
settings: {
direction: 'horizontal',
labels: [
{
label: d => d.data.label,
fill: '#444',
placements: [{ position: 'into' }]
}
]
}
}
}
]
}
}
]
}
})
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.
