Initial commit of app files

The-Strategy-Unit · Dec 1, 2023 · ca4beae · ca4beae
1 parent 0993ace
commit ca4beae
Show file tree

Hide file tree

Showing 4 changed files with 609 additions and 0 deletions.
diff --git a/app/css/style.css b/app/css/style.css
@@ -0,0 +1,135 @@
+#panels.div-panels {
+  height: 100%;
+  width: 500px;
+}
+
+#selectors.div-selectors {
+  margin-bottom: 13px;
+}
+
+body {
+  font-family: 'Fira Sans', sans-serif;
+  font-size: 13px;
+  fill: #2c2825;
+}
+
+.selector {
+  font-family: 'Fira Sans', sans-serif;
+  font-size: 13px;
+  fill: #2c2825;
+}
+
+.title {
+  font-family: 'Fira Sans', sans-serif;
+  font-size: 16px;
+  fill: #2c2825;
+  font-weight: bold;
+}
+
+.bar rect {
+  shape-rendering: crispEdges;
+}
+
+.bar text {
+  fill: #2c2825;
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #686f73;
+  shape-rendering: crispEdges;
+}
+
+.axis text {
+  font-family: 'Fira Sans', sans-serif;
+  font-size: 13px;
+  fill: #686f73;
+}
+
+svg.amb,
+svg.walkin,
+svg.daycase_n,
+svg.emer_n,
+svg.emer_bds,
+svg.ordelec_n,
+svg.ordelec_bds,
+svg.surg_first,
+svg.surg_fup,
+svg.surg_proc,
+svg.non-surg_first,
+svg.non-surg_fup,
+svg.non-surg_proc {
+  background-color: #f2f2f2;
+  border: 1px solid #686f73;
+  margin: 2px;
+}
+
+div.tooltip {
+  position: absolute;
+  text-align: center;
+  vertical-align: middle;
+  line-height: normal;
+  width: 40px;
+  height: 20px;
+  padding: 10px;
+  font-family: 'Fira Sans', sans-serif;
+  font-size: 13px;
+  background: #686f73;
+  border: 0px;
+  border-radius: 8px;
+  pointer-events: none;
+  z-index: 1001;
+  color: #f2f2f2;
+}
+
+/* health status checkbox */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #c2c5c7;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 10px;
+}
+
+.toggle:before {
+  position: absolute;
+  content: '';
+  height: 16px;
+  width: 18px;
+  left: 2px;
+  bottom: 2px;
+  top: 2px;
+  background-color: #ffffff;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .toggle {
+  background-color: #686f73;
+}
+
+input:checked + .toggle:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+    <!-- google fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Fira+Sans:wght@400;700&display=swap"
+    />
+    <!-- css -->
+    <link rel="stylesheet" href="./css/style.css" />
+  </head>
+  <body>
+    <!-- div to hold selector dropdowns -->
+    <div class="div-selectors" id="selectors">
+      <p>Choose an area</p>
+      <!-- initialise a dropdown -->
+      <select class="selector" id="selectArea">
+        <option value="E08000026" selected>Coventry</option>
+        <option value="E07000235">Malvern Hills</option>
+        <option value="E09000030">Tower Hamlets</option>
+      </select>
+      <p>Choose a service type</p>
+      <!-- initialise a dropdown -->
+      <select class="selector" id="selectPod">
+        <option value="aae" selected>aae</option>
+        <option value="apc">apc</option>
+        <option value="opc">opc</option>
+      </select>
+      <p>Choose a model horizon</p>
+      <!-- initialise a dropdown -->
+      <select class="selector" id="selectHorizon">
+        <option value="2025" selected>2025</option>
+        <option value="2030">2030</option>
+        <option value="2035">2035</option>
+        <option value="2040">2040</option>
+      </select>
+      <!-- initialise a dropdown -->
+      <p>Choose a projection variant</p>
+      <select class="selector" id="selectProjVar">
+        <option value="1" selected>Principal</option>
+        <option value="2">Low fertility</option>
+        <option value="3">High fertility</option>
+        <option value="4">Low life expectancy</option>
+        <option value="5">High life expectancy</option>
+        <option value="6">Low migration</option>
+        <option value="7">High migration</option>
+        <option value="8">Low population</option>
+        <option value="9">High population</option>
+        <option value="10">Young age structure</option>
+        <option value="11">Old age structure</option>
+      </select>
+      <p>Show modelled change without adjustment for health-status</p>
+      <label class="switch">
+        <input type="checkbox" id="toggleHsa" unchecked />
+        <span class="toggle"></span>
+      </label>
+    </div>
+    <!-- div to hold small multiple plots -->
+    <div class="div-panels" id="panels"></div>
+    <!-- JS -->
+    <script src="./js/index.js" type="module"></script>
+  </body>
+</html>
diff --git a/app/js/index.js b/app/js/index.js
@@ -0,0 +1,75 @@
+/* import variables */
+import { plotTitleSpacer, margin, width, height, transDur, blobDir, filePrefix, fileExt } from './main.js'
+/* import d3 functions */
+import { d3 } from './main.js'
+import { xScale, colorPal, tooltip } from './main.js'
+/* import udf functions */
+import { mouseOver, mouseOut } from './main.js'
+import { plotHsaGrps } from './main.js'
+import { updatePlots } from './main.js'
+import { switchPod } from './main.js'
+import { switchArea } from './main.js'
+import { toggleHsa } from './main.js'
+
+const selectedArea = 'E08000026'
+const selectedProjVar = '1'
+const selectedHorizon = '2025'
+const selectedPod = 'aae'
+
+const data = await d3.csv(blobDir + filePrefix + selectedArea + fileExt)
+
+const grpDat = d3.group(
+  data,
+  (d) => d.proj_id,
+  (d) => d.end_year,
+  (d) => d.pod
+)
+
+const projDat = grpDat
+  .get(selectedProjVar)
+  .get(selectedHorizon)
+  .get(selectedPod)
+
+plotHsaGrps(projDat)
+
+/* hack */
+d3.selectAll('.circle').style('opacity', 0)
+
+/* when the area dropdown changes, run switchArea() with the new value */
+d3.select('#selectArea').on('change', function () {
+  let selectedArea = d3.select(this).property('value')
+  let selectedProjVar = d3.select('#selectProjVar').property('value')
+  let selectedHorizon = d3.select('#selectHorizon').property('value')
+  let selectedPod = d3.select('#selectPod').property('value')
+  switchArea(selectedArea, selectedProjVar, selectedHorizon, selectedPod)
+})
+
+/* when the pod dropdown changes, run switchPod() with the new value */
+d3.select('#selectPod').on('change', function () {
+  let selectedPod = d3.select(this).property('value')
+  let selectedProjVar = d3.select('#selectProjVar').property('value')
+  let selectedHorizon = d3.select('#selectHorizon').property('value')
+  switchPod(data, selectedProjVar, selectedHorizon, selectedPod)
+})
+
+/* when the model horizon dropdown changes, run updatePlots() with the new value */
+d3.select('#selectHorizon').on('change', function () {
+  let selectedHorizon = d3.select(this).property('value')
+  let selectedProjVar = d3.select('#selectProjVar').property('value')
+  let selectedPod = d3.select('#selectPod').property('value')
+  updatePlots(grpDat, selectedProjVar, selectedHorizon, selectedPod)
+})
+
+/* when the projection variant dropdown changes, run updatePlots() with the new value */
+d3.select('#selectProjVar').on('change', function () {
+  let selectedProjVar = d3.select(this).property('value')
+  let selectedHorizon = d3.select('#selectHorizon').property('value')
+  let selectedPod = d3.select('#selectPod').property('value')
+  updatePlots(grpDat, selectedProjVar, selectedHorizon, selectedPod)
+})
+
+/* when the health status toggle changes show/hide circles */
+d3.select('#toggleHsa').on('change', function () {
+  const opacity = this.checked ? 1 : 0
+  toggleHsa(opacity)
+})