{"id":591782,"date":"2019-08-27T08:00:57","date_gmt":"2019-08-27T15:00:57","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=591782"},"modified":"2020-08-14T17:00:02","modified_gmt":"2020-08-15T00:00:02","slug":"make-your-histogram-legendary","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary","title":{"rendered":"Make your histogram legendary"},"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":[30111,36141,368772,24581,401302],"industry":[],"product":[36831,36601],"class_list":["post-591782","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-data-visualization","tag-histogram","tag-legend","tag-smart-mapping","tag-whats-new-june-2019","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Add additional meaning and context to your data-driven map using a colored histogram instead of a legend.","flexible_content":[{"acf_fc_layout":"content","content":"

Data-driven maps, or any data-visualization for that matter, need some kind of a legend to help the map reader interpret the visual. Without it, the map is just a pretty picture with no informational value. The ArcGIS API for JavaScript<\/a> (ArcGIS JS API) comes equipped with an out-of-the-box Legend<\/a> widget that works across a variety of layer and renderer types to effectively communicate the meaning of a map’s symbols and colors.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":591972,"id":591972,"title":"intro-no-lenged","filename":"intro-no-lenged.png","filesize":217868,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-no-lenged.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/intro-no-lenged","alt":"Map without a legend","author":"6561","description":"","caption":"Without a legend, this map is pretty useless and will leave your audience scratching their heads.","name":"intro-no-lenged","status":"inherit","uploaded_to":591782,"date":"2019-08-22 23:49:48","modified":"2019-08-22 23:51:03","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1166,"height":724,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-no-lenged-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-no-lenged.png","medium-width":420,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-no-lenged.png","medium_large-width":768,"medium_large-height":477,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-no-lenged.png","large-width":1166,"large-height":724,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-no-lenged.png","1536x1536-width":1166,"1536x1536-height":724,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-no-lenged.png","2048x2048-width":1166,"2048x2048-height":724,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-no-lenged-749x465.png","card_image-width":749,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-no-lenged.png","wide_image-width":1166,"wide_image-height":724}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/KKPaEWm\/left?editors=0010"},{"acf_fc_layout":"image","image":{"ID":592002,"id":592002,"title":"intro-legend","filename":"intro-legend.png","filesize":202358,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-legend.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/intro-legend","alt":"Legends provide needed context to a map.","author":"6561","description":"","caption":"The legend provides the context needed to read the map effectively.","name":"intro-legend","status":"inherit","uploaded_to":591782,"date":"2019-08-22 23:51:19","modified":"2019-08-22 23:52:18","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1067,"height":722,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-legend-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-legend.png","medium-width":386,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-legend.png","medium_large-width":768,"medium_large-height":520,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-legend.png","large-width":1067,"large-height":722,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-legend.png","1536x1536-width":1067,"1536x1536-height":722,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-legend.png","2048x2048-width":1067,"2048x2048-height":722,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-legend-687x465.png","card_image-width":687,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-legend.png","wide_image-width":1067,"wide_image-height":722}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/PoYWLpq\/left?editors=0010"},{"acf_fc_layout":"content","content":"

Sometimes users want more than a basic legend. They may ask questions about outliers, the spread of the data, and the number of features within a particular range. At version 4.12 (released in July 2019<\/a>), the ArcGIS JS API provides developers with a highly configurable Histogram<\/a> widget that can be used as a legend with interactive components. <\/p>\n

The following app<\/a> renders the same map with a histogram styled using the color scheme of the layer’s renderer.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":592012,"id":592012,"title":"intro-histogram","filename":"intro-histogram.png","filesize":204274,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-histogram.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/intro-histogram","alt":"A histogram can provide more insight to your users than a legend","author":"6561","description":"","caption":"Adding a histogram with columns colored using the renderer makes it significantly easier to communicate the distribution and density of the data.","name":"intro-histogram","status":"inherit","uploaded_to":591782,"date":"2019-08-22 23:52:35","modified":"2019-08-26 18:40:38","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1015,"height":720,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-histogram-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-histogram.png","medium-width":368,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-histogram.png","medium_large-width":768,"medium_large-height":545,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-histogram.png","large-width":1015,"large-height":720,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-histogram.png","1536x1536-width":1015,"1536x1536-height":720,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-histogram.png","2048x2048-width":1015,"2048x2048-height":720,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-histogram-656x465.png","card_image-width":656,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/intro-histogram.png","wide_image-width":1015,"wide_image-height":720}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/BaBpvRm\/left?editors=0010"},{"acf_fc_layout":"content","content":"

