meteorite-visualization/index.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
46
47
<!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 = 1;
        </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">
                    Hello and welcome to my <strong>CS 416 Narrative Visualization project</strong>! This project's goal is to take you on a journey through our current global collection of meteorite landing records.
                    </br></br>
                    The data for this project was sourced through <a href="https://data.nasa.gov/Space-Science/Meteorite-Landings/gh4g-9sfh/about_data" target="_blank">NASA's Open Data Portal</a>, with supplemental fields derived through the utility functions available in this project's <a href="https://github.com/Brandon-Galloway/meteorite-visualization/blob/master/src/utils/dataUtils.js" target="_blank">open source code</a>. Additional geojson data was acquired through <a href="https://d3js.org/world-110m.v1.json" target="_blank">d3</a> and <a href="https://gist.github.com/ramnathv/7270397" target="_blank">here</a>.
                    </br></br>
                    A navigation tool is available above with arrows to progress or return to a previous scene. Selecting a specific scene number will take you directly to that scene, and the current scene will be highlighted at all times. Additional controls may become available for the current scene directly to the right of the tool. Feel free to adjust these controls to your liking and dive into the data! Default animations will play on page selection but can be paused or resumed from any point.
                    </br></br>
                    Thank you for your interest in my project. I hope you enjoy!
                    </br></br>
                    - Brandon Galloway
                  </div>
                <div class="visualization">
                    <button id="intro-button" onclick="window.location.href='scene2.html'">Start!</button>
                </div>
        </div>
        <!-- Load Custom Scripts -->
        <script type="module" src="./src/orchestrator.js" type="text/javascript"></script>

    </body>
</html>