picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
scales: {
days: {
data: {
extract: { field: 'Day' }
}
},
hours: {
data: {
extract: { field: 'Hour' }
}
},
col: {
data: { field: 'Density' },
type: 'color',
range: ['#304D2A','#53763E','#7DA050','#AECC61','#E6F871', '#eee'].reverse(),
nice: true,
type: 'threshold-color'
}
},
components: [{
type: 'legend-cat',
dock: 'top',
scale: 'col'
},{
key: 'y-axis',
type: 'axis',
scale: 'days',
dock: 'left'
}, {
key: 'x-axis',
type: 'axis',
scale: 'hours',
dock: 'bottom'
}, {
key: 'p',
type: 'point',
data: {
extract: {
field: 'Hour',
props: {
d: { field: 'Density' },
group: { field: 'Day' }
}
}
},
settings: {
x: { scale: 'hours' },
y: { scale: 'days', ref: 'group' },
fill: { scale: 'col', ref: 'd' },
shape: 'square'
}
}]
}
})
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.