The colored histogram does a better job at communicating the range<\/a> of the data, the spread<\/a>, and how outliers<\/a> may affect the visualization. It is particularly good at communicating asymmetric or skewed<\/a> datasets. Asymmetric patterns are lost in the traditional Legend widget because the Legend depicts all color ramps the same way regardless of how close or far apart the min and max values are from the mean.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":592062,"id":592062,"title":"skewed-data","filename":"skewed-data.png","filesize":66068,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/skewed-data.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/skewed-data","alt":"","author":"6561","description":"","caption":"The data in his map is heavily skewed to the right. More features fall in blue bins, and the range of the blue features is about three times wider than the range of the orange features. The histogram effectively communicates this while the default Legend widget does not.","name":"skewed-data","status":"inherit","uploaded_to":591782,"date":"2019-08-22 23:57:25","modified":"2019-08-23 21:40:53","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":723,"height":500,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/skewed-data-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/skewed-data.png","medium-width":377,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/skewed-data.png","medium_large-width":723,"medium_large-height":500,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/skewed-data.png","large-width":723,"large-height":500,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/skewed-data.png","1536x1536-width":723,"1536x1536-height":500,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/skewed-data.png","2048x2048-width":723,"2048x2048-height":500,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/skewed-data-672x465.png","card_image-width":672,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/skewed-data.png","wide_image-width":723,"wide_image-height":500}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/KKPaJaP\/left?editors=0010"},{"acf_fc_layout":"content","content":"

This post will walk you through the process of how to create a legendary histogram for any continuous color visualization.<\/p>\n

Display a basic Histogram<\/h2>\n

The Histogram<\/a> widget provides a simple API for displaying data in a histogram. The API requires you to specify the histogram’s minimum and maximum value, and an array of bins, each with a minimum and maximum bound along with a count. <\/p>\n

Click the image below to open a CodePen and play with the code.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":978062,"id":978062,"title":"Screen Shot 2020-08-14 at 4.58.01 PM","filename":"Screen-Shot-2020-08-14-at-4.58.01-PM.png","filesize":90846,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2020-08-14-at-4.58.01-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/screen-shot-2020-08-14-at-4-58-01-pm","alt":"","author":"6561","description":"","caption":"","name":"screen-shot-2020-08-14-at-4-58-01-pm","status":"inherit","uploaded_to":591782,"date":"2020-08-14 23:58:16","modified":"2020-08-14 23:58:16","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2192,"height":1068,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2020-08-14-at-4.58.01-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2020-08-14-at-4.58.01-PM.png","medium-width":464,"medium-height":226,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2020-08-14-at-4.58.01-PM.png","medium_large-width":768,"medium_large-height":374,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2020-08-14-at-4.58.01-PM.png","large-width":1920,"large-height":935,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2020-08-14-at-4.58.01-PM-1536x748.png","1536x1536-width":1536,"1536x1536-height":748,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2020-08-14-at-4.58.01-PM-2048x998.png","2048x2048-width":2048,"2048x2048-height":998,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2020-08-14-at-4.58.01-PM-826x402.png","card_image-width":826,"card_image-height":402,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2020-08-14-at-4.58.01-PM-1920x935.png","wide_image-width":1920,"wide_image-height":935}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/bGbgWvb?editors=0010"},{"acf_fc_layout":"content","content":"

After seeing that code snippet, you may ask: Do I really have to manually specify all of those bins? What if I want a more detailed histogram with 100 bins?<\/em> <\/p>\n

The ArcGIS JS API has you covered.<\/p>\n

You can take advantage of the histogram<\/a> function for generating histograms based on a field value in a layer, or even the result of an Arcade expression<\/a>.<\/p>\n

That’s what the following app<\/a> does.<\/p>\n

