updated graph (#81)

Author: ipark15

website/package-lock.json

@@ -29,7 +29,14 @@ const landingPageInfo = [
       subheader: "It's not just humans that can be biased",
       bodyText: [
         {
-          body: <p className="bold">testing</p>,
+          body: (
+            <p className="bold">
+              {" "}
+              Bias By Us is an interactive explanation of bias in machine
+              learning algorithms, and how they affect multiple aspects of
+              every-day life!
+            </p>
+          ),
         },
         {
           body: (

website/src/components/LandingPage.js

@@ -8,37 +8,94 @@ import {
   CartesianGrid,
   Tooltip,
   ResponsiveContainer,
+  Legend,
 } from "recharts";
 import data from "./enrollmentData.js";
 
 export default function WomenEnrollmentContainer() {
   return (
-    <ResponsiveContainer width="100%" height={400}>
-      <LineChart
-        width={500}
-        height={300}
-        data={data}
-        margin={{
-          top: 5,
-          right: 30,
-          left: 20,
-          bottom: 5,
-        }}
-      >
-        <CartesianGrid strokeDasharray="3 3" />
-        <XAxis dataKey="name" dy={2} fontSize="1.1rem" />
-        <YAxis fontSize="1.1rem" unit="" orientation="right">
-          <Label value="Women Enrolled" angle={90} position="right" />
-        </YAxis>
-        <Tooltip />
-        <Line
-          type="monotone"
-          dataKey="women enrolled"
-          stroke="#d1001f"
-          activeDot={{ r: 8 }}
-          unit=""
-        />
-      </LineChart>
-    </ResponsiveContainer>
+    //     <ResponsiveContainer width="100%" height={400}>
+    //       <LineChart
+    //         width={500}
+    //         height={300}
+    //         data={data}
+    //         margin={{
+    //           top: 5,
+    //           right: 30,
+    //           left: 20,
+    //           bottom: 5,
+    //         }}
+    //       >
+    //         <CartesianGrid strokeDasharray="3 3" />
+    //         <XAxis dataKey="name" dy={2} fontSize="1.1rem" />
+    //         <YAxis fontSize="1.1rem" unit="" orientation="right">
+    //           <Label value="Women Enrolled" angle={90} position="right" />
+    //         </YAxis>
+    //         <Tooltip />
+    //         <Line
+    //           type="monotone"
+    //           dataKey="women enrolled"
+    //           stroke="#d1001f"
+    //           activeDot={{ r: 8 }}
+    //           unit=""
+    //         />
+    //       </LineChart>
+    //     </ResponsiveContainer>
+    <div style={{ textAlign: "center" }}>
+      <h2 style={{ marginBottom: "10px" }}>
+        Historical - Grad Enrollment of Women
+      </h2>
+      <ResponsiveContainer width="100%" height={450}>
+        <LineChart
+          data={data}
+          margin={{ top: 20, right: 40, left: 20, bottom: 5 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="year" fontSize="1rem" />
+
+          {/* Left Y-Axis (Percentage Enrolled) */}
+          <YAxis
+            yAxisId="left"
+            fontSize="1rem"
+            unit="%"
+            domain={[5, 25]} // Adjust based on range
+            tick={{ fill: "#004f9e" }} // Blue
+          />
+
+          {/* Right Y-Axis (Number Enrolled) */}
+          <YAxis
+            yAxisId="right"
+            orientation="right"
+            fontSize="1rem"
+            domain={[175, 525]} // Adjust based on range
+            tick={{ fill: "#b22222" }} // Red
+          />
+
+          <Tooltip formatter={(value) => value.toLocaleString()} />
+          <Legend verticalAlign="top" height={36} />
+
+          {/* Blue Line (Percent Enrolled) */}
+          <Line
+            yAxisId="left"
+            type="monotone"
+            dataKey="percent"
+            stroke="#004f9e"
+            strokeWidth={2}
+            activeDot={{ r: 6 }}
+            unit="%"
+          />
+
+          {/* Red Line (Number Enrolled) */}
+          <Line
+            yAxisId="right"
+            type="monotone"
+            dataKey="number"
+            stroke="#b22222"
+            strokeWidth={2}
+            activeDot={{ r: 6 }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
   );
 }

website/src/components/posts/CollegeAdmissions/enrollmentGraph/WomenEnrollmentContainer.js

@@ -1,14 +1,27 @@
-const numbers = [
-  195, 247, 279, 248, 342, 369, 409, 360, 406, 395, 461, 431, 426, 455, 469,
-  472, 497,
+// const numbers = [
+//   195, 247, 279, 248, 342, 369, 409, 360, 406, 395, 461, 431, 426, 455, 469,
+//   472, 497,
+// ];
+// let year = 1988;
+// const data = numbers.map((m) => {
+//   year += 2;
+//   return {
+//     name: year,
+//     "women enrolled": m,
+//   };
+// });
+const data = [
+  { year: 1990, percent: 10, number: 195 },
+  { year: 1992, percent: 12, number: 247 },
+  { year: 1994, percent: 15, number: 279 },
+  { year: 1996, percent: 14, number: 248 },
+  { year: 1998, percent: 16, number: 279 },
+  { year: 2000, percent: 19, number: 342 },
+  { year: 2002, percent: 18, number: 369 },
+  { year: 2004, percent: 20.8, number: 409 },
+  { year: 2006, percent: 19, number: 395 },
+  { year: 2008, percent: 21.2, number: 469 },
+  { year: 2010, percent: 23.6, number: 497 },
 ];
-let year = 1988;
-const data = numbers.map((m) => {
-  year += 2;
-  return {
-    name: year,
-    "women enrolled": m,
-  };
-});
 
 export default data;