publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-07-30 11:01:16 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'main' of github-usds:usds/justice40-tool

Browse source
This commit is contained in:
Jorge Escobar 2021-08-11 09:13:57 -04:00
commit 09b3ba6715
5 changed files with 325 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

123
client/src/components/__snapshots__/scoreStepsList.test.tsx.snap Normal file
View file

@ -0,0 +1,123 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the component should match the snapshot of the MapIntroduction component 1`] = `
<DocumentFragment>
<div
class="j40-process-list-wrapper"
>
<ul>
<li>
<section>
<h3
class="j40-item-list-title"
>
Gather datasets
</h3>
<p />
<h4
class="j40-item-list-subtitle"
>
Data inputs
</h4>
The cumulative index score includes the following equally weighted inputs.
<ul>
<li>
Poverty
</li>
<li>
Less than high school education
</li>
<li>
Linguistic isolation
</li>
<li>
Unemployment rate
</li>
<li>
Housing burden
</li>
</ul>
<p />
<p />
<h4
class="j40-item-list-subtitle"
>
Combining data from different geographic units
</h4>
Some data is not available at the census block group level and is instead only available for larger units such as census tracts or counties. In these cases, all census block groups will get an even contribution from the larger unit. For example, if a census tract scores 90th percentile on an indicator, then all census block groups within that tract will receive a value of 90th percentile.
<p />
<p />
<h4
class="j40-item-list-subtitle"
>
Normalizing data
</h4>
The range of the data that makes up the score varies, so the data must be normalized so that each data indicator can be more equally weighted. Min-max normalization is utilized, where the minimum value in the range of values for each dataset is set at 0, the maximum value is set at 1, and every other value is transformed into a decimal between 0 and 1. For example, if the minimum value for unemployment was 10 and the maximum value was 30, a value of 20 would be transformed to 0.5 since it is halfway between 10 and 30.
<p />
</section>
</li>
<li>
<section>
<h3>
Calculate cumulative index score
</h3>
<p>
To combine all variables into a single cumulative index score, we average the normalized values across indicators.
</p>
<p />
<div
class="grid-container"
data-testid="gridContainer"
>
<div
class="grid-row j40-math-division-container"
data-testid="grid"
>
<div
class="grid-col j40-math-eq-left-side grid-col-fill"
data-testid="grid"
>
<div
class="j40-math-eq-numerator"
>
Dataset 1 + Dataset 2 + ... + Dataset N
</div>
<div
class="j40-math-eq-denominator"
>
# of datasets
</div>
</div>
<div
class="grid-col j40-math-eq-middle grid-col-auto"
data-testid="grid"
>
=
</div>
<div
class="grid-col j40-math-eq-right-side grid-col-fill"
data-testid="grid"
>
Cumulative index score
</div>
</div>
</div>
<p />
</section>
</li>
<li>
<section>
<h3
class="j40-item-list-title"
>
Assign priority
</h3>
<p>
Census block groups are sorted by their cumulative index score from highest to lowest. Census block groups that are in the top 25 percentile (i.e. have a cumulative index score in the 75 - 100th percentile) will be considered the prioritized communities.
</p>
</section>
</li>
</ul>
</div>
</DocumentFragment>
`;

16
client/src/components/scoreStepsList.test.tsx Normal file
View file

@ -0,0 +1,16 @@
import * as React from 'react';
import {render} from '@testing-library/react';
import ScoreStepsList from './scoreStepsList';
import {LocalizedComponent} from '../test/testHelpers';
describe('rendering of the component', () => {
const {asFragment} = render(
<LocalizedComponent>
<ScoreStepsList/>
</LocalizedComponent>,
);
it('should match the snapshot of the MapIntroduction component', () => {
expect(asFragment()).toMatchSnapshot();
});
});

88
client/src/components/scoreStepsList.tsx Normal file
View file

@ -0,0 +1,88 @@
import React from 'react';
import {GridContainer, Grid} from '@trussworks/react-uswds';
const ScoreStepsList = () => {
return (<>
<div className={'j40-process-list-wrapper'}>
<ul>
<li>
<section>
<h3 className={'j40-item-list-title'}>Gather datasets</h3>
<p><h4 className={'j40-item-list-subtitle'}>Data inputs</h4>
The cumulative index score includes the following equally
weighted inputs.
<ul>
<li>Poverty</li>
<li>Less than high school education</li>
<li>Linguistic isolation</li>
<li>Unemployment rate</li>
<li>Housing burden</li>
</ul>
</p>
<p>
<h4 className={'j40-item-list-subtitle'}>
Combining data from different geographic units</h4>
Some data is not available at the census block group level and is
instead only available for larger units such as census tracts or
counties. In these cases, all census block groups will get an even
contribution from the larger unit. For example, if a census tract
scores 90th percentile on an indicator, then all census block
groups within that tract will receive a value of 90th percentile.
</p>
<p><h4 className={'j40-item-list-subtitle'}>Normalizing data</h4>
The range of the data that makes up the score varies, so the data
must be normalized so that each data indicator can be more equally
weighted. Min-max normalization is utilized, where the minimum
value in the range of values for each dataset is set at 0, the
maximum value is set at 1, and every other value is transformed
into a decimal between 0 and 1. For example, if the minimum value
for unemployment was 10 and the maximum value was 30, a value of
20 would be transformed to 0.5 since it is halfway between 10 and
30.
</p>
</section>
</li>
<li>
<section>
<h3>Calculate cumulative index score</h3>
<p>To combine all variables into a single cumulative index score,
we average the normalized values across indicators.
</p>
<p>
<GridContainer className={''}>
<Grid row className={'j40-math-division-container'}>
<Grid col className={'j40-math-eq-left-side grid-col-fill'}>
<div className={'j40-math-eq-numerator'}>
Dataset 1 + Dataset 2 + ... + Dataset N
</div>
<div className={'j40-math-eq-denominator'}>
# of datasets
</div>
</Grid>
<Grid col className={'j40-math-eq-middle grid-col-auto'}>=</Grid>
<Grid col className={'j40-math-eq-right-side grid-col-fill'}>Cumulative index score</Grid>
</Grid>
</GridContainer>
</p>
</section>
</li>
<li>
<section>
<h3 className={'j40-item-list-title'}>Assign priority</h3>
<p>
Census block groups are sorted by their cumulative index score
from highest to lowest. Census block groups that are in the top 25
percentile (i.e. have a cumulative index score in the 75 - 100th
percentile) will be considered the prioritized communities.
</p>
</section>
</li>
</ul>
</div>
</>
);
};
export default ScoreStepsList;

6
client/src/pages/methodology.tsx
View file

@ -5,6 +5,7 @@ import AlertWrapper from '../components/AlertWrapper';
import DatasetContainer from '../components/DatasetContainer';
import J40MainGridContainer from '../components/J40MainGridContainer';
import Layout from '../components/layout';
import ScoreStepsList from '../components/scoreStepsList';
interface MethodPageProps {
location: Location;
@ -61,6 +62,11 @@ const IndexPage = ({location}: MethodPageProps) => {
</Grid>
</J40MainGridContainer>
<J40MainGridContainer>
<Grid row><Grid col>
<ScoreStepsList/>
</Grid></Grid>
</J40MainGridContainer>
</Layout>
);
};

96
client/src/styles/global.scss
View file

@ -68,6 +68,7 @@ $primary-color: #112f4e;
@include at-media("mobile-lg") {
.j40-grid-container {
line-height: 1.5rem;
padding-right: 0;
}
}
@ -102,9 +103,9 @@ $primary-color: #112f4e;
// this actual site logo
.sitelogo {
float: left; // allows vertical centering on logo and text
margin-right: 0.5em; // space between logo and text
width: 4em;
padding: 0.5em; // this will change the size of the logo too
margin-right: 0.5rem; // space between logo and text
width: 4rem;
padding: 0.5rem; // this will change the size of the logo too
}
// nav menu item font
@ -191,6 +192,7 @@ $primary-color: #112f4e;
h1 {
font-size: 2.7rem;
}
h2 {
font-size: 1.46rem;
}
@ -217,7 +219,7 @@ $primary-color: #112f4e;
h3,
h4 {
font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial,
sans-serif;
sans-serif;
}
p,
@ -329,3 +331,89 @@ $primary-color: #112f4e;
}
}
}
/* the > is for child only syntax in css. This is required so that lists that are nested under the
list are not affected (e.g. <ul><li><p><ul><li>not styled</li></ul></p></li><ul>*/
.j40-process-list-wrapper > {
$j40-steps-list-color: #002D3F;
ul {
margin-top: 3rem;
margin-bottom: 1rem;
padding-inline-start: 0;
> li {
list-style-type: none;
position: relative;
margin-left: 2.5rem;
/* do the lines */
border-left: .2rem solid $j40-steps-list-color;
padding-left: 1.88rem;
/* removes gap between line and circle */
margin-top: -1rem;
padding-bottom: 2rem;
}
> li:before {
content: " ";
border: 1rem solid $j40-steps-list-color;
border-radius: 100rem;
height: 0; /* it's all controlled by the border */
width: 0;
margin-top: -0.5rem;
margin-left: -3rem;
position: absolute;
}
> li:last-child {
/* no line on last item */
border-left: .2rem solid transparent;
margin-top: -1.9rem;
}
}
}
/* The math equation on the methodology page.. which is a royal pain */
.j40-math-division-container {
> .j40-math-eq-left-side {
text-align: right;
justify-content: center;
align-items: center;
padding: 0.5rem;
> .j40-math-eq-numerator {
border-bottom: solid 3px black;
text-align: center;
width: 90%;
}
> .j40-math-eq-denominator {
text-align: center;
width: 90%;
}
}
> .j40-math-eq-middle {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0.25rem;
}
> .j40-math-eq-right-side {
display: inline-flex;
align-items: center;
padding: 0.25rem;
}
}
/* these are currently used in the list, but it seems like they should be globally consistent with the rest of the site */
.j40-item-list-title {
margin-block-end: auto;
}
.j40-item-list-subtitle {
margin-block-start: auto;
margin-block-end: auto;
font-style: italic;
}