meteorite-visualization/scene2.html at master · Brandon-Galloway/meteorite-visualization · 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 lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Narrative Visualization</title>
        <link rel="icon" type="image/x-icon" href="./favicon.ico">
        <!-- Include Allowed Dependencies -->
        <script src="https://d3js.org/d3.v6.min.js"></script>
        <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
        <script src="https://unpkg.com/topojson@3"></script>
        <link rel="stylesheet" type="text/css" href="src/styles/styles.css">
        <script>
            const scene = 2;
        </script>
    </head>
    <body>
        <div class="viz">
            <!-- Control Pane -->
            <div class="nav-pane">
                <div class="nav">
                    <div id="selector"></div>
                </div>
                <div id="controls" class="controls">
                </div>
            </div>
            <!-- Text & Content -->
            <div class="content">
                <div class="text">
                    Let's start as far out as we can and take a look at the Earth itself. Tens of thousands of meteorite landings have been reported around the globe. The data displayed here accounts for just over 45,000 of those landings, covering records from 1900 to 2013!
                    </br></br>
                    Notice how reports span the entire globe. Even the South Pole has records, including the smallest reported landing, "Yamato". Keep an eye out for annotations tracking the smallest and largest reported meteorites—there are some very interesting records!
                    </br></br>
                    Feel free to zoom and pan the map to explore records around world landmarks, tiny islands, and even your hometown! The date displayed in the top left shows the most recent year's data displayed, which can be controlled with the slider above the map. Below that, you'll find a count of all landings within the US, which updates over time!
                    </br></br>
                    <i>To help keep the map updating smoothly (45k points is a lot!), this count only updates when the slider is released.</i>
                  </div>
                <div class="visualization">
                    <div id="tooltip" class="hidden"><span></span></div>
                    <svg id="map"></svg>
                </div>
        </div>
        <!-- Load Custom Scripts -->
        <script type="module" src="./src/orchestrator.js" type="text/javascript"></script>
    </body>
</html>