amtrak-map/index.html at main · atisor73/amtrak-map · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-5D1T5Z04D7"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-5D1T5Z04D7');
  </script>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Amtrak Routes</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Widgets -->
    <div id="controls">
        <label style="display:inline-block; margin-right: 100px;">
            Map opacity:
            <input
            type="range"
            id="opacity-slider"
            min="0"
            max="1"
            step="0.05"
            value="0.3"
            >
        </label>

        <label style="display:inline-block;">
            <input type="checkbox" id="toggle-routes" checked>
            Show routes
        </label>
    </div>


  <!-- Map -->
  <div id="map-container">
    <script src="script.js"></script>
  </div>

  <!-- Footnote -->

  <!-- Info button -->

  <div style="position: relative; display: inline-block;">

    <button class="info-btn" onclick="toggleInfo()">i</button>

    <div id="infoText" class="info-box">
      Click on a route for more details. <br><br>
      This project shows Amtrak routes as of March 1st, 2026. This is not an official Amtrak map.
      Routes were vectorized by hand, and may contain minor inaccuracies. If you find an error,
      please submit an issue
       <a href="https://github.com/atisor73/amtrak-map" target="_blank">here</a>.<br><br>
       Some visuals here:
          <a href="scatterplots.html" target="_blank">(A)</a> and
          <a href="voronoi.html" target="_blank">(B)</a>.
    </div>
  </div>

  <script>
    function toggleInfo() {
      const box = document.getElementById("infoText");
      box.style.display =
        box.style.display === "block" ? "none" : "block";
    }
  </script>

</body>
</html>