From 8518ef4eee1171bab44de24d737668325c5eb251 Mon Sep 17 00:00:00 2001 From: Yan Holtz Date: Wed, 24 Jul 2024 16:50:02 +0200 Subject: [PATCH] finish writing --- viz/PopulationPyramidArt/HorizontalTabBar.tsx | 10 ++- .../PopulationPyramidArtDemo.tsx | 4 ++ .../sections/BabyBoomSection.tsx | 4 +- .../sections/ConclusionSection.tsx | 4 +- .../sections/OldCountrySection.tsx | 69 +++++++++++++++++++ .../sections/WeirdosSection.tsx | 3 +- 6 files changed, 87 insertions(+), 7 deletions(-) create mode 100644 viz/PopulationPyramidArt/sections/OldCountrySection.tsx diff --git a/viz/PopulationPyramidArt/HorizontalTabBar.tsx b/viz/PopulationPyramidArt/HorizontalTabBar.tsx index 17c39557..0ea649f1 100644 --- a/viz/PopulationPyramidArt/HorizontalTabBar.tsx +++ b/viz/PopulationPyramidArt/HorizontalTabBar.tsx @@ -5,6 +5,7 @@ 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 = ({ @@ -12,6 +13,7 @@ export const HorizontalTabBar = ({ setSelectedItem, items, isActive, + hasGradient = true, }: HorizontalTabBarProps) => { const containerRef = useRef(null); const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]); @@ -96,8 +98,12 @@ export const HorizontalTabBar = ({ > {groupSelectButtons} -
-
+ {hasGradient && ( + <> +
+
+ + )} ); }; diff --git a/viz/PopulationPyramidArt/PopulationPyramidArtDemo.tsx b/viz/PopulationPyramidArt/PopulationPyramidArtDemo.tsx index 00cc1107..86f459ce 100644 --- a/viz/PopulationPyramidArt/PopulationPyramidArtDemo.tsx +++ b/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(undefined); @@ -165,6 +166,9 @@ export const PopulationPyramidArtDemo = () => { {data && ( <> Number(d.Time) < 2025)} /> + Number(d.Time) < 2025)} + /> Number(d.Time) < 2025)} allGroupsWithCode={allGroupsWithCode} diff --git a/viz/PopulationPyramidArt/sections/BabyBoomSection.tsx b/viz/PopulationPyramidArt/sections/BabyBoomSection.tsx index 0acecc2c..fa730930 100644 --- a/viz/PopulationPyramidArt/sections/BabyBoomSection.tsx +++ b/viz/PopulationPyramidArt/sections/BabyBoomSection.tsx @@ -14,7 +14,7 @@ export const BabyBoomSection = ({ data }: BabyBoomSectionProps) => {

ok Boomer!

-

Old countries

+

Baby booming

Countries like Nigeria, Angola, and many other African nations are currently experiencing a significant baby boom. @@ -29,7 +29,7 @@ export const BabyBoomSection = ({ data }: BabyBoomSectionProps) => {

- {['Sint Maarten', 'Monaco', 'Qatar'].map((country) => { + {['Nigeria', 'Gabon', 'India'].map((country) => { return (
{ return (
-

hmm

-

Conclusion

+

How I made this

+

Material & Method

This project is inspired by the work of{' '} diff --git a/viz/PopulationPyramidArt/sections/OldCountrySection.tsx b/viz/PopulationPyramidArt/sections/OldCountrySection.tsx new file mode 100644 index 00000000..496cdaa2 --- /dev/null +++ b/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(); + + return ( +

+
+

+ getting old ain't funny +

+

Aging Nations

+

+ On the other hand, many countries are experiencing significant + demographic shifts, with populations aging at an unprecedented rate. +

+

+ 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. +

+
+ +
+
+ {['France', 'Italy', 'Japan'].map((country) => { + return ( +
+ d.Location === country)} + highlightedYear={highlightedYear} + isHistogramEnabled={false} + isLineEnabled={true} + /> +

{country}

+
+ ); + })} +
+
+ +
+ +
+ +
+

+ This shift is primarily due to longer life expectancies and + declining birth rates. Countries experiencing rapid economic + development, like China and South Korea, are also seeing similar + trends. +

+

+ 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. +

+
+
+ ); +}; diff --git a/viz/PopulationPyramidArt/sections/WeirdosSection.tsx b/viz/PopulationPyramidArt/sections/WeirdosSection.tsx index ba1b99b2..979cfe95 100644 --- a/viz/PopulationPyramidArt/sections/WeirdosSection.tsx +++ b/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} />
);