Recidiviz · szhu · Mar 30, 2020 · Mar 30, 2020 · Mar 30, 2020 · Mar 30, 2020
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+*.svg -diff
diff --git a/index.html b/index.html
@@ -8,10 +8,16 @@
 <html>
   <head>
     <title>TITLE PLACEHOLDER</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/tailwindcss@1.2.0/dist/tailwind.min.css"
+    />
     <style></style>
   </head>
   <body>
     <div id="app">CONTENT PLACEHOLDER</div>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    <script src="https://d3js.org/d3.v5.min.js"></script>
     <script src="src/entry-point-client/index.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "devDependencies": {
     "@hot-loader/react-dom": "16.13.0",
     "@types/chalk": "2.2.0",
+    "@types/d3": "5.7.2",
     "@types/node": "12.12.31",
     "@types/react": "16.9.26",
     "@types/react-dom": "16.9.5",
@@ -44,7 +45,7 @@
     "*.{html,json,md}": [
       "prettier --write"
     ],
-    "*.tsx": [
+    "*.{js,tsx}": [
       "bash -c tsc",
       "eslint --cache --fix",
       "prettier --write"

diff --git a/src/entry-point-client/App.tsx b/src/entry-point-client/App.tsx
@@ -3,6 +3,7 @@ import { Route, Switch } from "react-router-dom";
 
 import FormPage from "../page-form/FormPage";
 import HomePage from "../page-home/HomePage";
+import OverviewPage from "../page-overview/OverviewPage";
 import TestPage from "../page-test/TestPage";
 import { GlobalStyles } from "../styles";
 import WindowTitle from "./WindowTitle";
@@ -12,6 +13,10 @@ const App: React.FC<{}> = () => {
     <>
       <GlobalStyles />
       <Switch>
+        <Route path="/overview">
+          <WindowTitle>Overview</WindowTitle>
+          <OverviewPage />
+        </Route>
         <Route path="/test">
           <WindowTitle>Test Page</WindowTitle>
           <TestPage />

diff --git a/src/entry-point-static/build.tsx b/src/entry-point-static/build.tsx
@@ -6,6 +6,7 @@ import generatePageContent, { PageInfo } from "./generatePageContent";
 
 let pageInfos: PageInfo[] = [
   { title: "Recidiviz COVID-19 Dashboard", location: "/" },
+  { title: "Overview", location: "/overview" },
   { title: "Test Page", location: "/test" },
 ];
 

diff --git a/src/page-home/HomePage.tsx b/src/page-home/HomePage.tsx
@@ -3,6 +3,9 @@ import { Link } from "react-router-dom";
 const HomePage: React.FC<{}> = () => (
   <div>
     <h1>Home page</h1>
+    <p>
+      Go to <Link to="/overview">Overview</Link>.
+    </p>
     <p>
       Go to <Link to="/test">Test Page</Link>.
     </p>

diff --git a/src/page-overview/OverviewPage.tsx b/src/page-overview/OverviewPage.tsx
diff --git a/src/page-overview/assets/data-forms.js b/src/page-overview/assets/data-forms.js
@@ -0,0 +1,157 @@
+import { ICU_DATA } from "./icuData";
+
+// application state object
+export const appState = {
+  percentageInfected: 100,
+  stateCode: "",
+  incarceratedPopulation: 0,
+  incarceratedPopulationMax: 0,
+  incarceratedPopulationMin: 0,
+};
+
+const stateNames = Object.values(ICU_DATA).map(function (record) {
+  return record.name;
+});
+
+const repaintFunctions = [];
+
+export function registerRepaintFunction(fn) {
+  // these functions will all receive the state code as first argument,
+  // so they should either use it or ignore it gracefully
+  repaintFunctions.push(fn);
+}
+
+export function repaint() {
+  const stateCode = appState.stateCode;
+  repaintFunctions.forEach(function (fn) {
+    fn(stateCode);
+  });
+}
+
+const stateCodesByName = {};
+Object.entries(ICU_DATA).forEach(function (entry) {
+  const code = entry[0];
+  const name = entry[1].name;
+  stateCodesByName[name] = code;
+});
+
+export function updateAppState(changesObj) {
+  Object.assign(appState, changesObj);
+  repaint();
+}
+
+function getStateName(stateCode) {
+  return ICU_DATA[stateCode].name;
+}
+
+function getStateCodeFromName(name) {
+  return stateCodesByName[name];
+}
+
+function getIncarceratedPopulation(stateCode) {
+  return ICU_DATA[stateCode].incarceratedPopulation;
+}
+
+function getNumberOfICUBeds(stateCode) {
+  return ICU_DATA[stateCode].numberOfICUBeds;
+}
+
+function getPercentageHospitalized(stateCode) {
+  // Returning a hard coded value for now, but you could replace this value with
+  // something that is populated from a form element, such as a slider.
+  return 0.05;
+}
+
+function getPercentageInfectedAsDecimal() {
+  return appState.percentageInfected / 100;
+}
+
+function getICUBedsPercentage(stateCode) {
+  let incarceratedPopulation = appState.incarceratedPopulation;
+  let numberOfICUBeds = getNumberOfICUBeds(stateCode);
+  let percentageHospitalized = getPercentageHospitalized(stateCode);
+  let percentageInfected = getPercentageInfectedAsDecimal();
+
+  return parseInt(
+    ((incarceratedPopulation * percentageInfected * percentageHospitalized) /
+      numberOfICUBeds) *
+      100,
+  );
+}
+
+function paintHeading(stateCode) {
+  let headingText;
+
+  if (stateCode == "US") {
+    headingText =
+      "As COVID-19 spreads, prisons and jails are the last dense gatherings in America. " +
+      "If states don't act now, " +
+      getICUBedsPercentage(stateCode) +
+      "% of ICU beds nationwide will be needed just for the infirm from prisons and jails.";
+  } else {
+    headingText =
+      "If no action is taken, " +
+      getICUBedsPercentage(stateCode) +
+      "% of " +
+      getStateName(stateCode) +
+      "’s ICU beds will be needed just for the infirm from prisons and jails.";
+  }
+
+  $("#icu_heading").text(headingText);
+}
+registerRepaintFunction(paintHeading);
+
+function paintIncarceratedPopulation(stateCode) {
+  const input = $("#incarcerated_population");
+  input.val(appState.incarceratedPopulation);
+  input.attr({
+    min: appState.incarceratedPopulationMin,
+    max: appState.incarceratedPopulationMax,
+  });
+}
+registerRepaintFunction(paintIncarceratedPopulation);
+
+function paintNumberOfICUBeds(stateCode) {
+  $("#number_of_icu_beds").text(getNumberOfICUBeds(stateCode).toLocaleString());
+}
+registerRepaintFunction(paintNumberOfICUBeds);
+
+function paintIncarceratedPct(stateCode) {
+  $("#icu_percentage").text(getICUBedsPercentage(stateCode) + "%");
+}
+registerRepaintFunction(paintIncarceratedPct);
+
+function paintStateName(stateCode) {
+  $("#state_name").text(getStateName(stateCode));
+}
+registerRepaintFunction(paintStateName);
+
+function updateInfectedPct(val) {
+  updateAppState({ percentageInfected: val });
+}
+
+function paintInfectedPct() {
+  $("#infected_percentage").val(appState.percentageInfected);
+}
+registerRepaintFunction(paintInfectedPct);
+
+function deselectState() {
+  // deselect previous state, if any
+  $("path.state, circle.state").removeClass("active");
+}
+
+export function setCurrentState(stateCode) {
+  // fetch the base data from external file;
+  const pop = getIncarceratedPopulation(stateCode);
+  // because the population is user-editable we have to put it into app state
+  updateAppState({
+    stateCode,
+    incarceratedPopulation: pop,
+    // define valid input range according to base number
+    incarceratedPopulationMin: Math.round(pop * 0.5),
+    incarceratedPopulationMax: Math.round(pop * 1.5),
+  });
+  // visually select new state on the map
+  deselectState();
+  $("#" + stateCode).addClass("active");
+}
diff --git a/src/page-overview/assets/icons/Logo.svg b/src/page-overview/assets/icons/Logo.svg
diff --git a/src/page-overview/assets/icons/ic_beds.svg b/src/page-overview/assets/icons/ic_beds.svg
diff --git a/src/page-overview/assets/icons/ic_email.svg b/src/page-overview/assets/icons/ic_email.svg
diff --git a/src/page-overview/assets/icons/ic_facebook.svg b/src/page-overview/assets/icons/ic_facebook.svg