{
picasso.formatter.remove('abs');
picasso.formatter('abs', () => {
const f = v => Math.abs(v);
return f;
});
picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
scales: {
reg: {
data: { extract: { field: 'Age' } },
invert: true
},
pop: {
data: { fields: ['Male', 'Female'] },
min: ({ data }) => -Math.max(...data.fields.map(f => f.max())) * 1.3,
expand: 0.3
},
c: {
data: [0, 1],
type: 'categorical-color'
}
},
components: [
{
type: 'axis',
dock: 'bottom',
scale: 'pop',
formatter: {
type: 'abs'
}
},
{
type: 'axis',
dock: 'left',
scale: 'reg'
},
{
key: 'bars',
type: 'box',
data: {
extract: [
{
field: 'Age',
props: {
idx: 0,
start: 0,
end: { field: 'Male' }
}
},
{
field: 'Age',
props: {
idx: 1,
start: 0,
end: { field: 'Female' }
}
}
]
},
settings: {
orientation: 'horizontal',
major: { scale: 'reg' },
minor: {
start: d => d.resources.scale('pop')(0),
end: d =>
d.resources.scale('pop')(
d.datum.end.value * (d.datum.idx.value === 1 ? -1 : 1)
)
},
box: {
width: 0.7,
fill(d) {
return d.resources.scale('c')(d.datum.idx.value);
}
}
}
}
]
}
});
}
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.
