Published
Edited
Dec 5, 2019
3 forks
1 star
{
const button = html`<button>Fullscreen`;
button.onclick = () => button.parentElement.nextElementSibling.requestFullscreen();
return button;
}
html`<div style="
background-color: #fff;
height: ${screen.height / screen.width * 100}vw;
grid-container: {
display: grid;
grid-template-areas:
'a a a a a'
'b b c c c';
grid-gap: 10px;
padding: 10px;
}
">
<h1>HORROR MOVIES</h2>
<div class="a">${viewof movieChart}</div>
<div class="b">${viewof awardChart}</div>
<div class="c">${viewof jump_rating}</div>
</div>`
viewof awardChart = VegaLite({
data:{values: movies},
transform: [
{filter: {field: "Genre", oneOf: genreSelection}}
],
repeat: {
column: ["Award_Won", "Award_Nom", "Oscar_Won", "Oscar_Nom"]
},
spec:{
width:150,
height:150,
mark: {type: "bar"},
selection: {
monthSelect: {fields: ["Month"], on: "click", type: "multi"}
},
encoding: {
y: { field: "Month", type: "ordinal", sort: ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"]},
x: {field: {repeat: "column"}, type: "quantitative"},
color: {
condition: {
selection: "monthSelect",
value: "darkred"
},
value: "lightgrey"
},
},
}
})
viewof movieChart = V({
data: {values: movies},
hconcat: [
{
width: 200,
height: 250,
selection: {
timeBrush: {type: "interval", encodings: ["x"]}},
transform: [
{filter: {selection: "genreSelect"}}
],
mark: {type: "line", strokeWidth: 1, point: true},
encoding: {
x: { field: "Year", type: "ordinal", title: "Year of Release"},
y: {aggregate: "count", field: "*", type: "quantitative", title: "Number of Movies"},
color: {value: "darkred"},
},
},
{
width: 350,
height: 250,
mark: "bar",
selection: {
genreSelect: {fields: ["Genre"], on: "click", type: "multi"}
},
transform: [
{filter: {selection: "timeBrush"}}
],
encoding: {
y: {field: "Genre", type: "nominal", axis: {title: "Genre of Movie"},
sort: {encoding: "x", order: "descending"}},
x: {aggregate: "count", field: "*", type: "nominal", axis: {title: "Number of Movies"}},
color: {
condition: {
selection: "genreSelect",
value: "darkred"
},
value: "lightgrey"
}
},
}
]
})
viewof jump_rating = V({
data: {values: movies},
transform: [
{filter: {field: "Genre", oneOf: genreSelection}}
],
hconcat: [{
width: 300,
height: 300,
selection: {
MPAArating: {
type: "multi", fields: ["MPAA Rating"], bind: "legend",
},
rating: {
type: "single",
fields: ["MPAA Rating"],
bind: {"input": "select", options: [null, "G", "M", "NC-17", "NR", "PG", "PG-13", "R", "TV-MA"]}
}
}
,
mark: {
type: "circle",
size:50
},
encoding: {
x:{field: "Jump Count", type: "quantitative"},
y:{field: "RT_Critic", type: "quantitative",axis: {title: "Rotton Tomatoes CRITICS Ratings"}},
color: {
field: "MPAA Rating", "type": "nominal",
},
opacity: {
condition: {"selection": "rating", "value": 1},
value: 0.05
},
tooltip: [
{field: "Movie Name", type: "nominal", title: "Movie"},
{field: "MPAA Rating", type: "nominal", title: "MPAA Rating"},
{field: "RT_Critic", type: "quantitative", title: "Rotten Tomatoes Critic Score"},
{field: "RT_Audience", type: "quantitative", title: "Rotten Tomatoes Audience Score"},
{field: "Jump Count", type: "quantitative", title: "Jump Count"}
],
}
},{
width: 300,
height: 300,
mark: {
type: "circle",
size:50
},
selection: {
MPAArating: {
type: "multi", fields: ["MPAA Rating"], bind: "legend"
}
},
encoding: {
x:{field: "Jump Count", type: "quantitative"},
y:{field: "RT_Audience", type: "quantitative",axis: {title: "Rotton Tomatoes AUDIENCE Ratings"}},
color: {
condition: {
selection: "MPAArating",
field: "MPAA Rating", type: "nominal"
},
},
opacity: {
condition: {"selection": "rating", "value": 1},
value: 0.05
},
tooltip: [
{field: "Movie Name", type: "nominal", title: "Movie"},
{field: "MPAA Rating", type: "nominal", title: "MPAA Rating"},
{field: "RT_Critic", type: "quantitative", title: "Rotten Tomatoes Critic Score"},
{field: "RT_Audience", type: "quantitative", title: "Rotten Tomatoes Audience Score"},
{field: "Jump Count", type: "quantitative", title: "Jump Count"}
],
}
}]
})
function isEmpty(obj) {
for (var prop in obj) {
return false;
}
return true;
}
movieChart.addSignalListener("genreSelect", function(name, value) {
if (value == null)
mutable type = null
else
mutable type = value.Genre
})
mutable type = null
genreSelection = {
if(isEmpty(type)){
return Array.from(new Set(movies.map(d => d.Genre)))
} else {
return type
}
}
movieChart.addSignalListener("timeBrush", function(name, value) {
if (value == null)
mutable type2 = null
else
mutable type2 = value
})
mutable type2 = null
yearSelection = {
if(isEmpty(type2)){
return Array.from(new Set(movies.map(d => d.Year)))
} else {
return type2
}
}
MPAAselect = {
if(isEmpty(type3)){
return Array.from(new Set(movies.map(d => d.rating)))
} else {
return [type3]
}
}
mutable type3 = null
jump_rating.addSignalListener("MPAArating", function(name, value) {
if (value == null)
mutable type3 = null
else
mutable type3 = value
})
awardChart.addSignalListener("monthSelect", function(name, value) {
if (value == null)
mutable type4 = null
else
mutable type4 = value.Month
})
mutable type4 = null
monthSelection = {
if(isEmpty(type4)){
return Array.from(new Set(movies.map(d => d.Month)))
} else {
return type4
}
}
moviesFiltered = movies.filter(d => genreSelection.includes(d.Genre))
.filter(d => monthSelection.includes(d.Month))
FilteredMovieSet = {
return new Object({features: moviesFiltered})
}
import {movies as movies} from '@nussyr3/horror-movies-dataset'
V = require("@observablehq/vega-lite@0.2")
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.
