Public
Edited
May 2
{
const zoom = vl.selectInterval()
.encodings('x')
.bind('scales')
.name('zoom');
const area = vl.markArea({interpolate: 'monotone'}, {opacity: 0.7})
.params(zoom)
.encode(
vl.x().fieldT('date'),
vl.y().fieldQ('temp_min'),
vl.y2().fieldQ('temp_max'),
vl.color().fieldN('city')
)
.width(900)
.height(100);
const scatterplot = vl.markCircle({ size: 30 })
.transform(
vl.filter(zoom)
)
.encode(
vl.x().fieldQ('wind_avg').title("Average wind speed (mph)"),
vl.y().fieldQ('precipitation'),
vl.color().fieldN('city')
)
.width(300)
.height(200)
.facet({ column: vl.field('city') })
.params(zoom);
return vl.vconcat(scatterplot, area)
.data(weather)
.render();
}
// Create the interval selection (brush)
{
const brush = vl.selectInterval()
.encodings('x')
.name('brush');
// Detail chart: daily data
const detail = vl.markArea({ color: 'forestgreen' }, { interpolate: 'monotone'})
.encode(
vl.x().fieldT('date')
.timeUnit('month')
.title('Date')
.scale({ domain: { param: 'brush' } }), // link to brush to the domain
vl.y().fieldQ('precipitation')
.aggregate('average')
.title('Precipitation (cm)')
)
.height(200)
.width(700);
// Overview chart: monthly averages
const overview = vl.markArea({ color: 'forestgreen' }, {interpolate: 'monotone'})
.params(brush) // attach brush
.encode(
vl.x().fieldT('date')
.timeUnit('month')
.title('Month'),
vl.y().fieldQ('precipitation')
.aggregate('average')
.title('Average Precipitation (cm)')
)
.height(60)
.width(700);
// Combine the charts vertically
return vl.vconcat(detail, overview)
.data(weather)
.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.
