Skip to content

Commit

Permalink
Demographic Adjustments (#682)
Browse files Browse the repository at this point in the history
  • Loading branch information
@brucecrevensten
brucecrevensten authored Nov 25, 2024
1 parent 55c92c7 commit 76a59b2
Show file tree
Hide file tree
Showing 10 changed files with 324 additions and 180 deletions.
14 changes: 14 additions & 0 deletions assets/scss/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,26 @@ label.label {
font-weight: 500;
}

.block-centered {
margin-left: auto;
margin-right: auto;
}

.content-wrapper {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
}

// 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;
}
}

// Formatting common for report tables (temp/precip, indicators)
table.table.report-table {
width: 100%;
Expand Down
29 changes: 20 additions & 9 deletions components/reports/demographics/DemographicsAgesChart.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
<template>
<div class="block">
<div class="content is-size-5">
Computed from the 2020 US Census Demographics and Housing Characteristics File (DHC). Data are shown both as a chart and as a table, below.
Computed from the 2020 U.S. Census Demographics and Housing
Characteristics File (DHC). Data are shown both as a chart and as a table,
below.
</div>

<div id="demographics-ages-chart" />

<div class="block">
<table class="table mt-6">
<table class="block-centered table demographic mt-6">
<caption>
Age, by category,
Age distribution,
{{
placeName
}}
}}, compared to Alaska and U.S.
</caption>
<thead>
<tr>
Expand All @@ -33,7 +37,12 @@
</div>
</template>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
#demographics-ages-chart {
width: 1200px;
margin: 0 auto;
}
</style>

