{"id":70701,"date":"2016-01-25T09:30:44","date_gmt":"2016-01-25T09:30:44","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/3d-visualization-working-with-objects-paths-and-extrusion\/"},"modified":"2019-07-18T15:47:48","modified_gmt":"2019-07-18T22:47:48","slug":"3d-visualization-working-with-objects-paths-and-extrusion","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion","title":{"rendered":"3D visualization: working with objects, paths, and extrusion"},"author":6561,"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,23811,24921,27491,29541,24581,26521,29551],"industry":[],"product":[36831,36601],"class_list":["post-70701","blog","type-blog","status-publish","format-standard","hentry","category-3d-gis","tag-3d","tag-3d-visualization","tag-javascript","tag-jsapi4","tag-rendering","tag-smart-mapping","tag-visualization","tag-visualvariables","product-js-api-arcgis","product-developers"],"acf":{"short_description":"This is the second post in a three-part series exploring 3D data visualization in web applications using the ArcGIS API for JavaScript ve...","flexible_content":[{"acf_fc_layout":"content","content":"

This is the second post in a three-part series exploring 3D data visualization in web applications using the ArcGIS API for JavaScript version 4.0<\/a>.<\/p>\n

1. Working with icons, lines, and fill symbols<\/a>
\n2. Working with objects, paths, and extrusion
\n3. Using attributes to represent real-world sizes of features<\/a><\/p>\n

Last week we discussed considerations of working with “flat” symbol layers in a 3D SceneView. These include IconSymbol3DLayer<\/a>, LineSymbol3DLayer<\/a>, and FillSymbol3DLayer<\/a>. Apart from color, size, and shape of the symbols, one must decide whether to drape the symbols or billboard them.<\/p>\n

In this post, we\u2019ll review visualizations with volumetric symbol layers: ObjectSymbol3DLayer<\/a>, PathSymbol3DLayer<\/a>, and ExtrudeSymbol3DLayer<\/a>.<\/p>\n

The following table summarizes each symbol layer type and which 3D symbols they may be applied to.<\/p>\n

\"\"<\/a><\/p>\n

Creating a volumetric symbol layer is fundamentally the same as creating a flat symbol layer with two major exceptions.<\/p>\n

1. When defining the primitive or shape of an ObjectSymbol3DLayer<\/a>, the possible shapes in 3D are \u201csphere\u201d, \u201ccylinder\u201d, \u201ccube\u201d, \u201ccone\u201d, \u201cdiamond\u201d, or \u201ctetrahedron\u201d, as opposed to those listed in IconSymbol3DLayer<\/a>.
\n2. The size of volumetric symbols is always defined in meters, not points or pixels.<\/p>\n

Defining size<\/h2>\n

The three volumetric symbol layer types are always defined in 3D real-world space, not in screen space as is the case with their flat symbol layer counterparts. Therefore, unlike billboarded flat icons, the size of 3D objects, paths, and extrusions appear either larger or smaller based on their distance from the camera.<\/p>\n

In the following sample, we use a sphere primitive in an ObjectSymbol3DLayer<\/a> to symbolize world cities. Notice the size is set to a value of 50,000 (m). <\/p>\n

