picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
collections: [{
key: 'd',
data: {
extract: {
field: 'Dim',
props: {
start: { field: 'Low' },
end: { field: 'High' }
}
}
}
}],
scales: {
y: {
data: { extract: { field: 'Dim' } }
},
v: {
data: { fields: ['Low', 'High'] },
expand: 0.1
}
},
components: [{
type: 'grid-line',
y: 'y'
},{
type: 'axis',
dock: 'left',
scale: 'y'
},{
type: 'axis',
dock: 'bottom',
scale: 'v'
},{
key: 'bars',
type: 'box',
data: {
collection: 'd'
},
settings: {
orientation: 'horizontal',
major: { scale: 'y' },
minor: { scale: 'v' },
box: {
width: 0.1,
fill: '#ccc'
}
}
}, {
type: 'point',
data: {
collection: 'd'
},
settings: {
x: { scale: 'v', ref: 'start' },
y: { scale: 'y' },
fill: '#fa0',
size: 0.8
}
}, {
type: 'point',
data: {
collection: 'd'
},
settings: {
x: { scale: 'v', ref: 'end' },
y: { scale: 'y' },
fill: '#bdf700',
size: 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.
