VTech-DstVisualizer/index.html at master · ALF3run/VTech-DstVisualizer · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Space Weather Tools</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- frameworks -->
    <script src="https://d3js.org/d3.v5.min.js"></script>

    <!-- fonts -->
    <link href="https://fonts.googleapis.com/css?family=Cantarell:700i" rel="stylesheet" />

    <!-- my scripts and stylesheets -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
</head>
<body>
    <div id="top-bar">
        <header>
            <h1>Space Weather Tools</h1>
        </header>
    </div>

    <main>
        <div class="card">
            <h3>Welcome</h3>
            <hr />
            <div class="info">
                <p>To start using the visualization software you need to upload a file with the data. This must follow the <a href="http://wdc.kugi.kyoto-u.ac.jp/dstae/format/dstformat.html" target="_blank">format</a> of the WDC for Geomagnetism of Kyoto.</p>
                <p>You can generate a ready to use data file from the WDC site: <a href="http://wdc.kugi.kyoto-u.ac.jp/dstae/" target="_blank">http://wdc.kugi.kyoto-u.ac.jp/dstae/</a>. Be sure both "Dst output" and "WDC-like format" are selected before proceeding with file generation. After the data are ready, in your favourite browser you can chose the option "Save page as" to download them in a file.</p>
                <p>Data from Jan 2000 to Jan 2018 are preloaded.</p>
            </div>
            <div>
                <input type="file" id="user-file" />
                <label id="upload-button" for="user-file">Select a file</label>
                <p id="upload-alert"></p>
            </div>
        </div>
        <div class="card">
            <h3>Dst Visualizer</h3>
            <div>
                <select id="month"></select>
                <select id="year"></select>
            </div>
            <hr />
            <div class="flex-container">
                <div class="svg-container">
                    <svg id="histogram-chart"></svg>
                </div>
                <div class="svg-container">
                    <svg id="orbit-chart"></svg>
                </div>
            </div>
            <div class="info">
                <p>The Dst (Distrubance storm time) index represents the axially symmetric disturbance magnetic field at the dipole equator on the Earth's surface.</p>
                <p>Dst variation will clearly indicate occurences of magnetic storms and their severity when they occur. <b>Thus, the Dst variation provide a quantitive measure of geomagnetic disturbance thath can be correlated with other solar and geophysical parameters.</b></p>
                <p>Major disturbances in Dst are negative, while positive variations in Dst are mostly caused by the compression of magnetosphere from solar wind pressure increase. It is known that the disturbance field is generally not axially symmetric. In particular, in the development phase of a magnetic storm the asymmetric disturbance field can be even greater than the symmetric part.</p>
                <p>Ionosphere seems to be a major source of the storm time ring current in the energy range below 17 Kev. While the ring current ions with energy greater than 600 Kev have a composition suggestive of solar wind origin.</p>
                <p>For more information on Dst index and how to derive it, visit <a href="http://wdc.kugi.kyoto-u.ac.jp/dstdir/dst2/onDstindex.html">http://wdc.kugi.kyoto-u.ac.jp/dstdir/dst2/onDstindex.html</a></p>
            </div>
        </div>
    </main>

    <script src="js/main.js"></script>
</body>
</html>