Homework3 - Wenchang Liu

Homework2/wchliu/Preprocessing/get_data.py

@@ -0,0 +1,117 @@
+import json
+import csv
+
+
+# filtered out all movies with imdb_score
+def get_movies_csv(input_csv, output_csv): 
+    f1 = open(input_csv, 'r')
+    f2 = open(output_csv, 'w')
+    reader = csv.reader(f1)
+    writer = csv.writer(f2)
+    writer.writerow([
+        'id', 'title', 'release_year', 'runtime', 'genres', 
+        'production_country', 'imdb_score', 'imdb_votes'
+    ])
+    for line in reader:
+        if reader.line_num == 1:
+            continue
+        if line[2] == 'MOVIE' and line[11] != '':
+            # 0-id, 1-title, 4-release_year, 6-runtime, 7-genresList, 8-countryList, 11-imdbScore, 12-imdbVotes
+            row = [line[0], line[1], line[4], line[6], line[7], line[8], line[11], line[12]]
+            writer.writerow(row)
+
+    f1.close()
+    f2.close()
+
+# the overview: avg imdb_scores of genres
+def averge_score_by_genres(movie_csv, avg_genres_score_csv):
+    genre_dict = {}
+    with open(movie_csv, 'r') as f1:
+        reader = csv.reader(f1)
+        for line in reader:
+            if reader.line_num == 1:
+                continue
+            genres = line[4][1:-1].split(', ')
+            for genre in genres:
+                if genre == '':
+                    print(line)
+                    continue
+                genre = genre[1:-1]
+                if genre_dict.get(genre):
+                    genre_dict[genre][0] += float(line[6])
+                    genre_dict[genre][1] += 1
+                else:
+                    genre_dict[genre] = [float(line[6]), 1]
+
+    with open(avg_genres_score_csv, 'w') as f2:
+        writer = csv.writer(f2)
+        writer.writerow(['genre', 'imdb_score_total', 'num_movies', 'imdb_score_avg'])
+        for k, v in genre_dict.items():
+            row = [k, v[0], v[1], round(v[0]/v[1], 1)]
+            writer.writerow(row)
+
+
+def movies_by_genres(movie_csv, output_dir):
+    genres = ['drama', 'crime', 'action', 'thriller', 'european', 
+        'fantasy', 'comedy', 'war', 'romance', 'western', 'documentation', 
+        'history', 'music', 'family', 'horror', 'scifi', 'animation', 'sport', 'reality'
+    ]
+    fs = []
+    writers = {}
+    for genre in genres:
+        f = open(output_dir + genre + '.csv', 'w')
+        writer = csv.writer(f)
+        writer.writerow([
+            'id', 'title', 'release_year', 'runtime', 'genres', 
+            'production_country', 'imdb_score', 'imdb_votes'
+        ])
+        fs.append(f)
+        writers[genre] = writer
+
+    with open(movie_csv, 'r') as f1:
+        reader = csv.reader(f1)
+        for line in reader:
+            if reader.line_num == 1:
+                continue
+            line_genres = line[4][1:-1].split(', ')
+            for line_genre in line_genres:
+                line_genre = line_genre[1:-1]
+                writer = writers.get(line_genre)
+                if writer is not None:
+                    writer.writerow(line)
+
+    for i in range(len(fs)):
+        fs[i].close()
+
+
+def avg_by_year(movie_csv, avg_year_csv):
+    year_dict = {}
+    with open(movie_csv, 'r') as f1:
+        reader = csv.reader(f1)
+        for line in reader:
+            if reader.line_num == 1:
+                continue
+            year = line[2]
+            if line[4] == '' or line[3] == '':
+                print(line)
+                continue
+            if year_dict.get(year):
+                year_dict[year][0] += float(line[6])
+                year_dict[year][1] += float(line[3])
+                year_dict[year][2] += 1
+            else:
+                year_dict[year] = [float(line[6]), float(line[3]), 1]
+
+    with open(avg_year_csv, 'w') as f2:
+        writer = csv.writer(f2)
+        writer.writerow(['year', 'num_movies', 'imdb_score_avg', 'runtime_avg'])
+        for k, v in year_dict.items():
+            row = [k, v[2], round(v[0]/v[2], 1), round(v[1]/v[2], 1)]
+            writer.writerow(row)
+
+if __name__ == "__main__":
+    # get_movies_csv("data/titles.csv", "data/movies.csv")
+    # averge_score_by_genres("data/movies.csv", "../Vue-Skeleton/src/assets/data/avg_genres_score.csv")
+    # movies_by_genres("data/movies.csv", "../Vue-Skeleton/src/assets/data/")
+    # avg_by_year("data/movies.csv", "../Vue-Skeleton/src/assets/data/avg_year.csv")
+    pass

