picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
scales: {
y: {
data: { extract: { field: 'Category' } }
},
t: {
data: { fields: ['Started', 'Ended'] },
expand: 0.1
}
},
components: [{
type: 'grid-line',
x: 't'
},{
type: 'axis',
dock: 'left',
scale: 'y'
},{
type: 'axis',
dock: 'bottom',
scale: 't',
formatter: {
type: 'd3-time',
format: '%Y-%m'
}
},{
key: 'bars',
type: 'box',
data: {
extract: {
field: 'Category',
props: {
start: { field: 'Started' },
end: { field: 'Ended' }
}
}
},
settings: {
orientation: 'horizontal',
major: { scale: 'y' },
minor: { scale: 't' },
box: {
width: 0.8
}
}
}, {
type: 'labels',
displayOrder: 2,
settings: {
sources: [{
component: 'bars',
selector: 'rect',
strategy: {
type: 'bar',
settings: {
direction: 'right',
labels: [{
placements: [{
position: 'outside'
}],
label: node => `${Math.round((node.data.end.value - node.data.start.value) / 864e5)} days`
}]
}
}
}]
}
}]
}
})
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.
