Published
Edited
Dec 14, 2019
{
const button = html`<button>Fullscreen`;
button.onclick = () => button.parentElement.nextElementSibling.requestFullscreen();
return button;
}
// 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>`
viewof awardChart = VegaLite({
data:{values: movies},
transform: [
{filter: {field: "Genre", oneOf: genreSelection}},
{filter: {field: "Year", oneOf: yearSelection}},
],
repeat: {
column: ["Awards Won", "Awards Nominated For", "Oscars Won", "Oscars Nominated for"]
},
spec:{
width:150,
height:150,
mark: {type: "bar"},
selection: {
monthSelect: {fields: ["Month"], on: "click", type: "multi"}
},
encoding: {
y: {field: "Month", type: "ordinal", title: "Month of Release",
sort: ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"]},
x: {field: {repeat: "column"}, type: "quantitative"},
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"
},
},
}
})
viewof awards = VegaLite({
data: {values: movies},
transform: [
{filter: {field: "Genre", oneOf: genreSelection}},
{filter: {field: "Year", oneOf: yearSelection}},
// {filter: {field: "Movie", oneOf: movieSelection}},
],
width: 200,
height: 200,
mark: "bar",
selection: {
awardSelect: {fields: ["Award"], on: "click", type: "multi"}
},
encoding: {
x: {field: "*", aggregate: "count", type: "quantitative", title: "Number of Movies"},
y: {field: "Award", type: "nominal", title: "Select an Award Category",
sort: ["None", "Nominee", "Winner", "Oscar Nominee", "Oscar Winner"]},
color: {
condition: {
selection: "awardSelect",
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 monthChart = V({
data: {values: movies},
width: 400,
height: 300,
layer: [
{
mark: {
type: "bar",
height: 16,
},
transform: [
{filter: {field: "Genre", oneOf: genreSelection}},
{filter: {field: "Year", oneOf: yearSelection}},
//{filter: {field: "MPAA_Rating", oneOf: MPAAselect}},
],
encoding: {
y: {
field: "Month",
type: "ordinal",
axis: {title: "Month of the year"},
},
x: {
field: "Jump_Count",
aggregate: "sum",
type: "quantitative",
axis: {title: "Number of Jump Scares"},
},
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"]
},
legend: {title: "MPAA Rating"}
},
},
},
{
mark: {
type: "bar",
filled: false,
height: 20,
stroke: "darkred"
},
encoding: {
y: {
field: "Month",
type: "ordinal",
axis: {title: "Month of the year"},
},
x: {
field: "Jump_Count",
aggregate: "sum",
type: "quantitative",
axis: {title: "Number of Jump Scares"},
},
}
}
]
})
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"
}
}
}
]
})
yearSelection = {
if(isEmpty(type2)){
return Array.from(new Set(movies.map(d => d.Year)))
} else {
return type2
}
}
movieSelection = {
if(isEmpty(mutable type5)) {
return d3.extent(movies, d => (d.RT_Critic))
} else {
return type5
}
}
jump_rating.addSignalListener("criticBrush", function(name, value) {
if (value == null)
mutable type5 = null
else
mutable type5 = value.RT_Critic
})
mutable type5 = null
plswork = movies.filter(d => movieSelection.includes(d.RT_Critic))
viewof jump_rating = V({
data: {values: movies},
transform: [
{filter: {field: "Genre", oneOf: genreSelection}},
{filter: {field: "Month", oneOf: monthSelection}},
{filter: {field: "Year", oneOf: yearSelection}},
// {filter: {field: "MPAArating", oneOf: MPAAselect}},
],
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"]}
},
criticBrush : { type: "interval"}
},
transform: [
{filter: {selection: "audienceBrush", fields: ["RT_Critic"]}}
],
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: {
selection: "MPAArating",
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},
// condition: {"selection": "criticBrush", "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
},
transform: [
{filter: {selection: "criticBrush"}}
],
selection: {
MPAArating: {
type: "multi", fields: ["MPAA_Rating"], bind: "legend"
},
audienceBrush : { type: "interval"}
},
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},
// condition: {"selection": "audienceBrush", "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"}
],
},
},
{
transform: [
{filter: {selection: "audienceBrush"}},
{filter: {selection: "criticBrush"}}
],
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: hourminsec},
width: 350,
height: 500,
transform: [
{filter: {field: "Genre", oneOf: genreSelection}}
],
selection: {
point : {type: "single", on: "mouseover"},
// "jump-select": {type: "multi", fields: ["Movie"]}
// movie: {
// type: "single",
// fields: ["Movie"],
// bind: {input: "text", name:"Search for a name! ", placeholder:"A Quiet Place"}
// }
},
mark: {
type: "circle",
stroke: "black",
strokeWidth: 0.5
},
encoding: {
x: {
field: "Seconds",
type: "quantitative",
// scale: {domain: ["00:00:00", "00:10:00", "00:20:00", "00:30:00", "00:40:00", "00:50:00", "01:00:00", "01:10:00", "01:20:00", "01:30:00", "01:40:00", "01:50:00", "02:00:00"]}
},
y: {
field: "Movie",
type: "ordinal",
},
size: {
field: "Type",
type: "nominal",
legend: {
title: "Major or Minor"},
scale: {
domain: ["Minor", "Major"],
range: [100, 400]}
},
color: {
condition: {
selection: {not: "point"},
field: "Genre",
type: "nominal",
},
value: "#585858",
},
opacity: {
condition: {
selection: {
not: "point",
},
movie: {
field: "Movie", type: "nominal", legend: null,
},
value: 1
},
value: 0.5
},
strokeWidth: {
condition: {
selection: {
not: "point"
}, value: 0.5
},
value: 5
},
tooltip: [
{field: "Movie"},
// {field: "Year"},
{field: "Time2", title: "Time of Jump Scare"},
{field: "Description"},
// {field: "Genre"}
]
}
})
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.Year
})
mutable type2 = null
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.MPAA_Rating
})
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
}
}
jump_rating.addSignalListener("audienceBrush", function(name, value) {
if (value == null)
mutable type5 = null
else
mutable type5 = value.Movie_Name
})
moviesFiltered = movies.filter(d => genreSelection.includes(d.Genre))
.filter(d => monthSelection.includes(d.Month))
.filter(d => yearSelection.includes(d.Year))
// .filter(d => MPAAselect.includes(d.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
hourminsec = d3.csv("https://www.sfu.ca/~nimtiaz/hour-min-sec-test.csv")
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.
