Public
Edited
Feb 13, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
hollywood = aq.loadCSV("https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2023/2023-02-14/age_gaps.csv")
Insert cell
hollywood.view(5)
Insert cell
viewof counts = hollywood
.groupby({ age_difference: aq.bin('age_difference', { maxbins: 15 }) })
.count()
.view(10)
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(data)
.params(brush)
.encode(
vl.x().fieldQ('age_difference').title('Age Difference'),
vl.y().count().title(null)
)
.width(600)
.height(50);
// ratings scatter plot
const age = vl.markCircle()
.data(data)
.encode(
vl.x().fieldQ('actor_2_age'),
vl.y().fieldQ('actor_1_age'),
vl.size().fieldQ('age_difference'),
vl.color().count().fieldN('director'),
vl.tooltip().fieldN('movie_name'),
vl.opacity().if(brush, vl.value(0.75)).value(0.05)
)
.width(600)
.height(400);

return vl.vconcat(years, age).spacing(5).render();
}
Insert cell
Insert cell
import {aq, op} from "@uwdata/arquero"
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