// html`<div style="
// background: #fff;
// display: grid;
// padding: 30px;
// height: ${screen.height / screen.width * 180}vw;
// grid-template-areas:
// 'a a'
// 'd d'
// 'c c'
// 'b b';
// ">
// <div name="a" style=
// "grid-area:a;
// position: absolute;
// top: 5px;
// left: 5px;
// padding-bottom: 50px;
// text-align: left">
// ${viewof movieChart}
// </div>
// <div name="b" style=
// "grid-area:b;
// position: absolute;
// left: 500px;
// bottom: 0px;
// text-align: center">
// ${viewof awardsChart}
// </div>
// <div name="c" style=
// "grid-area:c;
// position: absolute;
// top: 10px;
// right: 5px;
// bottom: 10px;
// overflow-x: scroll;
// background-color: darkred;
// color: white;
// max-width: 300px";
// max-height: 200px">
// ${viewof table}
// </div>
// <div name="d" style=
// "grid-area:d;
// position: absolute;
// bottom: 30px;
// left: 5px;
// padding-bottom: 160px;
// text-align: center">
// ${viewof jump_rating}
// </div>
// </div>`
viewof awardsChart = VegaLite({
data: {values: movies},
hconcat: [{
layer: [
{ // first visualization - stroke
mark: {
type: "bar",
filled: false,
stroke: "darkred",
height: 16,
},
width: 300,
height: 300,
encoding: {
y: {field: "Month", type: "nominal", sort: ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"]},
x: {field: "Award", aggregate: "count", type: "nominal"},
}
},
{ // first visualization - fill
mark: {
type: "bar",
height: 14,
},
transform: [
{filter: {field: "Award", oneOf: awardcheckbox}},
{filter: {field: "Genre", oneOf: genreSelection}},
{filter: {field: "Year", oneOf: yearSelection}},
],
selection: {
monthSelect: {fields: ["Month"], on: "click", type: "multi"}
},
encoding: {
y: {field: "Month", type: "nominal", title: "Month of Release",
sort: ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"]},
x: {field: "Award", aggregate: "count", type: "nominal"},
color: {
condition: {
selection: "monthSelect",
field: "MPAA_Rating", "type": "nominal",
scale: {
domain: ["NR", "G", "PG", "PG-13", "TV-MA", "M", "R", "NC-17"],
range: ["#a5a4a4", "#83c444", "#287b3d", "#e9bf1e", "#e18c26", "#dd4d3d", "#921f1f", "#330808"]
},
},
value: "lightgrey"
},
tooltip: [
{field: "Movie_Name", type: "nominal", title: "Movie"},
]
}
}
]
},
{ // second visualization
transform: [
{filter: {field: "Genre", oneOf: genreSelection}},
{filter: {field: "Year", oneOf: yearSelection}},
],
width: 300,
height: 300,
mark: {type: "circle", opacity: 0.9, stroke: "black", strokeWidth: 0.3},
selection: {
monthSelect: {
type: "multi", fields: ["Month"],
},
rating: {
type: "single",
fields: ["Month"],
}
},
encoding: {
x: {field: "Jump_Count", type: "quantitative", title: "Jump Scare Count"},
y: {field: "Month", type: "nominal", title: "Month of Release",
sort: ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"]},
size: {aggregate: "count", type: "quantitative"},
color: {
condition: {
selection: "monthSelect", field: "Jump_Count", type: "quantitative", scale: {scheme:"lightgreyred"}
},
value: "lightgrey"
},
opacity: {
condition: {selection: "monthSelect", value: 1},
value: 0.2
},
}
}
]
})
viewof movieChart = V({
data: {values: movies},
transform: [
{filter: {field: "Month", oneOf: monthSelection}},
//{filter: {field: "MPAA_Rating", oneOf: MPAAselect}},
],
hconcat: [
{
width: 400,
height: 150,
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",
field: "MPAA_Rating", "type": "nominal",
scale: {
domain: ["NR", "G", "PG", "PG-13", "TV-MA", "M", "R", "NC-17"],
range: ["#a5a4a4", "#83c444", "#287b3d", "#e9bf1e", "#e18c26", "#dd4d3d", "#921f1f", "#330808"]
},
},
value: "lightgrey"
}
}
}
]
})
viewof jump_rating = V({
data: {values: movies},
transform: [
{filter: {field: "Genre", oneOf: genreSelection}},
{filter: {field: "Month", oneOf: monthSelection}},
{filter: {field: "Year", oneOf: yearSelection}},
],
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, "NR", "G", "PG", "PG-13", "TV-MA", "M", "R", "NC-17"]}
}
},
mark: {
type: "circle",
size:50
},
encoding: {
x:{field: "Jump_Count", type: "quantitative", title: "Jump Count"},
y:{field: "RT_Critic", type: "quantitative",axis: {title: "Rotton Tomatoes CRITICS Ratings"}},
color: {
field: "MPAA_Rating", "type": "nominal",
scale: {
domain: ["NR", "G", "PG", "PG-13", "TV-MA", "M", "R", "NC-17"],
range: ["#a5a4a4", "#83c444", "#287b3d", "#e9bf1e", "#e18c26", "#dd4d3d", "#921f1f", "#330808"]
},
},
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"},
{field: "Genre", type: "nominal", title: "Subgenre"}
],
}
},{
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", title: "Jump Count"},
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"},
{field: "Genre", type: "nominal", title: "Subgenre"}
],
},
},
{
width: 300,
height: 200,
mark: "bar",
selection: {
MPAArating: {fields: ["MPAA_Rating"], on: "click", type: "multi"}
},
encoding: {
y: {field: "MPAA_Rating", type: "nominal"},
x: {aggregate: "count", field: "*", type: "quantitative"},
opacity: {
condition: {selection: "MPAArating", value: 1},
value: 0.05
},
}
}]
})
VegaLite({
data: {
values: jumpscares,
},
width: 600,
height: 450,
transform: [
{filter: {field: "Genre", oneOf: genreSelection}},
{filter: {field: "Year", oneOf: yearSelection}},
{filter: {field: "Month", oneOf: monthSelection}},
{filter: {field: "Award", oneOf: awardcheckbox}},
],
selection: {
point: {type: "single", fields: ["Movie"], on: "mouseover",
bind: {input: "text", name: "Search for a name: ", placeholder: "e.g. Scream"}},
},
mark: {
type: "circle",
stroke: "black",
},
encoding: {
x: {
field: "Seconds",
type: "quantitative",
},
y: {
field: "Movie",
type: "ordinal",
},
size: {
field: "Type",
type: "nominal",
legend: {
title: "Major or Minor"},
scale: {
domain: ["Minor", "Major"],
range: [25, 80]}
},
color: {
field: "Genre", type: "nominal",
scale: {
domain: ["Mystery", "Psychological", "Drama", "Thriller", "Adventure", "Science Fiction", "Natural",
"Comedy", "Monster", "Slasher", "Cannibal", "Western", "Supernatural", "Fantasy"],
range: ["#221e59", "#313293", "#29749e", "#49c2c7", "#66c080", "#187d3f", "#86a63d",
"#f4e909", "#cca72c", "#cb5927", "#9e1e20", "#d66caa", "#ad278f", "#bf8bbe"]
},
},
opacity: {
condition: {
selection: "point", fields: ["Movie_Name"], type: "nominal", not: "point",
value: 0.9
},
value: 0.05
},
strokeWidth: {
condition: {
selection: {
not: "point"
}, value: 0.3
},
value: 1
},
tooltip: [
{field: "Movie"},
{field: "Time", title: "Time of Jump Scare"},
{field: "Description"},
{field: "Genre"},
{field: "Year"},
{field: "Director"},
]
}
})
function isEmpty(obj) {
for (var prop in obj) {
return false;
}
return true;
}
movieChart.addSignalListener("genreSelect", function(name, value) {
if (value == null)
mutable genre = null
else
mutable genre = value.Genre
})
mutable genre = null
genreSelection = {
if(isEmpty(genre)){
return Array.from(new Set(movies.map(d => d.Genre)))
} else {
return genre
}
}
movieChart.addSignalListener("timeBrush", function(name, value) {
if (value == null)
mutable year = null
else
mutable year = value.Year
})
mutable year = null
MPAAselect = {
if(isEmpty(mpaa)){
return Array.from(new Set(movies.map(d => d.rating)))
} else {
return mpaa
}
}
mutable mpaa = null
jump_rating.addSignalListener("MPAArating", function(name, value) {
if (value == null)
mutable mpaa = null
else
mutable mpaa = value.MPAA_Rating
})
awardsChart.addSignalListener("monthSelect", function(name, value) {
if (value == null)
mutable month = null
else
mutable month = value.Month
})
mutable month = null
monthSelection = {
if(isEmpty(month)){
return Array.from(new Set(movies.map(d => d.Month)))
} else {
return month
}
}
awardcheckbox
moviesFiltered = movies.filter(d => genreSelection.includes(d.Genre)) // to filter by genre
.filter(d => monthSelection.includes(d.Month)) // to filter by month of release
.filter(d => yearSelection.includes(d.Year)) // to filter by year of release
.filter(d => awardcheckbox.includes(d.Award)) // to filter by award(s) received/or not
// .filter(d => MPAAselect.includes(d.MPAA_Rating)) // to filter by MPAA rating
viewof table = printTable(moviesFiltered, [
{field: "Movie_Name", title: "Movie", align: "l"},
{field: "Director", title: "Director", align: "c"},
{field: "Year", title: "Year", align: 'r'},
])
viewof countries = checkbox(["USA", "UK", "Canada", "France", "Spain"])
countries
// countrySelection.addSignalListener("value", function(name, value) {
// if (value == null)
// mutable type6 = null
// else
// mutable type6 = value.Genre
// })
// countrySelection = {
// if(isEmpty(type)){
// return Array.from(new Set(movies.map(d => d.Country)))
// } else {
// return type6
// }
// }
// mutable type6 = null
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.
