// 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 scattermonth}
// </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>`
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
movieSelection = {
if(isEmpty(name)){
return Array.from(new Set(movies.map(d => d.Movie_Name)))
} else {
return name
}
}
movieNames = {
return Array.from(new Set(name(d => d.Movie_Name)))
}
mutable name = null
jump_rating.addSignalListener("criticBrush", function(name, value) {
if (value == null)
mutable name = null
else
mutable name = value
})
jump_rating.addSignalListener("audienceBrush", function(name, value) {
if (value == null)
mutable name = null
else
mutable name = value
})
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 => movieSelection.includes(d.Movie_Name)) // to filter by brushed movies in jump_rating
// .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
import {jumpscares} from '@nussyr3/horror-movies-dataset'
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.