<script>
import _ from 'lodash'
Expand Down Expand Up @@ -72,15 +81,15 @@ export default {
abc[key][demo] = Number(
this.demographics[demo]['pct_under_18'] -
this.demographics[demo]['pct_under_5']
).toPrecision(4)
).toPrecision(3)
break
case 'pct_18_to_64':
abc[key][demo] = Number(
100 -
this.demographics[demo]['pct_65_plus'] -
this.demographics[demo]['pct_under_18']
).toPrecision(4)
).toPrecision(3)
break
case 'pct_65_plus':
Expand Down Expand Up @@ -237,7 +246,10 @@ export default {
var dataTraces = [trace0, trace1, trace2, trace3]
var layout = {
title: 'Age, by category',
title:
'Age distribution, ' +
this.placeName +
', compared to Alaska and U.S.',
barmode: 'stack',
margin: {
Expand All @@ -247,7 +259,6 @@ export default {
l: 200,
},
height: 250,
width: 1200,
legend: {
orientation: 'h',
traceorder: 'normal',
Expand Down
60 changes: 44 additions & 16 deletions components/reports/demographics/DemographicsHealthChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@
<h5 class="title is-5">Health conditions</h5>
<div class="block" v-if="healthConditionsPresent">
<div class="content is-size-5">
<p>Data from the 2023 CDC PLACES dataset.</p>
<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">
<table class="table block-centered demographic">
<caption>
Health conditions<br /><span class="clause"
>crude prevalence, 95% confidence interval</span
>
Health conditions among adults aged &ge;18 years,
{{
placeName
}}, compared to Alaska and U.S.
</caption>
<thead>
<th scope="col">Condition</th>
Expand All @@ -20,9 +25,30 @@
<tbody>
<tr v-for="(conditionName, key) in conditions">
<th scope="row" v-html="conditionName"></th>
<td>{{ demographics['place'][key] }}%</td>
<td>{{ demographics['alaska'][key] }}%</td>
<td>{{ demographics['us'][key] }}%</td>
<td>
{{ demographics['place'][key] }}%
<span class="ci">
({{ demographics['place'][key + '_low'] }}&ndash;{{
demographics['place'][key + '_high']
}})
</span>
</td>
<td>
{{ demographics['alaska'][key] }}%
<span class="ci">
({{ demographics['alaska'][key + '_low'] }}&ndash;{{
demographics['alaska'][key + '_high']
}})
</span>
</td>
<td>
{{ demographics['us'][key] }}%
<span class="ci">
({{ demographics['us'][key + '_low'] }}&ndash;{{
demographics['us'][key + '_high']
}})
</span>
</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -53,6 +79,9 @@ table {
}
}
}
span.ci {
font-weight: 400;
}
</style>

<script>
Expand All @@ -66,13 +95,12 @@ export default {
data() {
return {
conditions: {
pct_asthma: 'Current asthma among adults aged &ge;18 years',
pct_copd:
'Chronic obstructive pulmonary disease among adults aged &ge;18 years',
pct_hd: 'Coronary heart disease among adults aged &ge;18 years',
pct_stroke: 'Stroke among adults aged &ge;18 years',
pct_diabetes: 'Diagnosed diabetes among adults aged &ge;18 years',
pct_kd: 'Chronic kidney disease among adults aged &ge;18 years',
pct_asthma: 'Current asthma',
pct_copd: 'Chronic obstructive pulmonary disease',
pct_hd: 'Coronary heart disease',
pct_diabetes: 'Diagnosed diabetes',
pct_stroke: 'Stroke',
pct_mh: 'Frequent mental distress',
},
}
},
Expand All @@ -81,7 +109,7 @@ export default {
if (this.demographics) {
let sum = 0
Object.keys(this.conditions).forEach(k => {
sum += this.demographics['place'][k]
sum += Number.parseFloat(this.demographics['place'][k])
})
return sum > 0
}
Expand Down
95 changes: 69 additions & 26 deletions components/reports/demographics/DemographicsOther.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,17 @@
<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.</p>
<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">
<table class="table block-centered demographic">
<caption>
Social determinants of health,
{{
placeName
}}, compared to Alaska and U.S.
</caption>
<thead>
<th scope="col"></th>
<th scope="col">{{ placeName }}</th>
Expand All @@ -26,19 +34,28 @@
<div class="content is-size-5">
<p>
Some social determinants of health (minority status, high school
diploma, living below 150% of poverty line, and broadband) are not
available for this location.
diploma, living below 150% of poverty line, broadband and more) are
not available for this location.
</p>
</div>
</div>
<div class="block">
<div v-if="disabilityInsurancePresent">
<div class="content is-size-5">
<p>
Data in this section were taken from the 2017&ndash;2021 US 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.
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">
<table class="table block-centered demographic">
<caption>
Disability and insurance status,
{{
placeName
}}, compared to Alaska and U.S.
</caption>
<thead>
<th scope="col"></th>
<th scope="col">{{ placeName }}</th>
Expand All @@ -49,19 +66,25 @@
<tr v-for="(name, key) in acs">
<th scope="row" v-html="name"></th>
<td>
{{ demographics['place'][key] }}% ({{
demographics['place']['moe_' + key]
}}%)
{{ demographics['place'][key] }}% <span class="ci">
({{
demographics['place']['moe_' + key]
}})
</span>
</td>
<td>
{{ demographics['alaska'][key] }}% ({{
demographics['alaska']['moe_' + key]
}}%)
{{ demographics['alaska'][key] }}% <span class="ci">
({{
demographics['alaska']['moe_' + key]
}})
</span>
</td>
<td>
{{ demographics['us'][key] }}% ({{
demographics['us']['moe_' + key]
}}%)
{{ demographics['us'][key] }}% <span class="ci">
({{
demographics['us']['moe_' + key]
}})
</span>
</td>
</tr>
</tbody>
Expand All @@ -70,16 +93,33 @@
<div v-else>
<div class="content is-size-5">
<p>
Demographic information for insurance status and people with a
disability are not available for this location.
Demographic information for social determinants of health and
disability status are not available for this location.
</p>
</div>
</div>
</div>
</div>
</template>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
table {
th[scope='row'] {
max-width: 30rem;
}
caption {
font-size: 110%;
font-weight: 500;
.clause {
font-size: 100%;
font-weight: 400;
}
}
}
span.ci {
font-weight: 400;
}
</style>

<script>
import _ from 'lodash'
Expand All @@ -94,7 +134,7 @@ export default {
if (this.demographics) {
let sum = 0
Object.keys(this.otherDemographics).forEach(k => {
sum += this.demographics['place'][k]
sum += Number.parseFloat(this.demographics['place'][k])
})
return sum > 0
}
Expand All @@ -104,7 +144,7 @@ export default {
if (this.demographics) {
let sum = 0
Object.keys(this.acs).forEach(k => {
sum += this.demographics['place'][k]
sum += Number.parseFloat(this.demographics['place'][k])
})
return sum > 0
}
Expand All @@ -121,15 +161,18 @@ export default {
pct_no_hsdiploma:
'No high school diploma among adults aged 25 years or older',
pct_below_150pov: 'Persons living below 150% of the poverty level',
pct_unemployed: 'Unemployment among people aged 16 years or older',
pct_foodstamps: 'Received food stamps in the past 12 months',
pct_single_parent: 'Single parent households',
pct_no_bband: 'No broadband internet subscription among households',
pct_crowding: 'Crowding',
pct_hcost: 'Housing cost burden',
pct_emospt: 'Lack of social and emotional support',
},
acs: {
pct_w_disability:
'Percent with a disability, estimate, total civilian noninstitutionalized population',
pct_insured:
'Percent insured, estimate, civilian noninstitutionalized population',
pct_uninsured:
'Percent uninsured, estimate, civilian noninstitutionalized population',
pct_w_disability: 'Percent with a disability',
pct_insured: 'Percent insured',
pct_uninsured: 'Percent uninsured',
},
}
},
Expand Down
Loading

0 comments on commit 76a59b2

Please sign in to comment.