Contains html file showcasing Earthquake related data generated in the form of VR model, ArcGIS API with real-time earthquake feed and video of simulation of earthquake generated in blender

Overview

Module-EADGI-Project-All about Earthquakes

Introduction

Contains html file showcasing Earthquake related data generated in the form of VR model, ArcGIS API with real-time earthquake feed and video of simulation of earthquake generated in blender.

The idea is to create an all inclusive website showcasing earthquakes happening all around the globe and information about it. This project is a part of our module work where the goal was to create:

  • Web based 3D visualization
  • Dynamic Simulation and visualization
  • Application of VR in geospatial domains
Folder Name Details Files
Website Code Has the main html/css/javascript file for the website index.html, style.css, main.js
VR model Contains the python file for generating .ply file of point cloud of earthquake data. Additonally .ply file is also provided for quick viewing in any supported software model_VR.py, earthquake_2000_2019_VR.ply
image/README Contains images used in README.md 1.png, 2.png, 3.png, button.png, footer.png, large_legend.png, medium_legend.png, small_legend.png, methodology.png

Methodology

The methodology followed for the project can be viewed below:

1654712191919

Methodology focuses on covering all the stated objectives while also focusing on achieving the goal of educating and gaining knowledge about earthquakes more!

Description

The initial/hero page of the website focuses on basic info about earthquakes and showing a 3D model of geolocated point cloud earthquake data which is color coded according to the intensity of the earthquake.

1654718495166

Sketchfab was used to offload the .ply file generated from the python code "model_VR.py". The benefit of this is that it can be natively viewed in VR view too, provided one needs tools/devices supporting VR. The "KNOW MORE" button is a link to National Geographic Earthquake learning catalogue where various articles/blogs/news/reports are there to get an in-depth knowledge about earthquakes and the science behind it.

This is the -> link to the 3D model above.

The next part is to show real time feed via ArcGIS API. The goal is to create a modular globe view with changing labels according to the range of magnitude of earthquakes:

Magnitude Description Legend
< 5.0 They don't cause any significant damage. 1654714979481
5.0 - 7.0 They can damage buildings and other structures in populated areas. 1654714990657
> 7.0 These earthquakes are likely to cause damage even to earthquake resistant structures 1654714999682

This is a recreation of an ESRI 3D visualization lesson which can be accessed via the link. Basic methodology to create this visualization is:

  • Create the map: contains the vintage basemap from John Nelson loaded as a TileLayer. See the code for this on Github (lines 18–28).
  • Create the SceneView that the map will be rendered to. On the SceneView there are several properties related to the user interaction, like the navigation constraints, the color of the highlight when the user clicks on an earthquake, the environment settings for the lighting in the scene and removing the stars and the sky and making it transparent. See the code for this on Github (lines 30–60).
  • Create the GeoJSONLayer with the earthquakes. The popupTemplate sets the information that should be displayed when the user clicks on the earthquake. In this case, we want to show the magnitude of the earthquake, where it happened and what time it happened. We want the size to represent the magnitude of the earthquakes and no be influenced by perspective, so we’re going to set screenSizePerspectiveEnabled to false. See the code for this on Github (lines 68–89).
  • The next part of the code is about setting the renderer on the layer. The data is split into 3 classes based on magnitude as discussed in Step 1, so we’re going to use a ClassBreaksRenderer. For each of the classes we want to count how many earthquakes are in each class, so we define outStatistics definitions that we later on pass to the layer query. Once we get the results from the statistics, we define the renderer. See the code for this on Github (lines 142–176).
  • Finally, the HistogramRangeSlider needs to know how many features are in each histogram bin. We can get that information using the smart mapping histogram method. Once the histogram slider is created, we define an event listener that will filter the data on the layer view when the user drags the thumbs of the slider. See the code for this on Github (lines 193 — 233).

After that the website will look somewhat like this(I have changed the basetilelayer in the code and changed some parameters so the view might look different):

1654715404056

