Merge pull request #68 from code4policy/key-takeaways-word-clouds

Key takeaways word clouds
code4policy · Jan 15, 2024 · ce3a8e6 · ce3a8e6
2 parents 09a152c + 35ec472
commit ce3a8e6
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 6 deletions.
diff --git a/cnn_1year.png b/cnn_1year.png
diff --git a/fox_1year.png b/fox_1year.png
diff --git a/national_press.html b/national_press.html
@@ -76,14 +76,63 @@ <h3>How to Interpret These Charts</h3>
                 </div>
             </div>
 
-            <br><hr><br>
+
+            <br><br>
+
+            <div class="boxed">
+                <h3>How to interpret the Word Clouds below</h3>
+                <li>The word clouds below visualize the frequency of use for each word mentioned within a three-minute timeframe of the term "Ukraine" being mentioned</li>
+                <li>The visualization is based on the data collected over the year 2023 for the two major US-based TV networks: FoxNews and CNN</li>
+                <li>The frequency of use is depicted by the size: the bigger a particular term in the cloud - the more frequently it was used in conjunction with the term "Ukraine"</li>
+                <li>Similarly, the smaller a particular term in the cloud - the less frequently it was used in conjunction with the term "Ukraine"</li>
+
+            </div>
+
+            <br><br>
+
+            <h3 class="centered" style="color:black">Key Takeaways</h3>
+
+            <br>
+            <li class="centered" style="line-height: 2">In 2023, both FoxNews and CNN used the terms "Biden" and "Russia" with similar frequency.</li>
+            <br>
+            <li class="centered" style="line-height: 2">FoxNews frequently covered Ukraine in conjunction with Israel. It often brough border protection issues into the discussion surrounding Ukraine, as well as Hunter Biden, military, and security. This news source also covered Russia's nuclear threats a lot more extensively than CNN.</li>
+            <br>
+            <li class="centered" style="line-height: 2">Unlike FoxNews, CNN didn't shy away from the term "war" and mentioned Putin a lot more frequently. It tended to cover Ukraine in conjunction with Israel less often, focusing more on Wagner group and China.</li>
+
+            <br>
+
 
             <div class="centered">
-                <img src="test-wordcloud.png" alt="2023 national media wordcloud">
-                <a href="test-wordcloud.png" download="test-wordcloud">
-                <button class="dlbutton">Download Image</button></a>
-                <button class="dlbutton">Download Underlying Data</button>
+                <h2 class="wordcloud-title">FoxNews and CNN discuss Ukraine in very different ways</h2>
+
+                <div id="wordcloud-container" class="centered">
+                    <div class="wordcloud-card">
+                        <h3 class="wordcloud-title">FoxNews</h3>
+                        <img class="wordcloud-image" src="fox_1year.png" alt="Fox 1-Year Wordcloud">
+                    </div>
+                    <div class="wordcloud-card">
+                        <h3 class="wordcloud-title">CNN</h3>
+                        <img class="wordcloud-image" src="cnn_1year.png" alt="CNN 1-Year Wordcloud">
+                    </div>
+                </div>
+
+                <h5 class="wordcloud-title">Source: mediacloud.org</h5>
+
+
+                <div style="display: flex; gap: 20px; justify-content: center; margin-top: 20px;">
+                <a href="fox_1year.png" download="fox_1year">
+                    <button class="dlbutton">Download Fox Image</button>
+                </a>
+                <a href="cnn_1year.png" download="cnn_1year">
+                    <button class="dlbutton">Download CNN Image</button>
+                </a>
+                <a href="Ukraine_term_association_FOX_CNN_2023.xlsx" download="Ukraine_term_association_FOX_CNN_2023">
+                    <button class="dlbutton">Download Underlying Data</button>
+                </a>
             </div>
+</div>
+
+
         </div> 
         <hr>
     </body>

diff --git a/our-team/index.html b/our-team/index.html
@@ -18,7 +18,7 @@
         <a href="index.html", class="button-link-active">Our Team</a>
         <h1>About Us</h1>
 
-        <p>Created for <a href="https://github.com/code4policy/2024">DPI-691M Programming and Data for Policymakers</a> , a 2-week course at the Harvard Kennedy School (HKS), this project was developed by three HKS students in January 2024. The methodology for the project was in part based on a <a href="https://www.mediacloud.org/research/how-the-news-talked-about-the-israel-hamas-conflict-in-its-first-month">research project</a> by Ryan McGrady at Media Cloud.</p>
+        <p>Created for <a href="https://github.com/code4policy/2024">DPI-691M Programming and Data for Policymakers</a> , a 2-week course at the Harvard Kennedy School (HKS), this project was developed by three HKS students with the help of ChatGPT in January 2024. The methodology for the project was in part based on a <a href="https://www.mediacloud.org/research/how-the-news-talked-about-the-israel-hamas-conflict-in-its-first-month">research project</a> by Ryan McGrady at Media Cloud.</p>
 
 
         <p>The course was taught by professors <a href="https://dhrumilmehta.com/">Dhrumil Mehta</a> and <a href="https://www.aarushisahejpal.com/">Aarushi Sahejpal</a>.    

diff --git a/styles.css b/styles.css
@@ -315,3 +315,33 @@ li {
     font-size: 13px;
     margin-left: 10px; /* Add margin to the left of the button */
 }
+
+#wordcloud-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: center;
+    align-items: center;
+}
+
+.wordcloud-card {
+    text-align: center;
+    width: 45%;
+    max-width: 45%;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.wordcloud-title {
+    font-weight: bold;
+    color: black;
+    margin-bottom: 5px; /* Add some margin below the title */
+}
+
+.wordcloud-image {
+    max-width: 100%;
+    height: auto;
+}
+