MapComponent Timeline Random

com-480-data-visualization · May 14, 2024 · 6560b37 · 6560b37
1 parent 5ad22c3
commit 6560b37
Show file tree

Hide file tree

Showing 2 changed files with 313 additions and 61 deletions.
diff --git a/website/src/App.js b/website/src/App.js
@@ -1,11 +1,11 @@
 import React from "react";
 import Example from "./Example"; // Assuming Example.js is correctly set up
-import MapComponent from "./MapComponent"; // Import the MapComponent
 import "./App.css"; // Ensure App.css is correctly imported
 import GraphComponent from "./GraphComponent";
 import Banner from "./Banner";
 import BarChart from "./BarChart";
 import GraphTest from "./GraphTest";
+import MapComponent from "./MapComponent"; // Import the updated MapComponent
 
 function App() {
   return (
@@ -15,7 +15,7 @@ function App() {
         <h1 className="text-5xl w-96">
           How Are European Views on Politics and Society Changing?
         </h1>
-        <div className=" text-base w-3/4 mt-10">
+        <div className="text-base w-3/4 mt-10">
           <p>
             Across Europe, a quiet change is brewing. Inspired by an Economist
             article on the growing divide between young men and women, this
@@ -32,53 +32,58 @@ function App() {
           </p>
         </div>
       </header>
-      <h1></h1>
-      <h1 className="text-3xl w-96 text-left ml-7 mt-5">
-        1. Bar Chart: Setting the Stage
-      </h1>
-      <p className=" text-base w-3/4 mt-10 text-left ml-7">
-        Our journey starts with a Europe-wide snapshot. This bar chart shows
-        average levels of a chosen variable (like trust in institutions) for
-        four different age groups over time. This helps you get a feel for
-        overall trends before we explore how these trends differ for men and
-        women.
-      </p>
-      <div className="component-container">
-        <BarChart />{" "}
-        {/* So here we can add components, parts of the website, visualizations like this */}
-      </div>
-      <h1 class="text-3xl w-96 text-left ml-7 mt-5">
-        2. Gender Divide Across Europe
-      </h1>
-      <p class=" text-base w-3/4 mt-10 text-left ml-7">
-        Next, we zoom in to see how men and women compare across Europe. This
-        heatmap uses color to show where women or men report higher levels of a
-        chosen variable, like political participation. You can select an age
-        group and drag the year slider to see how these differences change over
-        time. Hover over a country to see a detailed breakdown by year.
-      </p>
-      <div id="map" class="flex justify-center items-center mt-4">
-        <MapComponent /> {/* This adds the map to your application */}
-      </div>
-      <h1 class="text-3xl w-96 text-left ml-7 mt-5">
-        3. Ranking the Gender Divide
-      </h1>
-      <p class=" text-base w-3/4 mt-10 text-left ml-7">
-        This final view lets you compare countries side-by-side. It shows a
-        ranked list of European nations based on the chosen variable's gender
-        gap in a specific year. Hover over a country to see the exact numbers
-        and how the gap breaks down by age group. This lets you see which
-        countries have the biggest differences in, for example, media
-        consumption habits between men and women.
-      </p>
-      <div className="component-container">
-        <GraphComponent />{" "}
-        {/* So here we can add components, parts of the website, visualizations like this */}
-      </div>
-      <div className="component-container">
-        <GraphTest />{" "}
-        {/* So here we can add components, parts of the website, visualizations like this */}
-      </div>
+
+      <section>
+        <h2 className="text-3xl w-96 text-left ml-7 mt-5">
+          1. Bar Chart: Setting the Stage
+        </h2>
+        <p className="text-base w-3/4 mt-10 text-left ml-7">
+          Our journey starts with a Europe-wide snapshot. This bar chart shows
+          average levels of a chosen variable (like trust in institutions) for
+          four different age groups over time. This helps you get a feel for
+          overall trends before we explore how these trends differ for men and
+          women.
+        </p>
+        <div className="component-container">
+          <BarChart />
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-3xl w-96 text-left ml-7 mt-5">
+          2. Gender Divide Across Europe
+        </h2>
+        <p className="text-base w-3/4 mt-10 text-left ml-7">
+          Next, we zoom in to see how men and women compare across Europe. This
+          heatmap uses color to show where women or men report higher levels of a
+          chosen variable, like political participation. You can select an age
+          group and drag the year slider to see how these differences change over
+          time. Hover over a country to see a detailed breakdown by year.
+        </p>
+        <div id="map" className="flex justify-center items-center mt-4">
+          <MapComponent />
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-3xl w-96 text-left ml-7 mt-5">
+          3. Ranking the Gender Divide
+        </h2>
+        <p className="text-base w-3/4 mt-10 text-left ml-7">
+          This final view lets you compare countries side-by-side. It shows a
+          ranked list of European nations based on the chosen variable's gender
+          gap in a specific year. Hover over a country to see the exact numbers
+          and how the gap breaks down by age group. This lets you see which
+          countries have the biggest differences in, for example, media
+          consumption habits between men and women.
+        </p>
+        <div className="component-container">
+          <GraphComponent />
+        </div>
+        <div className="component-container">
+          <GraphTest />
+        </div>
+      </section>
     </div>
   );
 }