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.2
},
v: {
data: { fields: ['Measure', 'Target'] },
expand: 0.1,
min: 0,
max: 100
}
},
components: [{
type: 'axis',
dock: 'left',
scale: 'y'
},{
type: 'axis',
dock: 'bottom',
scale: 'v'
},
box({ start: 0, end: 1000, width: 0.8, fill: '#eee' }),
box({ start: 0, end: { field: 'Target', value: v => v * 0.8 }, width: 0.8, fill: '#ccc' }),
box({ start: 0, end: { field: 'Target', value: v => v * 0.6 }, width: 0.8, fill: '#aaa' }),
box({ start: 0, end: { field: 'Measure' }, width: 0.4, fill: '#111' }),
box({ start: { field: 'Target' }, end: { field: 'Target' }, width: 0.7, fill: '#111', minHeightPx: 3 })
]
}
})
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.
