{"id":70711,"date":"2016-02-01T11:11:21","date_gmt":"2016-02-01T11:11:21","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features\/"},"modified":"2018-03-26T21:07:44","modified_gmt":"2018-03-26T21:07:44","slug":"3d-visualization-using-attributes-to-represent-real-world-sizes-of-features","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features","title":{"rendered":"3D visualization: Using attributes to represent real-world sizes of features"},"author":6561,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[23771],"tags":[25781,23811,24921,27491,29541,24581,26521,29551,24961],"industry":[],"product":[36831,36601],"class_list":["post-70711","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","tag-web-gis","product-js-api-arcgis","product-developers"],"acf":{"short_description":"This is the final post in a three-part series exploring 3D data-driven visualizations in web applications using the ArcGIS API for JavaSc...","flexible_content":[{"acf_fc_layout":"content","content":"

This is the final post in a three-part series exploring 3D data-driven visualizations 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<\/a>
\n3. Using attributes to represent real-world sizes of features<\/p>\n

In the previous posts I demonstrated using flat icons<\/a>, lines<\/a> and polygons<\/a> versus volumetric objects<\/a>, paths<\/a>, and extrusions<\/a> for thematic visualizations using attributes such as population, party affiliation, and graduation rates in a SceneView<\/a>. <\/p>\n

In this post we\u2019ll discuss how to take advantage of visual variables in 3D to represent features as they appear in the real world. For example, if you have a dataset of pipes, you may have an attribute field that stores the diameter of each feature. Perhaps you have a point dataset of trees with trunk width, height, and canopy sizes as attributes. You can use visual variables to create symbols that represent their actual sizes in the view.<\/p>\n

Before taking this approach, keep the following in mind:<\/p>\n

1. By default, units in size<\/a> visual variables are expressed in meters when working with volumetric symbol layers.
\n2. Attribute fields used for mapping real-world sizes must be number fields, not strings.<\/p>\n

Next we’ll work through a few examples involving features of various geometry types.<\/p>\n

Polygons: extruding building footprints<\/h2>\n

Suppose you have a polygon dataset of building footprints with an attribute storing each building\u2019s height. You can create a simple 3D representation of the actual height of each building using an ExtrudeSymbol3DLayer<\/a> within a PolygonSymbol3D<\/a>.<\/p>\n

When visualizing real-world sizes, there is no need to set stops for mapping min\/max values to min\/max sizes. Since the data values represent true sizes, we’ll directly use them to create the sizes of each of our features. Since the sizes of volumetric symbol layers are defined in meters by default, you must set the valueUnit<\/strong> property of the size<\/a> visual variable to the units of the data if meters were not used in the original measurement.<\/p>\n

In the sample below, we have a dataset of building footprints that contains an ELEVATION<\/strong> field storing the heights of each building in feet. To set the appropriate sizes of the buildings, we only need to set the field property to the ELEVATION attribute and indicate the unit of measure in the valueUnit field (in this case “feet”).<\/p>\n

\nvar<\/span> renderer = new<\/span> SimpleRenderer({\n  symbol: new<\/span> PolygonSymbol3D({\n    symbolLayers: [new<\/span> ExtrudeSymbol3DLayer()]\n  }),\n  visualVariables: [{\n    type: \"size\"<\/span>,\n    field: \"ELEVATION\"<\/span>,  \/\/ The field storing height values for each building<\/span>\n    valueUnit: \"feet\"<\/span>  \/\/ converts and extrudes all data values in feet<\/span>\n  }]\n});\n<\/pre>\n
Be aware that the extrusion is calculated from the surface of the terrain. Therefore, the roof of each extrusion won’t necessarily be horizontal. They may slant or curve depending on the underlying topography. To avoid this, the data must have correct z-values and the layer’s elevationInfo.mode<\/a> must be set to “absolute-height”.<\/p>\n
Lines: Pipe diameter<\/h2>\n
The following sample demonstrates how to use PathSymbol3DLayer<\/a> to visualize 2D line data as 3D tubes. The Pipe_Diameter<\/strong> field in a service representing water pipelines contains the diameter of each pipe in inches. So we\u2019ll set the valueUnit<\/strong> property to “inches”.<\/p>\n
\nvar<\/span> renderer = new<\/span> SimpleRenderer({\n  symbol: new<\/span> LineSymbol3D({\n    symbolLayers: [new<\/span> PathSymbol3DLayer({\n      material: { color: \"blue\"<\/span> }\n    })]\n  }),\n  visualVariables: [{\n    type: \"size\"<\/span>,\n    field: \"Pipe_Diameter\"<\/span>,\n    valueUnit: \"inches\"<\/span>  \/\/converts and extrudes all data values in inches<\/span>\n  }]\n});\n<\/pre>\n
CLICK HERE TO VIEW THE LIVE SAMPLE<\/strong><\/a>
\n\"\"<\/a><\/p>\n
Points: Trees<\/h2>\n
Point data can be more complicated to visualize with real world sizes because they are represented as volumetric objects with various dimensions. An example is visualizing trees from point data. It would appear difficult to do considering each tree has a unique shape based on trunk height, width, and canopy size. However, thanks to the axis property on the size<\/a> visual variable, we can go a long way in representing real world tree size with just a few lines of code. <\/p>\n
In the following sample, we use a dataset of trees from Warren Wilson College. The dataset is complete with attributes for tree height, trunk diameter, and canopy diameter. As of the current release of the ArcGIS API for JavaScript (4.0), visual variables<\/a> are only supported when using one symbol layer per symbol. Support for assigning visual variables to specific symbol layers may be added in a future release of the API. For now, we’ll symbolize trees with two feature layers – one for trunks and one for the canopies.<\/p>\n
To depict trunks, we’ll use a cylinder primitive in an ObjectSymbol3DLayer<\/a>. Notice the trunk height is measured in feet, and the trunk diameter is measured in inches.<\/p>\n
\nvar<\/span> trunkRenderer = new<\/span> SimpleRenderer({\n  symbol: new<\/span> PointSymbol3D({\n    symbolLayers: [new<\/span> ObjectSymbol3DLayer({\n       material: { color: \"brown\"<\/span> },  \/\/color the trunk brown<\/span>\n       resource: { primitive: \"cylinder\"<\/span> }  \/\/give each the shape of a cylinder<\/span>\n    })]\n  }),\n  visualVariables: [\n   {\n     type: \"size\"<\/span>,\n     axis: \"height\"<\/span>,  \/\/ Set the size on the height axis<\/span>\n     field: \"Height\"<\/span>,  \/\/ Tree height in feet<\/span>\n     valueUnit: \"feet\"<\/span>  \/\/ converts and visualizes all sizes in feet<\/span>\n   }, {\n     type: \"size\"<\/span>,\n     axis: \"width-and-depth\"<\/span>,  \/\/ set the size on both width and depth axes<\/span>\n     field: \"DBH1\"<\/span>,  \/\/ Trunk diameter in inches<\/span>\n     valueUnit: \"inches\"<\/span>  \/\/ converts and visualizes all sizes in inches<\/span>\n   }\n  ]\n});\n<\/pre>\n
Then we’ll assign the following renderer to a separate layer pointing to the same point data to visualize the tree canopies. Notice that for canopies we make use of all three axes of the size visual variable with separate attributes on the ObjectSymbol3DLayer<\/a>. I’m also including a color<\/a> visual variable to visualize the carbon storage of each tree. <\/p>\n
\nvar<\/span> crownRenderer = new<\/span> SimpleRenderer({\n   symbol: new<\/span> PointSymbol3D({\n     symbolLayers: [new<\/span> ObjectSymbol3DLayer({\n       material: { color: \"green\"<\/span> },\n       resource: { primitive: \"sphere\"<\/span> }\n     })]\n   }),\n   visualVariables: [\n     {\n      type: \"size\"<\/span>,\n      axis: \"height\"<\/span>, \/\/ set the crown height on the height axis<\/span>\n      field: \"Crown_Height\"<\/span>, \/\/ Crown heights are expressed in feet<\/span>\n      valueUnit: \"feet\"<\/span> \/\/ converts and extrudes all data values in feet<\/span>\n    }, {\n      type: \"size\"<\/span>,\n      axis: \"width\"<\/span>, \/\/ set the crown diameter (east to west) to the width axis<\/span>\n      field: \"Width_EW\"<\/span>, \/\/ crown diameter (EW) is expressed in feet<\/span>\n      valueUnit: \"feet\"<\/span> \/\/ converts and extrudes all data values in feet<\/span>\n    }, {\n      type: \"size\"<\/span>,\n      axis: \"depth\"<\/span>, \/\/ set the crown diameter (north to south) to the depth axis<\/span>\n      field: \"Width_NS\"<\/span>, \/\/ crown diameter (NS) is expressed in feet<\/span>\n      valueUnit: \"feet\"<\/span> \/\/ converts and extrudes all data values in feet<\/span>\n    }, {\n      type: \"color\"<\/span>,\n      field: \"C_Storage\"<\/span>,  \/\/ Carbon storage<\/span>\n      stops: [\n        { value: 0<\/span>, color: \"#f7fcb9\"<\/span> },\n        { value: 800<\/span>, color: \"#31a354\"<\/span> }\n      ]\n    }\n   ]\n});\n<\/pre>\n
Since the elevationInfo<\/a> offset only takes numbers and not expressions, we cannot place the crown of each tree exactly where it was measured. For the purposes of this sample, I set a filter on tree height and assigned an offset of 6.5 meters to all tree crowns. This works well for most of the features even though it isn’t accurate for all trees in the map.<\/p>\n
\nelevationInfo: {\n  mode: \"relative-to-ground\"<\/span>,\n  offset: 6.5<\/span>\n}\n<\/pre>\n
CLICK HERE TO VIEW THE LIVE SAMPLE<\/strong><\/a>
\n\"\"<\/a><\/p>\n
This sample demonstrates that you can use visual variables to render real-world sizes of objects combined with a color ramp to create a hybrid thematic visualization that provides context to how features look in the real world. Again, a future release of the API may allow for creating this application without requiring the use of two separate feature layers.<\/p>\n
Subsurface rendering: Wells and earthquakes<\/h2>\n
The viewingMode<\/a> of a SceneView<\/a> allows for creating local scenes instead of the default global scene. Local scenes allow for localized subsurface mapping. The following sample comes directly from the Samples page<\/a> of the ArcGIS API for JavaScript API reference.<\/p>\n
In this sample<\/a> we have two layers of point data: oil\/gas wells and earthquakes. The goal is to map the location of the epicenter of each earthquake, symbolize its size thematically based on magnitude, and depict the actual depth of nearby oil and gas wells. Because this sample is a little more complex, I’ll only focus on the rendering of the subsurface features.<\/p>\n
Since the earthquake service has z-values, features are automatically placed in their proper location as long as returnZ<\/a> is set to true on the layer. Now we can use visual variables to alter the size of each sphere based on the magnitude of the quake:<\/p>\n
\nvar<\/span> quakesRenderer = new<\/span> SimpleRenderer({\n  symbol: new<\/span> PointSymbol3D({\n    symbolLayers:[new<\/span> ObjectSymbol3DLayer({\n      resource:{ primitive: \"sphere\"<\/span> }\n    })]\n  }),\n  visualVariables: [{\n     type: \"size\"<\/span>,\n     field: \"mag\"<\/span>,\n     axis: \"all\"<\/span>,\n     stops: [\n       { value: 2<\/span>, size: 100<\/span> },\n       { value: 5<\/span>, size: 2000<\/span> }\n     ]\n  }]\n});\n<\/pre>\n
Wells are treated a little differently since they can be represented as shafts or vertical lines.  Instead of spheres, we\u2019ll use cylinders to represent them. We\u2019ll add a size visual variable on the height axis and set the min and max sizes to negative values so the cylinders will render underground to the actual depths of each well.<\/p>\n
We\u2019ll also set a size visual variable on the width axis to a constant value of 50 meters. I exaggerated this value from the actual width of each well so they will be easily visible in the view.<\/p>\n
\nvar<\/span> wellsDepthRenderer = new<\/span> SimpleRenderer({\n  symbol: new<\/span> PointSymbol3D({\n    symbolLayers: [new<\/span> ObjectSymbol3DLayer({\n      resource: { primitive: \"cylinder\"<\/span> },\n      width: 50<\/span>\n    })]\n  }),\n  visualVariables: [{\n    type: \"size\"<\/span>,\n    field: \"DEPTH\"<\/span>,  \/\/ depth measured in feet<\/span>\n    axis: \"height\"<\/span>,\n    stops: [ \/\/ negative values ensure the features are rendered underground<\/span>\n      { value: 1<\/span>, size: -0.3048<\/span> },\n      { value: 10000<\/span>, size: -3048<\/span> }\n    ]\n  }, {\n    type: \"size\"<\/span>,\n    axis: \"width\"<\/span>,\n    useSymbolValue: true<\/span>  \/\/ sets the width to 50m<\/span>\n  }]\n});\n<\/pre>\n
When viewing the live sample, you will need to be familiar with SceneView mouse navigation<\/a> to view the features under the surface.<\/p>\n
CLICK HERE TO VIEW THE LIVE SAMPLE<\/strong><\/a>
\n\"\"<\/a><\/p>\n
Whether it\u2019s mapping features with their real-world locations and sizes or creating thematic representations of statistical data, using visual variables with 3D symbols in the 4.0 ArcGIS API for JavaScript<\/a> allows you to easily make impressive 3D visualizations.<\/p>\n
Note that using visual variables requires that you know your data, especially when creating thematic visualizations. Smart Mapping will be included in a future 4.x release of the the ArcGIS API for JavaScript<\/a>, which will allow you to create exploratory 3D visualizations.<\/p>\n
To view all posts related to this series, click here<\/a>.<\/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":""}]},"yoast_head":"\n3D visualization: Using attributes to represent real-world sizes of features<\/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-using-attributes-to-represent-real-world-sizes-of-features\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3D visualization: Using attributes to represent real-world sizes of features\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features\" \/>\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=\"2018-03-26T21:07:44+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-using-attributes-to-represent-real-world-sizes-of-features#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"3D visualization: Using attributes to represent real-world sizes of features\",\"datePublished\":\"2016-02-01T11:11:21+00:00\",\"dateModified\":\"2018-03-26T21:07:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features\"},\"wordCount\":10,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"3D\",\"3D visualization\",\"JavaScript\",\"jsapi4\",\"rendering\",\"smart mapping\",\"Visualization\",\"visualVariables\",\"web GIS\"],\"articleSection\":[\"3D Visualization & Analytics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features\",\"name\":\"3D visualization: Using attributes to represent real-world sizes of features\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2016-02-01T11:11:21+00:00\",\"dateModified\":\"2018-03-26T21:07:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3D visualization: Using attributes to represent real-world sizes of features\"}]},{\"@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: Using attributes to represent real-world sizes of features","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-using-attributes-to-represent-real-world-sizes-of-features","og_locale":"en_US","og_type":"article","og_title":"3D visualization: Using attributes to represent real-world sizes of features","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-03-26T21:07:44+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-using-attributes-to-represent-real-world-sizes-of-features#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"3D visualization: Using attributes to represent real-world sizes of features","datePublished":"2016-02-01T11:11:21+00:00","dateModified":"2018-03-26T21:07:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features"},"wordCount":10,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["3D","3D visualization","JavaScript","jsapi4","rendering","smart mapping","Visualization","visualVariables","web GIS"],"articleSection":["3D Visualization & Analytics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features","name":"3D visualization: Using attributes to represent real-world sizes of features","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2016-02-01T11:11:21+00:00","dateModified":"2018-03-26T21:07:44+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"3D visualization: Using attributes to represent real-world sizes of features"}]},{"@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":"February 1, 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"},{"term_id":24961,"name":"web GIS","slug":"web-gis","term_group":0,"term_taxonomy_id":24961,"taxonomy":"post_tag","description":"","parent":0,"count":19,"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":361,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":761,"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\/70711","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=70711"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/70711\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=70711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=70711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=70711"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=70711"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=70711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
These features don\u2019t appear at their true location underground since they don’t contain z-values. To make the features easier to view, I gave the layer an offset of 20 meters above the ground using the elevationInfo<\/a> property of the layer.<\/p>\n
CLICK HERE TO VIEW THE LIVE SAMPLE<\/strong><\/a>
\n\"\"<\/a><\/p>\n