network viz on website

lindseyxwood · Apr 19, 2024 · 50c6a73 · 50c6a73
1 parent efae8c0
commit 50c6a73
Show file tree

Hide file tree

Showing 4 changed files with 1,215 additions and 9 deletions.
diff --git a/docs/analysis.html b/docs/analysis.html
@@ -13,9 +13,7 @@
     </head>
     <body>
         <header>
-
             <h1 class="title">The Olivia Rodrigo Project</h1>
-
             <nav>
                 <ul>
                     <li>
@@ -43,6 +41,8 @@ <h1 class="title">The Olivia Rodrigo Project</h1>
         <div class="analysis-container">
             <div>
                 <h2 style="text-align: center;">Network Visualization Analysis</h2>
+                <br>
+                <h3 style="text-align: center;">Noun Visualization</h3>
                 <div class="analysis-content">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                         tempor incididunt ut labore et dolore magna aliqua. Dapibus ultrices in
@@ -54,7 +54,27 @@ <h2 style="text-align: center;">Network Visualization Analysis</h2>
                         porttitor lacus luctus accumsan tortor posuere ac ut. Gravida arcu ac tortor
                         dignissim convallis aenean. Lacus vestibulum sed arcu non. Leo vel fringilla
                         est ullamcorper eget nulla facilisi etiam.</p>
-                    <img src="images/placeholder-image.jpg" alt="place holder image">
+                </div>
+                <div>
+                    <iframe src="images/degreeNetworkVis.html" width="1000" height="600"></iframe>
+                </div>
+                <br>
+                <br>
+                <h3 style="text-align: center;">Adjective Visualization</h3>
+                <div class="analysis-content">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+                        tempor incididunt ut labore et dolore magna aliqua. Dapibus ultrices in
+                        iaculis nunc sed. Quisque id diam vel quam elementum pulvinar etiam non
+                        quam. Sit amet volutpat consequat mauris nunc congue nisi vitae suscipit.
+                        Sagittis orci a scelerisque purus semper eget duis at. Aliquet nec
+                        ullamcorper sit amet risus. Nisl condimentum id venenatis a condimentum.
+                        Fames ac turpis egestas integer eget aliquet nibh praesent. Nulla aliquet
+                        porttitor lacus luctus accumsan tortor posuere ac ut. Gravida arcu ac tortor
+                        dignissim convallis aenean. Lacus vestibulum sed arcu non. Leo vel fringilla
+                        est ullamcorper eget nulla facilisi etiam.</p>
+                </div>
+                <div>
+                    <img src="images/networkADJ.png" alt="network adjective" class="adjectiveviz">
                 </div>
             </div>
         </div>
@@ -74,8 +94,9 @@ <h3 style="text-align: center;">Keyness (Effect)</h3>
                             lyrics compared to Taylor's, Billie's, and Sabrina's combined lyrics. To
                             visualize the stronger-associated words, the word cloud makes them
                             appear larger than the weaker ones. The word "I" had the highest keyness
-                            (effect) at 0.127, followed by "and" (0.046), "so" (0.021), "all" (0.020), "ah" (0.014), "him" (0.012), "back" (0.010),
-                            "her" (0.08), and "she" (0.08).</p>
+                            (effect) at 0.127, followed by "and" (0.046), "so" (0.021), "all"
+                            (0.020), "ah" (0.014), "him" (0.012), "back" (0.010), "her" (0.08), and
+                            "she" (0.08).</p>
                     </div>
                     <img src="images/olivia_keyness_effect.png" alt="keyness effect">
                 </div>
@@ -89,8 +110,8 @@ <h3 style="text-align: center;">Keyness (Likelihood)</h3>
                             lyrics of the other artists in her genre. The word cloud visualizes this
                             by not only making the higher values bigger, but also by its color
                             gradient that turns from dark blue to pink as the likelihood values get
-                            lower. The word with the highest keyness (likelihood) value was
-                            “him” (94.186), followed by “I” (71.399), “her” (67.193), and “logical”
+                            lower. The word with the highest keyness (likelihood) value was “him”
+                            (94.186), followed by “I” (71.399), “her” (67.193), and “logical”
                             (48.680).</p>
                     </div>
                     <img src="images/olivia_keyness_likelihood.png" alt="keyness likelihood">

diff --git a/docs/images/degreeNetworkVis.html b/docs/images/degreeNetworkVis.html
diff --git a/docs/images/networkADJ.png b/docs/images/networkADJ.png
diff --git a/docs/style.css b/docs/style.css
@@ -86,8 +86,8 @@ body {
     padding: 20px;
     background-color: #f9f9f9;
     border-radius: 5px;
-    border: 4px solid #807EBF;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border: 0px solid #807EBF;
+
     margin-bottom: 20px;
 }
 .analysis-content {
@@ -168,3 +168,9 @@ song-row {
 ul {
     font-family: 'CMU Typewriter Text', sans-serif;
 }
+.adjectiveviz {
+    display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 60%;
+}