winsMetascores = _.map(data, d => {
// Won 2 Oscars. Another 22 wins & 57 nominations.
let wins = d.Awards.match(/(\d+) win/);
wins = wins ? wins[1] : 0;
console.log(wins)
return {
wins: +wins,
score: +d.Metascore,
title: d.Title
}
})
vegalite({
data: {values: winsMetascores},
mark: 'point',
encoding: {
x: {type: 'quantitative', field: 'score'},
y: {type: 'quantitative', field: 'wins'}
}
})
md `
- Outliers: most movies are clustered together, but there are some outliers with 200+ wins and almost 100% score -> what movies are they? What are their genres?
- Look at movies that have > 80% or only movies that have < 70%
`
yearScoreGenre = _.map(data, d => {
return {
date: new Date(d.Released),
score: +d.Metascore,
genre: d.Genre ? d.Genre.split(', ')[0] : '',
}
})
vegalite({
width: 800,
data: {values: yearScoreGenre},
mark: 'line',
encoding: {
x: {type: 'temporal', field: 'date'},
y: {type: 'quantitative', field: 'score'},
color: {type: 'nominal', field: 'genre'},
}
})
monthGenrePopularity = _.map(data, d => {
return {
date: new Date(d.Released),
genre: d.Genre.split(', ')[0],
votes: +d.imdbVotes,
}
})
vegalite({
data: {values: monthGenrePopularity},
mark: 'rect',
encoding: {
x: {field: 'date', type: 'ordinal', timeUnit: 'month'},
y: {field: 'genre', type: 'nominal'},
color: {type: 'quantitative', aggregate: 'count', field: '*'}
}
})
vegalite({
data: {values: monthGenrePopularity},
mark: 'rect',
encoding: {
x: {field: 'date', type: 'ordinal', timeUnit: 'month'},
y: {field: 'genre', type: 'nominal'},
color: {type: 'quantitative', aggregate: 'median', field: 'votes'}
}
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
inflation = require('https://bundle.run/us-inflation@1.1.0')
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.
