{
// create one interval brush for each histogram
const brushDelay = vl.selectInterval('delay').encodings('x');
const brushDist = vl.selectInterval('dist').encodings('x');
const brushTime = vl.selectInterval('time').encodings('x');
// function that creates a histogram visualization
function hist(field, brush, crossfilter) {
// binned x-axis encoding
const x = vl.x()
.fieldQ(field)
.bin({maxbins: 100, minstep: 1}).stack(false)
.axis({title: field, titleAnchor: 'start', format: 'd'});
return vl.layer(
// transparent base layer with unfiltered data
vl.markBar().select(brush)
.encode(x, vl.detail().count(), vl.color().value('transparent')),
// cross-filtered histogram bars
vl.markBar().transform(vl.filter(crossfilter))
.encode(x, vl.y().count().axis(null))
)
.width(width - 10)
.height(100);
}
// vconcat three cross-filtered histograms
return vl.vconcat(
hist('delay', brushDelay, vl.and(brushDist, brushTime)),
hist('distance', brushDist, vl.and(brushDelay, brushTime)),
hist('time', brushTime, vl.and(brushDelay, brushDist))
)
.data('data/flights-10k.json')
.transform(vl.calculate('hours(datum.date) + minutes(datum.date) / 60').as('time'))
.config({view: {stroke: null}})
.render();
}
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.
