Embedded Files
Project Assignement: Pick a scripted TV show and create an interactive visualization, using d3 and javascript/html, to help someone understand the characters, how the characters interact, what the characters tend to say, and how these patterns change over the run of the show.
Team: Keerthi Sekar & Anna Chambers
Motivation for Visualization: This visualization motivates user's ways to show how the characters appear in the show over the course of their timeline (seasons).
Our visualization answers:
How often do they speak?
How much do they say?
What do they tend to talk about?
How often do they share a scene with other characters?
Are there changes between seasons, during a season in these patterns?
TV Show: The Good Place
Github Links:
Source Code: https://github.com/keerthi-sekar/CS5124-Project3
Release Artifacts: https://github.com/keerthi-sekar/CS5124-Project3/releases/tag/v1.0.0
Demo Notes
Demo Notes
This video shows the functionality of the visualization components. It walks through the interactive features of each chart.
Data
Data
The data came from a GitHub repository that was originally used to analyze The Good Place for a Medium Article "Text Analysis of The Good Place", which was published on October 19, 2020. The data that we used from this source was already preprocessed into csv format in the order: episode, character, line. The data consists of all 4 seasons transcript in the form of csv.
Data Source: https://github.com/daratanxe/good-place
Since the data came in this format, only light preprocessing of the data was required. Upon researching the series, we were able to find how many episodes were in each season and used this information to add a season field to the data.
The data for the force-directed graph had to be in a different format so once we categorized the characters – the data was converted into the format needed from the csv file contents. We accomplished this by dynamically pulling from the script.csv file to create an object that contained the appropriate Nodes and Links depending on the filter applied.
Visualization Components
Visualization Components
Overall Dashboard contains:
Barcharts for characters and episode breakdown of line count (C-Goals)
TV Cast Infographic to connect the faces and real actors to the character names in the data (C-Goals)
Interactive Word cloud identifying most occurring phrases (B-Goals)
Force Directed Graph – shows relationship of characters based on scene count and interaction (A-Goals)
Filter and Search Browser like Features (A-Goals)
When you click on 1 bar or item on 1 graph it updates ALL the visualizations. You can also filter at the top by Season or phrase.
Character Bar Chart shows number of lines each character has (all time and can search based on season or episode) Each bar is clickable to filter the dashboard even further. The tooltip tells what character is highlighted and the line count. We decided to show these top 13 characters in this bar chart and throughout our visualization and filter out the rest because of the nature of the show we are analyzing. As you can see from the chart above there are really 6 main characters and the rest are much smaller in importance. Beyond these 13 characters the others in the show had negligible number of lines so we chose to exclude them.
Barchart constructed timeline for Season 1-4. (All time episodes) The filters apply to this visual and are color-coded intentionally by season. Each bar is selectable and can act as its own filter. The Tooltip tells the individual episode statistics in regard to lines.
The wordcloud was built from project 2’s word cloud code. The light & bright colors support the less occurring phrases while the dark colors are the most occurring. The size helps with the color scale to understand the proportions. All the English prepositions and filler words were filtered out.
The Tooltips tells the number of occurrences the words appear depending on the filter set. You can also click the word to add to the filtering options to the dashboard.
The force directed graph shows how all the characters interacted with each other based on scene interaction. You can drag the nodes to see how the others repel or attract and form like seen in these pictures. The node tooltip tells which character you are dragging, and the line tooltip tells the count of scenes between the 2 nodes, characters. Since our data did not include scenes, we determined who shared scenes by how often they said each other's names.
For filtering – outside of the filter/interaction options per each chart, you can also filter by season and phrase at the top of the dashboard. Examples below.
Design Sketching & Justification
Design Sketching & Justification
Overall Layout: High-Level Incorporation of A, B, and C Goals
The overall UI is a dashboard that can be viewed all at once. Filters that can be manipulated in one chart can be seen in all charts and the season and search can quickly filter all charts at once based on season number and/or phrase. Each design meets a project requirement set in Canvas sections A, B , and C Goals.
C-Goals Plan
C-Goals Plan
B-Goals Plan
B-Goals Plan
A-Goals Plan
A-Goals Plan
Findings
Findings
Analyze a character’s personality in the show and respective interactions - See how Michael interacts with the main cast.
Michael interacts with all the 10 characters at some point.
Jason Mendoza doesn’t have any lines in the first 2 episodes of season 1
Love was said 66 times in season 3 and Chidi, Eleanor, Tahani, and Michael were connected to a conversation around love, Janet and Jason were connected about a relationship about love, and surprisingly, Doug and Shawn.
The phrase “what the fork” is commonly used throughout the series because the “good place” has a cursing filter. When we filter by that phrase, we see that it wasn’t spoken at all in Season 3 which gives us the insight that they were not in the “good place” during Season 3.
Process
Process
Libraries & Resource Used: HTML, CSS, JavaScript, D3 (v6), d3-cloud (https://www.npmjs.com/package/d3-cloud)
Deploy Code: (localhost)
Option 1:
Go to github source code link (Top of Webpage)
Clone the repo or download and unzip
In a terminal cd into the downloaded/cloned directory
In the same terminal: run `python -m http.server 8000` (for Python 3)
Python 2: run `python -m SimpleHTTPServer 8000`
Must download Python if not already installed
Navigate to http://localhost:8000 in a browser
Option 2:
Go to release page link (top of webpage)
Click on “Source Code” (.zip or .tar based on your machine)
Extract the zip/tar file
In a terminal cd into the downloaded/cloned directory
In the same terminal: run `python -m http.server 8000` (for Python 3)
Python 2: run `python -m SimpleHTTPServer 8000`
Must download Python if not already installed
Navigate to http://localhost:8000 in a browser
Option 3:
Instead of using Python, you can also use Visual Studio Code extension’s Live Server.
Install Live Server in VS Code
Go to index.html of the project
Click “Go Live” and it will automatically take you to a browser with localhost connected.
Work Breakdown
Keerthi: Basic UI Layout charts, Wordcloud (visual and processing data), Force Directed Diagram (chart, drag, tooltip)
Anna: Data research/processing, Filtering, Linking, Tooltips, Click Interaction, and the search features
Page updated
Google Sites
Report abuse