From 49ec60834aeb84e8580cde989ac97d247b69efa3 Mon Sep 17 00:00:00 2001
From: Craig Stephenson <crstephenson@alaska.edu>
Date: Thu, 12 Dec 2024 11:48:28 -0900
Subject: [PATCH] Changes to Demographics and Health section and Data page
 (#684)

* Text changes for Demographics and Health section and Data page.

* Update years of ACS 5-year citation.

* Add more demographics & health confidence intervals and calculate from MoE as needed.
---
 assets/scss/main.scss                         |   8 +-
 .../demographics/DemographicsHealthChart.vue  |  23 +--
 .../demographics/DemographicsOther.vue        | 138 +++++++++++++-----
 .../demographics/DemographicsReport.vue       |  48 +++++-
 pages/data.vue                                |  13 +-
 5 files changed, 162 insertions(+), 68 deletions(-)

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 6d88eb1..939d64a 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -38,9 +38,11 @@ label.label {
 // Some lighter formatting for the demographic tables, still more
 // like other tables
 table.table.demographic {
-  td {
-    font-family: 'IBM Plex Mono', monospace;
-    font-weight: 500;
+  tbody {
+    td {
+      font-family: 'IBM Plex Mono', monospace;
+      font-weight: 500;
+    }
   }
 }
 
diff --git a/components/reports/demographics/DemographicsHealthChart.vue b/components/reports/demographics/DemographicsHealthChart.vue
index cad0743..9342b56 100644
--- a/components/reports/demographics/DemographicsHealthChart.vue
+++ b/components/reports/demographics/DemographicsHealthChart.vue
@@ -1,15 +1,7 @@
 <template>
   <div>
-    <h5 class="title is-5">Health conditions</h5>
     <div class="block" v-if="healthConditionsPresent">
-      <div class="content is-size-5">
-        <p>
-          Data from the 2024 CDC PLACES dataset. Values are crude prevalence,
-          and the 95% confidence interval is shown in parentheses for each
-          value.
-        </p>
-      </div>
-      <table class="table block-centered demographic">
+      <table class="table block-centered demographic mb-6">
         <caption>
           Health conditions among adults aged &ge;18 years,
           {{
@@ -17,7 +9,7 @@
           }}, compared to Alaska and U.S.
         </caption>
         <thead>
-          <th scope="col">Condition</th>
+          <th scope="col">Condition (Crude prevalence*)</th>
           <th scope="col">{{ placeName }}</th>
           <th scope="col">Alaska</th>
           <th scope="col">U.S.</th>
@@ -51,6 +43,17 @@
             </td>
           </tr>
         </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="4">
+              *For example, if we survey 1,000 people and find that 100 of them
+              have asthma, the crude prevalence of asthma in this group is 10%
+              (100 out of 1,000). This doesn't take into account how things like
+              age or gender might influence the prevalence of asthma&mdash;it's
+              just the raw percentage for the whole group.
+            </td>
+          </tr>
+        </tfoot>
       </table>
     </div>
     <div v-else>
diff --git a/components/reports/demographics/DemographicsOther.vue b/components/reports/demographics/DemographicsOther.vue
index 1893c2e..80f83fc 100644
--- a/components/reports/demographics/DemographicsOther.vue
+++ b/components/reports/demographics/DemographicsOther.vue
@@ -1,15 +1,12 @@
 <template>
   <div>
-    <h5 class="title is-5 mt-6">Social Determinants of Health</h5>
     <div class="block" v-if="otherPresent">
-      <div class="content is-size-5">
-        <p>
-          Data from the 2017-2021 CDC Social Determinants of Health (SDOH) dataset and from the 2024 CDC PLACES dataset.
-        </p>
-      </div>
-      <table class="table block-centered demographic">
+      <table class="table block-centered demographic is-fullwidth mb-6">
         <caption>
-          Social determinants of health,
+          <a
+            href="https://odphp.health.gov/healthypeople/priority-areas/social-determinants-health"
+            >Social determinants of health</a
+          >,
           {{
             placeName
           }}, compared to Alaska and U.S.
@@ -23,9 +20,48 @@
         <tbody>
           <tr v-for="(name, key) in otherDemographics">
             <th scope="row">{{ name }}</th>
-            <td>{{ demographics['place'][key] }}%</td>
-            <td>{{ demographics['alaska'][key] }}%</td>
-            <td>{{ demographics['us'][key] }}%</td>
+            <td>
+              {{ demographics['place'][key] }}%
+              <span
+                v-if="
+                  demographics['place'][key + '_low'] &&
+                  demographics['place'][key + '_high']
+                "
+                class="ci"
+              >
+                ({{ demographics['place'][key + '_low'] }}&ndash;{{
+                  demographics['place'][key + '_high']
+                }})
+              </span>
+            </td>
+            <td>
+              {{ demographics['alaska'][key] }}%
+              <span
+                v-if="
+                  demographics['alaska'][key + '_low'] &&
+                  demographics['alaska'][key + '_high']
+                "
+                class="ci"
+              >
+                ({{ demographics['alaska'][key + '_low'] }}&ndash;{{
+                  demographics['alaska'][key + '_high']
+                }})
+              </span>
+            </td>
+            <td>
+              {{ demographics['us'][key] }}%
+              <span
+                v-if="
+                  demographics['us'][key + '_low'] &&
+                  demographics['us'][key + '_high']
+                "
+                class="ci"
+              >
+                ({{ demographics['us'][key + '_low'] }}&ndash;{{
+                  demographics['us'][key + '_high']
+                }})
+              </span>
+            </td>
           </tr>
         </tbody>
       </table>
@@ -41,17 +77,9 @@
     </div>
     <div class="block">
       <div v-if="disabilityInsurancePresent">
-        <div class="content is-size-5">
-          <p>
-            Data from the 2017&ndash;2021 U.S. Census American Community Survey
-            (ACS) 5-year dataset. Values are estimated, and the margin of error
-            is shown in parentheses for each value. Based on the total, civilian
-            non-institutionalized population.
-          </p>
-        </div>
-        <table class="table block-centered demographic">
+        <table class="table block-centered demographic mb-6">
           <caption>
-            Disability and insurance status,
+            Disability and insurance status,*
             {{
               placeName
             }}, compared to Alaska and U.S.
@@ -66,28 +94,52 @@
             <tr v-for="(name, key) in acs">
               <th scope="row" v-html="name"></th>
               <td>
-                {{ demographics['place'][key] }}% <span class="ci">
-                  ({{
-                    demographics['place']['moe_' + key]
-                  }})
-                </span>
+                {{ demographics['place'][key] }}%
+                <span
+                  class="ci"
+                  v-html="
+                    confidenceInverval(
+                      demographics['place'][key],
+                      demographics['place']['moe_' + key]
+                    )
+                  "
+                />
               </td>
               <td>
-                {{ demographics['alaska'][key] }}% <span class="ci">
-                  ({{
-                    demographics['alaska']['moe_' + key]
-                  }})
-                </span>
+                {{ demographics['alaska'][key] }}%
+                <span
+                  class="ci"
+                  v-html="
+                    confidenceInverval(
+                      demographics['alaska'][key],
+                      demographics['alaska']['moe_' + key]
+                    )
+                  "
+                />
               </td>
               <td>
-                {{ demographics['us'][key] }}% <span class="ci">
-                  ({{
-                    demographics['us']['moe_' + key]
-                  }})
-                </span>
+                {{ demographics['us'][key] }}%
+                <span
+                  class="ci"
+                  v-html="
+                    confidenceInverval(
+                      demographics['us'][key],
+                      demographics['us']['moe_' + key]
+                    )
+                  "
+                />
               </td>
             </tr>
           </tbody>
+          <tfoot>
+            <tr>
+              <td colspan="4">
+                *These data include the total civilian population, excluding
+                people in the military or living in places like nursing homes or
+                prisons.
+              </td>
+            </tr>
+          </tfoot>
         </table>
       </div>
       <div v-else>
@@ -139,7 +191,6 @@ export default {
         return sum > 0
       }
     },
-
     disabilityInsurancePresent() {
       if (this.demographics) {
         let sum = 0
@@ -154,6 +205,19 @@ export default {
       placeName: 'place/name',
     }),
   },
+  methods: {
+    confidenceInverval(value, moe) {
+      let valueFloat = parseFloat(value)
+      let moeFloat = parseFloat(moe)
+      return (
+        '(' +
+        _.round(valueFloat - moeFloat, 1).toFixed(1) +
+        '&ndash;' +
+        _.round(valueFloat + moeFloat, 1).toFixed(1) +
+        ')'
+      )
+    },
+  },
   data() {
     return {
       otherDemographics: {
diff --git a/components/reports/demographics/DemographicsReport.vue b/components/reports/demographics/DemographicsReport.vue
index ba036c5..62933a4 100644
--- a/components/reports/demographics/DemographicsReport.vue
+++ b/components/reports/demographics/DemographicsReport.vue
@@ -11,15 +11,11 @@
         needs. Our goal is to break down barriers to data access, providing key
         information at the community level where decisions are made.
       </p>
-      <p>
-        Health data are only shown for locations with an adult population of 50
-        or more, based on the 2020 U.S. Census.
-      </p>
     </div>
     <DemographicsMap />
     <div class="content is-size-4 mt-6">
       <p>
-        Demographic data is presented regionally, at the level of borough,
+        Demographic data are presented regionally, at the level of borough,
         census-designated place (CDPs), incorporated place, or census tracts.
       </p>
       <p>
@@ -57,10 +53,40 @@
 
     <div class="block">
       <h4 class="title is-4">Health</h4>
-      <div class="content is-size-4">
+      <div class="content is-size-4 mb-6">
         <p>
           Health data are only shown for locations with an adult population of
           50 or more, based on the 2020 U.S. Census.
+          <nuxt-link :to="{ name: 'data' }"
+            >Learn more about the data sources here</nuxt-link
+          >
+          or <a :href="demographicsCsvUrl">download a CSV</a> for definitions
+          and sources for each variable. Confidence intervals (shown in
+          parentheses for each value) show the range where the true value is
+          likely to fall, based on the data collected. For example, if a
+          confidence interval is 45%&ndash;50%, it means we're confident the
+          true value is between 45% and 50%. Wider intervals suggest more
+          uncertainty, while narrower intervals mean more precise estimates.
+        </p>
+        <p>
+          <strong>How do I interpret these data?</strong> The indicators below
+          focus on biomedical aspects of health, offering a snapshot of a
+          community's overall health status compared to Alaska and the U.S. as a
+          whole. These indicators can help highlight areas where public health
+          efforts might be needed or identify populations in the community that
+          may need additional support. They can also highlight community
+          strengths. For example, if only a small percentage of people lack
+          access to broadband internet, it suggests that most residents have
+          internet connectivity&mdash;a valuable tool for communication and
+          staying connected.
+        </p>
+
+        <p>
+          It's important to note that these indicators reflect just one
+          dimension of health. Other aspects, such as intergenerational
+          knowledge transfer, sovereignty, and cultural well-being, are also
+          vital to community health, particularly in Indigenous contexts, and
+          may not be captured here.
         </p>
       </div>
       <div v-if="adultPopulation >= 50">
@@ -70,7 +96,7 @@
     </div>
 
     <DownloadCsvButton
-      text="Download demographics data as CSV"
+      text="Download demographics and health data as CSV"
       endpoint="demographics"
       class="mt-3 mb-5"
     />
@@ -119,6 +145,14 @@ export default {
       )
       return totalPopulation - populationUnder18
     },
+    demographicsCsvUrl() {
+      return (
+        process.env.apiUrl +
+        '/demographics/' +
+        this.$store.getters['place/communityId'] +
+        '?format=csv'
+      )
+    },
     ...mapGetters({
       demographics: 'demographics/demographicsData',
       place: 'place/name',
diff --git a/pages/data.vue b/pages/data.vue
index 33a352d..e7a9470 100644
--- a/pages/data.vue
+++ b/pages/data.vue
@@ -32,7 +32,7 @@
                 <td>
                   <p>
                     Derived from the 2020 U.S. Census Demographics and Housing
-                    Characteristics File (DHC), the 2017-2021 U.S. Census
+                    Characteristics File (DHC), the 2018-2022 U.S. Census
                     American Community Survey (ACS) 5-year dataset, the 2024 CDC
                     PLACES dataset, and the 2017-2021 CDC Social Determinants of
                     Health (SDOH) dataset.
@@ -48,7 +48,7 @@
                       >
                     </li>
                     <li>
-                      U.S. Census Bureau (2021). 2017-2021 American Community
+                      U.S. Census Bureau (2021). 2018-2022 American Community
                       Survey 5-year estimates. Accessed May 2024, from
                       <a
                         href="https://www.census.gov/programs-surveys/acs/data.html"
@@ -62,15 +62,6 @@
                         >https://www.cdc.gov/places</a
                       >
                     </li>
-                    <li>
-                      Healthy People 2030, U.S. Department of Health and Human
-                      Services, Office of Disease Prevention and Health
-                      Promotion. Accessed November 2024, from
-                      <a
-                        href="https://health.gov/healthypeople/objectives-and-data/social-determinants-health"
-                        >https://health.gov/healthypeople/objectives-and-data/social-determinants-health</a
-                      >
-                    </li>
                   </ul>
                 </td>
               </tr>