Skip to content

Commit

Permalink
Changes to Demographics and Health section and Data page (#684)
Browse files Browse the repository at this point in the history 
* 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.
  • Loading branch information
@cstephen
cstephen authored Dec 12, 2024
1 parent 76a59b2 commit 49ec608
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 68 deletions.
8 changes: 5 additions & 3 deletions assets/scss/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

Expand Down
23 changes: 13 additions & 10 deletions components/reports/demographics/DemographicsHealthChart.vue
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,15 @@
<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,
{{
placeName
}}, 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>
Expand Down Expand Up @@ -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>
Expand Down
138 changes: 101 additions & 37 deletions components/reports/demographics/DemographicsOther.vue
View file
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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>
Expand All @@ -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.
Expand All @@ -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>
Expand Down Expand Up @@ -139,7 +191,6 @@ export default {
return sum > 0
}
},
disabilityInsurancePresent() {
if (this.demographics) {
let sum = 0
Expand All @@ -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: {
Expand Down
48 changes: 41 additions & 7 deletions components/reports/demographics/DemographicsReport.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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',
Expand Down
13 changes: 2 additions & 11 deletions pages/data.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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"
Expand All @@ -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>
Expand Down

0 comments on commit 49ec608

Please sign in to comment.