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))
render({
mark: { type: 'circle' },
data: { values: movies },
encoding: {
x: { field: 'Rotten_Tomatoes_Rating', type: 'Q' },
y: { field: 'IMDB_Rating', type: 'Q' }
}
})
render({
mark: { type: 'circle' },
data: { values: movies },
encoding: {
x: { field: 'Rotten_Tomatoes_Rating', type: 'Q', bin: true },
y: { field: 'IMDB_Rating', type: 'Q' }
}
})
render({
mark: { type: 'circle' },
data: { values: movies },
encoding: {
x: { field: 'Rotten_Tomatoes_Rating', type: 'Q', bin: { maxbins: 20 } },
y: { field: 'IMDB_Rating', type: 'Q' }
}
})
render({
mark: { type: 'circle' },
data: { values: movies },
encoding: {
x: { field: 'Rotten_Tomatoes_Rating', type: 'Q', bin: { maxbins: 20 } },
y: { aggregate: 'count' }
}
})
render({
mark: { type: 'bar' },
data: { values: movies },
encoding: {
x: { field: 'Rotten_Tomatoes_Rating', type: 'Q', bin: { maxbins: 20 } },
y: { aggregate: 'count' }
}
})
render({
mark: { type: 'bar' },
data: { values: movies },
encoding: {
x: { field: 'IMDB_Rating', type: 'Q', bin: { maxbins: 20 } },
y: { aggregate: 'count' }
}
})
render({
mark: { type: 'circle' },
data: { values: movies },
encoding: {
x: { field: 'Rotten_Tomatoes_Rating', type: 'Q', bin: { maxbins: 20 } },
y: { field: 'IMDB_Rating', type: 'Q', bin: { maxbins: 20 } }
}
})
render({
mark: { type: 'circle' },
data: { values: movies },
encoding: {
x: { field: 'Rotten_Tomatoes_Rating', type: 'Q', bin: { maxbins: 20 } },
y: { field: 'IMDB_Rating', type: 'Q', bin: { maxbins: 20 } },
size: { aggregate: 'count' }
}
})
render({
mark: { type: 'bar' },
data: { values: movies },
encoding: {
x: { field: 'Rotten_Tomatoes_Rating', type: 'Q', bin: { maxbins: 20 } },
y: { field: 'IMDB_Rating', type: 'Q', bin: { maxbins: 20 } },
color: { aggregate: 'count' }
}
})
render({
mark: { type: 'bar' },
data: { values: movies },
encoding: {
x: { aggregate: 'average', field: 'Rotten_Tomatoes_Rating' },
y: { field: 'Major_Genre', type: 'N' }
}
})
render({
mark: { type: 'bar' },
data: { values: movies },
encoding: {
x: { aggregate: 'average', field: 'Rotten_Tomatoes_Rating' },
y: {
field: 'Major_Genre', type: 'N',
sort: { op: 'average', field: 'Rotten_Tomatoes_Rating', order: 'descending' }
}
}
})
render({
mark: { type: 'bar' },
data: { values: movies },
encoding: {
x: { aggregate: 'median', field: 'Rotten_Tomatoes_Rating' },
y: {
field: 'Major_Genre', type: 'N',
sort: { op: 'median', field: 'Rotten_Tomatoes_Rating', order: 'descending' }
}
}
})
render({
mark: { type: 'bar' },
data: { values: movies },
encoding: {
x: { aggregate: 'q1', field: 'Rotten_Tomatoes_Rating' },
x2: { aggregate: 'q3', field: 'Rotten_Tomatoes_Rating' },
y: {
field: 'Major_Genre', type: 'N',
sort: { op: 'median', field: 'Rotten_Tomatoes_Rating', order: 'descending' }
}
}
})
render({
mark: { type: 'area' },
data: { values: movies },
encoding: {
x: { timeUnit: 'month', field: 'Release_Date' },
y: { aggregate: 'median', field: 'US_Gross' }
}
})
render({
mark: { type: 'area' },
data: { values: movies },
encoding: {
x: { timeUnit: 'month', field: 'Release_Date' },
y: { aggregate: 'median', field: 'Worldwide_Gross' }
}
})
render({
mark: { type: 'area' },
data: { values: movies },
transform: [
{ calculate: 'datum.Worldwide_Gross - datum.US_Gross', as: 'NonUS_Gross' }
],
encoding: {
x: { timeUnit: 'month', field: 'Release_Date' },
y: { aggregate: 'median', field: 'NonUS_Gross' }
}
})
render({
mark: { type: 'circle' },
data: { values: movies },
transform: [
{ filter: 'datum.Major_Genre == "Romantic Comedy"' }
],
encoding: {
x: { field: 'Rotten_Tomatoes_Rating', type: 'Q' },
y: { aggregate: 'median', field: 'IMDB_Rating' }
}
})
render({
mark: { type: 'circle' },
data: { values: movies },
transform: [
{ filter: 'year(datum.Release_Date) < 1970' }
],
encoding: {
x: { field: 'Rotten_Tomatoes_Rating', type: 'Q' },
y: { field: 'IMDB_Rating', type: 'Q' }
}
})
render({
mark: { type: 'bar' },
data: { values: movies },
transform: [
{
aggregate: [
{ op: 'average', field: 'Rotten_Tomatoes_Rating', as: 'Average_Rating' }
],
groupby: ['Major_Genre']
}
],
encoding: {
x: { field: 'Average_Rating', type: 'Q' },
y: {
field: 'Major_Genre', type: 'N',
sort: { field: 'Average_Rating', order: 'descending' }
}
}
})
render({
mark: { type: 'bar' },
data: { values: movies },
transform: [
{ filter: 'datum.Director != null' },
{
aggregate: [{ op: 'sum', field: 'Worldwide_Gross', as: 'Gross' }],
groupby: ['Director']
},
{
window: [{ op: 'rank', as: 'Rank' }],
sort: [{ field: 'Gross', order: 'descending' }]
},
{ filter: 'datum.Rank < 20' }
],
encoding: {
x: { field: 'Gross', type: 'Q' },
y: {
field: 'Director', type: 'N',
sort: { field: 'Gross', order: 'descending' }
}
}
})
render({
mark: { type: 'line', interpolate: 'step-before' },
data: { values: movies },
transform: [
{ filter: 'datum.Running_Time_min != null' },
{
aggregate: [{ op: 'count', as: 'Count' }],
groupby: ['Running_Time_min']
},
{
window: [{ op: 'sum', field: 'Count', as: 'Cumulative_Sum' }],
sort: [{ field: 'Running_Time_min' }]
}
],
encoding: {
x: { field: 'Running_Time_min', type: 'Q', title: 'Duration (min)' },
y: { field: 'Cumulative_Sum', type: 'Q', title: 'Cumulative Count of Films' }
}
})
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.
