-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathkeep-it-real.html
106 lines (80 loc) · 5.54 KB
/
keep-it-real.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Begin Jekyll SEO tag v2.6.1 -->
<title>Kelly Hsiao-Ching Su</title>
<meta name="generator" content="Jekyll v3.8.6" />
<meta property="og:title" content="Kelly Hsiao-Ching Su" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="Kelly Hsiao-Ching Su" />
<script type="application/ld+json">
{"url":"/keep-it-real.html","headline":"Kelly Hsiao-Ching Su","@type":"WebPage","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/assets/css/style.css?v=">
<script src="https://code.jquery.com/jquery-3.3.0.min.js" integrity="sha256-RTQy8VOmNlT6b2PIRur37p6JEBZUE7o8wPgMvu18MC4=" crossorigin="anonymous"></script>
<script src="/assets/js/main.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" integrity="sha256-3Jy/GbSLrg0o9y5Z5n1uw0qxZECH7C6OQpVBgNFYa0g=" crossorigin="anonymous"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<header class="header">
<h1>Kelly Hsiao-Ching Su</h1>
<p></p>
</header>
<div id="banner">
<!-- <a href="" class="button fork"><strong>View On GitHub</strong></a> -->
<a target="_blank" href="https://github.com/CApopsicle" id="github-logo"></a>
<a target="_blank" href="https://www.linkedin.com/in/hsiaochingsu" id="linkedin-logo"></a>
<div class="downloads">
<span>Downloads:</span>
<ul>
<li><a href="./Hsiao-Ching_Su_resume.pdf" class="button">RESUME</a></li>
<!-- <li><a href="" class="button">TAR</a></li> -->
</ul>
</div>
</div><!-- end banner -->
<div class="wrapper">
<nav>
<ul></ul>
</nav>
<section>
<a class="back-to-home" href="./">Back to Home</a>
<h2 id="keepitreal">KeepItReal</h2>
<h4 id="a-movie-dialogues-visualization">A movie dialogues visualization</h4>
<p>View our visualization <a href="https://jayantj.github.io/movie-dialogues/movie_all/">here</a>, and the repo on <a href="https://github.com/jayantj/movie-dialogues">Github</a></p>
<p>Our visualization explores movie dialogues spanning 9 decades (1927 - 2010). The purpose of our visualization is to show themes and inter/intra sex ratio in the conversations. We want to bring to light how the ratio of female-female conversations has not really changed over the years. Using overview and then detail, our visualization will highlight these movie characteristics and give our users insight into their favorite movies as well as overall trends.</p>
<p>Some questions you can answer with our viz are:</p>
<ul>
<li>How does inter/intra sex ratio in conversations vary over years and themes?</li>
<li>How do themes and genres intersect?</li>
<li>Do certain genres have a better gender balance in conversations?</li>
<li>Do movies that pass the Bechdel test have a higher percentage of female-female conversations? Where does the Bechdel test fail?</li>
<li>In a specific movie, how do themes intersect with characters? What are the patterns of conversation between characters?</li>
</ul>
<p>In our “overview” panel, we let users explore conversational themes and conversation ratios between sexes across decades and genres. On the left, you can see the ratio of male to male, male to female and female to female conversations in a movie. You can also tell if a movie passed the Bechdel test or not. The Bechdel test is a measure of representation of women in media - it checks if there is a conversation between two women about something other than a man. On the right, we show how major themes in the conversations, like anxiety, leisure, work, vary across movie genres. For instance, we can see that Crime movies have the highest averages for the themes of anger and swearing.</p>
<p><img src="https://i.imgur.com/agqIct4.png" alt="image1" /></p>
<p>With our detail view, we can answer questions like which two characters speak the most to each other, what they spoke about and what the patterns of conversations between characters are. Let’s select a specific movie, 10 things I hate about you.</p>
<p><img src="https://i.imgur.com/66yfUjZ.png" alt="image2" /></p>
<p>On the right, we have the themes present in the movie. Clicking a theme, filters for the conversations with that theme. For example, we see that Cameron and Patrick had a lot of conversations about money.</p>
<p>Using overview and then detail, our visualization highlights these movie characteristics and gives our users insight into their favorite movies as well as overall trends.</p>
<p><a href="./">Back to Home</a></p>
</section>
<footer>
<p><small>Project maintained by <a href="https://github.com/CApopsicle">CApopsicle</a></small></p>
<p><small>Hosted on GitHub Pages — Theme by <a href="https://twitter.com/mattgraham">mattgraham</a></small></p>
</footer>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'true', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>