{"id":680652,"date":"2019-12-13T07:32:50","date_gmt":"2019-12-13T15:32:50","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=680652"},"modified":"2020-06-17T06:18:12","modified_gmt":"2020-06-17T13:18:12","slug":"a-classical-visualization-of-earthquakes-using-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/a-classical-visualization-of-earthquakes-using-arcgis-api-for-javascript","title":{"rendered":"A classical visualization of earthquakes using ArcGIS API for JavaScript"},"author":7011,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[23771],"tags":[25781,525722,549072,29401],"industry":[],"product":[36831],"class_list":["post-680652","blog","type-blog","status-publish","format-standard","hentry","category-3d-gis","tag-3d","tag-earthquakes","tag-esrirdzurich","tag-web","product-js-api-arcgis"],"acf":{"short_description":"A blog post about creating an interactive 3D visualization of earthquakes using ArcGIS API for JavaScript","flexible_content":[{"acf_fc_layout":"content","content":"

USGS publishes a live feed of earthquakes<\/a> from the last 30 days. In this blog post we will go through the steps of creating a globe visualization that displays these earthquakes and allows the user to filter and interact with them.<\/p>\n

So let\u2019s get started!<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":680672,"id":680672,"title":"intro_app","filename":"intro_app.png","filesize":44818,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/intro_app.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/a-classical-visualization-of-earthquakes-using-arcgis-api-for-javascript\/intro_app","alt":"A screenshot of the live application","author":"7011","description":"A screenshot of the live application","caption":"See the live app: http:\/\/ralucanicola.github.io\/JSAPI_demos\/last-earthquakes\/","name":"intro_app","status":"inherit","uploaded_to":680652,"date":"2019-12-13 14:31:50","modified":"2019-12-13 14:32:46","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":423,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/intro_app-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/intro_app.png","medium-width":464,"medium-height":245,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/intro_app.png","medium_large-width":768,"medium_large-height":406,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/intro_app.png","large-width":800,"large-height":423,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/intro_app.png","1536x1536-width":800,"1536x1536-height":423,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/intro_app.png","2048x2048-width":800,"2048x2048-height":423,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/intro_app.png","card_image-width":800,"card_image-height":423,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/intro_app.png","wide_image-width":800,"wide_image-height":423}},"image_position":"center","orientation":"horizontal","hyperlink":"http:\/\/ralucanicola.github.io\/JSAPI_demos\/last-earthquakes\/"},{"acf_fc_layout":"content","content":"

Step 1. Define the goal of the visualization<\/h2>\n

We want to show the latest earthquakes classified in such a way that the user can immediately see which ones were extremely dangerous (major earthquakes that cause severe damage) and which ones were moderate (can cause damage but only to buildings which are not earthquake proof). For the sake of consistency, we will also show the minor earthquakes that generally don\u2019t cause any damage. To help the user get a better overview of earthquake magnitude distribution and where the earthquakes occur, we\u2019ll also add a histogram and a filter slider. In addition, we want to allow the user to get extra information about each earthquake by clicking on it.<\/p>\n"},{"acf_fc_layout":"content","content":"

Step 2. Map\u00a0design<\/h2>\n

The look and feel of the app should remind us of a school atlas, with the advantage that everything is interactive. This effect is given by the wonderful vintage physical map that John Nelson<\/a> created. You can read more about the creation process in this blog post<\/a>. We\u2019ll use this map as a basemap in our application.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":680702,"id":680702,"title":"vibrant_basemap","filename":"vibrant_basemap.jpg","filesize":77705,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/vibrant_basemap.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/a-classical-visualization-of-earthquakes-using-arcgis-api-for-javascript\/vibrant_basemap","alt":"","author":"7011","description":"","caption":"Vintage Shaded Relief Basemap by John Nelson: https:\/\/nation.maps.arcgis.com\/home\/webmap\/viewer.html?webmap=ccbfec91e19d4f9fb0769af361c31516","name":"vibrant_basemap","status":"inherit","uploaded_to":680652,"date":"2019-12-13 14:35:06","modified":"2019-12-13 14:36:12","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":768,"height":410,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/vibrant_basemap-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/vibrant_basemap.jpg","medium-width":464,"medium-height":248,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/vibrant_basemap.jpg","medium_large-width":768,"medium_large-height":410,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/vibrant_basemap.jpg","large-width":768,"large-height":410,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/vibrant_basemap.jpg","1536x1536-width":768,"1536x1536-height":410,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/vibrant_basemap.jpg","2048x2048-width":768,"2048x2048-height":410,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/vibrant_basemap.jpg","card_image-width":768,"card_image-height":410,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/vibrant_basemap.jpg","wide_image-width":768,"wide_image-height":410}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/nation.maps.arcgis.com\/home\/webmap\/viewer.html?webmap=ccbfec91e19d4f9fb0769af361c31516"},{"acf_fc_layout":"content","content":"

The symbology for the earthquakes is based on the classical concentrical circles symbol:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":680722,"id":680722,"title":"earthquake_symbol","filename":"earthquake_symbol.png","filesize":4079,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquake_symbol.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/a-classical-visualization-of-earthquakes-using-arcgis-api-for-javascript\/earthquake_symbol","alt":"","author":"7011","description":"","caption":"","name":"earthquake_symbol","status":"inherit","uploaded_to":680652,"date":"2019-12-13 14:37:56","modified":"2019-12-13 14:37:56","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":96,"height":96,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquake_symbol.png","thumbnail-width":96,"thumbnail-height":96,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquake_symbol.png","medium-width":96,"medium-height":96,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquake_symbol.png","medium_large-width":96,"medium_large-height":96,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquake_symbol.png","large-width":96,"large-height":96,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquake_symbol.png","1536x1536-width":96,"1536x1536-height":96,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquake_symbol.png","2048x2048-width":96,"2048x2048-height":96,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquake_symbol.png","card_image-width":96,"card_image-height":96,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/earthquake_symbol.png","wide_image-width":96,"wide_image-height":96}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

This symbol is intuitive because it reflects the seismic waves starting from the epicenter of the earthquake. The more concentrical circles, the higher the magnitude of the earthquake. When working in 3D with the ArcGIS API for JavaScript you can achieve this by using a PointSymbol3D<\/a> with multiple symbol layers, each IconSymbol3DLayer<\/a> representing a circle:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":680732,"id":680732,"title":"symbol_layers","filename":"symbol_layers.png","filesize":23349,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/symbol_layers.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/a-classical-visualization-of-earthquakes-using-arcgis-api-for-javascript\/symbol_layers","alt":"","author":"7011","description":"","caption":"Define IconSymbol3DLayers for a PointSymbol3DLayer ","name":"symbol_layers","status":"inherit","uploaded_to":680652,"date":"2019-12-13 14:38:56","modified":"2019-12-13 14:41:07","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1200,"height":156,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/symbol_layers-213x156.png","thumbnail-width":213,"thumbnail-height":156,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/symbol_layers.png","medium-width":464,"medium-height":60,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/symbol_layers.png","medium_large-width":768,"medium_large-height":100,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/symbol_layers.png","large-width":1200,"large-height":156,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/symbol_layers.png","1536x1536-width":1200,"1536x1536-height":156,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/symbol_layers.png","2048x2048-width":1200,"2048x2048-height":156,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/symbol_layers-826x107.png","card_image-width":826,"card_image-height":107,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/symbol_layers.png","wide_image-width":1200,"wide_image-height":156}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-IconSymbol3DLayer.html"},{"acf_fc_layout":"content","content":"

As mentioned in Step 1, in this map we\u2019re using a data classification schema that will allow us to differentiate between earthquakes that cause extreme damage (even to earthquake resistant structures), moderate earthquakes and minor earthquakes that don\u2019t cause any damage. The minor ones are actually the big majority and they are interesting to map because they show the areas with a lot of tectonic activity.<\/p>\n

To visualize classified point data we\u2019ll use a ClassBreaksRenderer<\/a>, where each class has a symbol with concentric circles, depending on the earthquake magnitude:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":680742,"id":680742,"title":"classBreaksRenderer","filename":"classBreaksRenderer.png","filesize":32202,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/classBreaksRenderer.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/a-classical-visualization-of-earthquakes-using-arcgis-api-for-javascript\/classbreaksrenderer","alt":"","author":"7011","description":"","caption":"Define classes for a ClassBreaksRenderer","name":"classbreaksrenderer","status":"inherit","uploaded_to":680652,"date":"2019-12-13 14:44:12","modified":"2019-12-13 14:44:54","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1200,"height":328,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/classBreaksRenderer-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/classBreaksRenderer.png","medium-width":464,"medium-height":127,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/classBreaksRenderer.png","medium_large-width":768,"medium_large-height":210,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/classBreaksRenderer.png","large-width":1200,"large-height":328,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/classBreaksRenderer.png","1536x1536-width":1200,"1536x1536-height":328,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/classBreaksRenderer.png","2048x2048-width":1200,"2048x2048-height":328,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/classBreaksRenderer-826x226.png","card_image-width":826,"card_image-height":226,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/classBreaksRenderer.png","wide_image-width":1200,"wide_image-height":328}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-ClassBreaksRenderer.html"},{"acf_fc_layout":"content","content":"

The data is dynamic, every time a user opens or refreshes the application the data changes. Generally, the last class with earthquakes with magnitudes higher than 7 is likely to stay empty (we sure hope that\u2019s the case!). Having empty classes is not a best practice when classifying data because it confuses the user. We could reclassify the data, but these classes are based on the effects that earthquakes have, rather than clusters within the data. So we\u2019d like to keep the classes as they are and to give the user information about how many earthquakes are in each class, we use outStatistics<\/a><\/code> with the queryFeatures<\/a> method to obtain the number of earthquakes in each class. We set these numbers in the labels of each class, so that they are displayed nicely in the legend:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":680752,"id":680752,"title":"legend","filename":"legend.png","filesize":17061,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/legend.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/a-classical-visualization-of-earthquakes-using-arcgis-api-for-javascript\/legend-9","alt":"","author":"7011","description":"","caption":"","name":"legend-9","status":"inherit","uploaded_to":680652,"date":"2019-12-13 14:45:37","modified":"2019-12-13 14:45:37","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":342,"height":315,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/legend-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/legend.png","medium-width":283,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/legend.png","medium_large-width":342,"medium_large-height":315,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/legend.png","large-width":342,"large-height":315,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/legend.png","1536x1536-width":342,"1536x1536-height":315,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/legend.png","2048x2048-width":342,"2048x2048-height":315,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/legend.png","card_image-width":342,"card_image-height":315,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/legend.png","wide_image-width":342,"wide_image-height":315}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Step 3. Earthquake data<\/h2>\n

As mentioned in the beginning, the data comes from USGS earthquake live feed<\/a>. It comes in different formats, but for our app, we\u2019re going to get the GeoJSON live feed for the last 30 days<\/a> and set it in the url<\/a> of the GeoJSONLayer<\/a>. And that\u2019s all there is to it, no server or data processing needed in this case.<\/p>\n

Step 4. User interaction<\/h2>\n

A SceneView<\/a> comes with default 3D navigation like pan, zoom and tilt. The user can freely navigate in the scene, but zooming in to city level doesn\u2019t really make sense for this app, so we\u2019re going to set a constraint<\/a> to limit the min altitude to 400,000m. When the camera reaches that height, the user can\u2019t zoom in anymore.<\/p>\n

The user can interact with the earthquakes by clicking on a symbol to get more information about the earthquake. For that we\u2019ve set a popupTemplate<\/a> on the layer.<\/p>\n

When the user needs to focus on a certain data range, a useful technique is to only display those features in the data range. So if the user is interested in earthquakes between a certain magnitude range, then we filter out all the earthquakes with magnitude values outside of that range. With ArcGIS API for JavaScript we can use a HistogramRangeSlider<\/a> as a filtering tool and use the filter<\/a><\/code> property on the GeoJSONLayerView<\/a> to hide features that don\u2019t satisfy the filter criteria.<\/p>\n

Summary\u200a\u2014\u200aputting things together in JavaScript<\/h2>\n

So the final app has the following sections:<\/p>\n