\r\nhistogram({\r\n  layer: layer,\r\n  field: \"MEDHINC_CY\"<\/span>,\r\n  \/\/ an Arcade expression can also go here<\/span>\r\n  \/\/ in the valueExpression param<\/span>\r\n  numBins: 100<\/span>\r\n}).then(function<\/span>(histogramResult<\/span>)<\/span>{\r\n  \/\/ convenience function on Histogram widget for<\/span>\r\n  \/\/ constructing the widget based on histogram result<\/span>\r\n  const<\/span> histogramChart = Histogram.fromHistogramResult(histogramResult);\r\n  histogramChart.container = \"histogramDiv\"<\/span>;\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":592472,"id":592472,"title":"basic","filename":"basic.png","filesize":197628,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/basic","alt":"Map with histogram","author":"6561","description":"","caption":"","name":"basic","status":"inherit","uploaded_to":591782,"date":"2019-08-23 18:42:10","modified":"2019-08-23 18:42:26","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1006,"height":698,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic.png","medium-width":376,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic.png","medium_large-width":768,"medium_large-height":533,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic.png","large-width":1006,"large-height":698,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic.png","1536x1536-width":1006,"1536x1536-height":698,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic.png","2048x2048-width":1006,"2048x2048-height":698,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic-670x465.png","card_image-width":670,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic.png","wide_image-width":1006,"wide_image-height":698}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/WNeRLbd\/left?editors=0010"},{"acf_fc_layout":"content","content":"
Add more context<\/h2>\n
Now histogram bins are rendered in the view! However, a histogram without labels is kind of like a map without a legend.? We can add more context to the histogram by adding an average line<\/a> or any other data line<\/a> to indicate meaningful values in the dataset.<\/p>\n
\r\n\/\/ Add more context to your histogram with average<\/span>\r\n\/\/ and data lines<\/span>\r\nhistogramChart.average = 85444<\/span>;\r\nhistogramChart.dataLines = [{\r\n  value: 25750<\/span>,\r\n  label: \"Federal Poverty Line\"<\/span>\r\n}];\r\n\r\n\/\/ The labelFormatFunction allows you to customize<\/span>\r\n\/\/ the formatting of numeric values<\/span>\r\nhistogramChart.labelFormatFunction = function<\/span> (value<\/span>) <\/span>{\r\n  return<\/span> intl.formatNumber(value, {\r\n    style: \"currency\"<\/span>,\r\n    currency: \"USD\"<\/span>,\r\n    currencyDisplay: \"symbol\"<\/span>,\r\n    minimumFractionDigits: 0<\/span>,\r\n    maximumFractionDigits: 0<\/span>\r\n  });\r\n};\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":592492,"id":592492,"title":"basic-labels","filename":"basic-labels.png","filesize":206854,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic-labels.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/basic-labels","alt":"","author":"6561","description":"","caption":"Data lines and labels add needed context to a histogram.","name":"basic-labels","status":"inherit","uploaded_to":591782,"date":"2019-08-23 18:57:05","modified":"2019-08-23 18:57:30","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1070,"height":694,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic-labels-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic-labels.png","medium-width":402,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic-labels.png","medium_large-width":768,"medium_large-height":498,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic-labels.png","large-width":1070,"large-height":694,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic-labels.png","1536x1536-width":1070,"1536x1536-height":694,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic-labels.png","2048x2048-width":1070,"2048x2048-height":694,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic-labels-717x465.png","card_image-width":717,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/basic-labels.png","wide_image-width":1070,"wide_image-height":694}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/gOYgZbg\/left?editors=0010"},{"acf_fc_layout":"content","content":"
The Histogram doesn\u2019t come with default labels. You can use the min and max values of the Histogram widget and display them below the histogram container to provide additional context to the user.<\/p>\n
Color the bars to match the map<\/h2>\n
Now we have histogram bins with labels and data lines. But we still need a legend so the user can make sense of the colors in this map. Rather than take up more space with a legend, we can style the bars of the histogram to match our data.<\/p>\n
The Histogram’s barCreatedFunction<\/a> property allows us to do this. The barCreatedFunction<\/code> is called each time a bar element is created. It takes a bar element as a parameter, allowing you to style it and add interaction to each bar with event handlers. This is particularly powerful for data exploration applications.<\/p>\n
The renderer for the layer in the example above visualizes median household income using a color visual variable<\/a>. The color variable defines a continuous color ramp, assigning colors to various data points (or stops<\/a>) and interpolates colors for features whose values lie between the given stops. You can observe this color transition in the Legend<\/a> widget.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":593072,"id":593072,"title":"Screen Shot 2019-08-23 at 2.54.57 PM","filename":"Screen-Shot-2019-08-23-at-2.54.57-PM.png","filesize":4474,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-2.54.57-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/screen-shot-2019-08-23-at-2-54-57-pm","alt":"","author":"6561","description":"","caption":"","name":"screen-shot-2019-08-23-at-2-54-57-pm","status":"inherit","uploaded_to":591782,"date":"2019-08-23 21:55:23","modified":"2019-08-23 21:55:23","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":220,"height":130,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-2.54.57-PM-213x130.png","thumbnail-width":213,"thumbnail-height":130,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-2.54.57-PM.png","medium-width":220,"medium-height":130,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-2.54.57-PM.png","medium_large-width":220,"medium_large-height":130,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-2.54.57-PM.png","large-width":220,"large-height":130,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-2.54.57-PM.png","1536x1536-width":220,"1536x1536-height":130,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-2.54.57-PM.png","2048x2048-width":220,"2048x2048-height":130,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-2.54.57-PM.png","card_image-width":220,"card_image-height":130,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-2.54.57-PM.png","wide_image-width":220,"wide_image-height":130}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
Coloring the histogram to match the data (and effectively replacing the legend) takes a little extra work. Since each bin represents a range of data, I calculate the middle value of that range and use the Color.blendColors<\/a> method to determine the color that value would be assigned for a given color visual variable. The following snippet uses this technique to set this color to bar element’s fill attribute.<\/p>\n
\r\n\/\/ Color the histogram to match the features in the map<\/span>\r\nhistogramChart.barCreatedFunction = function<\/span>(index, element<\/span>) <\/span>{\r\n  const<\/span> bin = histogramChart.bins[index];\r\n  const<\/span> midValue = (bin.maxValue - bin.minValue) \/ 2<\/span> + bin.minValue;\r\n  const<\/span> color = getColorFromValue(vv.stops, midValue);\r\n  element.setAttribute(\"fill\"<\/span>, color.toHex());\r\n};\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":592522,"id":592522,"title":"colored-bars","filename":"colored-bars.png","filesize":221299,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/colored-bars.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/colored-bars","alt":"","author":"6561","description":"","caption":"A labeled histogram colored to match a layer's renderer can powerfully communicate the story you want to tell with your data.","name":"colored-bars","status":"inherit","uploaded_to":591782,"date":"2019-08-23 19:30:21","modified":"2019-08-23 19:31:13","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1094,"height":701,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/colored-bars-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/colored-bars.png","medium-width":407,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/colored-bars.png","medium_large-width":768,"medium_large-height":492,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/colored-bars.png","large-width":1094,"large-height":701,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/colored-bars.png","1536x1536-width":1094,"1536x1536-height":701,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/colored-bars.png","2048x2048-width":1094,"2048x2048-height":701,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/colored-bars-726x465.png","card_image-width":726,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/colored-bars.png","wide_image-width":1094,"wide_image-height":701}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/BaBpvRm\/left?editors=0010"},{"acf_fc_layout":"content","content":"
That certainly makes the visual more interesting for the end user. The following function determines how a color is inferred for a given value in a histogram bin.<\/p>\n
\r\n\/\/ infers the color for a given var<\/span>\r\n\/\/ based on the stops from a ColorVariable<\/span>\r\nfunction<\/span> getColorForValue<\/span>(stops, value<\/span>) <\/span>{\r\n  let<\/span> minStop = stops[0<\/span>];\r\n  let<\/span> maxStop = stops[stops.length - 1<\/span>];\r\n\r\n  const<\/span> minStopValue = minStop.value;\r\n  const<\/span> maxStopValue = maxStop.value;\r\n\r\n  if<\/span> (value < minStopValue) {\r\n    return<\/span> minStop.color;\r\n  }\r\n\r\n  if<\/span> (value > maxStopValue) {\r\n    return<\/span> maxStop.color;\r\n  }\r\n\r\n  const<\/span> exactMatches = stops.filter(function<\/span>(stop<\/span>) <\/span>{\r\n    return<\/span> stop.value === value;\r\n  });\r\n\r\n  if<\/span> (exactMatches.length > 0<\/span>) {\r\n    return<\/span> exactMatches[0<\/span>].color;\r\n  }\r\n\r\n  minStop = null<\/span>;\r\n  maxStop = null<\/span>;\r\n  stops.forEach(function<\/span>(stop, i<\/span>) <\/span>{\r\n    if<\/span> (!minStop && !maxStop && stop.value >= value) {\r\n      minStop = stops[i - 1<\/span>];\r\n      maxStop = stop;\r\n    }\r\n  });\r\n\r\n  const<\/span> weightedPosition =\r\n    (value - minStop.value) \/ (maxStop.value - minStop.value);\r\n\r\n  \/\/ esri\/Color<\/span>\r\n  return<\/span> Color.blendColors(\r\n    minStop.color,\r\n    maxStop.color,\r\n    weightedPosition\r\n  );\r\n}\r\n<\/code><\/pre>\n
Add interaction to the Histogram<\/h2>\n
Once you have access to the histogram bar elements, you can do a lot more to add interactivity to the visualization.<\/p>\n
It\u2019s natural for users to ask which features on the map fall within specific histogram bins. You can provide this capability to your users by adding event listeners to the bar elements. <\/p>\n
In the example below, I added an event listener to each bar so that when focused, only the features that pertain to the corresponding data bin are displayed in the map.<\/p>\n
\r\n\/\/ Color the histogram to match the features in the map<\/span>\r\nhistogramChart.barCreatedFunction = function<\/span>(index, element<\/span>) <\/span>{\r\n  \/\/ code for styling each element goes here<\/span>\r\n  \r\n  element.addEventListener(\"focus\"<\/span>, function<\/span>(<\/span>) <\/span>{\r\n    const<\/span> { minValue, maxValue } = bin;\r\n\r\n    \/\/ When a bar is focused, filter the layer view<\/span>\r\n    \/\/ by setting low opacity on the features<\/span>\r\n    \/\/ excluded by the filter<\/span>\r\n    const<\/span> query = layerView.layer.createQuery();\r\n    query.where = `${field}<\/span> >= ${minValue}<\/span> AND ${field}<\/span> <= ${maxValue}<\/span>`<\/span>;\r\n    layerView.queryObjectIds(query).then(function<\/span>(ids<\/span>) <\/span>{\r\n      layerView.effect = {\r\n        filter: {\r\n          objectIds: ids\r\n        },\r\n        excludedEffect: \"grayscale(100%) opacity(5%)\"<\/span>\r\n      };\r\n    });\r\n  });\r\n};\r\n<\/code><\/pre>\n
Click the image below to try it yourself and see the code in context.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":592542,"id":592542,"title":"histogram-filtered","filename":"histogram-filtered.png","filesize":91680,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-filtered.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/histogram-filtered","alt":"","author":"6561","description":"","caption":"","name":"histogram-filtered","status":"inherit","uploaded_to":591782,"date":"2019-08-23 19:46:39","modified":"2019-08-23 19:46:39","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":954,"height":708,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-filtered-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-filtered.png","medium-width":352,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-filtered.png","medium_large-width":768,"medium_large-height":570,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-filtered.png","large-width":954,"large-height":708,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-filtered.png","1536x1536-width":954,"1536x1536-height":708,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-filtered.png","2048x2048-width":954,"2048x2048-height":708,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-filtered-627x465.png","card_image-width":627,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-filtered.png","wide_image-width":954,"wide_image-height":708}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/oNvBJrW\/left?editors=0010"},{"acf_fc_layout":"content","content":"
You can take the interaction a step further by adding a data line to the histogram each time the user clicks a feature. This is one way of several ways to communicate a feature’s value when the feature’s color is hard to compare with the colors of the histogram.<\/p>\n
\r\nlet<\/span> highlightHandle;\r\n\r\nview.on(\"click\"<\/span>, function<\/span>(event<\/span>)<\/span>{\r\n  view.hitTest(event).then(function<\/span>(hitResponse<\/span>)<\/span>{\r\n    if<\/span>(highlightHandle){\r\n      highlightHandle.remove();\r\n      highlightHandle = null<\/span>;\r\n    }\r\n    const<\/span> graphicHit = hitResponse.results.length;\r\n    if<\/span>(!graphicHit){\r\n      console<\/span>.log(\"no hit\"<\/span>);\r\n      return<\/span>;\r\n    }\r\n    \/\/ If the click hits one of the layer's features<\/span>\r\n    \/\/ in the view, then add the value of the feature's<\/span>\r\n    \/\/ field (the one used to generate the histogram)<\/span>\r\n    \/\/ as a data line to the Histogram widget<\/span>\r\n    const<\/span> matchingHit = hitResponse.results.find(function<\/span>(hit<\/span>)<\/span>{\r\n      return<\/span> hit.graphic.layer.title === layer.title;\r\n    });\r\n    if<\/span>(matchingHit){\r\n      const<\/span> graphic = matchingHit.graphic;\r\n      const<\/span> avgIncome = graphic.attributes[field];\r\n      histogramChart.dataLines = [{\r\n        value: avgIncome,\r\n        label: formatValueToCurrency(avgIncome)\r\n      }];\r\n      highlightHandle = layerView.highlight(graphic);\r\n    } else<\/span> {\r\n      histogramChart.dataLines = null<\/span>;\r\n    }\r\n  })\r\n});\r\n<\/code><\/pre>\n
Click the following image to try it yourself.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":592562,"id":592562,"title":"histogram-data-highlight-2","filename":"histogram-data-highlight-2.png","filesize":207875,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-data-highlight-2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/histogram-data-highlight-2","alt":"You can display a highlighted feature's value on the histogram by adding a data line.","author":"6561","description":"","caption":"You can display a highlighted feature's value on the histogram by adding a data line.","name":"histogram-data-highlight-2","status":"inherit","uploaded_to":591782,"date":"2019-08-23 19:51:50","modified":"2019-08-23 19:51:58","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1040,"height":700,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-data-highlight-2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-data-highlight-2.png","medium-width":388,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-data-highlight-2.png","medium_large-width":768,"medium_large-height":517,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-data-highlight-2.png","large-width":1040,"large-height":700,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-data-highlight-2.png","1536x1536-width":1040,"1536x1536-height":700,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-data-highlight-2.png","2048x2048-width":1040,"2048x2048-height":700,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-data-highlight-2-691x465.png","card_image-width":691,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/histogram-data-highlight-2.png","wide_image-width":1040,"wide_image-height":700}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/wvwgNvQ\/left?editors=0010"},{"acf_fc_layout":"content","content":"
Try it yourself!<\/h2>\n
Thanks to the Histogram widget, you have another option for communicating a story with your data. I invite you to try it out in your own apps and share them with me on Twitter<\/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":""}],"related_articles":[{"ID":569372,"post_author":"6561","post_date":"2019-08-07 08:00:07","post_date_gmt":"2019-08-07 15:00:07","post_content":"","post_title":"Interactive widgets for data exploration","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"interactive-widgets-for-data-exploration","to_ping":"","pinged":"","post_modified":"2023-11-02 15:06:30","post_modified_gmt":"2023-11-02 22:06:30","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=569372","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":543762,"post_author":"4271","post_date":"2019-07-02 16:18:10","post_date_gmt":"2019-07-02 23:18:10","post_content":"","post_title":"What's New in ArcGIS API for JavaScript (July, 2019)","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-api-for-javascript-july-2019","to_ping":"","pinged":"","post_modified":"2019-07-03 08:40:08","post_modified_gmt":"2019-07-03 15:40:08","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=543762","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/card.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/banner3-histogram-3.png"},"yoast_head":"\nMake your histogram legendary<\/title>\n<meta name=\"description\" content=\"Add additional meaning and context to your data-driven map using a colored histogram instead of a legend.\" \/>\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\/js-api-arcgis\/mapping\/make-your-histogram-legendary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make your histogram legendary\" \/>\n<meta property=\"og:description\" content=\"Add additional meaning and context to your data-driven map using a colored histogram instead of a legend.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\" \/>\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=\"2020-08-15T00:00:02+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\/js-api-arcgis\/mapping\/make-your-histogram-legendary#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Make your histogram legendary\",\"datePublished\":\"2019-08-27T15:00:57+00:00\",\"dateModified\":\"2020-08-15T00:00:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"data visualization\",\"Histogram\",\"legend\",\"smart mapping\",\"whats new june 2019\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\",\"name\":\"Make your histogram legendary\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2019-08-27T15:00:57+00:00\",\"dateModified\":\"2020-08-15T00:00:02+00:00\",\"description\":\"Add additional meaning and context to your data-driven map using a colored histogram instead of a legend.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make your histogram legendary\"}]},{\"@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":"Make your histogram legendary","description":"Add additional meaning and context to your data-driven map using a colored histogram instead of a legend.","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\/js-api-arcgis\/mapping\/make-your-histogram-legendary","og_locale":"en_US","og_type":"article","og_title":"Make your histogram legendary","og_description":"Add additional meaning and context to your data-driven map using a colored histogram instead of a legend.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2020-08-15T00:00:02+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\/js-api-arcgis\/mapping\/make-your-histogram-legendary#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Make your histogram legendary","datePublished":"2019-08-27T15:00:57+00:00","dateModified":"2020-08-15T00:00:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary"},"wordCount":4,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["data visualization","Histogram","legend","smart mapping","whats new june 2019"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary","name":"Make your histogram legendary","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2019-08-27T15:00:57+00:00","dateModified":"2020-08-15T00:00:02+00:00","description":"Add additional meaning and context to your data-driven map using a colored histogram instead of a legend.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Make your histogram legendary"}]},{"@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":"August 27, 2019","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/banner3-histogram-3.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":30111,"name":"data visualization","slug":"data-visualization","term_group":0,"term_taxonomy_id":30111,"taxonomy":"post_tag","description":"","parent":0,"count":97,"filter":"raw"},{"term_id":36141,"name":"Histogram","slug":"histogram","term_group":0,"term_taxonomy_id":36141,"taxonomy":"post_tag","description":"","parent":0,"count":6,"filter":"raw"},{"term_id":368772,"name":"legend","slug":"legend","term_group":0,"term_taxonomy_id":368772,"taxonomy":"post_tag","description":"","parent":0,"count":5,"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":401302,"name":"whats new june 2019","slug":"whats-new-june-2019","term_group":0,"term_taxonomy_id":401302,"taxonomy":"post_tag","description":"","parent":0,"count":30,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2690,"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\/591782","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=591782"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/591782\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=591782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=591782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=591782"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=591782"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=591782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
More examples<\/h2>\n
Removing the Legend in favor of a colored histogram doesn’t work for all scenarios. It tends to work well only for layers rendered based on a single numeric value using color. That excludes anything involving more than one visual variable, UniqueValueRenderer<\/a>, HeatmapRenderer<\/a>, and DotDensityRenderer<\/a>. It can also feel a little strange when working with aggregated data because each value in the data doesn’t represent a single observation or data point.<\/p>\n
However, histograms tend to work well with scientific data. Check out the following examples which take advantage of the Current Weather and Wind Station Information<\/a> live data feed in the ArcGIS Living Atlas of the World.<\/p>\n
The following apps have all the same capabilities described in this post. You can try each app and modify the code by clicking on each image below.<\/p>\n
Dew Point<\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":592622,"id":592622,"title":"dew-point-2","filename":"dew-point-2.png","filesize":143432,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/dew-point-2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/dew-point-2","alt":"","author":"6561","description":"","caption":"","name":"dew-point-2","status":"inherit","uploaded_to":591782,"date":"2019-08-23 20:12:33","modified":"2019-08-23 20:12:33","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1212,"height":697,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/dew-point-2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/dew-point-2.png","medium-width":454,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/dew-point-2.png","medium_large-width":768,"medium_large-height":442,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/dew-point-2.png","large-width":1212,"large-height":697,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/dew-point-2.png","1536x1536-width":1212,"1536x1536-height":697,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/dew-point-2.png","2048x2048-width":1212,"2048x2048-height":697,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/dew-point-2-809x465.png","card_image-width":809,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/dew-point-2.png","wide_image-width":1212,"wide_image-height":697}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/KKPaJaP\/left?editors=0010"},{"acf_fc_layout":"content","content":"
Heat Index<\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":592642,"id":592642,"title":"heat-index","filename":"heat-index.png","filesize":286293,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/heat-index.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/heat-index","alt":"","author":"6561","description":"","caption":"","name":"heat-index","status":"inherit","uploaded_to":591782,"date":"2019-08-23 20:15:04","modified":"2019-08-23 20:15:04","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1960,"height":1182,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/heat-index-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/heat-index.png","medium-width":433,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/heat-index.png","medium_large-width":768,"medium_large-height":463,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/heat-index.png","large-width":1791,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/heat-index.png","1536x1536-width":1536,"1536x1536-height":926,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/heat-index.png","2048x2048-width":1960,"2048x2048-height":1182,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/heat-index-771x465.png","card_image-width":771,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/heat-index-1791x1080.png","wide_image-width":1791,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/QWLdYpe\/left?editors=0010"},{"acf_fc_layout":"content","content":"
Latitude<\/strong><\/p>\n
Why would you ever want to show latitude in a histogram? Aside from the fact that this is a great way to demonstrate the vertical layout<\/a> option, you could use a histogram of the data’s coordinates to see if there is any spatial bias in the visualization. Since this dataset tells a story about global weather, it may be worth noting that most of the data points are biased toward the northern hemisphere. That may be OK considering there is more land area in the north. ?\u200d\u2642\ufe0f<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":592652,"id":592652,"title":"latitude","filename":"latitude.png","filesize":354643,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/latitude.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/latitude","alt":"","author":"6561","description":"","caption":"You can orient your histogram vertically using the 'layout' property.","name":"latitude","status":"inherit","uploaded_to":591782,"date":"2019-08-23 20:17:23","modified":"2019-08-23 20:18:07","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2332,"height":1364,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/latitude-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/latitude.png","medium-width":446,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/latitude.png","medium_large-width":768,"medium_large-height":449,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/latitude.png","large-width":1846,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/latitude.png","1536x1536-width":1536,"1536x1536-height":898,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/latitude.png","2048x2048-width":2048,"2048x2048-height":1198,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/latitude-795x465.png","card_image-width":795,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/latitude-1846x1080.png","wide_image-width":1846,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/wvwgNdO\/left?editors=0110"},{"acf_fc_layout":"content","content":"
Longitude<\/strong><\/p>\n
The more-land-in-the-north-than-the-south argument may be an acceptable response to north-south sample location bias, but this histogram shows there is a distinct bias for weather station locations in the west.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":592662,"id":592662,"title":"longitude","filename":"longitude.png","filesize":386530,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/longitude.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/longitude","alt":"","author":"6561","description":"","caption":"","name":"longitude","status":"inherit","uploaded_to":591782,"date":"2019-08-23 20:18:33","modified":"2019-08-23 20:18:33","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2460,"height":1386,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/longitude-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/longitude.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/longitude.png","medium_large-width":768,"medium_large-height":433,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/longitude.png","large-width":1917,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/longitude.png","1536x1536-width":1536,"1536x1536-height":865,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/longitude.png","2048x2048-width":2048,"2048x2048-height":1154,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/longitude-826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/longitude-1917x1080.png","wide_image-width":1917,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/oNvBmwp\/left?editors=0010"},{"acf_fc_layout":"content","content":"
Humidity<\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":592672,"id":592672,"title":"relative-humidity","filename":"relative-humidity.png","filesize":31861,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/relative-humidity.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/relative-humidity","alt":"","author":"6561","description":"","caption":"","name":"relative-humidity","status":"inherit","uploaded_to":591782,"date":"2019-08-23 20:22:57","modified":"2019-08-23 20:22:57","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":879,"height":503,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/relative-humidity-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/relative-humidity.png","medium-width":456,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/relative-humidity.png","medium_large-width":768,"medium_large-height":439,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/relative-humidity.png","large-width":879,"large-height":503,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/relative-humidity.png","1536x1536-width":879,"1536x1536-height":503,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/relative-humidity.png","2048x2048-width":879,"2048x2048-height":503,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/relative-humidity-813x465.png","card_image-width":813,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/relative-humidity.png","wide_image-width":879,"wide_image-height":503}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/bGbgzRy\/left?editors=0010"},{"acf_fc_layout":"content","content":"
Air Temperature<\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":592712,"id":592712,"title":"Screen Shot 2019-08-23 at 1.32.09 PM","filename":"Screen-Shot-2019-08-23-at-1.32.09-PM.png","filesize":111230,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.32.09-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/screen-shot-2019-08-23-at-1-32-09-pm","alt":"","author":"6561","description":"","caption":"Air temperature in degrees Fahrenheit. This example queries weather from Jan. 4, 2017 to show more variation between freezing and warm temperatures. ","name":"screen-shot-2019-08-23-at-1-32-09-pm","status":"inherit","uploaded_to":591782,"date":"2019-08-23 20:32:34","modified":"2019-08-26 18:59:08","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1007,"height":696,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.32.09-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.32.09-PM.png","medium-width":378,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.32.09-PM.png","medium_large-width":768,"medium_large-height":531,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.32.09-PM.png","large-width":1007,"large-height":696,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.32.09-PM.png","1536x1536-width":1007,"1536x1536-height":696,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.32.09-PM.png","2048x2048-width":1007,"2048x2048-height":696,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.32.09-PM-673x465.png","card_image-width":673,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.32.09-PM.png","wide_image-width":1007,"wide_image-height":696}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/rNBjPYW\/left?editors=0010"},{"acf_fc_layout":"content","content":"
Altimeter Pressure<\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":593112,"id":593112,"title":"Screen Shot 2019-08-20 at 5.52.20 PM","filename":"Screen-Shot-2019-08-20-at-5.52.20-PM.png","filesize":274074,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-20-at-5.52.20-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/screen-shot-2019-08-20-at-5-52-20-pm","alt":"","author":"6561","description":"","caption":"","name":"screen-shot-2019-08-20-at-5-52-20-pm","status":"inherit","uploaded_to":591782,"date":"2019-08-23 22:15:03","modified":"2019-08-23 22:15:03","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2360,"height":1382,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-20-at-5.52.20-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-20-at-5.52.20-PM.png","medium-width":446,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-20-at-5.52.20-PM.png","medium_large-width":768,"medium_large-height":450,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-20-at-5.52.20-PM.png","large-width":1844,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-20-at-5.52.20-PM.png","1536x1536-width":1536,"1536x1536-height":899,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-20-at-5.52.20-PM.png","2048x2048-width":2048,"2048x2048-height":1199,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-20-at-5.52.20-PM-794x465.png","card_image-width":794,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-20-at-5.52.20-PM-1844x1080.png","wide_image-width":1844,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/KKPaEeX\/left?editors=0010"},{"acf_fc_layout":"content","content":"
Wind Chill<\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":592692,"id":592692,"title":"Screen Shot 2019-08-23 at 1.30.23 PM","filename":"Screen-Shot-2019-08-23-at-1.30.23-PM.png","filesize":109363,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.30.23-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/make-your-histogram-legendary\/screen-shot-2019-08-23-at-1-30-23-pm","alt":"","author":"6561","description":"","caption":"Wind chill in degrees Fahrenheit. This example queries weather from Jan. 4, 2017 to show more data values with freezing temperatures.","name":"screen-shot-2019-08-23-at-1-30-23-pm","status":"inherit","uploaded_to":591782,"date":"2019-08-23 20:30:42","modified":"2019-08-23 20:31:26","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1013,"height":702,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.30.23-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.30.23-PM.png","medium-width":377,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.30.23-PM.png","medium_large-width":768,"medium_large-height":532,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.30.23-PM.png","large-width":1013,"large-height":702,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.30.23-PM.png","1536x1536-width":1013,"1536x1536-height":702,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.30.23-PM.png","2048x2048-width":1013,"2048x2048-height":702,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.30.23-PM-671x465.png","card_image-width":671,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-23-at-1.30.23-PM.png","wide_image-width":1013,"wide_image-height":702}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/GRKrzyw\/left?editors=1000"},{"acf_fc_layout":"content","content":"