income-race-bikes/index.html at master · aberke/income-race-bikes · 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html>
  <head>
    <title>Income, Race, and Bikes</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./viz/style.css" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
      integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
      crossorigin=""
    ></script>
    <link rel="shortcut icon" href="./viz/favicon.png" />

    <!-- for nice sharing -->
    <meta
      property="og:url"
      content="https://aberke.github.io/income-race-bikes"
    />
    <meta property="og:type" content="map" />
    <meta property="og:title" content="Income, Race, Bikes" />
    <meta
      property="og:image"
      content="https://raw.githubusercontent.com/aberke/income-race-bikes/master/assets/boston-income-race.gif"
    />
    <meta property="og:image:type" content="image/gif" />

    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->

    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <div id="loading-container">
      <img height="250px" src="./viz/loading.gif" />
      <p>Loading data...</p>
    </div>
    <div id="text-container">
      <div id="tract-info-container">
        <div id="year"></div>
        <div id="city"></div>
        <div id="tract-info">
          <p id="tract-name"></p>
          <!-- TODO: note margin of error -->
          <p id="tract-median-income"></p>
          <p style="display: none" id="tract-percent-white"></p>
          <p id="tract-total-households"></p>
          <p class="detail" id="tract-white-households"></p>
          <p class="detail" id="tract-black-households"></p>
          <p class="detail" id="tract-asian-households"></p>
          <p class="detail" id="tract-other-households"></p>
          <p class="detail" id="tract-two-or-more-races-households"></p>
          <p class="detail" id="tract-total-households-margin-of-error"></p>

          <p id="hover-over-the-map">
            Hover over neighborhoods for income and race numbers.
          </p>
        </div>
      </div>
      <div class="year-selector">
        <p id="select-year-copy">Select Year</p>
        <div id="year-buttons-container">
          <!-- this container is filled with buttons via javascript -->
        </div>
      </div>
      <div id="data-selector">
        <div class="show-data-check">
          <label class="checkbox-container">
            Show income
            <input type="checkbox" id="b-income" />
            <span class="checkmark"></span>
          </label>
          <div id="income-legend">
            <span class="legend-end-num">$0</span>
            <div class="legend-bar" id="income-legend-bar"></div>
            <span class="legend-end-num">$250,000+</span>
          </div>
        </div>
        <div class="show-data-check">
          <label class="checkbox-container">
            Show race
            <input type="checkbox" id="b-race" />
            <span class="checkmark"></span>
          </label>
          <div id="race-legend">
            <span class="legend-end-num">0%</span>
            <div class="legend-bar" id="race-legend-bar"></div>
            <span class="legend-end-num">100%</span>
          </div>
          <span id="race-legend-explain">Percent white households&ast;</span>
        </div>

        <div class="show-data-check">
          <label class="checkbox-container">
            Show docks
            <input type="checkbox" id="b-bikes" checked />
            <span class="checkmark"></span>
          </label>
        </div>
      </div>

      <div id="choose-city">
        <p>Cities</p>
        <a href="" onclick="updateCityURLParam('nyc')">New York City</a> |
        <a onclick="updateCityURLParam('boston')" href="">Boston</a> |
        <a onclick="updateCityURLParam('dc')" href="">Washington DC</a> |
        <a onclick="updateCityURLParam('chicago')" href="">Chicago</a> |
        <a onclick="updateCityURLParam('philly')" href="">Philadelphia</a>
      </div>
    </div>
    <div id="map" class="map"></div>
    <div id="about-container-wrapper">
      <div id="about-container">
        <a id="about" href="#about"><h1>About</h1></a>

        <p id="placement-question">
          Is the placement of bike-share docks equitable?
        </p>
        <p>The map explores this question visually.</p>

        <p>
          It displays the progressive placement of bike-share docking stations
          over time, along with the race and median income of residents in the
          areas they serve.
        </p>

        <p>
          The map shows the addition of the docks, as well as the changes in
          income and race throughout the years the bike-share program has been
          in service. You can toggle the display to see only income, or race, or
          bikes data, or any of their combinations.
        </p>

        <br />

        <h2>About The Data</h2>
        <p>
          <strong>Income and race data</strong> is provided for each year by
          census tract. It is from the
          <a
            href="https://www.census.gov/programs-surveys/acs/guidance/estimates.html"
            >American Community Survey (5-year)</a
          >, which provides yearly population estimates.
        </p>

        <p>
          The data used for this map is household median income, and household
          race. <br />*Race is displayed on the map as “Percent White”, which is
          calculated as the percentage of households that report “white only” in
          a given census tract.
        </p>

        <p>
          <br />Margins of error and all of the processed data are available
          <a href="https://github.com/aberke/income-race-bikes/tree/master/data"
            >here.</a
          >
        </p>

        <br />
        <p>
          <strong>Bike station location data</strong> is scraped from the
          bike-share company’s websites.
        </p>
        <hr />
        <br />
        <p>
          All code, data, and data processing scripts for this project are
          open-source:
          <a href="https://github.com/aberke/income-race-bikes"
            >https://github.com/aberke/income-race-bikes</a
          >
          <br />
          <br /><span style="font-style: italic">Contributions welcomed.</span>
        </p>
      </div>
    </div>
    <script src="./viz/util.js"></script>
    <script src="./viz/map.js"></script>
    <script src="./viz/index.js"></script>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-43101146-8"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "UA-43101146-8");
    </script>
  </body>
</html>