meteorite-visualization/scene3.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
<!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 = 3;
        </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">
                    It really is amazing just how many meteorites have landed across the Earth. And that's just the ones we've been able to record over just over 100 years. Imagine the scope over hundreds of millions!
                    </br></br>
                    Next, let's narrow our focus to the continental United States. And indeed, it is quite a continent. The United States reports a significant number of meteorite landings within its borders—1438 in total! With 195 currently recognized countries by the United Nations, the US accounts for not 1/195th of all impacts, but 6.23 times that amount.
                    </br></br>
                    Let’s explore how these landings are distributed across the US. After all, the US is a collection of states itself! The same controls from before are available for you to scan through the data at your own pace. Keep an eye out for annotations detailing which state contains the most landings each year and effects highlighting landings when examining each state!
                  </div>
                <div class="visualization">
                    <svg id="map"></svg>
                </div>
        </div>
        <!-- Load Custom Scripts -->
        <script type="module" src="./src/orchestrator.js" type="text/javascript"></script>
    </body>
</html>