{"id":572432,"date":"2023-02-08T10:06:33","date_gmt":"2023-02-08T18:06:33","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcuser&#038;p=572432"},"modified":"2023-02-08T10:06:33","modified_gmt":"2023-02-08T18:06:33","slug":"visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript","status":"publish","type":"arcuser","link":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript","title":{"rendered":"Visualizing Multidimensional Datasets with ArcGIS Maps SDK for JavaScript"},"author":1031,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_links_to":"","_links_to_target":""},"categories":[471592,455201,25002],"tags":[483922,483912],"arcuser_issues":[483782],"class_list":["post-572432","arcuser","type-arcuser","status-publish","format-standard","hentry","category-3d-mapping","category-a-climate-of-change","category-developers-corner","tag-atmospheric-data","tag-voxel","arcuser_issues-au-winter-2023"],"acf":{"short_description":"Learn how ArcGIS Maps SDK for JavaScript can be used to visualize a dataset representing atmospheric temperature and pressure measurements.","pdf":{"host_remotely":false,"file":569872,"file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"Multidimensional datasets are complex and hard to understand without good visualization tools. This article visualizes a dataset representing atmospheric temperature and pressure measurements using an application built with ArcGIS Maps SDK for JavaScript. <a href=\"https:\/\/bit.ly\/3UUfLsw\">View the live application<\/a>.\r\n\r\n&nbsp;"},{"acf_fc_layout":"image","image":572482,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"To better understand the application, some explanation is in order. Atmospheric pressure is the force exerted on a surface by the air above as gravity pulls it to Earth. The temperature at different levels of Earth\u2019s atmosphere is influenced by incoming solar radiation; humidity; and, of course, altitude.\r\n\r\nHow are temperature and pressure measured at such high altitudes? The technique involves a low Earth orbit satellite receiving a signal from a GPS satellite. When it passes through the atmosphere, the signal is refracted in a manner similar to the way light refracts when it passes through a lens. The magnitude of the refraction depends on the temperature, air pressure, and humidity. This technique, called radio occultation, produces highly accurate atmospheric measurements, which are used in weather forecasting systems.\r\n\r\n&nbsp;"},{"acf_fc_layout":"image","image":572492,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"The dataset used by the application is provided by GeoOptics, a company that specializes in radio occultations for weather forecasts. Each occultation event lasts less than a minute and produces a linear profile of between 350 and 400 observations from the top of the atmosphere to the bottom. The data acquires heights that range from an altitude of 30 kilometers to ground level. The initial dataset contained approximately 600 occultation profiles that were used to interpolate the measurements into a 3D surface. The geostatistical interpolation method used was empirical Bayesian kriging 3D. Using GA Layer 3D to netCDF in the Geostatistical Analyst toolbox in ArcGIS Pro, the 3D surface was exported to a netCDF file, which can then be viewed as a voxel layer.\r\n\r\n&nbsp;"},{"acf_fc_layout":"image","image":572512,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h3>Exploring a Voxel Layer with ArcGIS Maps SDK for JavaScript<\/h3>\r\nA voxel layer is a representation of multidimensional spatial and temporal information in a 3D volumetric visualization. This type of layer can be published to ArcGIS Online and visualized in a browser. <a href=\"https:\/\/bit.ly\/3ExJYqw\">View the voxel layer used in the application<\/a>.\r\nVariables\r\nThe voxel layer stores the spatial coordinates x,y and z and values for pressure and temperature variables over three days. Within ArcGIS Maps SDK for JavaScript, information about variables can be viewed by accessing the array voxelLayer.variables. For this layer, the temperature variable has the metadata shown in Listing\u00a01.\r\n\r\n<strong>{<\/strong>\r\n<strong>description: \u201ctemperature_Prediction\u201d,<\/strong>\r\n<strong>id: 10,<\/strong>\r\n<strong>name: \u201ctemperature\u201d,<\/strong>\r\n<strong>unit: \u201cdegree_K\u201d<\/strong>\r\n<strong>}<\/strong>\r\n\r\n<strong>Listing 1<\/strong>\r\n\r\nTemperature can be visualized by setting the current variable ID on the layer using:\r\n\r\n<strong>voxelLayer.currentVariableId = 10;<\/strong>\r\n\r\nChange the time variable by setting the time extent on view.timeExtent. Visualizing different time periods allows the comparison of pressure and the temperature. The pressure changes almost linearly with altitude, whereas temperature fluctuates much more because it depends on not only altitude but also solar radiation and humidity.\r\n\r\n&nbsp;"},{"acf_fc_layout":"image","image":572522,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":572532,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h3>Rendering<\/h3>\r\nA voxel layer can be rendered as a volume or as surfaces. To switch between the two modes, set the voxelLayer.renderMode property to either volume or surfaces.\r\n\r\nDepending on whether the variable is continuous or discrete, it can be rendered using stretch symbology or unique values. Each variable has its own symbology saved in voxelLayer.variableStyles. This example has only continuous values for temperature and pressure, so they should be rendered using the stretch symbology.\r\n\r\nThe variableStyle.transferFunction defines how the values are stretched between a minimum and maximum value that is associated with a color scheme. In case a variable has discrete values, the unique values are defined in <strong>variableStyle.uniqueValues<\/strong>.\r\n<h3>Isosurfaces<\/h3>\r\nIf the variable is continuous, isosurfaces\u2014surfaces with the same variable value\u2014can be created. In a voxel layer, up to four isosurfaces can be visualized at the same time. Isosurfaces are stored as part of the variable styles. For example, to get the isosurfaces for a selected variable, call <strong>voxelLayer.getVariableStyles(variableId).isosurfaces<\/strong>.\r\n\r\nIn the demo application, surfaces are generated dynamically to explore the whole dataset. How does that work? When the variable is switched, the information about the range of values for that variable is available and the range is connected to a slider. As the user moves the slider, a single surface is created with the value of that slider, as shown in Listing 2.\r\n\r\n<strong>const createIsosurface = value =&gt; {<\/strong>\r\n<strong>const style = layer.getVariableStyles(selectedVariable.id);<\/strong>\r\n<strong>const color = layer.getColorForContinuousDataValue(selectedVariable.id, value, false);<\/strong>\r\n<strong>if (style) {<\/strong>\r\n<strong>style.isosurfaces = [<\/strong>\r\n<strong>{<\/strong>\r\n<strong>value: value,<\/strong>\r\n<strong>enabled: true,<\/strong>\r\n<strong>color: {...color, a: 0.8},<\/strong>\r\n<strong>\/\/ if the color is not locked, we can override it<\/strong>\r\n<strong>colorLocked: false,<\/strong>\r\n<strong>},<\/strong>\r\n<strong>];<\/strong>\r\n<strong>}<\/strong>\r\n<strong>};<\/strong>\r\n\r\n<strong>Listing 2<\/strong>\r\n\r\n&nbsp;"},{"acf_fc_layout":"image","image":572542,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h3>Sections<\/h3>\r\nA section is a two-sided vertical or horizontal plane cutting through a voxel layer. Creating sections allows analysis of profiles in the data. In ArcGIS Pro, a section can be locked so that it also displays when changing the variable so that several variables can be compared. ArcGIS Maps SDK for JavaScript can\u2019t create locked sections, but it can be used to visualize locked sections created in ArcGIS Pro.\r\n\r\nIn this application, dynamically generated sections allow exploration of vertical temperature profiles at any location. To define a dynamic section, set a point at which the plane should pass through, an orientation, and a tilt angle for the plane.\r\nBecause the point is defined in voxel space, the voxel dimensions will need to be retrieved using this code:\r\n\r\n<strong>const dimensions = voxelLayer.getVolume().sizeInVoxels;<\/strong>\r\n\r\nThe code in Listing 3 generates a section that passes through the center of the voxel layer and is oriented from north to south .\r\n\r\n<strong>layer.volumeStyles.getItemAt(0).dynamicSections = [<\/strong>\r\n<strong>{<\/strong>\r\n<strong>enabled: true,<\/strong>\r\n<strong>orientation: 90,<\/strong>\r\n<strong>tilt: 90,<\/strong>\r\n<strong>point: [Math.floor(dimensions[0] \/ 2), 0, 0],<\/strong>\r\n<strong>},<\/strong>\r\n<strong>];<\/strong>\r\n\r\n<strong>Listing 3<\/strong>\r\n\r\n<em>Note that the y- and z-coordinates of the point can have any value within the voxel space; with the given orientation and tilt, x is the coordinate that sets the position of the plane.<\/em>\r\n\r\n&nbsp;"},{"acf_fc_layout":"image","image":572552,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h3>Slice the Layer<\/h3>\r\nSlices can be used to define areas of interest. Slices apply to both volume and surfaces visualizations. In our application we\u2019re slicing the layer not only vertically from east to west and south to north, but also horizontally from top to bottom. Similar to a section, a slice is also defined by a point, an orientation, and a tilt value as shown in Listing 4. Using the example of slicing from top to bottom, the slice can have any orientation so the tilt is 0, and the point\u2019s z-axis is important to give the height at which we want to slice the layer.\r\n\r\n<strong>const getSlice = height =&gt; {<\/strong>\r\n<strong>return new VoxelSlice({<\/strong>\r\n<strong>tilt: 0,<\/strong>\r\n<strong>point: [0, 0, height],<\/strong>\r\n<strong>});<\/strong>\r\n<strong>};<\/strong>\r\n\r\n<strong>Listing 4<\/strong>\r\n\r\n&nbsp;"},{"acf_fc_layout":"image","image":572572,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h3>Change the Vertical Exaggeration<\/h3>\r\nThis application needs vertical exaggeration to see the variation of the values on the z-axis. To change the exaggeration within ArcGIS Maps SDK for JavaScript, set it using <strong>volumeStyle.exaggeration.<\/strong>\r\n<h3>Learn More About Voxel Layers<\/h3>\r\nThis article showed just a few of the voxel layer capabilities on the web. Learn more about using voxel layers in the ArcGIS Developers documentation, which includes sample code and an <a href=\"https:\/\/bit.ly\/3h0kyKt\">API reference<\/a>.\r\n\r\n&nbsp;"}],"references":null},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Visualize multidimensional datasets<\/title>\n<meta name=\"description\" content=\"ArcGIS Pro tools help visualize complex, multidimensional datasets that represent atmospheric temperature and pressure measurements.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visualizing Multidimensional Datasets with ArcGIS Maps SDK for JavaScript\" \/>\n<meta property=\"og:description\" content=\"ArcGIS Pro tools help visualize complex, multidimensional datasets that represent atmospheric temperature and pressure measurements.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2023\/01\/voxel_banner.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript\",\n\t            \"name\": \"Visualize multidimensional datasets\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t            },\n\t            \"datePublished\": \"2023-02-08T18:06:33+00:00\",\n\t            \"description\": \"ArcGIS Pro tools help visualize complex, multidimensional datasets that represent atmospheric temperature and pressure measurements.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Visualizing Multidimensional Datasets with ArcGIS Maps SDK for JavaScript\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t            \"name\": \"Esri\",\n\t            \"description\": \"Esri Newsroom\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/82e5143bcdebadf8fd64d84e503ca468\",\n\t            \"name\": \"Monica Pratt\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg\",\n\t                \"contentUrl\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg\",\n\t                \"caption\": \"Monica Pratt\"\n\t            },\n\t            \"description\": \"Monica Pratt is the founding and current editor of ArcUser magazine, the executive editor of ArcNews magazine, the editor of Esri Globe and head of the Publications team at Esri. She has been writing on technology topics, specializing in GIS, for more than 30 years. Before joining Esri in 1997, she worked for newspapers and in the financial industry.\",\n\t            \"sameAs\": [\n\t                \"https:\/\/x.com\/ArcUser\"\n\t            ],\n\t            \"url\": \"\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Visualize multidimensional datasets","description":"ArcGIS Pro tools help visualize complex, multidimensional datasets that represent atmospheric temperature and pressure measurements.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript","og_locale":"en_US","og_type":"article","og_title":"Visualizing Multidimensional Datasets with ArcGIS Maps SDK for JavaScript","og_description":"ArcGIS Pro tools help visualize complex, multidimensional datasets that represent atmospheric temperature and pressure measurements.","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2023\/01\/voxel_banner.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Esri","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript","url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript","name":"Visualize multidimensional datasets","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2023-02-08T18:06:33+00:00","description":"ArcGIS Pro tools help visualize complex, multidimensional datasets that represent atmospheric temperature and pressure measurements.","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/visualizing-multidimensional-datasets-with-arcgis-maps-sdk-for-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"Visualizing Multidimensional Datasets with ArcGIS Maps SDK for JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/82e5143bcdebadf8fd64d84e503ca468","name":"Monica Pratt","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg","contentUrl":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg","caption":"Monica Pratt"},"description":"Monica Pratt is the founding and current editor of ArcUser magazine, the executive editor of ArcNews magazine, the editor of Esri Globe and head of the Publications team at Esri. She has been writing on technology topics, specializing in GIS, for more than 30 years. Before joining Esri in 1997, she worked for newspapers and in the financial industry.","sameAs":["https:\/\/x.com\/ArcUser"],"url":""}]}},"sort_order":"15","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/572432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcuser"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/1031"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/572432\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=572432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=572432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=572432"},{"taxonomy":"arcuser_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser_issues?post=572432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}