{"id":70611,"date":"2016-01-11T10:00:01","date_gmt":"2016-01-11T10:00:01","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/multivariate-rendering-2d-visualization-techniques-in-javascript\/"},"modified":"2018-05-25T22:39:12","modified_gmt":"2018-05-25T22:39:12","slug":"multivariate-rendering-2d-visualization-techniques-in-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript","title":{"rendered":"Multivariate Rendering \u2013  2D visualization techniques in JavaScript"},"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":[22941],"tags":[25771,23201,24921,29541,24581,26521,29551],"industry":[],"product":[36831,36601],"class_list":["post-70611","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-2d","tag-cartographic-design","tag-javascript","tag-rendering","tag-smart-mapping","tag-visualization","tag-visualvariables","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Smart Mapping was added to the ArcGIS API for JavaScript in version 3.13 to provide web developers with an easy way to generate renderers...","flexible_content":[{"acf_fc_layout":"content","content":"<p><a href=\"http:\/\/blogs.esri.com\/esri\/arcgis\/2015\/03\/02\/introducing-smart-mapping\/\">Smart Mapping<\/a> was added to the <a href=\"https:\/\/developers.arcgis.com\/javascript\/\">ArcGIS API for JavaScript<\/a> in version 3.13 to provide web developers with an easy way to generate renderers with smart, visually pleasing defaults based on data distribution and the basemap.<\/p>\n<p>This new module helps take some of the guesswork out of an otherwise complicated workflow for defining how color and size should be used to visualize attributes. In addition to the renderer generators, <a href=\"http:\/\/www.esri.com\/software\/arcgis\/smart-mapping\">Smart Mapping<\/a> introduced <a href=\"https:\/\/developers.arcgis.com\/javascript\/jsapi\/renderer-amd.html#visualvariables\">visual variables<\/a> as an easy way to define color, size and opacity ramps for visualizing numeric data. These ramps can be continuous by setting minimum and maximum values, or they can be used to define class breaks using stops.<\/p>\n<p>What makes visual variables particularly powerful is the ability to create visually appealing multivariate thematic maps with just a few lines of code. The following samples demonstrate how visual variables can enhance the story of your map by unearthing the power of multiple variables in a single visualization.<\/p>\n<h2>Visualize one variable with color<\/h2>\n<p>The sample below uses a <a href=\"https:\/\/developers.arcgis.com\/javascript\/jsapi\/uniquevaluerenderer-amd.html\">UniqueValueRenderer<\/a> to shade each county in the U.S. with one of two colors \u2013 green or purple. Green features are counties where the majority of adults (25 years of age or older) attended at least some college in their lifetime. Counties shaded with purple are areas where the number of adults who never attended any college outnumbers those who attended at least some college.<\/p>\n<p><a href=\"http:\/\/ekenes.github.io\/esri-js-samples\/renderer-predominance\/college-attendance\/win-c-2.html\"><strong>CLICK HERE TO VIEW THE SAMPLE<\/strong><\/a><br \/>\n<a href=\"http:\/\/ekenes.github.io\/esri-js-samples\/renderer-predominance\/college-attendance\/win-c-2.html\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-58479\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2016\/01\/one-variable.png\" alt=\"Shaded by whether or not the majority of adults attended at least some college\" width=\"673\" height=\"485\" \/><\/a><\/p>\n<p>While spatial trends are immediately apparent, this visualization only tells part of the story of the geography of adults who attended at least some college in the United States. The only variable considered here is whether one group outnumbers the other in each county. Considerations such as population and the strength of the majority in each county are ignored, leaving the user to click on individual counties to find those statistics on their own.<\/p>\n<p>For example, zoom to the Cincinnati, Ohio area. Click on several counties in the area and observe the pie chart and overall numbers. Some counties have a much higher percentage of adults who attended college and others have a much lower percentage. Some have a near-equal mix of the two. The differences between these features aren&#8217;t immediately apparent to the user with color as the lone variable.<\/p>\n<h2>Visualize two variables with color and opacity<\/h2>\n<p>To enhance this map, we&#8217;ll add a <a href=\"https:\/\/developers.arcgis.com\/javascript\/jsapi\/renderer-amd.html#visualvariables\">visual variable<\/a> to the renderer. All that&#8217;s required is the type of visualization, the field, and a set of values from which to stretch the colors, opacity, or size between two values in the data. If a feature contains a value greater than the maximum data value, it will be assigned the highest color, size, or opacity value defined in the visual variable. Features with data values smaller than the minimum are assigned the minimum visualization values.<\/p>\n<p>In the sample above, we already make use of color, so we&#8217;ll include an <a href=\"https:\/\/developers.arcgis.com\/javascript\/jsapi\/renderer-amd.html#opacityinfo\">opacityInfo<\/a> visual variable to add a second dimension to this visualization. Because opacity is good for depicting strength, we\u2019ll use it to show the strength of the majority population in each county. We\u2019ll shade features with full opacity if the majority group (either attended college or did not attend college) outnumbers the minority 3:1 or makes up at least 75% of the total adult population.<\/p>\n<p>If the majority barely outnumbers the minority, we\u2019ll make the feature very transparent. In this case if the majority makes up 51% of the total adult population, we\u2019ll give it 10% opacity so we can still observe the color of the feature.<\/p>\n<pre>renderer.setVisualVariables([{\r\n&nbsp;&nbsp;type: <span style=\"color: #d14\">\"opacityInfo\"<\/span>,\r\n&nbsp;&nbsp;field: <span style=\"color: #d14\">\"ATE_COL_DOM_PER\"<\/span>,\r\n&nbsp;&nbsp;stops: [{ value: <span style=\"color: #008080\">50<\/span>, opacity: <span style=\"color: #008080\">0.1<\/span>}, { value: <span style=\"color: #008080\">75<\/span>, opacity: <span style=\"color: #008080\">1<\/span>}]\r\n}]); <\/pre>\n<p><a href=\"http:\/\/ekenes.github.io\/esri-js-samples\/renderer-predominance\/college-attendance\/win-c_dom-o-2.html\"><strong>CLICK HERE TO VIEW THE SAMPLE<\/strong><\/a><br \/>\n<a href=\"http:\/\/ekenes.github.io\/esri-js-samples\/renderer-predominance\/college-attendance\/win-c_dom-o-2.html\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-58481\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2016\/01\/two-var.png\" alt=\"Opacity reveals the strength of the majority variable: attended some college vs. those who didn't\" width=\"806\" height=\"569\" \/><\/a><\/p>\n<p>This visualization is much better. We can immediately observe a spatial pattern: the Texas \u2013 Mexico border and counties in the Appalachian region of the southern and eastern United States are areas where adults who didn\u2019t attend college not only outnumber those who did attend, but outnumber by a wide margin.<\/p>\n<p>On the other hand, it\u2019s not immediately apparent if a similar spatial trend exists in counties where adults who attended college significantly outnumber those who didn\u2019t.<\/p>\n<h2>Visualize a third variable with size<\/h2>\n<p>Adding opacity allows the user to gain a better understanding of how dominant the majority is among competing attributes. But we still don\u2019t get a sense of how the overall numbers in one county compare to others nearby or in other parts of the country.<\/p>\n<p>To gain additional insight into our data, we\u2019ll add a <a href=\"https:\/\/developers.arcgis.com\/javascript\/jsapi\/renderer-amd.html#sizeinfo\">sizeInfo<\/a> visual variable to visualize the adult population in each county.<\/p>\n<pre>\r\n<span style=\"color: #333;font-weight: bold\">var<\/span> sizeVisVar = {\r\n  type: <span style=\"color: #d14\">\"sizeInfo\"<\/span>,\r\n  field: <span style=\"color: #d14\">\"EDUCBASECY\"<\/span>, <span style=\"color: #998;font-style: italic\">\/\/total adult population 25 years and older<\/span>\r\n  minDataValue: <span style=\"color: #008080\">10000<\/span>, <span style=\"color: #998;font-style: italic\">\/\/counties with &lt; 10,000 adults will be assigned the min size <\/span>\r\n  maxDataValue: <span style=\"color: #008080\">1000000<\/span>, <span style=\"color: #998;font-style: italic\">\/\/counties with &gt; 1,000,000 adults will be assigned the max size<\/span>\r\n  valueUnit: <span style=\"color: #d14\">\"unknown\"<\/span>,\r\n  minSize: {\r\n    type: <span style=\"color: #d14\">\"sizeInfo\"<\/span>,\r\n    expression: <span style=\"color: #d14\">\"view.scale\"<\/span>,\r\n    <span style=\"color: #998;font-style: italic\">\/\/The min size of the symbol varies depending on the map scale<\/span>\r\n    stops: [\r\n      { value: <span style=\"color: #008080\">250000000<\/span>, size: <span style=\"color: #008080\">6<\/span> },\r\n      { value: <span style=\"color: #008080\">6000000<\/span>, size: <span style=\"color: #008080\">6<\/span> }, <span style=\"color: #998;font-style: italic\">\/\/at a 1:6,000,000 scale, the min size is 6px<\/span>\r\n      { value: <span style=\"color: #008080\">1000000<\/span>, size: <span style=\"color: #008080\">4<\/span> },\r\n      { value: <span style=\"color: #008080\">200000<\/span>, size: <span style=\"color: #008080\">2<\/span> },\r\n      { value: <span style=\"color: #008080\">1000<\/span>, size: <span style=\"color: #008080\">2<\/span> }\r\n    ]\r\n  },\r\n  maxSize: {\r\n    type: <span style=\"color: #d14\">\"sizeInfo\"<\/span>,\r\n    expression: <span style=\"color: #d14\">\"view.scale\"<\/span>,\r\n    <span style=\"color: #998;font-style: italic\">\/\/The max size of the symbol varies depending on the map scale<\/span>\r\n    stops: [\r\n      { value: <span style=\"color: #008080\">250000000<\/span>, size: <span style=\"color: #008080\">50<\/span> },\r\n      { value: <span style=\"color: #008080\">6000000<\/span>, size: <span style=\"color: #008080\">50<\/span> }, <span style=\"color: #998;font-style: italic\">\/\/at a 1:6,000,000 scale, the max size is 50px<\/span>\r\n      { value: <span style=\"color: #008080\">1000000<\/span>, size: <span style=\"color: #008080\">40<\/span> },\r\n      { value: <span style=\"color: #008080\">200000<\/span>, size: <span style=\"color: #008080\">20<\/span> },\r\n      { value: <span style=\"color: #008080\">1000<\/span>, size: <span style=\"color: #008080\">10<\/span> }\r\n    ]\r\n  }\r\n};\r\n<\/pre>\n<p><a href=\"http:\/\/ekenes.github.io\/esri-js-samples\/visual-variables\/college.html\"><strong>CLICK HERE TO VIEW THE SAMPLE<\/strong><\/a><br \/>\n<a href=\"http:\/\/ekenes.github.io\/esri-js-samples\/visual-variables\/college.html\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-58480\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2016\/01\/three-var.png\" alt=\"Visual variables reveal stunning spatial patterns\" width=\"770\" height=\"546\" \/><\/a><\/p>\n<p>This allows us to gain a better understanding of how data in each feature compares to other features. The largest circles indicate counties with more than one million adults. With a few exceptions such as the Bronx, New York and Philadelphia, Pennsylvania the clear trend shows that urban counties are mostly populated by adults who have attended at least some college. The counties that are dominated by adults who haven\u2019t attended college tend to be geographically rural and sparsely populated.<\/p>\n<p>As evidenced by the sample applications above, visual variables provide the ability to easily create multivariate maps that can depict two or three numeric attributes using color, opacity, and size.<\/p>\n<p>Stay tuned in the following weeks for a three part blog series exploring 3D visualization techniques using visual variables in a SceneView with the <a href=\"https:\/\/developers.arcgis.com\/javascript\/beta\/index.html\">4.0 beta 3 version of the API<\/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":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":"","card_image":false,"wide_image":false},"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>Multivariate Rendering \u2013 2D visualization techniques in JavaScript<\/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\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Multivariate Rendering \u2013 2D visualization techniques in JavaScript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript\" \/>\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-05-25T22:39:12+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\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Multivariate Rendering \u2013 2D visualization techniques in JavaScript\",\"datePublished\":\"2016-01-11T10:00:01+00:00\",\"dateModified\":\"2018-05-25T22:39:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"2D\",\"cartographic design\",\"JavaScript\",\"rendering\",\"smart mapping\",\"Visualization\",\"visualVariables\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript\",\"name\":\"Multivariate Rendering \u2013 2D visualization techniques in JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2016-01-11T10:00:01+00:00\",\"dateModified\":\"2018-05-25T22:39:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Multivariate Rendering \u2013 2D visualization techniques in JavaScript\"}]},{\"@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":"Multivariate Rendering \u2013 2D visualization techniques in JavaScript","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\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript","og_locale":"en_US","og_type":"article","og_title":"Multivariate Rendering \u2013 2D visualization techniques in JavaScript","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-05-25T22:39:12+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\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Multivariate Rendering \u2013 2D visualization techniques in JavaScript","datePublished":"2016-01-11T10:00:01+00:00","dateModified":"2018-05-25T22:39:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript"},"wordCount":7,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["2D","cartographic design","JavaScript","rendering","smart mapping","Visualization","visualVariables"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript","name":"Multivariate Rendering \u2013 2D visualization techniques in JavaScript","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2016-01-11T10:00:01+00:00","dateModified":"2018-05-25T22:39:12+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/multivariate-rendering-2d-visualization-techniques-in-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Multivariate Rendering \u2013 2D visualization techniques in JavaScript"}]},{"@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 11, 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":25771,"name":"2D","slug":"2d","term_group":0,"term_taxonomy_id":25771,"taxonomy":"post_tag","description":"","parent":0,"count":6,"filter":"raw"},{"term_id":23201,"name":"cartographic design","slug":"cartographic-design","term_group":0,"term_taxonomy_id":23201,"taxonomy":"post_tag","description":"","parent":0,"count":332,"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":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":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2683,"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\/70611","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=70611"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/70611\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=70611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=70611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=70611"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=70611"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=70611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}