-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (140 loc) · 7.8 KB
/
index.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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<html>
<head>
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class='sec1'>
<h1>The Exclusion of Women In Hollywood</h1>
<h3 style="padding-top: 130px">Do you think Hollywood has improved its representation of women?</h3>
<small>Respond to see what other visitors think.</small>
<div id="poll_question" class="poll_question">
<!-- bruh -->
</div>
<div id="poll_results" style="padding-bottom: 4px;">
<!-- no matter how jank...if it works it works -->
</div>
</section>
<section class="sec2">
<h2>How do we evaluate<br>the representation of women in movies?</h2>
<div style="padding-top: 50px;">
<h3>To do this, we use something called the <strong><u>Bechdel Test</u></strong>.</h3>
<p>The Bechdel Test (otherwise known as the Bechdel-Wallace Test or the Bechdel Rule) is a simple test which names the following <b>three</b> criteria:
<ul>
<li><b>(1)</b> it has to have at least two women in it, </li>
<li><b>(2)</b> who talk to each other, about </li>
<li><b>(3)</b> something besides a man.</li>
</ul>
</p>
</div>
<h2 style="padding-top: 50px;">Did your favorite movies pass the Bechdel Test?</h2>
<p>Search for it to find out.</p>
<div class="search-input">
<input type="text" placeholder="Type to search..">
<div class="autocom-box">
<!-- here list are inserted from javascript -->
</div>
<div class="movie_result hidden"></div>
</div>
</section>
<section class='sec3'>
<h1>How well do you know Hollywood?</h1>
<p>Take a short quiz of ten randomly generated movies and guess if these highly grossing movies passed the Bechdel test.</p>
<div id="game" class="game" style="padding-top: 20px;">
</div>
<div id="game_buttons"> <!-- Next and previous buttons --></div>
<div class="dots"></div>
<h2>Score: <b><span id="gameScore">0</span></b>/10</h2>
<div id="gameChartDiv" style="display: none; padding-top: 20px;">
<h2 style="padding-bottom: 20px;">How did you do when compared to others?</h2>
<div id="gameChart"></div>
<p style="padding: 50px 0 0 0">It is noteworthy how false positives (guessing a movie passed the Bechdel test when it had failed) <br><b>outnumber</b> false negatives (guessing a movie failed the Bechdel test when it passed)</p>
</div>
</section>
<section class="sec4">
<h2 style="padding-top: 20px;">Movies Failing The Bechdel Test (Past 20 Years)</h2>
<small>The number of movies that failed the Bechdel Test in the top ten grossing movies per year.</small>
<div id="highest_gross_chart_legend">
<!-- This is where we will put our chart legend. -->
</div>
<div class="two-col">
<div id="highest_gross_chart">
<!-- This is where we will put our percentage chart. -->
</div>
<div id="highest_gross_movies">
<!-- list of movies. -->
</div>
</div>
<p style="padding-top: 20px;">In 2019, only half of the top ten blockbusters passed the Bechdel Test. Keep in mind that the Bechdel Test has been around since 1985, and only has three simple rules...</p>
</section>
<section class="sec5">
<h2>Perhaps genres will tell us a different story?</h2>
<h1 style="padding-top: 20px;">Genres</h1>
<p>Percentage of movies for 9 select movie genres that passed the Bechdel test</p>
<div id="genres_line_chart">
<!-- This is where we will put our genres chart. -->
</div>
</section>
<section class="sec6">
<h1>A Closer Look</h1>
<p>Feel free to explore our datasets more below.</p>
<article>
<div class="art1">
<h2>Percentage of Movies Passing the Bechdel Test<br>(1973 to 2013)</h2>
<p>Brush over this line chart to view more about the movies in each year!</p>
<div id="bubbleYear"></div>
<div id="line_chart">
<!-- This is where we will put our line chart. -->
</div>
<button id="resetButton" style="text-align: right;">CLEAR SELECTION</button>
</div>
<div class='art2' style="padding-top: 50px;">
<div id="bubble_legend" >
<!-- This is where we will put our bubble legend. -->
</div>
<div>
<div id="bubble_chart">
<!-- This is where we will put our bubble chart. -->
</div>
<div class="button_group"></div>
</div>
</div>
</article>
</section>
<section class="sec7">
<div class="content">
<p>Do you think Hollywood has improved its representation of women over the years?</p>
<p>We think there's been some improvement, but it's clear that Hollywood has a long way to go. It's important to remember that the Bechdel Test has been around for more than thirty years now, and actually only needs three requirements to pass. In fact, the test itself has its own share of criticisms for being too simple or too limiting, among other factors. Nowadays, many people are seeking out newer, more up-to-date measures for evaluating the representation of women in movies, which includes considerations for race, sexuality, character arc, and more.</p>
<p>To learn more about the Bechdel Test, its pros and cons, and what other tests there are, we've compiled a list of cool articles you can check out here:</p>
<ul>
<li><a href="https://www.vogue.co.uk/arts-and-lifestyle/article/the-bechdel-test">Why Are Films Failing The Bechdel Test When TV Has Progressed?</a></li>
<li><a href="https://fivethirtyeight.com/features/the-dollar-and-cents-case-against-hollywoods-exclusion-of-women">The Dollar-And-Cents Case Against Hollywood’s Exclusion of Women</a></li>
<li><a href="https://projects.fivethirtyeight.com/next-bechdel/">Creating The Next Bechdel Test</a></li>
<li><a href="https://www.huffpost.com/entry/why-the-bechdel-test-fails-feminism_b_7139510">Why the Bechdel Test Fails Feminism</a></li>
</ul>
<p>We hope you've enjoyed this visualization and that you can come away with some more insights about the representation of women in Hollywood!</p>
</div>
</section>
<div>Data Sources:
<a href="https://github.com/fivethirtyeight/data/tree/master/bechdel">FiveThirtyEight</a>,
<a href="https://bechdeltest.com/"> The Bechdel Test API</a>,
<a href="https://www.kaggle.com/narmelan/top-ten-blockbusters-20191977"> Top Ten Blockbusters</a>,
<a href="https://www.themoviedb.org/documentation/api">The Movie Database API</a>
</div>
<div>Inspiration from:
<a href="https://bl.ocks.org/suneric1/c5432c5ecd181dc8b4fe#index.html">Zhiming Sun's Small Multiples</a>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-database.js"></script>
<script src="js/poll.js"></script>
<script src="js/bigpicture.js"></script>
<script src="js/genres.js"></script>
<script src="js/highest_gross_chart.js"></script>
<script src="js/game.js"></script>
</body>
<!-- This adapted from Arvind's observable from lecture. https://observablehq.com/d/4c93c3a516d35624 -->
<!-- Great D3 intro resource: https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3 -->
</html>