Public
Edited
Feb 14
Insert cell
Insert cell
Insert cell
movies = datasets["movies.json"]()
Insert cell
genres = uniqueValid(movies, (d) => d.Major_Genre)
Insert cell
mpaa = ["G", "PG", "PG-13", "R", "NC-17", "Not Rated"]
Insert cell
{
const brush = vl.selectInterval().encodings("x"); // limit selection to x-axis (year) values

// dynamic query histogram
const years = vl
.markBar({ width: 4 })
.data(movies)
.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(movies)
.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();
}
Insert cell
{
// point-value selection over [Major_Genre, MPAA_Rating] pairs
// use specific hard-wired values as the initial selected values
const selection = vl
.selectPoint("Select")
.fields("Major_Genre", "MPAA_Rating")
.init({ Major_Genre: "Drama", MPAA_Rating: "R" })
.bind({ Major_Genre: vl.menu(genres), MPAA_Rating: vl.radio(mpaa) });

// scatter plot, modify opacity based on selection
return vl
.markCircle()
.data(movies)
.params(selection)
.encode(
vl.x().fieldQ("Rotten_Tomatoes_Rating"),
vl.y().fieldQ("IMDB_Rating"),
vl.tooltip().fieldN("Title"),
vl.opacity().if(selection, vl.value(0.75)).value(0.05)
)
.render();
}
Insert cell
import {vl} from "@vega/vega-lite-api-v5"
Insert cell
import { uniqueValid } from "@uwdata/data-utilities"
Insert cell

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.
Learn more