Public
Edited
Jun 16
1 fork
import {vl} from '@vega/vega-lite-api-v5'
airbnb.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
{
const selection = vl.selectPoint();
return vl.markCircle().data(airbnb).params(selection).encode(
vl.x().fieldQ('Review Scores Rating'),
vl.y().fieldQ('Price'),
vl.color().if(selection, vl.fieldQ('Beds')).value('grey'),
vl.opacity().if(selection, vl.value(0.9)).value(0.2)
).render()
}
{
const brush = vl.selectInterval().encodings('x');
const beds = vl.markBar({width: 10}).data(airbnb).params(brush).encode(
vl.x().fieldQ('Beds').title('Number of Beds').scale({domain: [1, 5]}).axis({tickMinStep: 1}),
vl.y().count().title(null),
vl.color().fieldQ('Beds').scale({domain: [1, 5]})
).height(50).width(700);
const mainGraph = vl.markCircle().data(airbnb).encode(
vl.x().fieldQ('Review Scores Rating').title('Review Rating'),
vl.y().fieldQ('Price').title('Price ($)'),
vl.color().fieldQ('Beds').scale({domain: [1, 5]}),
vl.opacity().if(brush, vl.value(1)).value(0.00),
vl.tooltip([
{field: 'Name', type: 'nominal'},
{field: 'Price', type: 'quantitative', format: '$,.2f'},
{field: 'Review Scores Rating', type: 'quantitative'},
{field: 'Property Type', type: 'nominal'}
])
).height(700).width(700)
return vl.vconcat(beds, mainGraph).title('NYC Airbnb listings by price, rating, and beds').spacing(5).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.
