c-tran-wait-times/index.html at main · devbret/c-tran-wait-times · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, viewport-fit=cover"
    />
    <meta
      name="description"
      content="An interactive map visualizing average passenger wait times at C-TRAN bus stops in Vancouver, Washington, calculated from publicly available GTFS schedule data."
    />
    <title>C-TRAN Wait Time Heatmap - Bret Bernhoft</title>
    <link
      rel="icon"
      href="https://hosting.photobucket.com/bbcfb0d4-be20-44a0-94dc-65bff8947cf2/ff4a3384-baa9-4bc2-94c9-6bff4e3d3ea0.png"
      sizes="any"
    />
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div id="map"></div>
    <div id="loading" class="loading">Loading stops...</div>
    <div id="tooltip" class="tooltip"></div>

    <aside id="panel" class="info-panel">
      <button id="panelClose" class="close" title="Close">x</button>
      <h3 id="panelTitle">Stop</h3>
      <div class="row">
        <span>Wait (avg)</span><strong id="panelWait">-</strong>
      </div>
      <div class="row"><span>Rank</span><strong id="panelRank">-</strong></div>
      <div class="row">
        <span>Percentile</span><strong id="panelPct">-</strong>
      </div>
      <div class="meter"><div id="panelMeter" style="width: 0%"></div></div>
      <div style="margin-top: 10px; color: #555">Higher bar = longer waits</div>
    </aside>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>