Published
Edited
Jan 31, 2021
sp500 = aq.fromCSV(await FileAttachment("sp500.csv").text())
{
/* Define behavior of hover and click selections */
const hover = vl.selectSingle()
.on('mouseover') // select on mouseover
.nearest(true) // select nearest point to mouse cursor
.empty('none'); // empty selection should match nothing
const click = vl.selectMulti()
.empty('none'); // empty selection matches no points
/* Define encodings for full and filtered data */
const all_points = vl.markCircle().encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating')
)
const filter = vl.filter(vl.or(hover, click)),
subset_points = all_points.transform(filter);
// mark properties for new layers
const halo = {size: 100, stroke: 'firebrick', strokeWidth: 3},
label = {dx: 4, dy: -8, align: 'right'},
white = {stroke: 'white', strokeWidth: 2};
// layer scatter plot points, halo annotations, and title labels
return vl.data(movies)
.layer(
all_points.select(hover, click),
subset_points.markPoint(halo),
subset_points.markText(label, white).encode(vl.text().fieldN('Title')),
subset_points.markText(label).encode(vl.text().fieldN('Title'))
)
.width(600)
.height(450)
.render();
}
{
const selector = vl.selectInterval().encodings('x');
const x = vl.x().fieldT('date').title(null);
// reusable time series encoding
const base = vl.markArea()
.encode(x, vl.y().fieldQ('price'))
.width(700);
const overview = base.select(selector).height(60);
const detail = base.encode(
x.scale({domain: selector})
);
// return layered view
return vl.vconcat(detail, overview)
.data(sp500)
.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.
