Merge branch '77-add-learning-from-biased-decisions-section' of https…

…://github.com/uclaacm/bias-by-us into 77-add-learning-from-biased-decisions-section
uclaacm · May 29, 2024 · 49d8c9f · 49d8c9f
2 parents 43922b4 + 26de259
commit 49d8c9f
Show file tree

Hide file tree

Showing 4 changed files with 303 additions and 2 deletions.
diff --git a/website/src/assets/College/collegeLabContent.js b/website/src/assets/College/collegeLabContent.js
@@ -2,6 +2,8 @@ import teachLogo from "../teachla-logo.svg";
 import React from "react";
 import "../../main.css";
 import EssayContainer from "../../components/posts/CollegeAdmissions/essay/EssayContainer";
+import WomenEnrollmentContainer from "../../components/posts/CollegeAdmissions/enrollmentGraph/WomenEnrollmentContainer.js";
+
 export default [
   {
     post: {
@@ -20,15 +22,65 @@ export default [
     post: {
       profilePic: teachLogo,
       profilePicName: "Profile Picture - TeachLA Logo",
-      header: "Interactive Essay",
-      subheader: "Make your own essay!",
+      header: "Biases in Disguise",
+      subheader: "How do biases implicitly manifest within data?",
       bodyText: [
+        {
+          body: (
+            <p>
+              The engineers of GRADE and other similar models{" "}
+              <mark className="bold">
+                remove labels for protected classes such as race and gender from
+                the data altogether
+              </mark>{" "}
+              to prevent such attributes from being taken into account. Despite
+              such explicit measures, these models may still end up biased.
+            </p>
+          ),
+        },
         {
           body: <EssayContainer />,
         },
       ],
     },
   },
+  {
+    post: {
+      profilePic: teachLogo,
+      profilePicName: "Profile Picture - TeachLA Logo",
+      header: "enrollment graph",
+      subheader: "amazing graph",
+      bodyText: [
+        {
+          body: (
+            <p className="text-center">
+              <mark className="bold">
+                Historical - Grad Enrollment of Women
+              </mark>
+            </p>
+          ),
+        },
+        {
+          body: <WomenEnrollmentContainer />,
+        },
+        {
+          body: (
+            <p className="gray-text text-center">
+              Source:{" "}
+              <a
+                href="https://cockrell.utexas.edu/media/xt-adaptive-images/1600/images/wep-stats/HistoricalGrad.jpg"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {" "}
+                The University of Texas at Austin
+              </a>
+            </p>
+          ),
+        },
+      ],
+    },
+  },
   {
     post: {
       profilePic: teachLogo,

diff --git a/website/src/caseStudies/FacialRecognition.js b/website/src/caseStudies/FacialRecognition.js
@@ -34,6 +34,197 @@ const FacialRecognitionInfo = [
       ],
     },
   },
+
+  {
+    post: {
+      profilePic: teachLogo,
+      profilePicName: "Profile Picture - Frame 1",
+      header: "Frame 1",
+      subheader: "Why Is This Important?",
+      bodyText: [
+        {
+          body: (
+            <p className="bold">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              <mark className="bold">{`TODO: `} </mark>Excepteur sint occaecat
+              cupidatat non proident, sunt in culpa qui officia deserunt mollit
+              anim id est laborum.
+            </p>
+          ),
+        },
+      ],
+    },
+  },
+
+  {
+    post: {
+      profilePic: teachLogo,
+      profilePicName: "Profile Picture - Frame 2",
+      header: "Frame 2",
+      subheader: "Why Is This Important?",
+      bodyText: [
+        {
+          body: (
+            <p className="bold">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              <mark className="bold">{`TODO: `} </mark>Excepteur sint occaecat
+              cupidatat non proident, sunt in culpa qui officia deserunt mollit
+              anim id est laborum.
+            </p>
+          ),
+        },
+      ],
+    },
+  },
+
+  {
+    post: {
+      profilePic: teachLogo,
+      profilePicName: "Profile Picture - Frame 4",
+      header: "Frame 4",
+      subheader: "Why Is This Important?",
+      bodyText: [
+        {
+          body: (
+            <p className="bold">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              <mark className="bold">{`TODO: `} </mark>Excepteur sint occaecat
+              cupidatat non proident, sunt in culpa qui officia deserunt mollit
+              anim id est laborum.
+            </p>
+          ),
+        },
+      ],
+    },
+  },
+
+  {
+    post: {
+      profilePic: teachLogo,
+      profilePicName: "Profile Picture - Frame 5",
+      header: "Frame 5",
+      subheader: "Why Is This Important?",
+      bodyText: [
+        {
+          body: (
+            <p className="bold">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              <mark className="bold">{`TODO: `} </mark>Excepteur sint occaecat
+              cupidatat non proident, sunt in culpa qui officia deserunt mollit
+              anim id est laborum.
+            </p>
+          ),
+        },
+      ],
+    },
+  },
+
+  {
+    post: {
+      profilePic: teachLogo,
+      profilePicName: "Profile Picture - Frame 6",
+      header: "Frame 6",
+      subheader: "Why Is This Important?",
+      bodyText: [
+        {
+          body: (
+            <p className="bold">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              <mark className="bold">{`TODO: `} </mark>Excepteur sint occaecat
+              cupidatat non proident, sunt in culpa qui officia deserunt mollit
+              anim id est laborum.
+            </p>
+          ),
+        },
+      ],
+    },
+  },
+
   {
     post: {
       profilePic: teachLogo,

diff --git a/website/src/components/posts/CollegeAdmissions/enrollmentGraph/WomenEnrollmentContainer.js b/website/src/components/posts/CollegeAdmissions/enrollmentGraph/WomenEnrollmentContainer.js
@@ -0,0 +1,44 @@
+import React from "react";
+import {
+  LineChart,
+  Line,
+  Label,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} 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>
+  );
+}
diff --git a/website/src/components/posts/CollegeAdmissions/enrollmentGraph/enrollmentData.js b/website/src/components/posts/CollegeAdmissions/enrollmentGraph/enrollmentData.js
@@ -0,0 +1,14 @@
+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,
+  };
+});
+
+export default data;