Merge branch 'update/shotspotter-map' of github.com:JosephLai241/stac…

…c into update/shotspotter-map
JosephLai241 · Jan 21, 2024 · 845e1a0 · 845e1a0
2 parents 599a928 + 2f6ad5c
commit 845e1a0
Show file tree

Hide file tree

Showing 2 changed files with 151 additions and 59 deletions.
diff --git a/frontend/src/models/chicago.rs b/frontend/src/models/chicago.rs
@@ -30,6 +30,8 @@ pub struct CleanedShotData {
     pub sorted_blocks: HashMap<String, i32>,
     /// Most to least common community areas in which shots were detected (`ShotData.community_area`).
     pub sorted_community_areas: HashMap<String, i32>,
+    /// Most to least common dates of occurrence (formatted date extracted from `ShotData.date`).
+    pub sorted_dates: HashMap<String, i32>,
     /// Most to least common incident types (`ShotData.incident_type_description`).
     pub sorted_incident_types: HashMap<String, i32>,
     /// Most to least common number of rounds fired (`ShotData.rounds`).
@@ -46,6 +48,7 @@ impl CleanedShotData {
         Self {
             sorted_blocks: HashMap::new(),
             sorted_community_areas: HashMap::new(),
+            sorted_dates: HashMap::new(),
             sorted_incident_types: HashMap::new(),
             sorted_rounds: HashMap::new(),
             sorted_zip_codes: HashMap::new(),
@@ -61,6 +64,9 @@ pub struct CleanedViolenceData {
     pub sorted_ages: HashMap<String, i32>,
     /// Most to least common community areas (`ViolenceData.community_area`).
     pub sorted_community_areas: HashMap<String, i32>,
+    /// Most to least common dates of occurrence (formatted date extracted from
+    /// `ViolenceData.community_area`).
+    pub sorted_dates: HashMap<String, i32>,
     /// Count of yes or no gun injuries (`ViolenceData.gunshot_injury_i`).
     pub sorted_gun_injury_count: HashMap<String, i32>,
     /// Most to least common incident types. The keys correspond to the value returned from the
@@ -85,6 +91,7 @@ impl CleanedViolenceData {
         Self {
             sorted_ages: HashMap::new(),
             sorted_community_areas: HashMap::new(),
+            sorted_dates: HashMap::new(),
             sorted_gun_injury_count: HashMap::new(),
             sorted_incident_types: HashMap::new(),
             sorted_location_descriptions: HashMap::new(),

diff --git a/frontend/styles.css b/frontend/styles.css
@@ -39,7 +39,10 @@ button {
   transition: all 0.5s;
 }
 button:hover {
-  box-shadow: -3px 3px #b7410e, -6px 6px #8a310a, -9px 9px #5f2107;
+  box-shadow:
+    -3px 3px #b7410e,
+    -6px 6px #8a310a,
+    -9px 9px #5f2107;
   color: #b0b0b0;
   transform: translateY(-6px);
 }
@@ -89,14 +92,19 @@ code {
 
 /* Creating an animation for the 404 not found page. */
 .animated-loading {
-  animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
+  animation:
+    shadows 1.2s ease-in infinite,
+    move 1.2s ease-in infinite;
   color: #b0b0b0;
   display: inline-block;
   font-family: "Futura Md BT", sans-serif;
   font-size: calc(2rem + 5vw);
   margin: 0;
   text-align: center;
-  text-shadow: -3px 3px 0 #004799, -6px 6px 0 #002d61, -9px 9px #001f42,
+  text-shadow:
+    -3px 3px 0 #004799,
+    -6px 6px 0 #002d61,
+    -9px 9px #001f42,
     -12px 12px 0 #00152e;
 }
 @keyframes shadows {
@@ -109,34 +117,53 @@ code {
   }
 
   20% {
-    text-shadow: -3px 3px 0 #004799, -6px 6px 0 #002d61;
+    text-shadow:
+      -3px 3px 0 #004799,
+      -6px 6px 0 #002d61;
   }
 
   30% {
-    text-shadow: -3px 3px 0 #004799, -6px 6px 0 #002d61, -9px 9px #001f42;
+    text-shadow:
+      -3px 3px 0 #004799,
+      -6px 6px 0 #002d61,
+      -9px 9px #001f42;
   }
 
   40% {
-    text-shadow: -3px 3px 0 #004799, -6px 6px 0 #002d61, -9px 9px #001f42,
+    text-shadow:
+      -3px 3px 0 #004799,
+      -6px 6px 0 #002d61,
+      -9px 9px #001f42,
       -12px 12px 0 #00152e;
   }
 
   50% {
-    text-shadow: -3px 3px 0 #004799, -6px 6px 0 #002d61, -9px 9px #001f42,
+    text-shadow:
+      -3px 3px 0 #004799,
+      -6px 6px 0 #002d61,
+      -9px 9px #001f42,
       -12px 12px 0 #00152e;
   }
 
   60% {
-    text-shadow: -3px 3px 0 #004799, -6px 6px 0 #002d61, -9px 9px #001f42,
+    text-shadow:
+      -3px 3px 0 #004799,
+      -6px 6px 0 #002d61,
+      -9px 9px #001f42,
       -12px 12px 0 #00152e;
   }
 
   70% {
-    text-shadow: -3px 3px 0 #004799, -6px 6px 0 #002d61, -9px 9px #001f42;
+    text-shadow:
+      -3px 3px 0 #004799,
+      -6px 6px 0 #002d61,
+      -9px 9px #001f42;
   }
 
   80% {
-    text-shadow: -3px 3px 0 #004799, -6px 6px 0 #002d61;
+    text-shadow:
+      -3px 3px 0 #004799,
+      -6px 6px 0 #002d61;
   }
 
   90% {
@@ -248,7 +275,9 @@ code {
       rgba(0, 255, 0, 0.02),
       rgba(0, 0, 255, 0.06)
     );
-  background-size: 100% 2px, 3px 100%;
+  background-size:
+    100% 2px,
+    3px 100%;
   bottom: 0;
   content: " ";
   display: block;
@@ -330,88 +359,130 @@ code {
 /* Vaporwave-esque text shadow effect. Courtesy of Alec Lownes. */
 @keyframes textShadow {
   0% {
-    text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5),
-      -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5),
+      -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   5% {
-    text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5),
-      -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5),
+      -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   10% {
-    text-shadow: 0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5),
-      -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5),
+      -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   15% {
-    text-shadow: 0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5),
-      -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5),
+      -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   20% {
-    text-shadow: 3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5),
-      -3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5),
+      -3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   25% {
-    text-shadow: 1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5),
-      -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5),
+      -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   30% {
-    text-shadow: 0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5),
-      -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5),
+      -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   35% {
-    text-shadow: 3.896914047650351px 0 1px rgba(0, 30, 255, 0.5),
-      -3.896914047650351px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      3.896914047650351px 0 1px rgba(0, 30, 255, 0.5),
+      -3.896914047650351px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   40% {
-    text-shadow: 3.870905614848819px 0 1px rgba(0, 30, 255, 0.5),
-      -3.870905614848819px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      3.870905614848819px 0 1px rgba(0, 30, 255, 0.5),
+      -3.870905614848819px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   45% {
-    text-shadow: 2.231056963361899px 0 1px rgba(0, 30, 255, 0.5),
-      -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      2.231056963361899px 0 1px rgba(0, 30, 255, 0.5),
+      -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   50% {
-    text-shadow: 0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5),
-      -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5),
+      -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   55% {
-    text-shadow: 2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5),
-      -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5),
+      -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   60% {
-    text-shadow: 2.202193051050636px 0 1px rgba(0, 30, 255, 0.5),
-      -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      2.202193051050636px 0 1px rgba(0, 30, 255, 0.5),
+      -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   65% {
-    text-shadow: 2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5),
-      -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5),
+      -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   70% {
-    text-shadow: 0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5),
-      -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5),
+      -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   75% {
-    text-shadow: 1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5),
-      -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5),
+      -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   80% {
-    text-shadow: 0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5),
-      -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5),
+      -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   85% {
-    text-shadow: 0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5),
-      -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5),
+      -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   90% {
-    text-shadow: 3.443339761481782px 0 1px rgba(0, 30, 255, 0.5),
-      -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      3.443339761481782px 0 1px rgba(0, 30, 255, 0.5),
+      -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   95% {
-    text-shadow: 2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5),
-      -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5),
+      -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
   100% {
-    text-shadow: 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5),
-      -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+    text-shadow:
+      2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5),
+      -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3),
+      0 0 3px;
   }
 }
 
