moonshake/index.html at master · Ahmadrameen/moonshake · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<head>
  <style>
    body {
      margin: 0;
    }
  </style>

  <script src="https://unpkg.com/d3-array@3.2.0/dist/d3-array.min.js"></script>
  <script src="https://unpkg.com/d3-scale@4.0.2/dist/d3-scale.min.js"></script>

  <script src="https://unpkg.com/globe.gl@2.26.6/dist/globe.gl.min.js"></script>
</head>

<body>

  <div class="filterContainer">

    <select id="years">
      <option value="0">Years</option>
      <option value="1">1971</option>
      <option value="2">1972</option>
      <option value="3">1973</option>
      <option value="4">1974</option>
      <option value="5">1975</option>
      <option value="6">1976</option>
    </select>
    <br>
    <br>
    <a href="javascript:;" id="go" onclick="getFilterYearJson(event)">Filter</a>

  </div>

  <div id="globeViz">

  </div>

  <script>
    const labelsTopOrientation = new Set(['Apollo 12', 'Luna 2', 'Luna 20', 'Luna 21', 'Luna 24',
      'LCROSS Probe'
    ]);

    const elem = document.getElementById('globeViz');
    const moon = Globe()
      .globeImageUrl('./lunar_surface.jpg')
      .bumpImageUrl('./lunar_bumpmap.jpg')
      .backgroundImageUrl('./night-sky.png')
      .showGraticules(true)
      .showAtmosphere(false) // moon has no atmosphere
      .labelText('label')
      .labelSize(1.7)
      .labelDotRadius(0.5)
      .labelDotOrientation(d => labelsTopOrientation.has(d.label) ? 'top' : 'bottom')
      .labelColor(d => {
        let mag = Number(d.label.substring(9));

        return mag < 1 ? '#198754' : mag >= 1 &&  mag < 2.5 ? '#ffc107' : '#dc3545'
      })
      .labelLabel(d => `
        <div><b>${d.label}</b></div>
        <div>${d.agency} - ${d.program} Program</div>
        <div>Landing on <i>${new Date(d.date).toLocaleDateString()}</i></div>
      `)
      (elem);

    fetch('./moon_landings.json').then(r => r.json()).then(landingSites => {
      moon.labelsData(landingSites)
    });

    // This is the filter function
    function getFilterYearJson(){
      var e = document.getElementById("years");
      var yearsStr = e.options[e.selectedIndex].text;

      fetch('./moon_landings.json').then(r => r.json()).then(landingSites => {
        moon.labelsData(landingSites.filter(d => (d.date.substring(0,4)) == yearsStr));
      });

  }

  </script>

  <style>
    .filterContainer {
      text-align: center;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      margin: 20px;
      background-color: white;
      border-radius: 10px;
      padding: 20px;
    }
    #go{
      text-decoration: none;
      color: black;
      background: lightgray;
      padding: 10px;
      border-radius: 5px;
    }
  </style>
</body>