Added active cases and hover scaling

src/App.tsx

@@ -8,8 +8,11 @@ import { Spinner } from "./Spinner";
 
 export default function App() {
   const [totals, setTotals] = useState<number[]>([]);
-
+  const [loaderTimeout, timedOut] = useState(false);
   useEffect(() => initGlobe(), []);
+  useEffect(() => {
+    setTimeout(() => timedOut(true), 5000);
+  }, []);
   useEffect(() => {
     setTimeout(() => {
       let total: number[] = [];
@@ -24,13 +27,16 @@ export default function App() {
     <React.Fragment>
       <div id="globeViz"></div>
       <div className="top-info-container">
-        <div className="title">COVID-19</div>
+        <div className="title">COVID-19 Globe Tracker</div>
         <div className="title-desc">
-          Loading countries affected by the virus...
+          Hover on a country or territory to see cases, deaths, and recoveries.
         </div>
       </div>
       <div className="bottom-info-container">
-        <Spinner loaded={GlobalCounts.set} />
+        <span className="gradient-container">
+          LOW<div className="gradient"></div>HIGH
+        </span>
+        <Spinner loaded={GlobalCounts.set || loaderTimeout} />
         {GlobalCounts.set ? (
           <>
             <div
@@ -61,14 +67,14 @@ export default function App() {
             </div>
           </>
         ) : null}
-        <div style={{ marginTop: "5px" }}>
+        <div className="moreInfo" style={{ marginTop: "5px" }}>
           <a
             href="https://github.com/tanmaylaud/covid19-globe-tracker"
             rel="noopener noreferrer"
             target="_BLANK"
-            style={{ color: "#ffffff", textDecoration: "none" }}
+            style={{ color: "yellow", textDecoration: "none" }}
           >
-            More Information
+            Click For More Information
           </a>
         </div>
       </div>

src/Counter.tsx

@@ -10,7 +10,8 @@ export function Counter({ count }: CounterProps) {
 
   useEffect(() => {
     if (counter != count) {
-      if (count - counter <= 1000) setCounter(counter + 1);
+      if (count - count <= 200) setCounter(counter + 1);
+      if (count - counter <= 1000) setCounter(counter + 100);
       else if (counter < 10000) setCounter(counter + 1000);
       else setCounter(counter + 10000);
     }

src/Country.tsx

@@ -8,4 +8,5 @@ export interface Country {
   confirmed: number;
   recoveries: number;
   deaths: number;
+  active: number;
 }

src/Globe.tsx

@@ -11,7 +11,7 @@ import { Countries, Country } from "./Country";
 import { GlobalCounts } from "./GlobalCounts";
 
 const getVal = (feat: any) => {
-  return Math.pow(feat.covidData.confirmed / feat.properties.POP_EST, 1 / 4);
+  return Math.pow(feat.covidData.active / feat.properties.POP_EST, 1 / 4);
 };
 
 interface Feature {
@@ -66,10 +66,6 @@ async function getCases() {
   countries = await request(CASES_API);
   featureCollection = (await request(GEOJSON_URL)).features;
 
-  // world.polygonsData(countriesWithCovid);
-  document.querySelector(".title-desc")!.innerHTML =
-    "Hover on a country or territory to see cases, deaths, and recoveries.";
-
   dates = Object.keys(countries.China);
 
   updateCounters();
@@ -78,11 +74,6 @@ async function getCases() {
   updatePointOfView();
 }
 
-//const infectedEl = document.querySelector("#infected")!;
-//const deathsEl = document.querySelector("#deaths")!;
-//const recoveriesEl = document.querySelector("#recovered")!;
-//const updatedEl = document.querySelector(".updated")!;
-
 function updateCounters() {
   let totalConfirmed = 0;
   let totalDeaths = 0;
@@ -112,12 +103,17 @@ function updatePolygonsData() {
         confirmed: countries[country][dates[date]].confirmed,
         deaths: countries[country][dates[date]].deaths,
         recoveries: countries[country][dates[date]].recoveries,
+        active:
+          countries[country][dates[date]].confirmed -
+          countries[country][dates[date]].deaths -
+          countries[country][dates[date]].recoveries,
       };
     } else {
       featureCollection[x].covidData = {
         confirmed: 0,
         deaths: 0,
         recoveries: 0,
+        active: 0,
       };
     }
   }

src/Spinner.tsx

@@ -4,6 +4,9 @@ export function Spinner(props: { loaded: boolean }) {
   return !props.loaded ? (
     <div className="spinbody">
       <div className="spinner"></div>
+      <p style={{ position: "absolute", left: "40%", bottom: "50px" }}>
+        Loading latest data...
+      </p>
     </div>
   ) : null;
 }

src/styles.css

@@ -4,7 +4,7 @@
 }
 
 body {
-  font-family: "Space Mono", monospace;
+  font-family: "Calibri", monospace;
   overflow: hidden;
   background: black;
 }
@@ -13,7 +13,7 @@ body {
   z-index: 1;
   top: 20px;
   position: absolute;
-  color: white;
+  color: red;
   text-align: center;
   width: 100%;
 }
@@ -29,7 +29,7 @@ body {
 
 .title {
   font-size: 35px;
-  color: #e6f1ff;
+  color: red;
 }
 
 .title-desc {
@@ -41,15 +41,29 @@ body {
 #infected {
   color: goldenrod;
 }
+#infected:hover {
+  font-size: 40px;
+}
 
 #deaths {
   color: #ff4848;
 }
+#deaths:hover {
+  font-size: 40px;
+}
 
 #recovered {
   color: #1ae021;
 }
-
+#recovered:hover {
+  font-size: 40px;
+}
+#active {
+  color: #04ffff;
+}
+#active:hover {
+  font-size: 40px;
+}
 .card {
   font-family: "Space Mono", monospace;
   transition: 0.3s;
@@ -93,7 +107,35 @@ body {
 .scene-tooltip {
   z-index: 2;
 }
+.gradient-container {
+  text-align: center;
+}
+.gradient-container > div {
+  position: relative;
+  display: inline-block;
+}
+.gradient {
+  margin-left: 10px;
+  margin-right: 10px;
+  width: 200px;
+  height: 20px;
+  background-color: red;
+  background-image: linear-gradient(
+    to right,
+    rgb(248, 231, 231),
+    rgb(255, 2, 2),
+    #850000
+  );
+}
 
+.moreInfo {
+  border-bottom: #ff4848;
+  border-color: red;
+  color: yellow;
+}
+.moreInfo:hover {
+  font-size: 40px;
+}
 @media only screen and (max-width: 768px) {
   .bottom-info-container {
     z-index: 1;