\r\nvar<\/span> renderer = new<\/span> SimpleRenderer({\r\n  symbol: new<\/span> PointSymbol3D({\r\n    symbolLayers: [new<\/span> ObjectSymbol3DLayer({\r\n      resource: { primitive: \"sphere\"<\/span> },\r\n      material: { color: \"orange\"<\/span> },\r\n      width: 50000<\/span>\r\n    })]\r\n  })\r\n});\r\n<\/pre>\n
CLICK HERE TO VIEW THE LIVE SAMPLE<\/strong><\/a>
\n\"\"<\/a><\/p>\n
Visual Variables<\/h2>\n
As discussed in previous posts, we can use visual variables to vary the size of the symbols based on one or more attributes. This can be done to improve the above sample by varying the size of the spheres based on the population of each city.<\/p>\n
The same principles for defining visual variables in 2D apply to defining them in 3D. Just remember: the sizes in 3D should reflect meters, not points\/pixels. In the following sample, we use ExtrudeSymbol3DLayer<\/a> in a PolygonSymbol3D<\/a> to create a 3D visualization for population density by U.S. state.<\/p>\n
\r\nvar<\/span> extrudePolygonRenderer = new<\/span> SimpleRenderer({\r\n  symbol: new<\/span> PolygonSymbol3D({\r\n    symbolLayers: [new<\/span> ExtrudeSymbol3DLayer()]\r\n  }),\r\n  visualVariables: [{\r\n    type: \"size\"<\/span>,\r\n    field: \"POP07_SQMI\"<\/span>,  \/\/ pop per square mile<\/span>\r\n    stops: [\r\n      { value: 1<\/span>, size: 40000<\/span> },  \/\/ 40km in height<\/span>\r\n      { value: 1000<\/span>, size: 1000000<\/span> }  \/\/ 1,000km in height<\/span>\r\n    ]\r\n  }, {\r\n    type: \"color\"<\/span>,\r\n    field: \"POP07_SQMI\"<\/span>,  \/\/ pop per square mile<\/span>\r\n    stops: [\r\n      { value: 1<\/span>, color: \"white\"<\/span> },\r\n      { value: 1000<\/span>, color: \"red\"<\/span> }\r\n    ]\r\n  }]\r\n});\r\n<\/pre>\n
CLICK HERE TO VIEW THE LIVE SAMPLE<\/strong><\/a>
\n\"\"<\/a><\/p>\n
In traditional cartography, one wouldn\u2019t typically visualize the same attribute twice with both color and size. In 3D, however, the perception of size can be problematic. Because of perspective, it is difficult to process spatial size differences between features. For example, suppose you are looking at two buildings that are both 200 feet tall. One is about 100 yards in front of you and the other is one mile away. The building located a mile away will appear much smaller than the one only 200 feet away even though both are the same size. <\/p>\n
The same principle makes it difficult to judge sizes in 3D rendering. Adding a color ramp for the same attribute helps us more easily identify the spatial patterns that would otherwise be difficult to understand. Of course you have the liberty to use color for a second attribute instead of the same one used for size, but that is ultimately up to you as the developer and cartographer. <\/p>\n
Working with the axis property in size visual variables<\/h2>\n
Setting a single size value on an ExtrudeSymbol3DLayer<\/a> and a PathSymbol3DLayer<\/a> suffices since the extrusion on polygons only impacts height, and paths use a single size for setting the diameter of a tube.<\/p>\n
But working with 3D objects can be more complex. Objects like cylinders and pyramids have three axes to consider: height, width (diameter from east to west), and depth (diameter from north to south). The axis<\/strong> property on the size visual variable<\/a> allows us to define each of these values. In the hurricane sample below, we set a constant size on the width and depth axes to make all cylinder diameters the same size (50km). The height axis is used to set the height of each feature between 60km and 450km based on the value of the WIND_KTS<\/strong> field.<\/p>\n
\r\nvar<\/span> renderer = new<\/span> SimpleRenderer({\r\n  symbol: new<\/span> PointSymbol3D({\r\n    symbolLayers: [ new<\/span> ObjectSymbol3DLayer({\r\n      resource: { primitive: \"cone\"<\/span> },\r\n      width: 50000<\/span>  \/\/ width of the symol in meters<\/span>\r\n    }) ]\r\n  }),\r\n  visualVariables: [{\r\n    type: \"color\"<\/span>,\r\n    field: \"PRESSURE\"<\/span>,\r\n    stops: [\r\n      { value: 950<\/span>, color: \"red\"<\/span> },\r\n      { value: 1020<\/span>, color: \"blue\"<\/span> }\r\n    ]\r\n  }, {\r\n    type: \"size\"<\/span>,\r\n    field: \"WINDSPEED\"<\/span>,\r\n    stops: [\r\n      { value: 20<\/span>, size: 60000<\/span> },\r\n      { value: 150<\/span>, size: 500000<\/span> }\r\n    ],\r\n    axis: \"height\"<\/span>\r\n  }, {\r\n    type: \"size\"<\/span>,\r\n    axis: \"width-and-depth\"<\/span>,\r\n    useSymbolValue: true<\/span>  \/\/ uses the width value defined in the symbol layer (50,000)<\/span>\r\n  }]\r\n});\r\n<\/pre>\n
Because we have three axes to work with, we can visualize two or more variables with size. In the following sample two attributes are mapped with size on different axes: height<\/em> (and color) indicates the percentage of the population affiliated with the Democratic party and width<\/em> indicates the percentage of people who self-identify as conservative.<\/p>\n
\r\nvar<\/span> renderer = new<\/span> SimpleRenderer({\r\n  symbol: new<\/span> PointSymbol3D({\r\n    symbolLayers: [new<\/span> ObjectSymbol3DLayer({\r\n      resource: { primitive: \"cylinder\"<\/span> }\r\n    })]\r\n  }),\r\n  visualVariables: [\r\n    {\r\n      type: \"size\"<\/span>,\r\n      field: \"MP06024a_B\"<\/span>,  \/\/ Affiliated with Democratic Party<\/span>\r\n      normalizationField: \"TOTPOP_CY\"<\/span>,\r\n      axis: \"height\"<\/span>,\r\n      valueUnit: \"unknown\"<\/span>,\r\n      stops: [\r\n        { value: 0.15<\/span>, size: 10000<\/span> },\r\n        { value: 0.25<\/span>, size: 2000000<\/span> }\r\n      ]\r\n    }, {\r\n      type: \"size\"<\/span>,\r\n      field: \"CONSERVATIVE\"<\/span>,  \/\/ Identify as conservative<\/span>\r\n      normalizationField: \"TOTPOP_CY\"<\/span>,\r\n      axis: \"width-and-depth\"<\/span>,\r\n      valueUnit: \"unknown\"<\/span>,\r\n      stops: [\r\n        { value: 0.21<\/span>, size: 10000<\/span> },\r\n        { value: 0.26<\/span>, size: 100000<\/span> }\r\n      ]\r\n    }, {\r\n      type: \"color\"<\/span>,\r\n      field: \"MP06024a_B\"<\/span>,  \/\/ Affiliated with Democratic Party<\/span>\r\n      normalizationField: \"TOTPOP_CY\"<\/span>,\r\n      stops: [\r\n        { value: 0.15<\/span>, color: \"#FF3030\"<\/span> },\r\n        { value: 0.20<\/span>, color: \"blue\"<\/span> }\r\n      ]\r\n    }\r\n  ]\r\n});\r\n<\/pre>\n
In this sample we’re looking at two variables: the percentage of the population that are democrats and the percentage of the population that are conservative. Based on the way the visual variables are defined, we would expect areas with a high percentage of democrats to have tall, deep blue, skinny cylinders since conservatives tend to favor the Republican party. That certainly appears to be the case in areas like San Francisco and New York. Interestingly, we see a few pockets of low population areas where there appears to be a higher percentage of conservatives and democrats. We shouldn’t assume that most people in these areas identify as conservative democrats, but looking at the numbers (via the popup) in each of these counties, it is reasonable to conclude there are a fair number of people who could identify as such.<\/p>\n
Limitations<\/h2>\n
While using the axis in size<\/a> to depict more than one attribute can pave the way for some complex and fascinating visualizations, it can also create very complicated, misleading, and confusing scenes. As is the case when working with other visual variables for thematic purposes, it is best to stay as simple as possible. While the possibilities appear to be endless, a general rule of thumb is maps that visualize more than two or three attributes at once become very difficult to interpret<\/strong><\/em>. Therefore, while visual variables can be powerful, be sure to use them with caution in thematic mapping.<\/p>\n
Because 3D symbol layers use meters to render the width, depth, and height of features, you can use visual variables to map the sizes of features as they exist in the real world. This is where the axis property on the sizeInfo object becomes particularly powerful. In the final post of this blog series, I\u2019ll discuss how to take advantage of visual variables when mapping the locations and real-world sizes of your features.<\/p>\n"}],"authors":[{"ID":6561,"user_firstname":"Kristian","user_lastname":"Ekenes","nickname":"Kristian Ekenes","user_nicename":"kekenes","display_name":"Kristian Ekenes","user_email":"KEkenes@esri.com","user_url":"https:\/\/github.com\/ekenes","user_registered":"2018-03-02 00:18:32","user_description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","user_avatar":""}],"related_articles":"","card_image":false,"wide_image":false},"yoast_head":"\n3D visualization: working with objects, paths, and extrusion<\/title>\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\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3D visualization: working with objects, paths, and extrusion\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2019-07-18T22:47:48+00:00\" \/>\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\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"3D visualization: working with objects, paths, and extrusion\",\"datePublished\":\"2016-01-25T09:30:44+00:00\",\"dateModified\":\"2019-07-18T22:47:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"3D\",\"3D visualization\",\"JavaScript\",\"jsapi4\",\"rendering\",\"smart mapping\",\"Visualization\",\"visualVariables\"],\"articleSection\":[\"3D Visualization & Analytics\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion\",\"name\":\"3D visualization: working with objects, paths, and extrusion\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2016-01-25T09:30:44+00:00\",\"dateModified\":\"2019-07-18T22:47:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3D visualization: working with objects, paths, and extrusion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\",\"name\":\"Kristian Ekenes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png\",\"caption\":\"Kristian Ekenes\"},\"description\":\"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.\",\"sameAs\":[\"https:\/\/github.com\/ekenes\",\"https:\/\/www.linkedin.com\/in\/kristian-ekenes\/\",\"https:\/\/x.com\/kekenes\"],\"gender\":\"male\",\"jobTitle\":\"Principal Product Engineer\",\"worksFor\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"3D visualization: working with objects, paths, and extrusion","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\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion","og_locale":"en_US","og_type":"article","og_title":"3D visualization: working with objects, paths, and extrusion","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2019-07-18T22:47:48+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"3D visualization: working with objects, paths, and extrusion","datePublished":"2016-01-25T09:30:44+00:00","dateModified":"2019-07-18T22:47:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion"},"wordCount":8,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["3D","3D visualization","JavaScript","jsapi4","rendering","smart mapping","Visualization","visualVariables"],"articleSection":["3D Visualization & Analytics"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion","name":"3D visualization: working with objects, paths, and extrusion","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2016-01-25T09:30:44+00:00","dateModified":"2019-07-18T22:47:48+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-objects-paths-and-extrusion#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"3D visualization: working with objects, paths, and extrusion"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b","name":"Kristian Ekenes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png","caption":"Kristian Ekenes"},"description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","sameAs":["https:\/\/github.com\/ekenes","https:\/\/www.linkedin.com\/in\/kristian-ekenes\/","https:\/\/x.com\/kekenes"],"gender":"male","jobTitle":"Principal Product Engineer","worksFor":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes"}]}},"text_date":"January 25, 2016","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":25781,"name":"3D","slug":"3d","term_group":0,"term_taxonomy_id":25781,"taxonomy":"post_tag","description":"","parent":0,"count":342,"filter":"raw"},{"term_id":23811,"name":"3D visualization","slug":"3d-visualization","term_group":0,"term_taxonomy_id":23811,"taxonomy":"post_tag","description":"","parent":0,"count":46,"filter":"raw"},{"term_id":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":29541,"name":"rendering","slug":"rendering","term_group":0,"term_taxonomy_id":29541,"taxonomy":"post_tag","description":"","parent":0,"count":17,"filter":"raw"},{"term_id":24581,"name":"smart mapping","slug":"smart-mapping","term_group":0,"term_taxonomy_id":24581,"taxonomy":"post_tag","description":"","parent":0,"count":81,"filter":"raw"},{"term_id":26521,"name":"Visualization","slug":"visualization","term_group":0,"term_taxonomy_id":26521,"taxonomy":"post_tag","description":"","parent":0,"count":45,"filter":"raw"},{"term_id":29551,"name":"visualVariables","slug":"visualvariables","term_group":0,"term_taxonomy_id":29551,"taxonomy":"post_tag","description":"","parent":0,"count":5,"filter":"raw"}],"category_data":[{"term_id":23771,"name":"3D Visualization & Analytics","slug":"3d-gis","term_group":0,"term_taxonomy_id":23771,"taxonomy":"category","description":"","parent":0,"count":686,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":362,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":763,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/70701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/6561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=70701"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/70701\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=70701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=70701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=70701"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=70701"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=70701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
CLICK HERE TO VIEW THE LIVE SAMPLE<\/strong><\/a>
\n\"\"<\/a><\/p>\n
CLICK HERE TO VIEW THE LIVE SAMPLE<\/strong><\/a>
\n\"\"<\/a><\/p>\n