fix rect animation

holtzy · Jul 24, 2024 · 6cc59d1 · 6cc59d1
1 parent 8518ef4
commit 6cc59d1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git a/viz/PopulationPyramidArt/plot/HistogramLayer.tsx b/viz/PopulationPyramidArt/plot/HistogramLayer.tsx
@@ -22,7 +22,7 @@ export const HistogramLayer = ({
     return [...new Set(data.map((d) => d.AgeGrpStart))];
   }, [data]);
 
-  const yScale = scaleBand().range([height, 0]).domain(allAges).padding(0.01);
+  const yScale = scaleBand().range([height, 0]).domain(allAges).padding(0.4);
 
   const allRectFemales = data.map((d) => {
     if (Number(d.PopFemale) === 0) {
@@ -35,7 +35,7 @@ export const HistogramLayer = ({
         x={xScaleFemale(0)}
         y={yScale(d.AgeGrpStart) || 0}
         width={xScaleFemale(Number(d.PopFemale)) - xScaleFemale(0)}
-        height={8}
+        height={yScale.bandwidth()}
         opacity={histogramOpacity}
         color="white"
         value={Number(d.PopFemale)}
@@ -56,7 +56,7 @@ export const HistogramLayer = ({
         x={xScaleMale(Number(d.PopMale))}
         y={yScale(d.AgeGrpStart) || 0}
         width={xScaleMale(0) - xScaleMale(Number(d.PopMale))}
-        height={8}
+        height={yScale.bandwidth()}
         opacity={histogramOpacity}
         color="white"
         value={Number(d.PopMale)}

diff --git a/viz/PopulationPyramidArt/plot/RectItem.tsx b/viz/PopulationPyramidArt/plot/RectItem.tsx
@@ -53,7 +53,7 @@ export const RectItem = ({
         opacity={springProps.opacity}
         width={springProps.width}
         height={height}
-        x={x}
+        x={springProps.x}
         y={y}
       />
       {value > 0.1 && (

diff --git a/viz/PopulationPyramidArt/sections/WeirdosSection.tsx b/viz/PopulationPyramidArt/sections/WeirdosSection.tsx
@@ -4,15 +4,6 @@ import { Legend } from '../plot/Legend';
 import { DataItem } from '../types';
 import { HorizontalTabBar } from '../HorizontalTabBar';
 
-const weirdCountries = [
-  'Sint Maarten',
-  'Qatar',
-  'Monaco',
-  'Japan',
-  'Bahrain',
-  'Italy',
-];
-
 type WeirdosSectionProps = {
   data: DataItem[];
   allGroupsWithCode: string[];
@@ -25,6 +16,14 @@ export const WeirdosSection = ({
   const [highlightedYear, setHighlightedYear] = useState<number | undefined>();
   const [selectedGroup, setSelectedGroup] = useState(0);
 
+  const weirdCountriesWithCode = allGroupsWithCode.filter((d) =>
+    ['Sint Maarten', 'Qatar', 'Monaco', 'Japan', 'Bahrain', 'Italy'].includes(
+      d.split('---')[0]
+    )
+  );
+
+  const weirdCountries = weirdCountriesWithCode.map((c) => c.split('---')[0]);
+
   const selectedData = data
     .filter((d) => d.Location === weirdCountries[selectedGroup])
     .filter((d) => Number(d.Time) === 2024);
@@ -34,9 +33,7 @@ export const WeirdosSection = ({
       <div className="relative w-full h-12 flex justify-center">
         <HorizontalTabBar
           selectedItem={selectedGroup}
-          items={allGroupsWithCode.filter((d) =>
-            weirdCountries.includes(d.split('---')[0])
-          )}
+          items={weirdCountriesWithCode}
           setSelectedItem={setSelectedGroup}
           isActive={false}
           hasGradient={false}
@@ -67,8 +64,10 @@ export const WeirdosSection = ({
         </p>
 
         {tabBar}
+      </div>
 
-        <div className="h-96 w-full">
+      <div className="wrapper">
+        <div className="w-full" style={{ height: 600 }}>
           <ResponsivePopulationPyramid
             data={selectedData}
             highlightedYear={highlightedYear}