Published
Edited
Nov 26, 2019
picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
scales: {
y: {
data: {
extract: { field: 'Year' }
}
},
m: {
data: {
field: 'Margin'
},
expand: 0.1
},
s: {
data: {
field: 'Sales'
}
},
col: {
data: { extract: { field: 'Year' } },
type: 'color'
}
},
components: [
{
key: 'y-axis',
type: 'axis',
scale: 'y',
dock: 'left'
},
{
key: 'x-axis',
type: 'axis',
scale: 'm',
dock: 'bottom'
},
{
type: 'grid-line',
y: 'y'
},
{
key: 'p',
type: 'point',
data: {
extract: {
field: 'Month',
props: {
size: { field: 'Sales' },
x: { field: 'Margin' },
group: { field: 'Year' }
}
}
},
settings: {
x: { scale: 'm' },
y: { scale: 'y', ref: 'group' },
shape: 'circle',
size: { scale: 's' },
strokeWidth: 2,
stroke: '#fff',
opacity: 0.8,
fill: { scale: 'col', ref: 'group' }
}
},
{
key: 'pavg',
type: 'point',
data: {
extract: {
field: 'Year',
trackBy: v => v, // track by the Year value, e.g. 2011, 2012
reduce: 'first', // use the first value from each reduction, e.g. [2011, 2011, 2011] -> 2011
props: {
min: { field: 'Margin', reduce: 'min' }, // use min of collected values, e.g. [5, 3, 4] -> 3
avg: { field: 'Margin', reduce: 'avg' }
}
}
},
settings: {
x: { scale: 'm', ref: 'avg' },
y: { scale: 'y' },
shape: 'star',
size: 0.5,
strokeWidth: 0,
fill: 'rgba(100, 100, 100, 0.8)'
}
}
]
}
})
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.
