Apply prettier

Author: kanenorman

.github/workflows/static.yml

@@ -37,7 +37,7 @@ jobs:
         uses: actions/upload-pages-artifact@v2
         with:
           # Upload entire repository
-          path: '.'
+          path: "."
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v3

README.md

@@ -18,40 +18,36 @@
     Webiste can be found <a href="https://luke-stoner.github.io/RWH" />here</a>
 </div>
 
-
-
-
 ## Project Summary
 
 Welcome to 'Race for the White House,' a highly acclaimed project from Harvard CS 171 that has earned a place in the prestigious Hall of Fame.
-This repository contains html, javascript, css, and other supporting files to 
-create a comprehensive exploration of the media's coverage of the 2024 United States Presidential Election. The data for 
+This repository contains html, javascript, css, and other supporting files to
+create a comprehensive exploration of the media's coverage of the 2024 United States Presidential Election. The data for
 this project is scraped from the Internet Archive's TV news archive, which is updated daily and contains millions of clips
-from local, national, and international news networks. `labeled.csv` contains the cleaned closed captions from clips that 
-mention 2024 presidential candidates, along with other data such as the date and network of the mention. Finally, the 
-text from each caption was fed to a RoBERTa-based sentiment analysis model to label the mention as either positive or 
+from local, national, and international news networks. `labeled.csv` contains the cleaned closed captions from clips that
+mention 2024 presidential candidates, along with other data such as the date and network of the mention. Finally, the
+text from each caption was fed to a RoBERTa-based sentiment analysis model to label the mention as either positive or
 negative. The Race for the White House leverages this data to create unique, interesting visualizations that explore how
 both coverage sentiment and volume differ across candidates and networks.
 
-
 ## File Structure
 
       ├── LICENSE
       ├── README.md
       ├── css                     #CSS folder for all styling files
             ├── style.css
             └── inspector.css
-      ├── data                       
+      ├── data
             └── labeled.csv       #Data file that stores candidate/network info, text, and label for each mention
-      ├── favicon                
+      ├── favicon
       ├── fonts                   #Stores all custom fonts, including CNN font for headers
       ├── img                     #Stores all image and video files used across the website
             ├── candidate_portraits
             ├── candidate_portraits_small
             ├── intro_page
-            ├── networks 
-            └── ...   
-            
+            ├── networks
+            └── ...
+
       └── js                      #Home of all javascript files for the site, to include visualization files as well as other styling and formatting
 
 Please feel free to further explore each directory to find relevant files and documentation.
@@ -65,12 +61,12 @@ Please feel free to further explore each directory to find relevant files and do
 - Favicon files for the website are found in the `favicon` directory.
 - Custom font files used for styling are stored in the `fonts` directory.
 - Image and video files utilized across the website, to include candidate photos, network logos, and other visuals
-are placed in the `img` directory.
+  are placed in the `img` directory.
 - The `index.html` file serves as the HTML file for compiling the website.
 
 ## Contributing
 
-We encourage others to further our work in this project by forking the repository, making changes, and creating a pull request. 
+We encourage others to further our work in this project by forking the repository, making changes, and creating a pull request.
 We just ask that you credit this original project in any future of this repository.
 
 ## License and Disclaimer

css/inspector.css

@@ -86,6 +86,6 @@
 }
 
 canvas {
-    width: 100%; /* Make the canvas take the full width of its container */
-    max-width: -webkit-max-content; /* Set the maximum width for WebKit browsers */
-  }
+  width: 100%; /* Make the canvas take the full width of its container */
+  max-width: -webkit-max-content; /* Set the maximum width for WebKit browsers */
+}

css/style.css

@@ -50,7 +50,8 @@
 
 @font-face {
   font-family: "cnn-font";
-  src: url("/RWH/fonts/cnn-webfont.woff2") format("woff2"),
+  src:
+    url("/RWH/fonts/cnn-webfont.woff2") format("woff2"),
     url("/RWH/fonts/cnn-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
@@ -951,7 +952,6 @@ body .testimonial .row .tabs li.active figure::before {
   padding-right: 20px;
 }
 
-
 #bumpchartcolumn {
   text-align: center;
 }
@@ -1100,7 +1100,7 @@ canvas {
   opacity: 0.2;
 }
 
-#settings-icon{
+#settings-icon {
   max-width: -webkit-fill-available;
 }
 
