31:T56a,viewof movieGenre = vega_embed({ // title: "Q1: What kind of movies are gradually becoming favored by Netflix in the latest 10 years?", data: {values: Netflix_movies_02}, hconcat: [{ width: 250, height: 300, transform: [ {filter: {selection: "period"}} ], mark: {type: "bar", tooltip: true}, selection: { genreSelect: {fields: ["genre"], on: "click", type: "multi"} }, encoding: { y:{field: "genre", type: "nominal", sort: "-x"}, x:{field: "*", type: "quantitative", aggregate: "count"}, // color:{field: "Genre", type: "nominal"}, color: { condition: { selection: "genreSelect", field: "genre", type: "nominal" }, value: "lightgrey" } } }, { width: 450, height: 300, transform: [ {filter: {selection: "genreSelect"}} ], mark: {type: "line", point: true}, selection: { period: {type: "interval", encodings: ["x"]} }, encoding: { x: {field: "date_added", type: "temporal", timeUnit: "year"}, y: {field: "*", type: "quantitative", aggregate: "count"}, color: {field: "genre", type: "nominal"}, tooltip: [ {field: "genre", type: "nominal"}, {field: "*", type: "quantitative", aggregate: "count"}, {field: "date_added",timeUnit: "year"} ] } }] })32:T5f1,md` **Interaction Guide** - If you hover on any genre bar in the left bar chart, the corresponding tooltip will show up. - You can click any genre bar to see in the right line graph how Netflix's choice of that genre type changes from 2009 to 2021. - If you hover on any point in the line graph, the corresponding tooltip will show up. - In the right line graph, you can drag out a rectangular brush to select a time interval, and then the genre bar chart on the left will change accordingly. **Specific Design Choice** \n In this multiview visualization, I intended to answer following research questions: - Which movie genres are gradually becoming favoured by Netflix from 2009 to 2021? - How does the COVID-19 influence Netflix's choice of movie genres between 2019 and 2021? As shown above, there is an overview of the total number of each genre showing up before users interact with it. According to the sorted bar chart, users can easily conclude that the top 5 movie genres are Dramas, Documentaries, Comedies, Stand-Up Comedy and Action & Adventure. Through selection and brushing, users can dig into more details. For instance, although significant reduction occurs in almost all movie genres, Dramas remain at the top 1. In the line graph, compared with a single colour for all lines, colour-encoded ones can help users quickly match each of them with the corresponding movie genre. Also, it is easier for users to visually connect the information for the same movie genre across the two visualizations. `33:T862,viewof imdbByYear = vega_embed({ data: {values: Netflix_movies_01}, // transform: [ // {filter: {field: "genre", oneOf: genreCheckbox}} // ], transform: [ {filter: {field: "genre", equal: genreMenu}} ], vconcat: [{ width: 850, transform: [ {filter: {selection: "ptsYear"}} ], layer: [{ mark: {type: "bar"}, // selection: { // bins: {fields: ["imdb_ratings"], type: "multi", on: "click"} // }, encoding: { x: {field: "imdb_ratings", type: "quantitative", bin: {maxbins: 20}}, y: {type: "quantitative", aggregate: "count"}, color: {value: "#2978b5"} // color: {field: "imdb_ratings", type: "quantitative", bin: {maxbins: 5}} } }, { mark: {type: "rule"}, encoding: { x: {field: "imdb_ratings", type: "quantitative", aggregate: "mean"}, color: {value: "orange"}, size: {value: 2}, tooltip: [{field: "imdb_ratings", type: "quantitative", aggregate: "mean", title: "Mean of the IMDB Ratings"}] } }] }, {hconcat: [{ width: 850, height: 300, layer: [{ mark: {type: "point", size: 150, opacity: 0.3}, selection: { ptsYear: {type: "interval", encodings: ["x"]} }, encoding: { x: {field: "date_added", timeUnit: "year"}, y: {field: "imdb_ratings", type: "quantitative"}, // color: {value: "gray"} color: { condition: { selection: "ptsYear", value: "#2978b5" // field: "imdb_ratings", // type: "quantitative", // bin: {maxbins: 5} }, value: "lightgrey" } } }, { mark: {type: "line", point: true}, encoding: { x: {field: "date_added", timeUnit: "year"}, y: {field: "imdb_ratings", type: "quantitative", aggregate: "mean"}, color: {value: "orange"}, tooltip: [ {field: "imdb_ratings", type: "quantitative", aggregate: "mean"}, {field: "date_added", type: "temporal", timeUnit: "year"} ] } }] }] }] // end of hconcat })34:T86f,md` **Interaction Guide** - Through the top dropdown menu, you can select one of the top 5 movie genres to explore relevant information in the following two visualizations. - From the histogram, you can obtain the general distribution of the IMDB ratings within the latest 12 years. - The orange vertical line on the histogram represents the general mean of the IMDB ratings within the latest 12 years, and you can see a tooltip when hovering on it. - In the scatterplot with yearly mean overlay, you can hover on the point of the orange line to know the specific mean of the IMDB ratings for each year. Or you can drag out a rectangle brush to select a time interval, seeing corresponding changes on the histogram. **Specific Design Choice** \n With this interactive visualization, following research questions will be answered: - How do the IMDB ratings of the movies change over time for the most popular movie genres? - Will people's passion for one movie genre change over time? That is, does one movie genre has the same average IMDB rating over the latest 12 years, especially between 2019 and 2021? Based on previous multiview visualization, I proceeded on the top 5 movie genres because they are the most valuable part for movie investors by comparison with other genres. Apart from the filtering function, the dropdown menu on the top can also remind users which movie genre they are exploring. With the vertical layout of the histogram and the scatterplot, users can freely compare the overview and details, that is, the general distribution of the IMDB ratings and yearly changes. The orange lines showing on the two visualizations both represent the mean of the IMDB ratings, but here is a difference. That is, the one on the histogram merely emphasizes the general mean, while the one in the scatterplot also shows the yearly situations. More importantly, the two orange lines help to connect the two visualizations with the same colour and meaning. Lastly, in the scatterplot, the blue points with 0.3 opacity do well in presenting the IMDB ratings' distribution for each year. That is what filled circles or full colour fails to do. `35:T4a3,viewof genreAndRating2 = vega_embed({ data: {values: Netflix_movies_02}, transform: [ {filter: {field: "date_added_year", lte: range2[1]}}, {filter: {field: "date_added_year", gte: range2[0]}} ], hconcat: [{ width: 140, height: 140, mark: {type: "bar", tooltip: true}, selection: { ratingSelect: {fields: ["rating"], on: "click", type: "multi"}, }, encoding: { facet: { field: "genre", type: "nominal", columns: 3 }, x: {field: "*", type: "quantitative", aggregate: "count"}, y: {field: "rating", type: "nominal"}, color: { condition: { selection: "ratingSelect", field: "genre", type: "nominal" }, value: "lightgrey" } } }, { width: 350, height: 600, mark: {type: "bar", tooltip: true}, encoding: { x:{field: "rating", type: "nominal", sort: "-y"}, y:{field: "*", type: "quantitative", aggregate: "count"}, color: { condition: { selection: "ratingSelect", field: "genre", type: "nominal" }, value: "lightgrey" } } }] })36:T6ba,md` **Interaction Guide** - With the range slider on the top, you can filter the data by the date of adding movies to Netflix. The following visualizations will change according to the time range you selected. - In the wrapped facet, it shows the rating's situation for each movie genre. You can hover on the bar charts to see the tooltip for detailed data. - Also, you can select one horizontal bar in the facet, and then the stacked bar chart on the right will highlight the corresponding rating bar. **Specific Design Choice** \n Through the interactions here, I would like to answer following research questions: - Based on the Motion Picture Association (MPA) film rating system, what kind of movie ratings are favoured by Netflix? And how does this preference change over the latest 12 years, especially between 2019 and 2021? - How do the movie genres correlate with the rating from 2009 to 2021? With the colour encoding for movie genres, users can easily distinguish multiple genres. In particular, the genres are colour encoded in the same way as the first multiview visualization, so the consistency throughout the project will be less likely to confuse users. The two visualizations here demonstrate the same data but differently, so users can explore the data from multiple perspectives. Specifically, the wrapped facet allows users to dig into the rating's situation within each movie genre, and the stacked bar chart shows the percentages of movie genres for each rating. Through filtering data with the range slider, users can understand if the favours of the movie audience will maintain over time, which tells movie investors if it is necessary to focus on in-time changes of the movie audience. `37:T519,md` Through the deep exploration on the data of Netflix movies, meaningful features of the movie trends stand out from the multiview visualizations. First, the horizontal bar chart with colour-encoded genres discovers the top 5 movie genres that Netflix prefers to add, including Dramas, Documentaries, Comedies, Stand-Up Comedy and Action & Adventure. Also, the line graph highlights that the number of many movie genres decreased during the COVID-19 pandemic. But combined with the bar chart, Dramas are always the top 1 choice even in the pandemic. Second, when exploring the top 5 movie genres deeper, it shows that Documentaries have higher IMDB ratings on average, and the IMDB ratings are more concentrated than another four genres. Third, the wrapped facet demonstrates that most Stand-Up Comedy belongs to the TV-MA rating, which means that it is intended to be viewed by adult audiences. The stacked bar chart also shows that the highest amount of movies are in the TV-MA rating, and Dramas and Stand-Up Comedy are the two genres with the largest proportion in this rating. Overall, there are more things my audience can learn from the interactive visualizations by selecting, filtering, and brushing. These visualizations collaborate to generate useful information about the movie trends. `38:[{"id":"1f9ea1fda15363d16b1d9a9e7bd52a8cd6517f3996b6296c3f9df6951b4b8235a57346c1f45de53086425439dca39418dacaabd817cdafe0c0d4bfadebc231bb","href":"https://static.observableusercontent.com/files/1f9ea1fda15363d16b1d9a9e7bd52a8cd6517f3996b6296c3f9df6951b4b8235a57346c1f45de53086425439dca39418dacaabd817cdafe0c0d4bfadebc231bb","name":"dataset_02.csv","type":"text/csv","lastModified":1617970164246.673,"size":283008},{"id":"d2d9e77e559a2b3085917c0c56296a18a998b5922a9b2d409a1df7373a12eea9a009ee4d908c904a956cf78721291c8c8dd83d5bc72489b497b1663a19eb514b","href":"https://static.observableusercontent.com/files/d2d9e77e559a2b3085917c0c56296a18a998b5922a9b2d409a1df7373a12eea9a009ee4d908c904a956cf78721291c8c8dd83d5bc72489b497b1663a19eb514b","name":"dataset_01.csv","type":"text/csv","lastModified":1617970167711.669,"size":868032}] 2f:{"title":"IAT 355 Final Project","cells":[{"id":0,"value":"md`# IAT 355 Final Project`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`#### by Dan Peng / 301354478`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`\n

[Overview](#overview)

[Introduction](#intro)

[Problem/Domain Questions](#questions)

[Datasets & Dimensions](#datasets)

[General Design Choices](#choices)

[Interactions & Specific Design Choices](#interactions)

[Unimplemented Design](#unimplemented)

[Conclusions](#conclusions)

[Video](#video)

[Imports & References](#last)

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"overview = md`## Overview`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"md`\n\nThis project is aiming to help movie investors to explore the changing trends of the movies added to Netflix from 2009 to 2021. It is analyzing multiple dimensions of the movie data, such as the date of being added into Netflix, movie genres, IMDB ratings, and movie ratings.\n\nFor this purpose, I utilized two datasets with over 6,000 Netflix movies to analyze the genre preferences, the changes of IMDB ratings, and the correlation between genres and movie ratings. Through the interactions of selecting, brushing, and filtering, movie investors can quickly discover meaningful information in three interactive visualizations. In this way, movie investors can not only gain an overview of the data at first but also get details by interacting with the visualization forms.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"intro = md`## Introduction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"md`\n\nNowadays, there are thousands of movies published every year, but only part of them will be liked by the public. Hence, for movie investors, it is important to know the public's preferences and market situation before making an investment. Especially during the COVID-19 pandemic, most industries have been influenced significantly, so it could be helpful for movie investors to explore how the pandemic influences the movie industry, and thus they can make a smart decision on movie investment for a better return.\n\nIn short, my **target audience** is the movie investors who need to understand what kind of movies are more likely favoured by the public. Based on their needs, I raised relevant research questions and made corresponding multiview visualizations to answer each of them. \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"questions = md`## Problem/Domain Questions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"md`**Main Problem**\n- What kind of movies are worth investing in 2021/2022?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`**Specific Research Questions** \n\\n\n- Which movie genres are gradually becoming favoured by Netflix from 2009 to 2021?\n- How does the COVID-19 influence Netflix's choice of movie genres between 2019 and 2021?\n- How do the IMDB ratings of the movies change over time for the most popular movie genres?\n- Will people's passion for one movie genre change over time? That is, does one movie genre have the same average IMDB rating over the latest 12 years, especially between 2019 and 2021?\n- Based on the Motion Picture Association (MPA) film rating system, what kind of movie ratings are favoured by Netflix? And how does this preference change over the latest 12 years, especially between 2019 and 2021?\n- How do the movie genres correlate with the rating from 2009 to 2021?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1161,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"datasets = md`## Datasets & Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"md`The datasets I am using for this project gather more than 6,000 Netflix movies in total for the goal of finding the movies that are worth investing.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`**Datasets**\n

https://www.kaggle.com/amjaads/netflix-movies
https://www.kaggle.com/shivamb/netflix-shows

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"md`**Dimensions**\\n\n\n- Nominal Data\n - title ----------------------------------- String\n - country ----------------------------- String\n - genre -------------------------------- String\n - rating -------------------------------- String\n \n- Quantitative Data\n - release_year ----------------------- Number (whole) \n - duration ---------------------------- Number (whole)\n - imdb_ratings --------------------- Number (decimal) \n\n- Temporal Data\n - date_added ------------------------ Date\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"choices = md`## General Design Choice`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1303,"value":"md`\n\nWhen integrating these dimensions to find useful information, the temporal data plays an important role in exploring yearly changes throughout the whole project. \n\nBesides, colour encoding is an effective tool to help distinguish various movie genres on multiview interactions. I applied this method to different bar charts, and thus my audience could quickly obtain the correlation between movie genres and other dimensions.\n\nIn terms of the quantitative data, the IMDB rating reflecting the public's favours is my main focus. Before exploring the relationship of the IMDB ratings and other dimensions, I first made the histogram to analyze its distribution so that my audience could understand how the mean overlay works in a connected visualization.\n\nOverall, my design choices are based on the feature of multiple dimensions to discover the meaning of the movie data, which assists my audience's choices on movie investment. \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1298,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"interactions = md`## Interactions & Specific Design Choices`","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"md`#### 1. Answered Research Questions: \n- Which movie genres are gradually becoming favored by Netflix from 2009 to 2021?\n- How does the COVID-19 influence Netflix's choice of movie genres between 2019 and 2021?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`*Note: **date_added** means the time of adding the movie to Netflix.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"md`#### 2. Answered Research Questions:\n- Based on the first visualization above, how does the IMDB ratings of the movies change over time respectively for the top 5 movie genres?\n- Will people's passion for one movie genre change over time? That is, does one movie genre have the same average IMDB rating over the latest 12 years, especially during the COVID-19 pandemic?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"viewof genreMenu = menu('Movie Genre', [\"Dramas\", \"Documentaries\", \"Comedies\", \"Stand-Up Comedy\", \"Action & Adventure\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1352,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"md`#### 3. Answered Research Questions:\n- How do the movie genres correlate with the rating from 2009 to 2021?\n- Based on the Motion Picture Association (MPA) film rating system, what kind of movie ratings are favoured by Netflix? And how does this preference change over the latest 12 years, especially between 2019 and 2021?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"viewof range2 = rangeSlider({\n title: 'Date Added into Netflix',\n description: 'Filtering by the date of adding movies to Netflix.',\n min: d3.min(Netflix_movies_02, d => d.date_added_year),\n max: d3.max(Netflix_movies_02, d => d.date_added_year),\n value: this ? this.value: [2009, 2021]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"md`*Note: **rating** means the categories of the Motion Picture Association (MPA) film rating system*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1356,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"unimplemented = md`## Unimplemented Design`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1471,"value":"md`\n\nThere is still much more work that should do to study the movie trends further. However, I failed to search for additional data about the cost of movie production and the box office takings due to the limited time. As movie investors value investment returns, then I think this data can improve their investing choices. Besides, I did not find a way to analyze the movie's director and involved actors, but I believe the influence of famous directors or actors on movie popularity and movie revenues. Hence, this should be an important part of further work. Finally, I merely focused on the Netflix movies in this project. Although I have included more than 6,000 movies, I think it could be better to analyze more movies from multiple movie channels so that my visualizations can demonstrate more accurate information with a large dataset.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1365,"value":"conclusions = md`## Conclusions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1478,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"video = md`## Video`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1377,"value":"md`https://www.youtube.com/watch?v=AcUXF6Np5hA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1382,"value":"last = md`## Imports & References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`**Importing Libraries**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"vega_embed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"import {slider, menu, checkbox} from '@jheer/dom-utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"leaflet = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`**Loading Datasets**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"file01 = FileAttachment('dataset_01.csv')","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"movies01 = file01.text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"Netflix_movies_01 = d3.csvParse(movies01, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"file02 = FileAttachment('dataset_02.csv')","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"movies02 = file02.text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"Netflix_movies_02 = d3.csvParse(movies02, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`**References**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`- Advanced Interaction with Multiple Views: https://observablehq.com/@sfu-iat355/advanced-interaction-with-multiple-views\n- Introduction to leaflet and D3: https://observablehq.com/@sfu-iat355/introduction-to-leaflet-and-d3?collection=@sfu-iat355/tutorial-solution-sets\n- Motion Picture Association (MPA) film rating system: https://en.wikipedia.org/wiki/Motion_Picture_Association_film_rating_system\n- Range Slider: https://observablehq.com/@mootari/range-slider#rangeSlider\n- Vega-Lite Example Gallery: https://vega.github.io/vega-lite/examples/\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}