Data visualization and analysis at the University of Washington, Seattle.
movies = (await require('vega-datasets@1'))['movies.json']()
md`${movies.length} rows, ${Object.keys(movies[0]).length} columns!`
printTable(movies.slice(0, 5))
vl.markCircle()
.data(movies)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating')
)
.render()
vl.markCircle()
.data(movies)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating').bin(true),
vl.y().fieldQ('IMDB_Rating')
)
.render()
vl.markCircle()
.data(movies)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating').bin({maxbins: 20}),
vl.y().fieldQ('IMDB_Rating')
)
.render()
vl.markCircle()
.data(movies)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating').bin({maxbins: 20}),
vl.y().count()
)
.render()
vl.markBar()
.data(movies)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating').bin({maxbins: 20}),
vl.y().count()
)
.render()
vl.markBar()
.data(movies)
.encode(
vl.x().fieldQ('IMDB_Rating').bin({maxbins: 20}),
vl.y().count()
)
.render()
vl.markCircle()
.data(movies)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating').bin({maxbins: 20}),
vl.y().fieldQ('IMDB_Rating').bin({maxbins: 20})
)
.render()
vl.markCircle()
.data(movies)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating').bin({maxbins: 20}),
vl.y().fieldQ('IMDB_Rating').bin({maxbins: 20}),
vl.size().count()
)
.render()
vl.markBar()
.data(movies)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating').bin({maxbins: 20}),
vl.y().fieldQ('IMDB_Rating').bin({maxbins: 20}),
vl.color().count()
)
.render()
vl.markBar()
.data(movies)
.encode(
vl.x().average('Rotten_Tomatoes_Rating'),
vl.y().fieldN('Major_Genre')
)
.render()
vl.markBar()
.data(movies)
.encode(
vl.x().average('Rotten_Tomatoes_Rating'),
vl.y().fieldN('Major_Genre')
.sort(vl.average('Rotten_Tomatoes_Rating').order('descending'))
)
.render()
vl.markBar()
.data(movies)
.encode(
vl.x().median('Rotten_Tomatoes_Rating'),
vl.y().fieldN('Major_Genre')
.sort(vl.median('Rotten_Tomatoes_Rating').order('descending'))
)
.render()
vl.markBar()
.data(movies)
.encode(
vl.x().q1('Rotten_Tomatoes_Rating'),
vl.x2().q3('Rotten_Tomatoes_Rating'),
vl.y().fieldN('Major_Genre').sort(vl.median('Rotten_Tomatoes_Rating').order('descending'))
)
.render()
vl.markArea()
.data(movies)
.encode(
vl.x().month('Release_Date'),
vl.y().median('US_Gross')
)
.render()
vl.markArea()
.data(movies)
.encode(
vl.x().month('Release_Date'),
vl.y().median('Worldwide_Gross')
)
.render()
vl.markArea()
.data(movies)
.transform(
vl.calculate('datum.Worldwide_Gross - datum.US_Gross').as('NonUS_Gross')
)
.encode(
vl.x().month('Release_Date'),
vl.y().median('NonUS_Gross')
)
.render()
vl.markCircle()
.data(movies)
.transform(
vl.filter('datum.Major_Genre == "Romantic Comedy"')
)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().median('IMDB_Rating')
)
.render()
vl.markCircle()
.data(movies)
.transform(
vl.filter('year(datum.Release_Date) < 1970')
)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating')
)
.render()
vl.markBar()
.data(movies)
.transform(
vl.groupby('Major_Genre')
.aggregate(vl.average('Rotten_Tomatoes_Rating').as('Average_Rating'))
)
.encode(
vl.x().fieldQ('Average_Rating'),
vl.y().fieldN('Major_Genre')
.sort(vl.field('Average_Rating').order('descending'))
)
.render()
vl.markBar()
.data(movies)
.transform(
vl.filter('datum.Director != null'),
vl.aggregate(vl.sum('Worldwide_Gross').as('Gross')).groupby('Director'),
vl.window(vl.rank().as('Rank')).sort(vl.field('Gross').order('descending')),
vl.filter('datum.Rank < 20')
)
.encode(
vl.x().fieldQ('Gross'),
vl.y().fieldN('Director').sort(vl.field('Gross').order('descending'))
)
.render()
vl.markLine({interpolate: 'step-before'})
.data(movies)
.transform(
vl.filter('datum.Running_Time_min != null'),
vl.groupby('Running_Time_min').aggregate(vl.count().as('Count')),
vl.window(vl.sum('Count').as('Cumulative_Sum')).sort(vl.field('Running_Time_min'))
)
.encode(
vl.x().fieldQ('Running_Time_min').title('Duration (min)'),
vl.y().fieldQ('Cumulative_Sum').title('Cumulative Count of Films')
)
.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.
