style changes

fac31 · Jun 3, 2024 · bf55fe5 · bf55fe5
1 parent 03dc350
commit bf55fe5
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 13 deletions.
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -48,7 +48,6 @@ body {
 h1 {
   font-size: var(--large-fs);
 }
-
 small {
   position: absolute;
   top: 50%;
@@ -101,7 +100,7 @@ small {
   width: 100%;
   /* height: 600px; */
   height: 300px;
-  margin: 20px 0;
+  margin: 20px auto;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -173,10 +172,10 @@ article {
   font-size: var(--small-fs);
 }
 
-.step p {
+div > p {
   text-align: center;
   padding: 1rem;
-  font-size: 1.5rem;
+  font-size: var(--small-fs);
 }
 
 /* Media Queries */

diff --git a/public/html/index.html b/public/html/index.html
@@ -74,12 +74,11 @@ <h2>It's down here</h2>
           wealth in the World.
         </p>
       </div>
+
       <div class="center flex-column">
         <p>
           Less than 3000 Billionaires own three times that.
         </p>
-      </div>
-      <div class="center flex-column">
         <p>
           The gap between the poorest and the richest has been growing bigger
         </p>
@@ -168,7 +167,7 @@ <h2>It's down here</h2>
       </p>
       <p> Click on the dot to find out who owns it.
       </p>
-      <div id="dataviz_two"></div>
+      <!-- <div id="dataviz_two"></div> -->
     </div>
     <div id="step6" class="step" data-step="6">
       <p> So where can you find $200 billion?

diff --git a/public/js/dataViz2.js b/public/js/dataViz2.js
@@ -2,15 +2,19 @@
 import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
 
 // Set the dimensions and margins of the graph
-const width = 1000; //window.innerWidth;
+const width = window.innerWidth;
 const height = 1000; //3000;
 let hasDataVizStarted = false;
+let svg;
+export function stopDataViz2() {
+  //svg.remove();
+}
 
 export function startDataViz2() {
   if (!hasDataVizStarted) {
     hasDataVizStarted = true;
     // Append the SVG object to the body of the page
-    var svg = d3
+    svg = d3
       .select("#dataviz_two")
       .append("svg")
       .attr("width", width)
@@ -32,7 +36,6 @@ export function startDataViz2() {
             });
           }
         });
-        console.log("Processed data:", processedData);
 
         // Create a tooltip
         var Tooltip = d3
@@ -105,7 +108,7 @@ export function startDataViz2() {
               "collide",
               d3
                 .forceCollide()
-                .radius(3 + 0.5)
+                .radius(0 + 0.5)
                 .iterations(1),
             ); // Adjust collision radius for less space
 

diff --git a/public/js/dataViz3.js b/public/js/dataViz3.js
@@ -5,12 +5,16 @@ import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
 const width = 1000;
 const height = 1000;
 let hasDataVizStarted = false;
+let svg;
+export function stopDataViz3() {
+  svg.remove();
+}
 
 export function startDataViz3() {
   if (!hasDataVizStarted) {
     hasDataVizStarted = true;
     // Append the SVG object to the body of the page
-    var svg = d3
+    svg = d3
       .select("#dataviz_three")
       .append("svg")
       .attr("width", width)

diff --git a/public/js/intro.js b/public/js/intro.js
@@ -6,7 +6,25 @@ export function intro() {
   const arrowElement = document.getElementById("fade-elements");
 
   setTimeout(() => fadeIn(arrowElement, 10, 1), 4000);
+  startIntro();
+  // setTimeout(3000);
 
+  // let maxMarginTop = -1000;
+  // for (const circle of circles.children) {
+  //   setTimeout(() => {
+  //     let timer = setInterval(function () {
+  //       if (circleMargin > maxMarginTop) {
+  //         circleMargin = circleMargin + 1;
+  //         circle.style.marginTop = circleMargin + "px";
+  //         console.log("move circle");
+  //       } else {
+  //         clearInterval(timer);
+  //       }
+  //     }, 10);
+  //   }, 4000);
+  // }
+}
+function startIntro() {
   let maxMargin = -85;
   for (const circle of circles.children) {
     setTimeout(() => fadeIn(circle, 20, 0.5), 2000);

diff --git a/public/js/main.js b/public/js/main.js
@@ -12,7 +12,7 @@ import {
   revertToStepTwo,
 } from "./steps.js";
 
-import { startDataViz2 } from "./dataViz2.js";
+import { startDataViz2, stopDataViz2 } from "./dataViz2.js";
 import { startDataViz3 } from "./dataViz3.js";
 
 function main() {
@@ -67,6 +67,9 @@ function handleStepExit(res) {
     case 0:
       exitStepOne();
       break;
+    case 4:
+      stopDataViz2();
+      break;
   }
 }