Homework2/wchliu/README.md

@@ -0,0 +1,35 @@
+# ECS272 HW2 - Wenchang Liu
+
+## How to run
+
+* `npm install` to install all packages
+* `npm start` to start a localhost webapp at [localhost:8080](http://localhost:8080)
+
+## Display Settings
+
+* Chrome, Zoom(100%)
+* Developped using the default built-in display setting for mbp14
+* If the the charts cannot be placed into the screen, please try to zoom out
+
+## Overview
+
+* ![Preview Screenshot](Preview.png)
+* The objective of the dashboard is to explore the netflix movies data, the visualizations are allowing users to explore the following:
+  * Do people prefer certain genre, i.e. are users give higher IMDB score for certain genre?
+    * Explore the IMDB score distribution for each genre
+  * Which genre of the movies Netflix prefer to produce?
+  * Explore the trends of average IMDB score/average runtime/number of movies year by year
+* Bubble Chart(context):
+  * intro: each bubble represent a genre, the bubble size is showing a dimension of each genre. We are also giving each genre a different color using the color scheme google20c
+  * aim: overview of each genre
+  * widget: switch the meaning of bubble size between average IMDB score and number of movies of each genre
+  * hover: showing the information of genre: genre name, average IMDB score of that genre, number of movies of that genre
+* Beeswarm Chart(advanced visualization, focus):
+  * intro: similar to histogram, we can explore distribution, but we are showing every data point in beeswarm
+  * aim: the detailed information of the IMDB score for each genre
+  * widget: select any of the 19 genre to display
+* Line chart:
+  * x-axis is the release year, y-axis is the corresponding information of a specific year, together we can see the trend
+  * aim: explore the movies trend of average runtime/average IMDB score/number of movies year by year
+  * widget: switch y-axis among average runtime/average IMDB score/number of movies
+  * hover: detailed release year and correponding y-axis value for specified point

Homework2/wchliu/Vue-Skeleton/.gitignore

@@ -0,0 +1 @@
+/dist/*

Homework2/wchliu/Vue-Skeleton/README.md

@@ -0,0 +1,48 @@
+# VUE 3.0 Skeleton
+This is is a tempalate for working in Vue.js.
+Vue 3.0 sits between react and basic javascript depending on the developers comfort level.
+For this class stick with **Options API** rather than **Composition**.
+If Vue is too weird, feel free to use the simpler template.
+We offer Vue, since it is a modern framework that companies use so it could be useful for you if one of your projects in this class could make use of it.
+
+OPTION API DOCUMENTATION [link](https://vuejs.org/api/#options-api)
+
+## Note
+You are not required to use Vue.js to solve HW2 and 3.
+However, if you don't want to use it I would recommend using the Simple-Skeleton template.
+If you have personal experience with another framework and would prefer to use that please go ahead, just let me know how to compile and run that.
+
+
+# Install Dependencies
+Assuming you have node.js installed. (If not go do that :) )
+Install [Node](https://nodejs.org/en/).
+
+Install from the package.json via terminal.
+`npm i`
+
+To install additional packages based on your needs
+`npm install <package-name>`
+
+## Run application 
+`npm start`
+
+
+
+## Some of the libraries attached
+For UI components this template comes with [Ant Design](https://antdv.com/)
+For icons etc. [Font-Awesome](https://fontawesome.com/)
+Animations [Animate css](https://animate.style/)
+
+D3 is included as well.
+
+For fetching data from an API [Axios](https://axios-http.com/docs/intro)
+
+# Files you have to care about
+Most of these files you can ignore.
+The files under `src/` are your concern.
+The root script file for VUE will be `index.ts` which is the initial typescript/javascript file that instatinate our single page application.
+The root file for all **development** needs with be `App.vue`
+
+You will be adding to and editing files under the **Views** Directory.
+Within the pages directory you really only need one page  **Pages/Home.vue** 
+For components you may have several based on your design feel free to add what makes sense to you under **Components**

Homework2/wchliu/Vue-Skeleton/jsconfig.json

@@ -0,0 +1,5 @@
+{
+    "include": [
+      "./src/**/*"
+    ]
+}