The final stage is to create a simulation to show how earthquakes affect structures in real life. Due to time and computational limitation, the simulation was only done for one building with limited parameters in blender. One can increase the complexity and poly-count geometries accordingly. The ->link<- to assets and blender software is given. One can even use different software's like Houdini-SideFX and Unity.

1654716540705

The simulation was exported and uploaded to YouTube for website fetching. Link to the video -> Simulation.mp4

Additional things

1654717016693

Buttons

They were used for linking different wbsites and url. This was used for off-loading assets for simualation. The code framework of which is shown below:

html code

<button type="button" class="button" onclick=" window.open('https://drive.google.com/drive/folders/19yK-l_flvEnTnqqOlYROZv1GDM9VkEqJ?usp=sharing','_blank')">
                <span class="button__text">Download Blender 2.79 file + assets</span>
                <span class="button__icon">
                    <ion-icon name="link-outline"></ion-icon>
                </span>
            </button>

css code

.button {
    display: flex;
    height: 50px;
    padding: 0;
    background: #009578;
    border: none;
    outline: none;
    border-radius: 5px;
    overflow: hidden;
    font-family: "Quicksand", sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
  }
  
  .button:hover {
    background: #008168;
  }
  
  .button:active {
    background: #006e58;
  }
  
  .button__text,
  .button__icon {
    display: inline-flex;
    align-items: center;
    padding: 0 24px;
    color: #fff;
    height: 100%;
  }
  
  .button__icon {
    font-size: 1.5em;
    background: rgba(0, 0, 0, 0.08);
  }

For further clarification one can refer the tutorial.

1654717261623

Footer with name and GitHub logo

Created using footer functionality and the same tutorial mentioned above. Below is the code snippet:

<footer>
        <div class="h8" style="position: relative;">Created by Abhishek Rawat |
        <!-- GITHUB Link of repository of this code -->
        <a class="social_icon" href="https://github.com/AiM0-create/Module-AEGD-Project" target="_blank"> 
            <ion-icon name="logo-github"></ion-icon>
        </a>
        </div>
    </footer>

References

  1. A classical visualization of earthquakes using ArcGIS API for JavaScript. (n.d.). Retrieved June 9, 2022, from https://www.esri.com/arcgis-blog/products/js-api-arcgis/3d-gis/a-classical-visualization-of-earthquakes-using-arcgis-api-for-javascript/
  2. API Documentation - Earthquake Catalog. (n.d.). Retrieved June 9, 2022, from https://earthquake.usgs.gov/fdsnws/event/1/
  3. Blender Fracture Modifier – Simply Explained | All3DP. (n.d.). Retrieved June 9, 2022, from https://all3dp.com/2/blender-fracture-modifier/
  4. GeoJSON Summary Format. (n.d.). Retrieved June 9, 2022, from https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
  5. GitHub - KaiKostack/bullet-constraints-builder: Add-on for Blender to connect rigid bodies via constraints in a physical plausible way. (You only need the ZIP file for installation in Blender. Click the filename and at the next page “Download”, right click and “Save As” won’t work!). (n.d.). Retrieved June 9, 2022, from https://github.com/KaiKostack/bullet-constraints-builder

Conclusion

The project has lot of scope of improvement so if you want to collab, raise issue with the code or even reuse the code feel free to do so.

Contact: LinkedIn


You might also like...

FormGear is a framework engine for dynamic form creation and complex form processing and validation for data collection.

FormGear is a framework engine for dynamic form creation and complex form processing and validation for data collection.

FormGear is a framework engine for dynamic form creation and complex form processing and validation for data collection. It is designed to work across

Dec 27, 2022

A collection of Aurelia 2 example applications showcasing how to build Aurelia 2 applications and other tasks.

Aurelia 2 Examples A monorepository of a treasure trove of Aurelia 2 example applications you can use as a guide to help you build your own applicatio

Dec 29, 2022

A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.

A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.

form-storage A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again. Installation via npm npm install

Dec 10, 2022

Hyperdrive is a secure, real-time distributed file system

Hyperdrive Hyperdrive is a secure, real-time distributed file system Install npm install hyperdrive@next Note this is the Hyperdrive 11 preview based

Dec 28, 2022

