-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
186 lines (166 loc) · 28.5 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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<head>
<title>Sentiments of Notre Dame</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Notre Dame, Textual Analysis, Sentiment Analysis, UCLA, Digital Humanities">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="w3-black">
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-black w3-card">
<a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">HOME</a>
<a href="#geolocation-analysis" class="w3-bar-item w3-button w3-padding-large w3-hide-small">GEOLOCATION ANALYSIS</a>
<a href="#emoji-analysis" class="w3-bar-item w3-button w3-padding-large w3-hide-small">EMOJI ANALYSIS</a>
<a href="#text-analysis" class="w3-bar-item w3-button w3-padding-large w3-hide-small">TEXT ANALYSIS</a>
<a href="#narrative" class="w3-bar-item w3-button w3-padding-large w3-hide-small">NARRATIVE</a>
<a href="#about" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ABOUT</a>
</div>
</div>
<!-- Page Content -->
<div class="w3-padding-large" id="main">
<!-- Header/Home -->
<header class="w3-container w3-padding-32 w3-center w3-black" id="home">
<h1 class="w3-jumbo"><span class="w3-hide-small">Sentiments of</span> Notre Dame.</h1>
<p>A Digital Humanities Project.</p>
</header>
<div id="container"></div>
<!-- Geolocation Analysis Section -->
<div class="w3-content w3-justify w3-text-grey w3-padding-64" id="geolocation-analysis">
<h2 class="w3-text-light-grey">Geolocation Analysis</h2>
<hr style="width:200px" class="w3-opacity">
<p>The main visualization of Notre Dame surrounded by thousands of light spheres is a 3D visualization powered by three.js, and was inspired by the ritual lighting of memorial candles in rememberance of someone or something of significance. Each light sphere represents a tweet with the "notredame" hashtag, and its position relative to the Notre Dame model is according to the geolocation metadata of the tweet. 5000 twitter datasets were loaded onto this webscape to create a virtual memorial for a symbol so well-known across the world. The visualization's orbit camera is centered on Notre Dame, and when the user explores the visualization further by zooming out from Notre Dame and rotating the webscape, he/she will notice the semblance of a world map created by the light spheres. This is a world map unlike one that we would be familiar with - it is one that is not marked by any borders, be they political, territorial or historical. It is simply a collection of thoughts of people from all over who share a common interest in the downfall of the Notre Dame. In the words of the great political scientist and historian, Benedict Anderson, this is an
<em>imagined community</em> bonded by a shared feeling of grief.</p>
<img src="images\NotreDameFireTweets_staticmap.jpg" alt="NotreDameFireTweetsLocation" style="width:500px;">
<p><em>Heatmap of Notre Dame Tweet Geolocations created on Tableau</em></p>
<p>A more detailed analysis of the geolocation of the tweets reveals interesting trends. The geographical locations of where the tweets originates from covers a wide array of locations across the world, however they appear to be dispersed unevenly. The locations with the highest number of tweets appears to be North America, specifically concentrating on the United States of America, and Europe followed along by South America. A possible bias in this information is that the keywords “notre dame” recalled tweets in primarily French and English. However, this possible bias fails to account for the concentration of tweets from South America in comparison to other continents such as Australia. In South America the the official language of most countries is Spanish, with several exceptions such as Brazil, however it still shows a higher number of tweets on the Notre Dame fire than Australia whose official language designated is English. The low number of tweets on the Notre Dame fire from Australia indicate a possible correlation between the spatial geography and the concentration of tweets. For example, while Australia fits within the language parameters of our Twitter scraping its further proximity to Notre Dame in comparison to other English speaking countries might account for the low number of tweets. Even though globalization has had the effect of time-space compression andhas arguably made the world a smaller and more interconnected place, spatial proximity between people and objects still does matter even in the case of an international symbol and event so widely publicized on the media.
</p>
</div>
<!-- Emoji Analysis Section -->
<div class="w3-content w3-justify w3-text-grey w3-padding-64" id="emoji-analysis">
<h2 class="w3-text-light-grey">Emoji Analysis</h2>
<hr style="width:200px" class="w3-opacity">
<p>
The emojis used in the tweets that were collected assist in portraying how reactions and emotions were conveyed through out the initial events of the fire to a period of a week following the Notre Dame fire. Marcel Danesi argues that the informal, visual language of emojis “certainly has the implications for what a universal form of language might look like” since it does not require skilled training to decode or use, hybridizes words and images to make reading easy and accessible, and is a form of digital communication that is globally used. He notes that cultural differences influence emoji development, usage, and interpretation, but suggests that “the core lexicon of the emoji code,” emojis that “[contain] signs that are consistent with core vocabularies in general,” are recognizable across the world because “they are interpretable in a straightforward fashion” (157–58, 40–46). Emojis, then, may be a helpful gauge of tones in international conversations that can overcome linguistic differences.
</p>
<div id="emoji-cloud-1"></div>
<p><em>Day of Fire</em></p>
<div id="emoji-cloud-2"></div>
<!-- <p><em>4 Days After Fire</em></p> -->
<p>
<br>
Distinctive shifts in the use of emoji serve to visualize and mark shifts in the tone of the conversation regarding the fire and the attention being directed at Notre Dame. Different types of emojis were used to communicate emotional reactions, including facial expressions, hand gestures, flags along with other expressive icons such as hearts. The use of flags marks an importance shift in Twitter user conversations and situate the dominance of a high profile event like the Notre Dame fire that received wide coverage. The day prior to the Notre Dame fire four different flags were included in the top twenty emojis being used. The flags for France, England, the United Kingdom, and Syria were prevalent in twitter users discussion possibly indicating that the focus of discussion was on the missile strike launched by the United States, France, and the United Kingdom on Syria. However, after the next day when the Notre Dame fire occured the only flag prevalent in the twenty used emojis was the French flag. While the prevalent use of the French emoji helps indicate a shift in the overarching conversation the use of facial expressions designates varied reactions that complicate how people might have perceived the Notre Dame fire and attention being directed towards the cathedral beyond what news outlets issue. For example the day of the fire, the top three emojis used were the “loudly crying face,” french flag, and “broken heart” emojis the majority of the emojis used fell along this tone or sentiment of being upset or in distress over the fire, designated the location of the event (i.e. the church or “latin cross” emoji), or offered moral support through the “folded hands” emoji otherwise known as the praying hands emoji. Nevertheless, there was an outlier on the day of the event that fell outside this tone of grief, dejecton or moral support which was the “face with tears of joy,” which is usually used to represent laughing and teasing. Emojis that disrupted this notion of grief and support for Notre Dame became more prevalent in the conversation as time progressed shifting the tone of the discourse to allow space for a more critical perception of the attention being directed at Notre Dame following the fire.
</p>
</div>
<!-- Text Analysis Section -->
<div class="w3-content w3-justify w3-text-grey w3-padding-64" id="text-analysis">
<h2 class="w3-text-light-grey">Text Analysis</h2>
<hr style="width:200px" class="w3-opacity">
<iframe style='width: 400px; height: 300px; display: inline-block; float: left; padding-right: 20px;' src='//voyant-tools.org/tool/Cirrus/?palette=4ac84b5760ef3ebfe97fd65c2586fb36&stopList=keywords-3f83ee6cea67e0eef0bc1865a3b038ca&whiteList=&corpus=6d378e6a74e248095460446280f1362d'></iframe>
<a href="//voyant-tools.org/tool/Cirrus/?palette=4ac84b5760ef3ebfe97fd65c2586fb36&stopList=keywords-3f83ee6cea67e0eef0bc1865a3b038ca&whiteList=&corpus=6d378e6a74e248095460446280f1362d">
<img src="images\linksanimation.gif" alt="Text Analysis GIF" style="height: 300px; display: inline-block;">
</a>
<p>
<em>
The first visualization is a word cloud of frequently used terms in the conversation about the Notre Dame fire. Use the Scale menu to explore the corpus by day. The second visualization is a GIF animation of how word correlations and networks surrounding the most frequently used terms evolved each day. Click on the GIF to explore the corpus.
</em>
<br><br>
In Voyant, we explored textual trends in our corpus of tweets from April 15th—the start of the Notre Dame fire—to April 22nd. We divided the corpus by day to understand how Twitter conversations evolved over the duration of the week that followed the event. Both Voyant’s Cirrus tool, a word cloud generator that visualizes text based on word frequency, and Links tool, a visualization that shows correlations between the most frequently words used in the corpus, reflected how conversations surrounding Notre Dame and the imagined communities rallying around its iconography expanded and changed over time. Tweets over the first day reflected observation of the events, responses of grief, and philanthropy as reflected through words like “destroy,” “fire,” “loss,” and “rebuild.” As the days ensued, Twitter users began to use Notre Dame as a starting point to talk about other important social justice issues that attention to Notre Dame neglected or occluded. For example, references to “black churches” became frequent in the corpus as Twitter users urged the public to consider the equal importance of the recent destruction of three black churches in Louisiana by “racist arson.” This particular finding represents trends in the Notre Dame Twitter conversations about biases that establish some national symbols as more important than others and how that translates to philanthropic prioritization. Conversations about challenging sociohistorical colonial hierarchies continued on the final day of the Notre Dame corpus, a day that marked the Easter Day bombings in Sri Lanka that killed almost 300 people. Twitter users challenged those who felt moved to donate to Notre Dame to also consider how their humanitarianism should address the needs of non-Western nations.
<br><br>
Another key emergence was Twitter conversations regarding environmental activism. References to the rainforest and the Great Pacific Garbage Patch began to increase in frequency as users used the billions of donations to Notre Dame to compare how much it would cost to address and fix these environmental concerns. The key terms “billionaires,” “billions,” “donating,” “donate” remained consistent across the corpus, but increases in the frequency of the word “hypocrisy” and “bragging” over time suggested that conversations regarding philanthropic aid took on layers of skepticism as users believed that the monetary assistance could be better applied elsewhere.
<br><br>
The textual trends in the Notre Dame tweets are indicative of how the power and definition of national symbols are being questioned. The destruction of Notre Dame is a powerful national symbol that created and united imaginary communities across geographic and international boundaries through public grief. However, as Twitter users witnessed the power of imagined communities built on symbols that represent cultural, social, and historical hegemonic inequalities, they began to challenge their power dynamics by offering alternative representations of symbols that should also carry such national and international significance, like the experiences of marginalized populations and sites of environmental devastation.
</p>
</div>
<!-- Narrative Section -->
<div class="w3-content w3-justify w3-text-grey w3-padding-64" id="narrative">
<h2 class="w3-text-light-grey">Narrative</h2>
<hr style="width:200px" class="w3-opacity">
<p>On Monday, April 16th, 2019 in Paris, France at 6:20 PM the first of two alarm sounds could be heard ringing in the Notre Dame Cathedral. This first alarm sound was heard during mass service and everyone was evacuated from the building. When the second alarm sound was heard at 6:43 PM a fire was officially declared. It was not until the following morning that firefighters and Laurent Nunez, a junior interior minister, declared the fire fully extinguished. During this time frame a whirlwind of news articles, live videos, and responses to the fire could be seen circulating Twitter as new videos of the cathedral, new updates, along with gestures of moral support and a discussion of rebuilding Notre Dame began to take place. The fire at Notre Dame not only received widespread news coverage but serves as a case study for understanding how social media platforms serve to circulate and receive information on high profile, real time events. Through these platforms all users are now able to participate in the documentation, proliferation, and construction of narratives and memory making.
<br><br>This interest in exploring how social media platforms serve in the creation of digital collectives or imagined communities along with how recent the Notre Dame fire occurred motivated our team to initiate this research project. Viewing Twitter data through the lens of “imagined communities” a term coined by Benedict Anderson, allow us to account for how the harm of a French cultural icon might spark a digital, global community far beyond its reach. Sentiments of Notre Dame sets out to explore how Twitter users shaped the narrative of the Notre Dame fire looking at tweets responding to the Notre Dame fire during and after the event to view how these dialogues changed and how far in the globe these interactions reach.
<h3 class="w3-text-light-grey">Significance</h3>
<p>Beyond the quantifiable analytical techniques used for this project to collect and visualize Twitter data the Sentiments of Notre Dame project was motivated by the concept of “imagined communities” in exploring how Twitter discourse on the Notre Dame fire varied and changed overtime. Benedict Anderson first coined the term “imagined communities” to address how nations do not have explicit boundaries but rather are created through perception in relation to socially constructed symbols and attaching identity to those symbols. These symbols allow for people who may have never met to hold the perception of being connected or belonging. While “imagined communities” is used by Anderson to delineate the social construction of the nation state, it also explains how international communities can also feel a sense of intimacy and solidarity due to an attachment to socially significant symbols. In this case, Notre Dame as a symbol of France and a valorized international symbol functioned to rally an imagined community which can be seen through the level of interaction and narrative presented by Twitter users. While Anderson’s concept of imagined communities offers a basis for understanding the initial focus of Notre Dame’s discourse, Michael Rothberg’s proposition for the use of “social frameworks of memory” offers a perspective to account for how this discourse shifted over the course of time.
<br><br>
Michael Rothberg’s critical analysis of Pierre Nova’s Lieux de memoire, a series that delves into studying collective memory making in France, offers an enhanced theoretical perspective for fully understanding collective memory making beyond imagined nation states. Rothberg’s main criticism of Nova is centered on the inability to account for France’s complex colonial history and the limitation of the concept of “site of memory” which reproduces nationalistic sentiments. Rothberg presents the notion of “social frameworks of memory” as an alternative, which is able to account for memories emerging from multifaceted encounters between conflicting, diverse pasts and presents. Social framework of memory serves as a lens for viewing how Anderson’s concept of imagined communities evolves through the Twitter discourse surrounding the Notre Dame fire. The concept of imagined communities is present and foundational to the level of public outcry, attention, and interactive discourse generated by Twitter users. The vision of global unity and public grief deconstructs conventional national boundaries and allows for the creation of a global scale of imagined community centering the Notre Dame fire. Still, the multiplicity of engagement through social media allows for the integration of different histories and perspectives to redirect the dialogue around Notre Dame, bringing in multifaceted, conflicting discourses within the same conversation and platform. Tracing the public perception of Notre Dame’s destruction over time suggests that contemporary audiences are challenging the construct of national and international icons by identifying their biases, ultimately advocating for the values of imagined communities to be more inclusive.
</p>
<br>
<h4 class="w3-text-light-grey">Audience</h4>
<p>The Sentiments of Notre Dame project was created with the intention of being used by a wide ranging, general public to serve as an entry point for anyone who is interested in exploring the impact and relevance of social media data in articulating collective memory, contemporary discourse, and a sense of community in a digital age. However, we also imagine this project will serve the interests and needs of academic scholars in a variety of fields including but not limited to history, cultural studies, sociology, art history, and linguistics. This project offers a model for the use of text analysis on Twitter data including tweet text and emojis. In addition, this project offers a conceptual framework for noting the intricate complexities of collective memory making in a digital, global society. This project is able to demonstrate how several different Humanities disciplines can utilize social media data analytics for research and offers examples of visualizations that can be utilized for this type of research.
</p>
<br>
<h4 class="w3-text-light-grey">Technical Specifications</h4>
<p>The first stage of data scraping for tweets was completed utilizing the the twitter archiving tool TAGS. TAGS was useful in collecting a wide variety of different Twitter user data such as text, user location, when the tweet was create, etc. all within a single Google Sheet for easy access and viewing purposes. OpenRefine was utilized for data cleaning purposes after certain categories of information were selected as the focus of this project. OpenRefine was an appropriate tool for data cleaning because it allowed us to effectively merge and edit various responses to create consistency across all data entries. Voyant Tools, an open source web based application, was used to complete text analysis on the tweets collected to pinpoint and visualize the progressions of different topics and dialogues centering the Notre Dame fire.</p>
<br>
<h4 class="w3-text-light-grey">Data Selection</h4>
<p>Data for the Notre Dame Sentiments project was scrapped utilizing Python and the twitter archiving tool TAGS. Our data selection initially focused on collecting Twitter data promptly following the events of the Notre Dame fire by searching for the term “Notre Dame” on TAGS in tweets from the day of the event. We had initially set out to explore the information collected from tweets focusing on designated English and French tweets, geographical locations, and the content of the tweets. Following this initial stage of data collection, we then decided to collect data from the one week period following the Notre Dame fire to help identify the progression of initial conversations and observations by Twitter users. At the beginning of this project we set out to investigate the how reactions between different language users who might have a different range of investment in the conservation and reconstruction of Notre Dame. Similarly with geographical locations, we wanted to explore how people across the globe who have a wide range of perspectives on Notre Dame articulated their reaction to the fire. In addition, the team also analyzed emojis collected from tweets. As a new convention of digital communication, analyzing emoji use allowed us to further investigate the varied reactions and positions Twitter users were taking in conveying their thoughts on the Notre Dame fire and the responses from public figures.
</p>
<br>
<h4 class="w3-text-light-grey">Description of Work Plan</h4>
<p>The work plan for this project involved several different stages and goals including collecting and cleaning data, data cleaning, producing spatial visualizations, producing visualizations for text analysis on the content of tweets including emojis. While utilizing the TAGS tool offered the team an array of possibility for exploring how Twitter users reacted to the Notre Dame fire we decided to focus this research project on the language and geographical locations of the tweets along with the text. We set out to explore how these different factors might contribute towards a specific stance on the Notre Dame fire or serve to help reveal any specific trends in our data. We had to clean the data for the geographical locations to ensure that all entries were consistent and that any arbitrary information was not included in this category of data.
<br><br>After cleaning data for geographical locations we had to produce latitude and longitude for all the locations to create an interactive spatial visualization that centers the structure of Notre Dame and spans outward to the locations from where user were tweeting. This visualization was produced to demonstrate the complexities of digital communication in a globalized society where people across the world are able to articulate conversations, interactive discourse, and community across nations on topics beyond the scope of their everyday lives.
<br><br>To enhance the scope of this project and the complex ways in which people are now articulating and participating in wider discourse we also analyzed the use of emojis within the tweets. The use of emojis in tweets was compiled using Python and was analyzed looking through the varied quantities and categorizations of the top 20 emojis used during different days. The number of instance an emoji occured and changes in emoji categories were analyzed to help define the general sentiments and reactions twitter user had over the Notre Dame fire. The use of emoji analysis helped augment the text analysis of tweet completed through the ____ feature/s on Voyant Tools. All of the visualizations and text analysis competed for this project were compiled to be publicly showcased for other scholars, Twitter users, and the general public to explore the topic and potentially use this project as a model for research endeavours on the Notre Dame fire or other topics.
</p>
<h3 class="w3-text-light-grey">Conclusion</h3>
<p>Sentiments of Notre Dame is able to explore how high profile incidents serve to garner an international sense of community and discourse via social media platforms such as Twitter. Twitter data of tweets spanning from the day of the Notre Dame fire and the following one week period helped contextualize this scenario. This data revealed not only that Twitter offered a platform for users to react and contribute to the memory making process of the Notre Dame fire they were able to redirect the tone and focus of the narrative. Text analysis of tweet content including emojis reveals that Notre Dame was able to function as an anchor to globally unify Twitter users to lament the damage to Notre Dame and to bridge conversations of other important issues that critically address the valorization of Notre Dame. Furthermore, the designated geographical locations of Twitter users reveals the global extent of these conversations. Overall, the Notre Dame fire is a timely relevant example of how the use of social media proliferates imagined communities and allows for distinct, multifaceted conversations to take place within the same space.
</p>
<h3 class="w3-text-light-grey">References</h3>
<p>
<em>Anderson, Benedict R. O’G. Imagined Communities : Reflections on the Origin and Spread of Nationalism. Vol. Rev. and extended ed. London: Verso, 1991. http://search.ebscohost.com/login.aspx?direct=true&db=nlebk&AN=729895&site=ehost-live.
</em>
<br><br>
<em>Danesi, Marcel. The Semiotics of Emoji: The Rise of Visual Language in the Age of the Internet. Bloomsbury Publishing, 2016.
</em>
<br><br>
<em>Henley, Josh. “Notre Dame Cathedral fire – a visual guide and timeline.” The Guardian, April 16, 2019. https://www.theguardian.com/world/2019/apr/16/notre-dame-cathedral-fire-a-visual-guide-and-timeline.
</em>
<br><br>
<em>Rothberg, Michael. "Introduction: Between Memory and Memory: From Lieux De Mémoire to Noeuds De Mémoire." Yale French Studies, no. 118/119 (2010): 3-12. http://www.jstor.org/stable/41337077.
</em>
<br><br>
<em>Notre Dame model is credited to <a href="https://skfb.ly/6JAVA"><strong>agence Lowco</strong></a></em>
<br><br>
<strong>GitHub repository is available <a href="https://github.com/natashaannn/notredame.git">here</a>!</strong>
</p>
</div>
<!-- About Section -->
<div class="w3-content w3-justify w3-text-grey w3-padding-64" id="about">
<h2 class="w3-text-light-grey">About</h2>
<hr style="width:200px" class="w3-opacity">
<p>We are a team of students from the University of California, Los Angeles. This project was embarked on as part of our Digital Humanities course, DH 150: Advanced Topics in Digital Humanities: Social Media Data Analytics, under the instruction of Dr. Sanders Garcia.
</p>
<div>
<h3 class="w3-text-light-grey">Our team comprises of:</h3>
<div>
<h4>Elizabeth Nakamura</h4>
</div>
<div>
<h4>Leia Yen</h4>
</div>
<div>
<h4>Natasha Ann</h4>
</div>
<div>
<h4>Rocio Sanchez-Nolasco</h4>
</div>
<div>
<h4>Van Ngyuen</h4>
</div>
</div>
</div>
</body>
<script src="js/node_modules/three/build/three.js"></script>
<script src="js/node_modules/three/examples/js/loaders/GLTFLoader.js"></script>
<script src="js/node_modules/three/examples/js/controls/OrbitControls.js"></script>
<script src="js/node_modules/three/examples/js/WebGL.js"></script>
<script type="text/javascript" src="data/test.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="node_modules/javiros-emoji-cloud/dist/emojicloud.js"></script>
<script type="text/javascript" src="node_modules/javiros-emoji-cloud/dist/wordcloud.js"></script>
<script type="text/javascript" src="js/emoji.js"></script>
<script type="text/javascript" src="js/emoji2.js"></script>
</html>