Earthquake Browser Web Application for the Country of Iran

Author: Atanaz Dorrani Arab
GeoVis Project Assignment @ RyersonGeo, SA 8905, Fall 2018

The website of Iranian Seismological Center (ISC) is popular not only among the geologist, geophysicist and seismotectonics specialists, but also the general public. When an earthquake happens, people who felt the temblor tend to know its location and magnitude in the shortest time possible. The ISC website is the quickest way to obtain information regarding the latest earthquake. It gives details of time and location of the earthquakes and visualizes earthquakes spatial distribution across the country. However, the website is not user-friendly and provides date and time location for a limited number of earthquakes and maps the location of earthquakes for a period of only 24 hours.

The Earthquake Browser is an effort to make a user-friendly web app, which is easy to use and can serve both the general public and seismotectonics specialists.

The web app is designed to have three main section:

  • A section to display the spatial distribution of the earthquakes on map
  • A section that provides a list of earthquakes, which provides detailed information regarding each earthquake including magnitude, location, longitude, latitude, time.
  • A section which visualizes the frequency distribution of earthquakes by year in form of a vertical bar chart. This part is more beneficial to the specialists, as this chart can give general information about the seismic structure of earth within political borders of Iran.

To use this app users need to enter a time period for which they want to obtain information about the occurred earthquakes. They can also narrow down their search by selecting a magnitude range.

The earthquakes data are being retrieved online from U.S. Geological Survey (USGS) website each time a user select a time period and a magnitude range.

HTML, JavaScript and CSS are the markup, programming and style languages that are used to create the earthquake browser web application. HTML is used to describe the structure of information on the web application; CSS is used for controlling the appearance; and the functionality is programmed by JavaScript. Four libraries were utilized in designing this web application:

  • Mapbox GL JS used for the web mapping tool, due to the variety of visually pleasant map designs.
  • D3.js used for the dynamic data visualization in the chart section of the app.
  • jQuery used for sending Ajax request to USGS server.
  • Font-Awesome Library used for adding icon fonts which are displayed in the sidebar of the web app. Icon fonts are just fonts. But, instead of containing letters, they contain symbols and glyphs. They give the web app a more graphic design.

 

Welcome to the app

When a user opens the web application on the browser, a map centered to the Iran’s political border would be displayed. A side bar with three icon fonts designed on the left side of the app let user to navigate to different sections of the web application. Each icon font presents one of the web app’s sections and its functionality.

The hamburger menu directs users to the place where the time period and the magnitude range should be inputted. The date-time field is set on the current local date-time of the user’s time zone as the default date-time in the app. The web app also requests user to not to enter dates prior to January 01, 1900; since there is no instrumental record of the earthquakes before the year 1900.

It is probable that users made some mistakes in filling up the fields of this section, such as entering a start date greater than the end date, entering maximum magnitude smaller than minimum magnitude, entering a date exceeding the current data-time, or entering a date prior to January 01, 1900.

When a user submits the request containing any of these mistakes, an alert with an appropriate message, which corresponds to the specific occurred error pops up and warn the users to correct it. Aside from the alerts, when users input a date-time which exceeds the current date-time or is prior to 1900, the box around the field of date-time changes from solid black line to dashed orange line to let the user know that something is not right before submitting a request. The figure below shows examples of these alerts and how they look on screen.

Additionally, another alert is also designed to notify user when there is no earthquake occurred for the selected time period and magnitude range. When no data received from USGS server this alert would pop up.

USGS provided a web API for access to its earthquake data and sending requests to its server. When a user fills out the date-time and magnitude fields, a URL based on the parameters defined by the USGS API documentation and the values entered by the user will be created and  will be sent to the USGS server.

In that URL request, an area which matches the Iranian borders needed to be defined; so the USGS only sends data for earthquakes that occurred in Iran. The area needs to be defined by a rectangular extent, a boundary box defined by 4 lats & longs, which contains the country of Iran. Although when USGS sends earthquake data the, information contains the country names in the location parameter; there is no way to narrow down the URL request based on the name of the countries. Thus, the received earthquakes data from USGS contains earthquakes that occurred out of the borders of the country.

