Welcome to our Project // index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Futurama</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="mainpage.css">
<link rel="icon" type="image/png" href="images/frogFavi.png">
</head>
<body>
<header>
<img class="future" src="images/futuramalogo.png" style="width:40vw; height: 70%;"
alt="Futuramas logo" />
</header>
<div class="cover">
<div class="innerhead">
<h1 class="header">New New York Post</h1>
<hr>
<nav>
<a href="index.html">Welcome to Our Project</a>
<a href="aboutus.html">About Us</a>
<a href="findings.html">Our Findings</a>
<a href="reflections.html">Our Reflection</a>
<a href="code.html">Code</a>
</nav>
<h2 class="title">Welcome to Our Team Futurama Project!</h2>
</div>
<div class="meat">
<div class="image">
<div class="lol" aria-labelledby="lol">
<h3 id="lol">Overview</h3>
<a href="https://github.com/MystKitteh/TeamFuturama" target="blank">This repository</a>
contains data and analysis regarding the TV show Futurama, which aired from
1999 to 2003. The analysis focuses primarily on character lines and the
frequency of each character's dialogue throughout the series. </div>
<figure class="hypnotoad">
<img alt="hypnotoad" src="images/hypnotoad.png">
</figure>
</div>
<div class="bone">
<h3>Data</h3>
<p> The data used for this analysis was collected from transcripts of each
episode of Futurama. The transcripts were processed to extract dialogue
lines for each character. </p>
<h4>Analysis</h4>
<p> The analysis provides insights into the dialogue lines delivered by each
character throughout the series. This includes: </p>
<ul>
<li>Total lines spoken by each character</li>
<li>Distribution of lines across seasons</li>
<li>Notable quotes and dialogue patterns for key characters</li>
<li>Frequency of Speaking</li>
</ul> Additionally, the analysis explores how frequently each character speaks
relative to others. This includes: <ul>
<li>Comparison of speaking time between main characters</li>
<li>Trends in character dialogue across seasons</li>
<li>Impact of character dynamics and story arcs on speaking time</li>
</ul>
<h4>Usage</h4>
<p>Researchers, fans, and enthusiasts of Futurama can use this analysis to:</p>
<ul>
<li> Gain insights into the character dynamics and dialogue distribution
throughout the series. </li>
<li> Explore trends and patterns in character development and storytelling. </li>
<li> Inform discussions and analyses of the show's narrative structure and
character interactions. </li>
</ul>
<h4>Credits</h4>
<p> This analysis was conducted by Mistie McColm, Tyler Dollard, Charlie Vazquez
and Samantha Moniot and is made available under the [appropriate license or
attribution]. </p>
<h4>Disclaimer</h4>
<p> This analysis is intended for school research and entertainment purposes
only. Futurama is the intellectual property of its creators and production
companies. This analysis is not affiliated with or endorsed by the creators
or production companies of Futurama. </p>
<p><a href="surpriselink.html">Click this link for a nice surprise!</a>
</p>
</div>
</div>
</div>
</body>
</html>
About Us // aboutus.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>About Us</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="subpage.css">
<link rel="icon" type="image/png" href="images/frogFavi.png">
</head>
<body>
<header>
<img class="future" src="images/futuramalogo.png" style="width:40vw; height: 70%;"
alt="Futuramas logo" />
</header>
<div class="cover">
<div class="innerhead">
<h1 class="header">New New York Post</h1>
<hr>
<nav>
<a href="index.html">Welcome to Our Project</a>
<a href="aboutus.html">About Us</a>
<a href="findings.html">Our Findings</a>
<a href="reflections.html">Our Reflections</a>
<a href="code.html">Code</a>
</nav>
<h2 class="title">About the students</h2>
</div>
<div class="bone">
<h3>Mistie McColm</h3>
<p>I'm a transfer student from Texas currently completing my senior year at Penn
State Behrend. Exploring this project has been a nice throwback to one of my
childhood favorites, Futurama. When I have spare time I enjoy playing video
games, making art, reading, and hiking.</p>
<h3>Samantha Moniot</h3>
<p>I am a third year digit student double minoring in marketing and data
visualization. I had not watched futurama before working on this project so
learning about the characters and their quirks has been interesting to see. In
my spare time, I enjoy reading and playing Stardew Valley.</p>
<h3>Charlie Vazquez</h3>
<p>I'm a student in my second year as of now, transfered from a different
commonwealth campus to psu behrend after changing my major to DIGIT. I was
already familiar with futurama before working on the project and I'm a fan of
the show. I hope to learn more about the Adobe Creative Cloud offered in DIGIT
and to get a career involving content creation. In my spare time I enjoy
learning to play the guitar and working on my webcomic.</p>
<h3>Tyler Dollard</h3>
<p>I’m Tyler Dollard, a third-year student at Penn State Behrend, passionate about
delving into the world of digital media. From crafting films to creating short
clips, I’ve always found joy in storytelling through visuals. My goal? To hone
my skills and turn my passion into a fulfilling career. When I’m not immersed in
media creation, you’ll likely find me enjoying my favorite TV shows, diving into
video games for both leisure and competition, or hitting the field for some
sports action. Life’s all about balancing creativity and play, and I’m here for
every moment of it.</p>
</div>
</div>
</body>
</html>
Our Findings // findings.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Our Findings!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="subpage.css">
<link rel="icon" type="image/png" href="images/frogFavi.png">
</head>
<body>
<header>
<img class="future" src="images/futuramalogo.png" style="width:40vw; height: 70%;"
alt="Futuramas logo" />
</header>
<div class="cover">
<div class="innerhead">
<h1 class="header">New New York Post</h1>
<hr>
<nav>
<a href="index.html">Welcome to Our Project</a>
<a href="aboutus.html">About Us</a>
<a href="findings.html">Our Findings</a>
<a href="reflections.html">Our Reflections</a>
<a href="code.html">Code</a>
</nav>
</div>
<h2 class="title">Data visualizations</h2>
<div class="vis">
<h2 class="finding">Most used Words in Season 1, Episode 1.</h2>
<img src="images/1X1viz2.png"
alt="a wordmap of most used words in the first episode" class="antvis" />
<h2 class="finding">Most used Words in Season 5, Episode 16.</h2>
<div class="svg">
<img src="images/5X16viz2.png"
alt="a wordmap of most used words in the last episode" class="antvis">
<p class="info">The visualization show the frequency of which words had higher
frequency. Both visualization had Fry, Bender and Leela as having a higher
frequency.</p>
<h3 class="finding">Average Main Character Dialogue Frequency Per Episode -
Season 1 v 5</h3>
<img src="season1.svg" alt="graph of dialogue distribution from season 1"
class="fimg" />
<img src="season5.svg" alt="graph of dialogue distribution from season 5"
class="fimg" />
</div>
<div>
<h2 class="finding">Jupyter Notebook Visualizations</h2>
<iframe src="images/network.html"></iframe>
</div>
<a href="https://mybinder.org/v2/gh/MystKitteh/TeamFuturama/HEAD"><hr />Jupyter
Notebook Visualizations</a>
</div>
</div>
</body>
</html>
Our Reflections // reflections.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Reflection</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="mainpage.css">
<link rel="icon" type="image/png" href="images/frogFavi.png">
<body>
<header>
<img class="future" src="images/futuramalogo.png" style="width:40vw; height: 70%;"
alt="Futuramas logo" />
</header>
<div class="cover">
<div class="innerhead">
<h1 class="header">New New York Post</h1>
<hr>
<nav>
<a href="index.html">Welcome to Our Project</a>
<a href="aboutus.html">About Us</a>
<a href="findings.html">Our Findings</a>
<a href="reflections.html">Our Reflections</a>
<a href="code.html">Code</a>
</nav>
</div>
</div>
<h3>Intro</h3>
<p>We used several different data visualization softwares. These include: AntConc, SVG and
seaborn via jupyter notebook.</p>
<h3>AntConc</h3>
<p>We made two visualizations with AntConc. One for the first episode and one for the last
episode. The main goal we had for these visualizations were to see what patterns changed
or if any characters were mentioned less frequently as the show went on. AntConc is
primarily designed for text analysis, so the types of visualizations we could generate
were somewhat restricted. This meant we had to get creative to represent our data
effectively.One issue that we faced was that there were too many words in the wordcloud
that made it more difficult to read.We fixed this by reducing the word count analyzed
from 200 to 50. This made the wordcloud much easier to read.</p>
<h3>SVG</h3>
<p>We made two SVGs for the first and fifth season. We found the data using XPath for the
each episode of season 1 and 5. There were a total of 25 episodes (9 for season 1 and 16
for season 5). The goal of this comparison was to see if any characters had a change of
frequency in dialogue. We found that Fry had more overall dialogue in both seasons when
compared to Bender and Leela. All three character decreased their dialogue per episode
by season 5. The main difficulty was figuring out how to recenter the text to appear on
our site. The other difficulty was we had realized that season 1 and 5 had a different
number of episodes which could account for why there Bender and Leela had increased
dialogue. We averaged out the data instead to give more accurate results. </p>
<h3>Seaborn</h3>
<p>While Seaborn offers a high-level interface for creating attractive visualizations, we
sometimes found ourselves limited by the library's built-in customization options.
Achieving specific design or formatting requirements often required additional coding or
workarounds.</p>
<h3>HTML&CSS</h3>
<p>We created 5 html pages and 2 CSS pages. While our work with HTML and CSS ran relatively
smooth, there were some issues that we faced.One issue that we faced was that on one our
laptops the "Data" heading text was overlapping with some of the other text.We were able
to fix this by having some of the CSS simplified. </p>
<h3>Conclusions</h3>
<p>Despite these challenges, we were able to overcome them through collaboration,
experimentation, and perseverance, ultimately producing insightful visualizations to
support our project goals.</p>
</body>
</html>
CSS // mainpage.css
@font-face {
font-family: 'Bebas Neue';
src: url('./Fonts/BebasNeue-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
header {
background-image: url(images/header-thin.png);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 369px;
padding: 0px;
margin: 0px;
width: 100vw;
}
img.future {
height: 260px;
text-align: center;
margin: auto;
padding-top: 55px;
display: block;
}
html, body {
overflow-x: hidden;
background-color: #FBFAE5;
}
/* dr. b simplifying the css with a nice flex container */
div.image {
display:flex;
}
/* dr. b added a class attribute to the div inside to make it easier to point to here.
* Also wrapped a <figure> element around the image to make it easier to control the size. */
div.lol {
flex: 2;
font-size: 20pt;
color: black;
text-align: justify;
transform: translateX(1em);
}
figure.hypnotoad {
flex: 1;
}
figure.hypnotoad img {
width:90%;
max-width:1000px;
border: solid black 5px;
margin-left:2vw;
}
div.bone{
padding-left: 20pt;
font-size: 20pt;
max-width: 80vw;
}
div.image div > h3{
font-size: 1.5em;
}
div.cover{
background-color: #FBFAE5;
font-family: Helvetica;
margin-left:auto;
margin-right:auto;
margin-top: 368px;
background-position: center center;
background-repeat: no-repeat;
}
nav{
text-align: center;
}
nav a {
margin-left: 0.5em;
margin-right: 0.5em;
color: black;
padding-top: 10px;
}
hr{
border: 4pt solid black;
}
h1.header{
font-size: 90pt;
text-align:center;
font-family: 'Bebas Neue', sans-serif;
color: #bc4128;
text-shadow: -3pt 3pt 0 black;
transform: skew(-10deg, 0);
margin-top: 0.1em;
margin-bottom: 0.1em;
}
h2.title{
text-align: center;
max-width: 80vw;
font-size: 100pt;
margin-top:0.1em;
margin-bottom: 0.1em;
font-family: 'Bebas Neue', sans-serif;
}
body {
width: 70%;
padding: 30px 15%;
font-family: sans-serif;
}
a {
color:black;
}
a:hover {
color: gray;
}
.frylink {
height: 50vw;
width: 55vw;
display: block;
margin-left: auto;
margin-right: auto;
}
