data percentage

pages/example/population-pyramid.tsx

@@ -10,6 +10,7 @@ import { chartTypesInfo } from 'util/sectionDescriptions';
 import { fullUrlToInternalLink } from 'util/utils';
 import SectionLogoWithOverlay from 'component/SectionLogoWithOverlay';
 import { LinkAsButton } from 'component/LinkAsButton';
+import { PopulationPyramidArtDemo } from 'viz/PopulationPyramidArt/PopulationPyramidArtDemo';
 
 const graphDescription = (
   <>
@@ -83,8 +84,8 @@ export default function Home() {
         <br />
       </p>
       <ChartOrSandbox
-        vizName={'RadarDatasetAnimation'}
-        VizComponent={RadarDatasetAnimationDemo}
+        vizName={'PopulationPyramidArt'}
+        VizComponent={PopulationPyramidArtDemo}
         maxWidth={900}
         height={1000}
         caption="Dive deep into the 4 main types of Data Professionals. Understand their main required competencies, their salary ranges and their popularity."
@@ -99,31 +100,3 @@ export default function Home() {
     </Layout>
   );
 }
-
-const snippetstate = `
-const allGroups = data.map((d) => d.name);
-const [selectedGroup, setSelectedGroup] = useState(allGroups[0]);
-`.trim();
-
-const snippetAnim = `
-const LineItem = ({ path, color }: LineItemProps) => {
-  const springProps = useSpring({
-    to: {
-      path,
-      color,
-    },
-    config: {
-      friction: 100,
-    },
-  });
-
-  return (
-    <animated.path
-      d={springProps.path}
-      fill={'none'}
-      stroke={color}
-      strokeWidth={2}
-    />
-  );
-};
-`.trim();

viz/PopulationPyramidArt/PopulationPyramid.tsx

@@ -0,0 +1,108 @@
+import * as d3 from 'd3';
+
+const COLORS = ['#e0ac2b', '#e85252', '#6689c6', '#9a6fb0', '#a53253'];
+const MARGIN = { top: 10, right: 30, bottom: 50, left: 30 };
+
+type DataItem = {
+  AgeGrp: string;
+  Location: string;
+  MidPeriod: string;
+  PopFemale: string;
+  PopMale: string;
+};
+
+type PopulationPyramidProps = {
+  width: number;
+  height: number;
+  data: DataItem[];
+};
+
+export const PopulationPyramid = ({
+  width,
+  height,
+  data,
+}: PopulationPyramidProps) => {
+  const boundsWidth = width - MARGIN.right - MARGIN.left;
+  const boundsHeight = height - MARGIN.top - MARGIN.bottom;
+
+  const dataFiltered = data.filter(
+    (d) => d.Location === 'ADB region: Central and West Asia'
+  );
+
+  const allYears = [...new Set(data.map((d) => d.MidPeriod))].sort();
+
+  const colorScale = d3
+    .scaleLinear<string, string, never>()
+    .range(['blue', 'green'])
+    .domain([1900, 2020]);
+
+  const opacityScale = d3.scaleLinear().range([0, 0.7]).domain([1900, 2020]);
+
+  const yScale = d3.scaleLinear().range([boundsHeight, 0]).domain([0, 100]);
+
+  // Males on the left
+  const xScaleMale = d3
+    .scaleLinear()
+    .range([0, boundsWidth / 2])
+    .domain([5000, 0]);
+
+  const xScaleFemale = d3
+    .scaleLinear()
+    .range([boundsWidth / 2, boundsWidth])
+    .domain([0, 5000]);
+
+  const lineBuilderMale = d3
+    .line<DataItem>()
+    .x((d) => xScaleMale(Number(d.PopMale)))
+    .y((d) => yScale(Number(d.AgeGrp)));
+
+  const lineBuilderFemale = d3
+    .line<DataItem>()
+    .x((d) => xScaleFemale(Number(d.PopFemale)))
+    .y((d) => yScale(Number(d.AgeGrp)));
+
+  const allLinePathMale = allYears.map((year) => {
+    const path = lineBuilderMale(
+      dataFiltered.filter((d) => d.MidPeriod === year)
+    );
+    return (
+      <path
+        d={path}
+        opacity={opacityScale(Number(year))}
+        stroke={colorScale(year)}
+        fill="none"
+        strokeWidth={1}
+      />
+    );
+  });
+
+  const allLinePathFemale = allYears.map((year) => {
+    const path = lineBuilderFemale(
+      dataFiltered.filter((d) => d.MidPeriod === year)
+    );
+    return (
+      <path
+        d={path}
+        opacity={opacityScale(Number(year))}
+        stroke={colorScale(year)}
+        fill="none"
+        strokeWidth={1}
+      />
+    );
+  });
+
+  return (
+    <div>
+      <svg width={width} height={height}>
+        <g
+          width={boundsWidth}
+          height={boundsHeight}
+          transform={`translate(${[MARGIN.left, MARGIN.top].join(',')})`}
+        >
+          {allLinePathMale}
+          {allLinePathFemale}
+        </g>
+      </svg>
+    </div>
+  );
+};

viz/PopulationPyramidArt/PopulationPyramidArtDemo.tsx

@@ -0,0 +1,27 @@
+import { csv } from 'd3';
+import { PopulationPyramid } from './PopulationPyramid';
+import { useEffect, useState } from 'react';
+
+export const PopulationPyramidArtDemo = ({ width = 700, height = 400 }) => {
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    // Path to your CSV file
+    const csvUrl = 'path/to/your/data.csv';
+
+    // Load CSV data
+    csv(
+      'https://raw.githubusercontent.com/holtzy/react-graph-gallery/main/data/population-pyramid.csv'
+    )
+      .then((data) => {
+        setData(data);
+      })
+      .catch((error) => {
+        console.error('Error loading the CSV data', error);
+      });
+  }, []);
+
+  console.log('data', data);
+
+  return <PopulationPyramid data={data} width={width} height={height} />;
+};

viz/PopulationPyramidArt/index.js

@@ -0,0 +1,9 @@
+import ReactDOM from "react-dom";
+import { data } from "./data/";
+import { ArcDiagram } from "./ArcDiagram";
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
+  <ArcDiagram data={data} width={400} height={400} />,
+  rootElement
+);

viz/PopulationPyramidArt/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "d3": "7.1.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}