After receiving the data form USGS server in the GeoJSON format, the data will be filtered by the name of country available in the location parameter. Those earthquakes which does not include the name “Iran” in their location will be removed from the data.

Then, user can view the spatial distribution of the earthquakes on map based on the filtered data. User is able to zoom in to places where there are many events occurred. A legend is also displaying on bottom right corner of the map to help reader get an idea of the earthquakes’ magnitude. A color is assigned to each magnitude with a round number (the magnitude ranges from 2 to 8). The color selection is inspired by USGS color scheme for earthquakes magnitudes. The color of the points representing earthquakes changes relative to the magnitude and changes within the range of selected colors. Earthquakes with greater magnitudes are also have larger points. This helps making the larger earthquakes, which are kind of more important, more visible. The figure below show the map after the earthquakes data had been received,  filtered, and displayed on map.

The exact magnitude of the earthquake can be found by clicking on the its point on the map. In addition to the magnitude, user can find a row number, which corresponds to the row number in the earthquakes’ list section.

By going to the list section, user can find extra information about that exact earthquake. This list is also beneficial when user is just looking for the latest earthquakes in order to find out the earthquake exact location and magnitude.

In the chart section of the app, a vertical bar chart is showing the frequency of events by year for the selected time period and magnitude range. The Y axis shows the earthquakes frequency and the X axis shows the years. For making this chart, the earthquakes data received from USGS will be categorized by year. The years will be displayed on the X axis and the count of earthquakes in each  category will be displayed on the Y axis. When the user places the mouse on each bar of the chart, the exact number of earthquakes in that year will be displayed. This makes the chart more readable when the X axis includes a wide range of years.

ArcPro Animation of 1923 Canoe Trip in Algonquin Park

By Sarah Medland

Geovis Course Project @RyersonGeo, SA8905, Fall 2018

Context

While searching the web for historic maps to inspire this project I came across the personal website of Bob and Diane McElroy. Their website includes an extensive personal collection of present and historic records of the natural environment within Ottawa Valley and Algonquin Park. The collection of thoughts and logs on their site consist of those of their ancestors – dating back many decades from now. The following map is a section of the one which was chosen for the purpose of this assignment. It dates back to 1921:

In July of 1923, a group of 4 men led by a guide embarked on a 12-day canoe-trip, creating a log of their route as they traveled. The map log included handwritten details by W. H. McConnell about wildlife, weather, and their experience in the Park.

Purpose:

 to animate an artistic rendering of a historic canoeing route which…

 – brings to life a historic map by integrating it with modern GIS technology

– reveals information from approx. a hundred years prior about an ever-popular canoeing area

Methods

To begin, the map was download as a JPEG and brought into ArcMap. A DMTI Spatial minor water bodies Shapefile was added. Using this present-day layer, labelled by lake name, it was fairly easy to align this with the lakes from the historic map. Some challenges arose as the map is from 1921 therefore its accuracy is questionable, however, I was able to geo-reference the map fairly well.

Historic Map in ArcMap where it was georeferenced to a present-day water bodies layer

Next, DEM tiles were downloaded from Scholar’s Geoportal. These were converted into a TIN using the raster to TIN tool in ArcMap, and then into TIN nodes using the TIN node tool. This allowed the tiles to be combined into one continuous TIN using the Create TIN tool which could be clipped to the extent of the map surface. Once the elevation surface was made, the map could be given height.

The map surface after it was draped over an elevated TIN surface and atmospheric effects were applied

To visualize the canoe route, a line Shapefile was created over the route drawn on the map. Campsites were also added as a point Shapefile which included a ‘Date’ field in the attribute table. In the ArcGIS Pro Global setting the map was draped over the TIN surface and campsites symbolized in 3D with the dates labelled.

An example of some of the original annotations on the map

Lastly, a animation following the canoe route was created in ArcGIS Pro. The animation was created to guide the viewer along the route of the 1923 trip and included annotations such as those above and historic pictures from the time period.

Results: The following video is the final product: