happiness_ = happiness.derive({jitter: d => Math.random(156)})
happiness_.view()
{
const brush = vl.selectInterval().encodings('x').resolve('intersect'),
hist = vl.markBar().encode(
vl.x().fieldQ(vl.repeat('row')).bin({maxbins: 20}), // 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(500).height(100)
.repeat({row: ['GDP per capita', 'Social support','Generosity']})
.data(happiness)
.config({view: {stroke: null}}) // no outline
.render();
}
{
const line = base.markLine().encode(
vl.color().fieldN("Species"),
vl.detail().fieldN("index"),
vl.opacity().if(hover, vl.value(1)).value(0.3),
vl.y().fieldQ("norm_val").axis(null),
);
}
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.
