Merge branch 'master' into matchinggame

Author: RahulKhanna14

.gitignore

@@ -17,7 +17,10 @@ website/build
 .env.development.local
 .env.test.local
 .env.production.local
-
+package.json
+package-lock.json
+website/package-lock.json
+website/package.json
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

website/.gitignore

@@ -1 +1,3 @@
-.env
+.env
+website/package-lock.json
+website/package.json

website/src/assets/College/collegeLabContent.js

@@ -10,15 +10,44 @@ export default [
     post: {
       profilePic: teachLogo,
       profilePicName: "Profile Picture - TeachLA Logo",
-      header: "Case Study #1: College Admissions",
-      subheader: "Robots Reading Your Essays?",
+      header: "Introduction",
+      subheader: "What did the University of Texas at Austin do?",
       bodyText: [
         {
-          body: <p className="bold">We Will Work On This Fun Case Study!</p>,
+          body: (
+            <p>
+              In 2013, the CS department at the University of Texas at Austin implemented the GRADE (GRaduate ADmissions Evaluator)
+              machine learning system into its Ph.D. admissions process.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              Made to reflect the admissions committee’s decisions prior to its implementation in 2013, 
+              issues arose of it{" "}
+              <mark className="underline">
+                compounding the initial biases that the admissions committee held, 
+                which disadvantaged applicants from underrepresented groups.
+              </mark>{" "}
+              The department ultimately abandoned GRADE in 2020.
+            </p>
+          ),
+        },
+        {
+          body: (
+            <p>
+              <mark className="bold">
+                In this case study, we will analyze why and how ML models such as GRADE that screen various applications 
+                can undervalue the achievements of underrepresented groups.
+              </mark>
+            </p>
+          ),
         },
       ],
     },
   },
