finish writing

viz/PopulationPyramidArt/HorizontalTabBar.tsx

@@ -5,13 +5,15 @@ type HorizontalTabBarProps = {
   setSelectedItem: (val: number) => void;
   items: string[];
   isActive: boolean; // do not try to scroll if not active (fixing bug when several TabBar are displayed)
+  hasGradient?: boolean;
 };
 
 export const HorizontalTabBar = ({
   selectedItem,
   setSelectedItem,
   items,
   isActive,
+  hasGradient = true,
 }: HorizontalTabBarProps) => {
   const containerRef = useRef(null);
   const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
@@ -96,8 +98,12 @@ export const HorizontalTabBar = ({
       >
         {groupSelectButtons}
       </div>
-      <div className="absolute inset-y-0 left-0 w-28 h-full  bg-gradient-to-r from-black to-transparent pointer-events-none"></div>
-      <div className="absolute inset-y-0 right-0 w-28 h-full  bg-gradient-to-l from-black to-transparent pointer-events-none"></div>
+      {hasGradient && (
+        <>
+          <div className="absolute inset-y-0 left-0 w-28 h-full  bg-gradient-to-r from-black to-transparent pointer-events-none"></div>
+          <div className="absolute inset-y-0 right-0 w-28 h-full  bg-gradient-to-l from-black to-transparent pointer-events-none"></div>
+        </>
+      )}
     </div>
   );
 };

viz/PopulationPyramidArt/PopulationPyramidArtDemo.tsx

@@ -12,6 +12,7 @@ import { ConclusionSection } from './sections/ConclusionSection';
 import styles from './global-style.module.css';
 import { BabyBoomSection } from './sections/BabyBoomSection';
 import { WeirdosSection } from './sections/WeirdosSection';
+import { OldCountrySection } from './sections/OldCountrySection';
 
 export const PopulationPyramidArtDemo = () => {
   const [data, setData] = useState<DataItem[] | undefined>(undefined);
@@ -165,6 +166,9 @@ export const PopulationPyramidArtDemo = () => {
         {data && (
           <>
             <BabyBoomSection data={data.filter((d) => Number(d.Time) < 2025)} />
+            <OldCountrySection
+              data={data.filter((d) => Number(d.Time) < 2025)}
+            />
             <WeirdosSection
               data={data.filter((d) => Number(d.Time) < 2025)}
               allGroupsWithCode={allGroupsWithCode}

viz/PopulationPyramidArt/sections/BabyBoomSection.tsx

@@ -14,7 +14,7 @@ export const BabyBoomSection = ({ data }: BabyBoomSectionProps) => {
     <div className="relative">
       <div className="narrowWrapper py-24 flex flex-col justify-center items-start">
         <p className="text-gray-400 text-xl uppercase">ok Boomer!</p>
-        <p className="text-7xl">Old countries</p>
+        <p className="text-7xl">Baby booming</p>
         <p>
           Countries like Nigeria, Angola, and many other African nations are
           currently experiencing a significant <b>baby boom</b>.
@@ -29,7 +29,7 @@ export const BabyBoomSection = ({ data }: BabyBoomSectionProps) => {
 
       <div className="relative w-full flex justify-center">
         <div className="grid grid-cols-3 h-96 w-full max-w-7xl px-8">
-          {['Sint Maarten', 'Monaco', 'Qatar'].map((country) => {
+          {['Nigeria', 'Gabon', 'India'].map((country) => {
             return (
               <div key={country} className="relative w-full h-full max-w-5xl">
                 <ResponsivePopulationPyramid

viz/PopulationPyramidArt/sections/ConclusionSection.tsx

@@ -1,8 +1,8 @@
 export const ConclusionSection = () => {
   return (
     <div className="narrowWrapper py-24 flex flex-col justify-center items-start">
-      <p className="text-gray-400 text-xl uppercase">hmm</p>
-      <p className="text-7xl">Conclusion</p>
+      <p className="text-gray-400 text-xl uppercase">How I made this</p>
+      <p className="text-7xl">Material & Method</p>
 
       <p>
         This project is inspired by the work of{' '}

viz/PopulationPyramidArt/sections/OldCountrySection.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { ResponsivePopulationPyramid } from '../PopulationPyramid';
+import { Legend } from '../plot/Legend';
+import { DataItem } from '../types';
+
+type OldCountrySectionProps = {
+  data: DataItem[];
+};
+
+export const OldCountrySection = ({ data }: OldCountrySectionProps) => {
+  const [highlightedYear, setHighlightedYear] = useState<number | undefined>();
+
+  return (
+    <div className="relative">
+      <div className="narrowWrapper py-24 flex flex-col justify-center items-start">
+        <p className="text-gray-400 text-xl uppercase">
+          getting old ain't funny
+        </p>
+        <p className="text-7xl">Aging Nations</p>
+        <p>
+          On the other hand, many countries are experiencing significant
+          demographic shifts, with populations aging at an unprecedented rate.
+        </p>
+        <p>
+          Nations such as Japan, Germany, Italy, and Spain are at the forefront
+          of this trend, with a notable rise in the median age of their
+          citizens.
+        </p>
+      </div>
+
+      <div className="relative w-full flex justify-center">
+        <div className="grid grid-cols-3 h-96 w-full max-w-7xl px-8">
+          {['France', 'Italy', 'Japan'].map((country) => {
+            return (
+              <div key={country} className="relative w-full h-full max-w-5xl">
+                <ResponsivePopulationPyramid
+                  data={data.filter((d) => d.Location === country)}
+                  highlightedYear={highlightedYear}
+                  isHistogramEnabled={false}
+                  isLineEnabled={true}
+                />
+                <p className="uppercase text-xl text-center">{country}</p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="absolute top-1/2 left-10 transform -translate-x-1/2">
+        <Legend setHighlightedYear={setHighlightedYear} />
+      </div>
+
+      <div className="narrowWrapper mt-40">
+        <p>
+          This shift is primarily due to longer <b>life expectancies</b> and
+          declining <b>birth rates</b>. Countries experiencing rapid economic
+          development, like China and South Korea, are also seeing similar
+          trends.
+        </p>
+        <p>
+          The implications of an aging population are profound, impacting
+          healthcare, social services, and economic stability, making it crucial
+          for policymakers and societies to understand and address these
+          changes.
+        </p>
+      </div>
+    </div>
+  );
+};

viz/PopulationPyramidArt/sections/WeirdosSection.tsx

@@ -6,7 +6,7 @@ import { HorizontalTabBar } from '../HorizontalTabBar';
 
 const weirdCountries = [
   'Sint Maarten',
-  'Quatar',
+  'Qatar',
   'Monaco',
   'Japan',
   'Bahrain',
@@ -39,6 +39,7 @@ export const WeirdosSection = ({
           )}
           setSelectedItem={setSelectedGroup}
           isActive={false}
+          hasGradient={false}
         />
       </div>
     );