Public
Edited
Jan 27, 2021
1 fork
flights = flights_.derive({
delay: d => d.delay > 180? 180 : d.delay, // cap delay at 3 hours
time_: d => op.parse_date(d.date)
}).derive({
time: d => op.hours(d.time_) + op.minutes(d.time_) / 60
});
{
const brush = vl.selectInterval().encodings('x').resolve('intersect'),
hist = vl.markBar().encode(
vl.x().fieldQ(vl.repeat('row')).bin({maxbins: 100}), // up to 100 bins, but no smaller than 1 unit
vl.y().count().title(null) // no y-axis title
);
return vl.layer(
hist.select(brush).encode(vl.color().value('lightgrey')),
hist.transform(vl.filter(brush))
)
.width(900).height(100)
.repeat({row: ['delay', 'distance', 'time']})
.data(flights)
.config({view: {stroke: null}}) // no outline
.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.
