About Flixviz

Flixviz

The aim of this project was to visualize Netflix content available in 37 countries of the world. These countries share a majority stake in terms of number of users and number of titles available. Netflix, being a streaming service, has to abide by the distribution laws and has to geo-block certain titles. Netflix's Geo-blocking of content affects the consumers, making it increasingly difficult to find a particular title. The attempt is novel in that, we augment the data by adding IMDB information for the titles to help users gain better insights on the data. GitHub

Data

We made use of the UnOGs API hosted on the RapidAPI platform. Then, we scraped the IMDB website to get the ratings and number of votes per title. Owing to the differences in regional text, IMDB information is sometimes partial and missing. We have the following attributes in our data: Title, Type, Synopsis, Genre, Countries-available, netflix-ID, year, IMDB rating, IMDB-votes, Poster-link. Due to restricted quantitative data, we can only draw comparative insights by pinning a country against other countries.

Methods

We follow Ben Shneiderman's Visualization Mantra [1] to the core, and use visual structures that were previously tried and tested for similar "movie" visualizations [2,3]. We also draw inspiration from previous years' projects, as listed below. We make use of standard HTML, CSS, and Javascript for the app; with an occasional use of the Bootstrap framework. For charting, we use D3.js. We explore D3 Map projections to get an overview of the data; We make use of traditional scatter plots and Bar plots to gain attribute-level insights into the data, and allow the user to filter content based on several controls. For our hosting solution, we make use of Netlify, which can directly host websites from GitHub repositories. Through the course of the project development, we used Trello to organize, assign, and track tasks. Apart from these, we made use of several other productivity tools to help us work better.

General Learning Objectives Achieved

  • Design: Collaborated with a group to create FlixViz - A Netflix Visualization system.
  • Defend: Defended our design choices and approach via regular presentations and evaluations.
  • Critque: Participated in regular presentations and evaluations to provide constructive criticism to other group projects in the course.
  • Demonstrate: Adapted presentation material to reach broader audiences through simplified language and use of graphics.
  • Evaluate: Used constructive criticism received to improve the visualization system.

References

[1] B. Shneiderman, “The eyes have it: a task by data type taxonomy for information visualizations,” in Proceedings 1996 IEEE Symposium on Visual Languages, Sep. 1996, pp. 336-343. doi: 10.1109/VL.1996.545307.

[2] A. Bing and Z. Li-Gu, “Film Big Data Visualization Based on D3.js,” in 2020 International Conference on Big Data and Social Sciences (ICBDSS), Xi'an, China, Aug. 2020, pp. 50-53. doi: 10.1109/ICBDSS51270.2020.00019.

[3] C. Ahlberg and B. Shneiderman, “Visual information seeking using the FilmFinder,” in Conference Companion on Human Factors in Computing Systems, New York, NY, USA, Apr. 1994, pp. 433-434. doi: 10.1145/259963.260431.

Meet the Team

Shashank Shirol

shirol@kth.se

"Hoarder of Keyboards."

Individual Learning Objectives:

  • LO1: Learn to collaborate on an intermediate-scale project
    • Delegate tasks, see timely completion of tasks, and maintain high productivity within the group.
      • Split the workload among the team members, assigned reasonable deadlines to tasks on trello, incorporated a smooth workflow within the group.
    • Conduct regular team meetings to gauge progress and direction consistently.
      • Met with the team regularly to collectively take decisions about the direction and the developmental flow.
  • LO2: Use various visualization tools to achieve the end goal. Take a systematic approach to develop visual representations for the data. Use appropriate data transformations and visual mappings. Develop an End-to-End Visualization System.
    • Learned D3.js from scratch; Learned about different techniques to optimize web graphics for speed and performance; Explored various visualization libraries; Maintained repository for the Project; Deployed the app.
    • Developed a web scraper for get IMDb information; pulled master data from the API; cleaned and processed the data.
    • Studied various different techniques available for visualizing similar data. Decided upon visual structures and attributes to show - for maximum clarity.
    • Applied the Visualization Mantra to our approach for developing the visualization system.
  • LO3: Learn to analyze visualizations thoroughly and identify strengths and shortcomings.
    • Studied the available data extensively in order to ascertain the best controls to give the user.
    • Decided core elements to visualize to maximize the breadth of information delivered.

Contributions: Presentations, D3.js, HTML/CSS/JS, Visualization structures, Data Pull/Cleaning, CI/CD.

Stefano Scolari

sscolari@kth.se

"I like Spaghetti."

Individual Learning Objectives:

    LO1: Improve JS skills.
    • I feel like the amount of time spent working on both the individual project and the group project has helped me improve my knowledge and skills in JS. Most importantly, I learned how to use D3.js from scratch. Currently, I believe I could work on any kind of visualization and still create something interesting. While I may not know everything about D3, I can now rely on a solid knowledge base to build upon.
  • LO2: Get a better understanding of how to design visualizations.
    • I have learned a great deal through the readings, lectures, and individual study and work. My critical thinking on the topic has greatly increased compared to the beginning of the course. Additionally, I was able to delve deeper into the subject by reading scientific papers, analyzing other group projects, and constructively critiquing them.
  • LO3: Improve my sketching and modeling skills.
    • This is probably the learning objective I focused on the least, but having worked on the FIGMA mock-ups, I have certainly increased my sketching and modeling skills. I am also quite satisfied that the final website closely resembles the mock-ups designed early on in development. Although I did not devote as much time to sketching and modeling as I did to programming, for example, I can certainly tell that I have improved.

Contributions: Presentations, Design/Mockup, D3.js, HTML/CSS/JS, Visualization structures, and Data handling.

Nicolas Rollino

nsrs@kth.se

"Professional binge watcher."

Individual Learning Objectives:

  • LO1: Frontend skills.
    • I have significantly improved my frontend skills, both in the programming languages used and in thinking about the design before creating it. I learned D3.js from scratch and spent many days figuring out how to use it efficiently to create good visualizations with the data we had. After completing this course, I not only think that my overall frontend knowledge has increased, but I also feel confident in creating visualizations from a data sample.
  • LO2: Visualization.
    • I had the opportunity to work with new visualization structures and learn about the thought process that goes into constructing them. This course has given me insights into what makes a good visualization, not only in terms of its attractiveness to the user, but also its practicality and efficiency. I now feel confident in critiquing current visualization structures and creating new ones that are both visually appealing and practical for the user.
  • LO3: Data Handling.
    • I have gained a wealth of knowledge when it comes to data handling. I now understand the importance of having a good dataset that contains clean data, as well as the struggles that come with dealing with bad data. I have also gained expertise in data cleaning, as well as recognizing datasets and understanding how they can be visualized, and the necessary steps to make it happen.

Contributions: D3.js, HTML/CSS/JS, Visualization structures, and Data handling.

Jeffrey Deng

jeffreyd@kth.se
s

"Due today, do today."

Individual Learning Objectives:

  • LO1: Learn Adobe Premiere Rush and Pro basics
  • LO2: Learn basic visualization tools like D3

Contributions: Presentations, Design/Mockup, Demo Video, D3, and Productivity tools.

Sanjin Redzepagic

sanjinr@kth.se

"What Jeffrey said."

Individual Learning Objectives:

  • LO1: Learning D3 well and learning JS with it.
  • LO2: Learning not only how to do a good visualization but also how to host it, maintain it etc on a web server.
  • LO3: Learning how to work well with APIs regarding data in a stable and efficient way.
    • Possibly how to cache data for faster access or due to limited API calls.

Contributions: D3.js, HTML/CSS/JS, Visualization structures, Presentations & iconography.