Demo showcasing information leaks resulting from an IndexedDB same-origin policy violation in WebKit.

Safari 15 IndexedDB Leaks Description This demo showcases information leaks resulting from an IndexedDB same-origin policy violation in WebKit (a brow

Nov 5, 2022

A community-driven repository showcasing examples using Remix 💿

Remix Examples Welcome to @remix-run/examples! If you have an example you'd like to share, please submit a pull request! This is a community-driven re

Jan 3, 2023

Nouns On-Chain Proposal Simulation and Analysis

Nouns Diligence Nouns On-Chain Proposal Simulation and Analysis For Voters Technical reports for all reviewed proposals can be found in the reports fo

Dec 26, 2022

A large scale simulation which pits millions of space ships against each other in a virtual universe all running directly in SingleStore.

A large scale simulation which pits millions of space ships against each other in a virtual universe all running directly in SingleStore.

Wasm Space Program In this demo we simulate a fake universe full of thousands of solar systems. In each solar system there are many space ships and en

Nov 2, 2022

🐜 GPU-accelerated ant colony simulation

🐜 GPU-accelerated ant colony simulation

Ants simulation A simple ant colony GPU-accelerated simulation made with Three.js. Live demo Rules Ants can emit two types of pheromones: to-home pher

Nov 28, 2022
Owner
Abhishek Rawat
Abhishek Rawat
A Web Viewer for Blender.

BlenderWebViewer a Web Viewer for Blender. To get started: Clone the repo Install the add-on for Blender (blenderPlugin.zip) change the path field in

eliaorsini 48 Nov 29, 2022
Color palette text parser to a function, compatible with GMT, GDAL, GRASS, PostGIS, ArcGIS

cpt2js Color palette text parser to a function, input compatible with GMT, GDAL, GRASS, PostGIS, ArcGIS Demo From GDAL docs: The text-based color conf

WeatherLayers 5 Dec 4, 2022
Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets

Code Playground About Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript cod

Arshansh Agarwal 5 Dec 17, 2022
This repository contains a fullstack chatbot project based on the ChatGPT `gpt-3.5-turbo` model.

This is a fullstack chatbot created with React, Nodejs, OpenAi, and ChatGPT while developing the following tutorial: How To Build A Chat Bot Applicati

NJOKU SAMSON EBERE 6 May 10, 2023
This plugin can generate timestamps for video, audio and Bilibili video, it takes you to the corresponding video/audio position when clicked.

logseq-plugin-media-ts 本插件能够生成视频、音频以及 B 站视频的时间戳,点击时间戳后会跳转到对应的音视频位置。 This plugin can generate timestamps for video, audio and Bilibili video, it takes

Seth Yuan 58 Jan 3, 2023
A react-leaflet & express app for visualizing the latest earthquake data from Kandilli Observatory

Earthquake Tracker Turkey A react-leaflet & express app for visualizing the latest earthquake data from Kandilli Observatory. Tech Stack Client: React

Coşkun Atak 3 Sep 30, 2022
BASIC is a web application contains basic applications related to studies, love, health, weather, productivity. This project aim to simply the user's life in anyway.

BASIC is a web application contains basic applications related to studies, love, health, weather, productivity. This project aim to simply the user's life in anyway. Supported by all operating system, need an internet connection for working properly.

IRUTHAYA SANTHOSE I 1 Dec 19, 2021
An HTML, CSS and JavaScript project related to a leaderboard, where you can submit a specific score data using an API request

LeaderBoard-Project In this project we use Webpack dependecy and a external API for displaying the leaderboard data inside the dom. Built with HTML-CS

Nicolas Gonzalez 4 Mar 3, 2022
A simple cli-app that allows you to divide a YouTube video into multiple separate videos base on a video's time stamps. Powered by pkg and yt-scissors library.

YouTube-Scissors CLI A simple CLI app that allows you to divide a YouTube video into multiple separate videos base on a video's time stamps. This proj

Gabe 23 Nov 8, 2022
This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreadsheet.

HtmlFormApp Overview This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreads

Kanshi TANAIKE 18 Oct 23, 2022