-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (80 loc) · 4.27 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Author: Grant McKenzie [email protected] -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0C5X0628W2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-0C5X0628W2');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>US Northern Land Border Crossings</title>
<!-- Primary Meta Tags -->
<meta name="title" content="US Northern Land Border Crossings">
<meta name="description" content="">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://ptal-io.github.io/border/">
<meta property="og:title" content="US Northern Land Border Traveler Crossings">
<meta property="og:description" content="">
<meta property="og:image" content="https://ptal-io.github.io/border/img/teaser.png">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://ptal-io.github.io/border/">
<meta property="twitter:title" content="US Northern Land Border Crossings">
<meta property="twitter:description" content="">
<meta property="twitter:image" content="https://ptal-io.github.io/border/img/teaser.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/leaflet.css"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div id="about">
<img id='close' style='float:right;cursor:pointer' src='img/close.png' />
<h2 style='margin-top:0'>About This Project</h2>
<p>
This interactive visualization presents data on travelers entering the United States from Canada via land border crossings. By selecting a port (marker) on the map, users can explore trends in the number of passengers in personal vehicles as well as pedestrians crossing into the U.S. at that location.
</p><p>
The data is sourced from U.S. Customs and Border Protection (CBP) and is publicly available via the <a href="https://www.cbp.gov/document/stats/traveler-and-conveyance-statistics" target="_blank">Traveler and Conveyance Statistics portal</a>. This platform includes only entries from Canadian land borders and excludes travelers arriving by air and water as well as passengers in commercial trucks.
</p>
<p>
Developed by <a href="https://platial.science">The Platial Analysis Lab</a>.</p><p>Contact Grant McKenzie at <a href="mailto:[email protected]">[email protected]</a> with any questions.
</p>
</div>
<div id="provdetails">
<img id='close2' style='float:right;cursor:pointer' src='img/close.png' />
<div style='margin-top:0;font-weight:bold;font-size:1.3em;margin-bottom:10px' id='provname'>Border Crossings by Province</div>
<div id='crossings' style='text-align:center'></div>
</div>
<div id="wrapperAbout"></div>
<a style='position:absolute;z-index:500;left:10px;bottom:10px;' href="https://platial.science"><img src="img/platial.png"/></a>
<div id="map"></div>
<div id="sidepanel">
<div id="title">US Northern Land Border Crossings</div>
<div class="instructions" id="instructions">
Click a border crossing marker on the map to view details.
</div>
<div id="chart">
<div id='charttitle'>
<div id="chartname" style='font-weight:bold;font-size:1.3em;padding:10px;'> </div>
<div id="chartstate" style='font-weight:bold;font-size:1em;padding-left:10px;'> </div>
</div>
<canvas id="myChart" width="550" height="300"></canvas>
<div id="myChart2" style="width:550px;height:300px;display:none;margin-top:20px;text-align:center">Not enough data</div>
<div class="instructions">
Percent change in U.S. entries from Canada between 2024 and 2025, aggregated by province/territory of departure.
</div>
<div id="provinceTable" style="width:550px;padding: 10px; margin-top: 10px;"></div>
</div>
<div id="moreinfo">About this project</div>
</div>
<script src="js/leaflet.js"></script>
<script src="js/chart.js"></script>
<script src="js/main.js"></script>
</body>
</html>