Published
Edited
Feb 28, 2021
airbnb = aq.fromCSV( await FileAttachment("airbnb@7.csv").text() )
neighbourhoods = airbnb.rollup({ nb: d => op.unique(d.neighbourhood) }).objects()[0]["nb"]
airbnb.view()
md`## Part (a)`
{
const map = vl.markCircle({size: 2})
.data(airbnb)
.encode(
vl.x().fieldQ('longitude').scale({zero: false}),
vl.y().fieldQ('latitude').scale({zero: false}),
vl.color().fieldN('room_type').scale({scheme: "set2"})
)
.height(400);
return map.render();
}
{
// dynamic query histogram
const prices = vl.markBar()
.encode(
vl.x().fieldQ('log_price'),
vl.y().count().title(null),
vl.color().fieldN('room_type').scale({scheme: "set2"})
)
.height(100);
// map scatter plot
const map = vl.markCircle({size: 2})
.encode(
vl.x().fieldQ('longitude').scale({zero: false}),
vl.y().fieldQ('latitude').scale({zero: false}),
vl.color().fieldN('room_type').scale({scheme: "set2"})
)
.height(400);
return vl.data(airbnb)
.vconcat(prices, map)
.render();
}
{
const brush = vl.selectInterval()
.encodings('x'); // limit selection to x-axis (year) values
// dynamic query histogram
const years = vl.markBar()
.select(brush)
.encode(
vl.x().fieldQ('log_price'),
vl.y().count().title(null),
vl.color().fieldN('room_type').scale({scheme: "set2"})
)
.height(100);
// ratings scatter plot
const ratings = vl.markCircle()
.encode(
vl.x().fieldQ('longitude').scale({zero: false}),
vl.y().fieldQ('latitude').scale({zero: false}),
vl.color().fieldN('room_type').scale({scheme: "set2"}),
vl.opacity().if(brush, vl.value(0.8)).value(0.2),
vl.size().if(brush, vl.value(10)).value(0.5)
)
.height(400);
return vl.data(airbnb)
.vconcat(years, ratings)
.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.