+  
   {
     post: {
       profilePic: teachLogo,
@@ -87,8 +116,6 @@ export default [
       profilePic: teachLogo,
       profilePicName: "Profile Picture - Facial Recognition",
       header: "Learning from Biased Decisions",
-      headerLink: true,
-      linkTo: "facebook",
       subheader: "What served as the source for bias in GRADE?",
       bodyText: [
         {
@@ -177,8 +204,8 @@ export default [
   {
     post: {
       profilePic: teachLogo,
-      profilePicName: "Profile Picture - Facial Recognition",
-      header: "Case Study #2: Facial Recognition",
+      profilePicName: "Profile Picture - Facebook Logo",
+      header: "Case Study #2: Facebook Ads",
       headerLink: true,
       linkTo: "facebook",
       subheader: "Social Media Targets Ads Through Demographics",

website/src/caseStudies/FacialRecognition.js

@@ -25,7 +25,7 @@ const FacialRecognitionInfo = [
     post: {
       profilePic: teachLogo,
       profilePicName: "Profile Picture - TeachLA Logo",
-      header: "Case Study #3: Facial Recognition",
+      header: "Case Study #3: Face Recognition",
       subheader: "Stay Tuned For More!",
       bodyText: [
         {

website/src/components/posts/CollegeAdmissions/essay/EssayContainer.js

@@ -186,6 +186,7 @@ export default function EssayContainer() {
   return (
     <div className="essay-container">
       <div className="essay-container essay-background">
+        <div>The score is {essayScore.toFixed(2)}</div>
         <div>
           <ScoreBar essayScore={essayScore} />
         </div>
@@ -221,7 +222,7 @@ export default function EssayContainer() {
           Reset The Essay
         </div>
       </div>
-      <div>Similarity of Words to He/She</div>
+      <div style={{ marginTop: "20px" }}>Similarity of Words to He/She</div>
       <ScatterPlot wordsList={wordsList} />
     </div>
   );

website/src/components/posts/CollegeAdmissions/essay/ScatterPlot.js

@@ -7,7 +7,7 @@ import {
   ZAxis,
   Tooltip,
   Legend,
-  //Label,
+  Label,
   Scatter,
   LabelList,
   ResponsiveContainer,
@@ -42,6 +42,45 @@ export default function ScatterPlot(props) {
       wordObj.heScore - wordObj.sheScore <= 5 &&
       wordObj.heScore - wordObj.sheScore >= -5
   );
+
+  // use tooltip to collapse words on top off each other into 1 pop-up
+  const CustomTooltip = ({ active, payload }) => {
+    if (active && payload && payload.length) {
+      // Find all words that match the current heScore and sheScore
+      const { heScore, sheScore } = payload[0].payload;
+      const matchingWords = selected.filter(
+        (wordObj) =>
+          wordObj.heScore === heScore && wordObj.sheScore === sheScore
+      );
+
+      return (
+        <div
+          style={{
+            background: "white",
+            padding: "10px",
+            border: "1px solid #ccc",
+          }}
+        >
+          <p>
+            <strong>He Similarity:</strong> {heScore}%
+          </p>
+          <p>
+            <strong>She Similarity:</strong> {sheScore}%
+          </p>
+          <p>
+            <strong>Words:</strong>
+          </p>
+          <ul>
+            {matchingWords.map((wordObj, index) => (
+              <li key={index}>{wordObj.word}</li>
+            ))}
+          </ul>
+        </div>
+      );
+    }
+    return null;
+  };
+
   const listOfScatters = [];
   //append heLeaning words
   listOfScatters.push(
@@ -69,7 +108,7 @@ export default function ScatterPlot(props) {
       <ScatterChart
         width={500}
         height={300}
-        margin={{ top: 20, right: 20, bottom: 10, left: 10 }}
+        margin={{ top: 20, right: 20, bottom: 40, left: 30 }}
       >
         <XAxis
           dataKey="heScore"
@@ -78,7 +117,7 @@ export default function ScatterPlot(props) {
           type="number"
           domain={[0, 100]}
         >
-          {/* <Label value="Similarity to He" position="bottom" offset={10} /> */}
+          <Label value="Similarity to He" position="bottom" offset={10} />
         </XAxis>
 
         <YAxis
@@ -87,12 +126,30 @@ export default function ScatterPlot(props) {
           unit="%"
           domain={[0, 100]}
         >
-          {/* <Label value="Similarity to She" angle={270} position="left" /> */}
+          <Label
+            value="Similarity to She"
+            angle={270}
+            position="left"
+            offset={10}
+            dy={-60}
+          />
         </YAxis>
         <ZAxis dataKey="word" name="Word" />
         <CartesianGrid strokeDasharray="3 3" />
-        <Tooltip cursor={{ strokeDasharray: "3 3" }} />
-        <Legend />
+        <Tooltip
+          content={<CustomTooltip />}
+          cursor={{ strokeDasharray: "3 3" }}
+        />
+        <Scatter
+          data={[
+            { heScore: 0, sheScore: 0 },
+            { heScore: 100, sheScore: 100 },
+          ]}
+          line={{ stroke: "#CCCCCC", strokeDasharray: "3 3" }}
+          fill="none"
+          shape="none"
+        />
+        <Legend wrapperStyle={{ marginTop: "100px", marginBottom: "-40px" }} />
         {listOfScatters}
       </ScatterChart>
     </ResponsiveContainer>

website/src/components/posts/CollegeAdmissions/essay/ScoreBar.js

@@ -1,7 +1,15 @@
 import React from "react";
+import "./essay.css";
 
 export default function ScoreBar(props) {
+  const scale = 2;
+  const shift = 0;
+  let scaledScore = props.essayScore * scale + shift;
+  scaledScore = scaledScore < 0 ? 0 : scaledScore > 100 ? 100 : scaledScore;
+
   return (
-    <div>The score is {props.essayScore.toFixed(2)} (Will be a bar later)</div>
+    <div class="score-bar">
+      <div class="score-bar-circle" style={{ left: scaledScore + "%" }}></div>
+    </div>
   );
 }

website/src/components/posts/CollegeAdmissions/essay/essay.css

@@ -11,6 +11,26 @@
   border-radius: 15px;
 }
 
+.score-bar {
+  display: block;
+  height: 5px;
+  width: 450px;
+  background: white;
+  position: relative;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.score-bar-circle {
+  position: absolute;
+  height: 20px;
+  width: 20px;
+  border-radius: 10px;
+  background: black;
+  left: 50%;
+  top: -7.5px;
+}
+
 .written-essay {
   margin: 2vh 0;
   background-color: white;

website/src/components/posts/Facebook/conclusion/conclusion.css

@@ -76,3 +76,7 @@
 .fade-exit-active {
   transition: opacity 500ms;
 }
+
+.gray {
+  background-color: gray;
+}

website/src/components/posts/posts.css

@@ -17,6 +17,7 @@
 }
 
 .post-container {
+  background-color: #fff2c3;
   border-radius: 0 25px 0 0;
   margin-top: 48px;
 }