RemoteLearningConditions/about.html at main · ervinkellym/RemoteLearningConditions · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Student Household Conditions: About</title>
    <meta name="description" content="Scrollama: Basic Example" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.cdnfonts.com/css/open-dyslexic" rel="stylesheet">
  </head>
  <body>
    <main>
      <section id="intro">
        <h1 class="intro__hed">About</h1>
        <p class="intro__center">
          This was created by Kelly Ervin Mills as a final project for the MICA
          MPS Data Analytics and Visualization Program's Design Lab: The
          Industry Challenge course during the Summer 2023 semester.
        </p>
        <h2 class="intro__dek">Inspiration & Goal</h2>
        <p class="intro__text">
          I live in an extremely under-resourced school district in rural
          Appalachia. In college, I volunteered at the local Head Start center
          and was struck by how much of a difference early educational
          intervention can make for children with varying disadvantages who are
          struggling to keep up with their peers. I wanted to expand that line
          of thinking into K-12 schools and create a piece that can draw
          attention to those who need it most.
          <br><br>
          In an interactive “scrollytelling”/visual essay format, I wanted
          locate and draw attention to school districts that likely have the
          most students who have fallen behind and are struggling educationally.
        </p>
        <h2 class="intro__dek">Audience</h2>
        <p class="intro__text">
         My primary audience is constituents in school districts with the most
         at-risk students. I believe this is useful for anyone interested in
         K-12 education in America. But, I am specifically targeting people
         living in the most affected school districts. I want the stark contrast
         between the highlighted districts and the rest of the country to hit
         home for those who call those places home. I hope that the realization
         that their communities are in need will compel members of my target
         audience to answer the call to action by contacting their
         representatives to advocate for funding for their local students.
        </p>
        <h2 class="intro__dek">Data</h2>
        <p class="intro__text">The data fueling this project is The Urban
          Institute's "
          <a href="https://datacatalog.urban.org/dataset/household-conditions-geographic-school-district" target="_blank">
            Household Conditions by Geographic School District
          </a>
           " dataset. From The Urban Institute: "This dataset describes the share of households within a
           geographic school district with conditions that may affect remote
           K–12 learning environments, such as linguistic isolation, crowded
           conditions, and access to a computer and broadband internet."
        </p>
        <h2 class="intro__dek">Process</h2>
        <p class="intro__text">
          I started by loading the Urban Institute dataset into a
          <a href="StrugglingStudentsJupyterNotebook.zip" download>Jupyter Notebook</a>
          and used the Pandas library to clean and pare down the data. Then I
          imported a supplemental dataset to add County FIPS identifiers for the
           Urban Institute data. I removed duplicate counties, which may have
           led to inaccurate conclusions about counties containing multiple
           school districts. A Pandas GroupBy operation and a proportional
           average of the school districts making up each county would remedy
           this. Time constraints for this project did not allow for this
           correction, as GroupBy can be finicky.
          <br><br>
          At this point, the data required to fill in choropleth graphs was
          exported to a CSV. That CSV went into an
          <a href="https://observablehq.com/@ervinkellym/linguisticaly-isolated-choropleth" target="_blank">
            Observable Notebook
          </a>
           where I used Observable Plot to create a county choropleth of each a
           ttribute from the Urban Institute data.
          <br><br>
          I exported the choropleths into Canva and manually added callouts to
          highlight counties of interest and ensure the maps all lined up
          correctly. All these Canva assets went into my site, which uses
          Scrollama.js for the sticky scrolling functionality. The rest of the
          work was basic web development.
        </p>
        <h2 class="intro__dek">Evolution</h2>
        <p class="intro__text">
         This project has evolved a great deal from its inception. After
         submitting my concept pitch for review, the feedback that stood out
         most was that the project was "ambitious." I dreamed of creating a
         large interactive scrolly-telling exploratory piece with many moving
         parts. That would have involved reusing some old code but also a lot
         of piecing things together and wrestling with web development. After
         that feedback, I decided I needed to work hard to not get in my way.
         I wanted to focus less on coding a bunch of stuff and more on refining
         what I did have. I cut out the time-based component of my visualization
         and removed the interactivity that would've been a reuse of a previous
         project. The narrower scope, I feel, has allowed me not to bombard the
         user with information and exhaust them - something my original concept
         definitely would've done. This final concept keeps the story digestible
         and the user fresh until the call to action at the end. I believe not
         forcing the user to get lost in the weeds serves the goal of having
         users take action to contact their representatives.
         <br><br>
         My audience has also evolved a lot since starting this project. I
         originally wanted to target "the American public and especially
         policymakers who have the power to direct resources and funding to
         school districts in need." This audience was too poorly defined, and I
         felt directionless in my design. I pared it down to target residents in
         counties in need. Narrowing the audience and creating a specific call
         to action instead of just asking people to care about and explore the
         issue gave the visualization much more purpose and direction.
         <br><br>
         This isn't the most technically ambitious project I have completed.
         However, I have grown a lot through this process. I am a software
         engineer, and coding is just so much fun for me that I get carried away
         seeing what I can create until I have a big mess that is exhausting to
         wade through. Learning to exercise restraint in my design is my most
         significant accomplishment of this project, and I feel like it is the
         cleanest story I've told.
        </p>
        <h2 class="intro__dek">Accessibility</h2>
        <p class="intro__text">
          While this project isn't 100% section 508 compliant, some design
          decisions were made with visual accessibility in mind. This project
          uses the
          <a href="https://opendyslexic.org/" target="_blank">
            Open Dyslexic
          </a>
          font throughout to increase readability. All charts use single-color
          scales that are equally visibly accessible to people with all types of
           color-blindness. The single-color scale is also less stimulating for
           some neurodivergent folks. Font and background color combinations all
           meet to WCAG AA contrast requirements.
          <br><br>
          Additional changes can, and should, be made to make this project
          accessible for a wider audience. Due to time limitations, all charts
          are static assets, including the callouts. However, all the callout
          text is duplicated in the scrolling text. The charts require detailed
          alt-text descriptions to make sense for screen readers. All efforts
          should be made to adjust the font/background color combinations to be
          WCAG AAA compliant instead of just AA.
        </p>
      </section>
      <nav>
        <div class="nav__examples">
          <a href="index.html">The Project</a>
        </div>
      </nav>
    </main>
  </body>
</html>