Casa003.github.io/airqualitymap.html at main · XuZiHan-010/Casa003.github.io · 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
<!DOCTYPE html>
<html lang="zxx">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	<meta name="robots" content="index, follow">
	<meta name="keywords"
		content="HTML5 Template, Themeforest, agency, blog, business, clean, corporate, creative, modern, one page, photography, portfolio">
	<meta name="description"
		content="Discover Oscarthemes - Business HTML5 Template, responsive Bootstrap templates, & HTML templates">
	<meta name="theme-color" content="#4b6fff">
	<title>AirqualtiyMap</title>
	<!-- Bootstrap Css-->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Animate CSS -->
	<link href="static/css/animate.css" rel="stylesheet">
	<!-- Flat Icon CSS -->
	<link href="static/css/svg.css" rel="stylesheet">
	<!-- Slick Slider CSS -->
	<link href="static/css/slick.css" rel="stylesheet">
	<!-- Responsive Menu css -->
	<link rel="stylesheet" href="static/css/responsivemenu.css">
	<!-- Typography CSS -->
	<link href="static/css/typography.css" rel="stylesheet">
	<!-- Widget Css -->
	<link href="static/css/widget.css" rel="stylesheet">
	<!-- Short Code CSS -->
	<link href="static/css/shortcode.css" rel="stylesheet">
	<!-- population map CSS -->
	<link href="static/css/style.css" rel="stylesheet">
	<!-- Custom Style CSS -->
	<link href="static/css/airqualitymap.css" rel="stylesheet">
	<!-- Color CSS -->
	<link href="static/css/color.css" rel="stylesheet">
	<!-- Responsive CSS -->
	<link href="static/css/responsive.css" rel="stylesheet">
<!-- import leaflet javascript and css file-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
	integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />

</head>
<body class="full-screen-background" onload="handleScroll()">
    <div class="row" id="airqualitybackground">
	<div class="intro-section section-heading-2 mb-61">
        <!-- <h2 class="title">PM2.5 Percentile & Concentration</h2>				 -->
    </div>

    <div class="col-md-8 col-sm-6" id="map-aq" style="margin-top: 50px;">
        <div id="map" class="map-container"></div>
    </div>
    <div class="col-md-4 col-sm-6" style="margin-top: 50px;">
        <div class="controls" id="all">
            <div class="info legend" id="legend">
                <h4 id="legendTitle">PM2.5 Percentile</h4>
                <div id="legendContent">
                    <!-- Dynamic legend content will be inserted here -->
                </div>
                <div id="yearControls" class="year-controls">
                    <button data-year-button="true" data-year="2014">2014</button>
                    <button data-year-button="true" data-year="2017">2017</button>
                    <button data-year-button="true" data-year="2021">2021</button>

                </div>
            </div>
            <div class="data-type-controls" id="options">
                <select id="dataTypeSelect">
                    <option value="percentile">PM2.5 Percentile</option>
                    <option value="concentration">PM2.5 Concentration</option>
                    <option value="waterquality">Water Quality</option>
                </select>

            </div>
        </div>
        <div id="chartContainer" style="width: 100%; height: 450px; margin-top: 20px;">
            <div class="button-container" id="buttons">
                <button type="button" class="btn btn-custom btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal">Instructions</button>
                <button id="clearChartBtn" class="btn btn-custom btn-lg" onclick="toggleButtonColor(this)">Clear Chart</button>
                <button id="homeBtn" class="btn btn-custom btn-lg" onclick="location.href='https://xuzihan-010.github.io/Casa003.github.io/#airqualitymap';">Home Page</button>


            </div>
            <div class="chart-background" id="canvasBackground" style="width: 100%; height: 450px;">
                <canvas id="areaChart"></canvas>
            </div>
        </div>


        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content" id="instr">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Instruction for the Interactive Map</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body modal-text-large">
                        <p><strong>Overview:</strong> This interactive map displays the <strong class="strong-red">PM2.5 percentile, concentration and the water
                            quality percentile</strong>, across <strong class="strong-red">Los Angeles County by neighborhood</strong> for the years 2014, 2017, and 2021.
                             Users can view data in terms of <strong class="strong-red">percentile
                                rankings or concentration values</strong>.
                            </p>
                            <p><strong>PM2.5 Concentration:</strong> The average annual concentration of fine particulate matter (PM2.5) in the air, measured in micrograms per cubic meter (µg/m³) of air.</p>
                            <p><strong>PM2.5 Percentile:</strong> The percentile of a given neighborhood's PM2.5 concentration, compared to the rest of LA County.</p>
                            <p><strong>Water Quality Percentile:</strong> The percentile of a given neighborhood's average annual concentration of 13 common water contaminants across drinking water system boundaries in LA County.</p>
                            <p>
                                <strong>Selecting Data Year:</strong> Use the buttons labeled 2014, 2017, and 2021 in the legend section to choose the data year you wish to view.</p>
                        <p>
                            <strong>Switching Data Views:</strong>Choose between Percentile and Concentration views from the <strong class="strong-red">dropdown menu</strong> to see data represented by percentile rankings or actual concentration measurements. </p>
                        <p>
                            <strong>Exploring Neighborhood Data:</strong>Click on any neighborhood in the map to bring up a <strong class="strong-red">line chart</strong> displaying the trend of PM2.5 changes or the water quality percentile change from 2014 to 2021.
                            This helps visualize how air and water quality has evolved in that specific area.</p>
                            <p><strong>Interacting with the Line Chart:</strong>Hover over the chart to view specific data points for each year. While clicking on the <strong class="strong-red">legend labels</strong> to add or remove data series from the chart.
                               </p>
<p><strong>Clearing the Chart:</strong>Use the Clear Chart button to remove all active charts from your view.</p>
<p>
    <strong>Data:</strong>The pm2.5 percentile, concentration and the water quality data is from<a href="https://la.myneighborhooddata.org/data/" target="_blank" rel="noopener noreferrer" class="stealth-link">
        <strong class="strong-blue">Neighborhood Data for Social Change</strong></a>.</strong>
</p>
                        <!-- More instructional content here -->
                    </div>
                    <div class="modal-footer">
                        <a href="https://la.myneighborhooddata.org/2021/06/environment/" class="btn btn-primary btn-lg active" role="button" aria-pressed="true" target="_blank" data-toggle="tooltip" data-placement="top" title="Read more about environmental data">Read More</a>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


    <script src="static/js/jquery.min.js"></script>
	<!-- Import jquery and boostrap javascript Library -->
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    	<!--Custom Script-->
	<script src="static/js/custom.js"></script>
 	<!-- use for http request-->
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
         integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
         	<!-- Import Chartjs Library -->
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Import air quality percentile map javascript -->
     <script src="static/js/air_quality_percentile.js"></script>
     <!-- Import animation-->
     <script src="static/js/animation_airquality.js"></script>
</body>

</html>