@@ -547,7 +618,10 @@ code {
   transition: all 0.5s;
 }
 .rusty-card:hover {
-  box-shadow: -3px 3px #b7410e, -6px 6px #8a310a, -9px 9px #5f2107;
+  box-shadow:
+    -3px 3px #b7410e,
+    -6px 6px #8a310a,
+    -9px 9px #5f2107;
   transform: translateY(-6px);
 }
 
@@ -575,7 +649,9 @@ code {
 
 /* Sexy style for the site's title. */
 .title-text {
-  animation: to-white-text 1.5s linear forwards, textShadow 1.6s infinite;
+  animation:
+    to-white-text 1.5s linear forwards,
+    textShadow 1.6s infinite;
   color: #b0b0b0;
   display: inline-block;
   padding-left: 10px;
@@ -585,10 +661,19 @@ code {
 
 /* Adding a hover animation of sorts for the site's title art. */
 .title-text:hover {
-  animation: to-black-text 0.5s linear forwards, textShadow 2s infinite;
-  text-shadow: -1px 1px 0px #000000, -2px 2px 0px #000000, -3px 3px 0px #000000,
-    -4px 4px 0px #000000, -5px 5px 0px #000000, -6px 6px 0px #000000,
-    -7px 7px 0px #000000, -8px 8px 0px #000000, -9px 9px 0px #000000;
+  animation:
+    to-black-text 0.5s linear forwards,
+    textShadow 2s infinite;
+  text-shadow:
+    -1px 1px 0px #000000,
+    -2px 2px 0px #000000,
+    -3px 3px 0px #000000,
+    -4px 4px 0px #000000,
+    -5px 5px 0px #000000,
+    -6px 6px 0px #000000,
+    -7px 7px 0px #000000,
+    -8px 8px 0px #000000,
+    -9px 9px 0px #000000;
 }
 
 /* The transition from white to blue to black text. */