Public
Edited
Apr 29, 2024
1 fork
_ = require('lodash')
datasets = require('vega-datasets@1')
movies = datasets['movies.json']() // load dataset
genres = _.chain(movies)
.map('Major_Genre')
.uniq()
.filter()
.sort()
.value()
viewof genreFilter = Inputs.select(["All", ...genres], {label: "Genre"})
chart = {
let moviesFiltered = movies;
if (genreFilter !== "All") {
moviesFiltered = moviesFiltered.filter(d => d.Major_Genre === genreFilter);
}
const brush = vl.selectInterval()
.encodings('x'); // limit selection to x-axis (year) values
// dynamic query histogram
const years = vl.markBar({width: 4})
.data(moviesFiltered)
.params(brush)
.encode(
vl.x().year('Release_Date').title('Films by Release Year'),
vl.y().count().title(null)
)
.width(600)
.height(50);
// ratings scatter plot
const ratings = vl.markCircle()
.data(moviesFiltered)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating'),
vl.tooltip().fieldN('Title'),
vl.opacity().if(brush, vl.value(0.75)).value(0.05)
)
.width(600)
.height(400);
return vl.vconcat(years, ratings).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.
