picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
collections: [{
key: 'd',
data: {
extract: {
field: 'Dim',
props: {
start: { field: 'Measure' },
end: { field: 'Target' }
}
}
}
}],
scales: {
y: {
data: { extract: { field: 'Dim' } },
padding: 0.1
},
v: {
data: { fields: ['Measure', 'Target'] },
expand: 0.1,
min: 0,
}
},
components: [{
type: 'axis',
dock: 'left',
scale: 'y'
},{
type: 'axis',
dock: 'bottom',
scale: 'v'
},
box({ id: 'bars', start: 0, end: { field: 'Measure' }, width: 0.5, fill: '#fa0' }),
box({ id: 'target', start: { field: 'Target' }, end: { field: 'Target' }, width: 1.0, fill: '#111', minHeightPx: 3 }),
labels({c: 'bars'}),
labels({c: 'target', position: 'opposite', align: 0, fontSize: 12, fill: '#666'})
]
}
})
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.