@@ -1112,7 +1112,6 @@ span.adjustments-title {
   /*padding-top: 0.5rem;*/
 }
 
-
 .adjustments-title {
   font-size: 24px;
   font-weight: bold;
@@ -1128,23 +1127,23 @@ span.adjustments-title {
   padding-top: 22px;
 }
 
-#candidate-selections-box{
-  background-color: #E8D3A1FF;
+#candidate-selections-box {
+  background-color: #e8d3a1ff;
   /*background-color: #dec9c9;*/
   border-radius: 5px;
-  text-align:center;
+  text-align: center;
   /*margin: 5%;*/
   margin-top: 30px;
   padding-top: 5px;
   margin-bottom: 55px;
 }
 
 .legend-section {
-  background-color: rgba(255, 255, 255, .7);
+  background-color: rgba(255, 255, 255, 0.7);
   border-radius: 5px;
   margin-bottom: calc(1.5rem + 1px);
   padding: 1rem;
-  padding-top: .5rem;
+  padding-top: 0.5rem;
 }
 #legend-panel-row1 {
   justify-content: center;
@@ -1173,7 +1172,6 @@ span.adjustments-title {
   /*filter: blur(1px);*/
 }
 
-
 .candidate-name {
   position: absolute;
   top: 50%;
@@ -1193,7 +1191,6 @@ span.adjustments-title {
   box-shadow: inset white 0 0 3px;
 }
 
-
 .candidate_containers img:hover + .candidate-name {
   transform: translate(-50%, -50%) scale(1.5); /* Scale up the text on hover */
   visibility: visible;
@@ -1215,7 +1212,7 @@ span.adjustments-title {
   transition: opacity 0.3s; /* Smooth transition for fading in/out */
 }
 
-#dynamic-chart-title{
+#dynamic-chart-title {
   text-align: center;
   font-size: 20px;
   font-weight: bolder;

favicon/site.webmanifest

@@ -1 +1,19 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Race for the White House</title>
@@ -59,10 +59,13 @@
   </head>
 
   <body>
-  <div id="loading">
-    <img src="https://cdn.dribbble.com/users/626506/screenshots/2661024/800600.gif" alt="Loading..."/>
-  </div>
-  <div id="main-content" style="display: none;"></div>
+    <div id="loading">
+      <img
+        src="https://cdn.dribbble.com/users/626506/screenshots/2661024/800600.gif"
+        alt="Loading..."
+      />
+    </div>
+    <div id="main-content" style="display: none"></div>
     <div class="row">
       <div id="fullpage">
         <!--BEGIN INTRO-->
@@ -166,13 +169,13 @@ <h1>The White House</h1>
               <div class="col-md-6 mx-auto text-center" style="width: 50%">
                 <div class="shadow bg-white rounded" id="tv-desc">
                   <p>
-                    The White House serves as the official home of
-                    the President of the United States. As every
-                    aspiring candidate strives to secure this prestigious
-                    residence, they inevitably attract significant media
-                    scrutiny. Hover over the above voronoi stippling image
-                    to uncover additional details! Each dot on the
-                    screen corresponds to one of the <strong>50,000+</strong>
+                    The White House serves as the official home of the President
+                    of the United States. As every aspiring candidate strives to
+                    secure this prestigious residence, they inevitably attract
+                    significant media scrutiny. Hover over the above voronoi
+                    stippling image to uncover additional details! Each dot on
+                    the screen corresponds to one of the
+                    <strong>50,000+</strong>
                     candidate mentions in our dataset.
                   </p>
                 </div>
@@ -639,7 +642,10 @@ <h1>Uncover the Impact: Your Interactive Analysis</h1>
               </div>
             </div>
             <div class="row">
-              <div class="shadow p-3 mb-5 bg-white rounded col-6" id="impact-event-intro">
+              <div
+                class="shadow p-3 mb-5 bg-white rounded col-6"
+                id="impact-event-intro"
+              >
                 <p>
                   Delve into the dynamics of political influence with our
                   interactive visualization. As you've journeyed through the ebb
@@ -648,8 +654,9 @@ <h1>Uncover the Impact: Your Interactive Analysis</h1>
                   we empower you to uncover these mysteries.
                 </p>
                 <p>
-                  Select from key political events, choose the candidates of interest, and
-                  decide whether to track coverage sentiment or volume.
+                  Select from key political events, choose the candidates of
+                  interest, and decide whether to track coverage sentiment or
+                  volume.
                 </p>
                 <p>
                   This tool is designed to bring your observations full circle,
@@ -661,7 +668,11 @@ <h1>Uncover the Impact: Your Interactive Analysis</h1>
                 </p>
               </div>
               <div class="col-md-6">
-                <img src="img/breakingnews.png" id="breaking-news-image" class="img-fluid" />
+                <img
+                  src="img/breakingnews.png"
+                  id="breaking-news-image"
+                  class="img-fluid"
+                />
               </div>
             </div>
           </div>
@@ -691,7 +702,7 @@ <h1>Impactful Events</h1>
               <div class="row title-area" id="settingstitle">
                 <div class="col-md-12 mx-auto text-center">
                   <span class="adjustments-title"
-                  >Make Your Own Adjustments</span
+                    >Make Your Own Adjustments</span
                   >
                 </div>
               </div>
@@ -725,16 +736,22 @@ <h5 class="settingsQ">How did the...</h5>
                   </div>
                 </div>
               </div>
-              <div id="metric-legend-container" class="container-fluid legend-section">
+              <div
+                id="metric-legend-container"
+                class="container-fluid legend-section"
+              >
                 <div class="col-md-12 mx-auto text-center">
                   <h5 class="dropdown-textfield">
                     Impact the
                     <span class="form-group">
-                    <select class="form-control" id="line-stat-selection-impact">
-                      <option value="volume">Number of Mentions</option>
-                      <option value="sentiment">Sentiment of Coverage</option>
-                    </select>
-                  </span>
+                      <select
+                        class="form-control"
+                        id="line-stat-selection-impact"
+                      >
+                        <option value="volume">Number of Mentions</option>
+                        <option value="sentiment">Sentiment of Coverage</option>
+                      </select>
+                    </span>
                   </h5>
                 </div>
               </div>
@@ -829,7 +846,10 @@ <h1>What Did We Learn?</h1>
               </div>
             </div>
             <div class="row">
-              <div class="shadow p-3 mb-5 bg-white rounded col-6" id="conclusion-col">
+              <div
+                class="shadow p-3 mb-5 bg-white rounded col-6"
+                id="conclusion-col"
+              >
                 Many of our beliefs regarding the shortcomings of television
                 media were confirmed:
 
@@ -845,9 +865,9 @@ <h1>What Did We Learn?</h1>
                     adversarial candidates
                   </li>
                   <li>
-                    There is a clear incumbency advantage in the media. The coverage
-                    of both President Biden and former President Trump dwarf that of
-                    the candidates.
+                    There is a clear incumbency advantage in the media. The
+                    coverage of both President Biden and former President Trump
+                    dwarf that of the candidates.
                   </li>
                 </ul>
 
@@ -1058,7 +1078,7 @@ <h6 style="padding: 0.5em">
             </div>
             <div class="row text-center">
               <div>
-                <p style="text-align: left;" id="candidate-modal-bio"></p>
+                <p style="text-align: left" id="candidate-modal-bio"></p>
               </div>
             </div>
             <div class="row text-center">
@@ -1172,17 +1192,17 @@ <h5 class="modal-title">
     <script src="js/impactful-events.js"></script>
     <script src="js/project-intro.js"></script>
     <script>
-      window.addEventListener('load', function() {
-        var loading = document.getElementById('loading');
-        var mainContent = document.getElementById('main-content');
+      window.addEventListener("load", function () {
+        var loading = document.getElementById("loading");
+        var mainContent = document.getElementById("main-content");
 
         // Start the fade-out
-        loading.style.opacity = '0';
+        loading.style.opacity = "0";
 
         // Wait for the fade-out to finish
-        setTimeout(function() {
-          loading.style.display = 'none';
-          mainContent.style.display = 'block'; // Show the main content
+        setTimeout(function () {
+          loading.style.display = "none";
+          mainContent.style.display = "block"; // Show the main content
         }, 500); // This duration should match the CSS transition time
       });
     </script>