{"id":569372,"date":"2019-08-07T08:00:07","date_gmt":"2019-08-07T15:00:07","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=569372"},"modified":"2023-11-02T15:06:30","modified_gmt":"2023-11-02T22:06:30","slug":"interactive-widgets-for-data-exploration","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration","title":{"rendered":"Interactive widgets for data exploration"},"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":[34601,27491,375692,401302,27731],"industry":[],"product":[36831,36601],"class_list":["post-569372","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-data-exploration","tag-jsapi4","tag-smartmapping","tag-whats-new-june-2019","tag-widgets","product-js-api-arcgis","product-developers"],"acf":{"short_description":"The ArcGIS API for JavaScript provides more than a dozen easy-to-use widgets for data exploration.","flexible_content":[{"acf_fc_layout":"content","content":"<p>The <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-arcgis-api-for-javascript-july-2019\/\">4.12 version of the ArcGIS API for JavaScript<\/a> (ArcGIS JS API) added 11 widgets to the codebase to give web app developers out-of-the-box tools for gathering user input and exploring numeric attribute data from a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-FeatureLayer.html\">FeatureLayer<\/a>, <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-CSVLayer.html\">CSVLayer<\/a>, or <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-GeoJSONLayer.html\">GeoJSONLayer<\/a>.<\/p>\n<p>Click the image below to open an app that showcases the behavior and UI of each of these widgets.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":579502,"id":579502,"title":"better-sliders-overview","filename":"better-sliders-overview.png","filesize":36575,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/better-sliders-overview.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\/better-sliders-overview","alt":"Slider widgets available in the ArcGIS JS API.","author":"6561","description":"","caption":"Slider widgets available in the ArcGIS JS API.","name":"better-sliders-overview","status":"inherit","uploaded_to":569372,"date":"2019-08-02 17:48:16","modified":"2019-08-02 17:48:28","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":682,"height":757,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/better-sliders-overview-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/better-sliders-overview.png","medium-width":235,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/better-sliders-overview.png","medium_large-width":682,"medium_large-height":757,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/better-sliders-overview.png","large-width":682,"large-height":757,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/better-sliders-overview.png","1536x1536-width":682,"1536x1536-height":757,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/better-sliders-overview.png","2048x2048-width":682,"2048x2048-height":757,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/better-sliders-overview-419x465.png","card_image-width":419,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/better-sliders-overview.png","wide_image-width":682,"wide_image-height":757}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/conferences\/uc-2019\/2d-viz\/demos\/sm-sliders\/"},{"acf_fc_layout":"content","content":"<p>The following list contains links to the documentation for each of these widgets. Each reference page contains a brief description, a reference image with annotations, and code snippets demonstrating how to work with the widgets.<\/p>\n"},{"acf_fc_layout":"content","content":"<ul>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Histogram.html\">Histogram<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Slider.html\">Slider<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-TimeSlider.html\">TimeSlider<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-HistogramRangeSlider.html\">HistogramRangeSlider<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-smartMapping-ColorSlider.html\">ColorSlider<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-smartMapping-SizeSlider.html\">SizeSlider<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-smartMapping-ClassedColorSlider.html\">ClassedColorSlider<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-smartMapping-ClassedSizeSlider.html\">ClassedSizeSlider<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-smartMapping-ColorSizeSlider.html\">ColorSizeSlider<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-smartMapping-OpacitySlider.html\">OpacitySlider<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-smartMapping-HeatmapSlider.html\">HeatmapSlider<\/a><\/li>\n<\/ul>\n<p>The remainder of this post will explore how to work with the Slider, Histogram, and HistogramRangeSlider widgets.<\/p>\n<h2>Slider<\/h2>\n<p>You may have noticed that 10 of these widgets are sliders. The most basic and potentially most widely-used of these is <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Slider.html\">esri\/widgets\/Slider.<\/a> In fact, all other sliders are built on top of the Slider widget view <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/custom-widget\/index.html#viewmodel-pattern\">with their own view models<\/a>.<\/p>\n<p>The Slider API is designed to get you started with a simple slider that can easily be configured for a variety of applications. The API allows you to toggle the visibility of min\/max values, toggle between a horizontal or vertical layout, format labels, configure ticks, steps, and customize the style and behavior of the widget\u2019s elements.<\/p>\n<p>The sections below contain several CodePens to encourage you to experiment with the various ways you can configure the Slider widget.<\/p>\n<h3>Create a basic slider<\/h3>\n<p>To add a simple slider with a single thumb to your app, set the <code>container<\/code>, the <code>min<\/code> and <code>max<\/code> values, and the <code>value<\/code> of the thumb.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2139952,"id":2139952,"title":"Screenshot 2023-11-02 at 2.09.09 PM","filename":"Screenshot-2023-11-02-at-2.09.09-PM.png","filesize":96814,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.09.09-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\/screenshot-2023-11-02-at-2-09-09-pm","alt":"Slider in Horizontal view.","author":"6561","description":"","caption":"Click the image to open the CodePen.","name":"screenshot-2023-11-02-at-2-09-09-pm","status":"inherit","uploaded_to":569372,"date":"2023-11-02 21:15:09","modified":"2023-11-02 21:16: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":1179,"height":633,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.09.09-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.09.09-PM.png","medium-width":464,"medium-height":249,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.09.09-PM.png","medium_large-width":768,"medium_large-height":412,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.09.09-PM.png","large-width":1179,"large-height":633,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.09.09-PM.png","1536x1536-width":1179,"1536x1536-height":633,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.09.09-PM.png","2048x2048-width":1179,"2048x2048-height":633,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.09.09-PM-826x443.png","card_image-width":826,"card_image-height":443,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.09.09-PM.png","wide_image-width":1179,"wide_image-height":633}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/EqaJRE\/left?editors=0010"},{"acf_fc_layout":"content","content":"<h3>Multiple thumbs and ticks<\/h3>\n<p>Include more values to the <code>values<\/code> array to add additional thumbs to the slider. Notice you can drag the segments between thumbs by clicking the track and dragging. The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Slider.html#tickConfigs\">tickConfigs<\/a> property allows you to control rendering of ticks on the slider.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2139962,"id":2139962,"title":"Screenshot 2023-11-02 at 2.10.12 PM","filename":"Screenshot-2023-11-02-at-2.10.12-PM.png","filesize":94432,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.10.12-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\/screenshot-2023-11-02-at-2-10-12-pm","alt":"Click the image to open the CodePen.","author":"6561","description":"","caption":"Click the image to open the CodePen.","name":"screenshot-2023-11-02-at-2-10-12-pm","status":"inherit","uploaded_to":569372,"date":"2023-11-02 21:15:14","modified":"2023-11-02 21:19:19","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":1173,"height":617,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.10.12-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.10.12-PM.png","medium-width":464,"medium-height":244,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.10.12-PM.png","medium_large-width":768,"medium_large-height":404,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.10.12-PM.png","large-width":1173,"large-height":617,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.10.12-PM.png","1536x1536-width":1173,"1536x1536-height":617,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.10.12-PM.png","2048x2048-width":1173,"2048x2048-height":617,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.10.12-PM-826x434.png","card_image-width":826,"card_image-height":434,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.10.12-PM.png","wide_image-width":1173,"wide_image-height":617}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/LwEvQJ\/left?editors=0010"},{"acf_fc_layout":"content","content":"<h3>Customize tick styles and behavior<\/h3>\n<p>You can customize the CSS of the ticks by adding classes to the tick and label elements in the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Slider.html#TickCreatedFunction\">tickCreatedFunction<\/a>. I also added an event listener to the ticks representing whole numbers. Click one in the app below to snap the thumb to the clicked value.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2139972,"id":2139972,"title":"Screenshot 2023-11-02 at 2.12.42 PM","filename":"Screenshot-2023-11-02-at-2.12.42-PM.png","filesize":88134,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.12.42-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\/screenshot-2023-11-02-at-2-12-42-pm","alt":"Click the image to open the CodePen.","author":"6561","description":"","caption":"Click the image to open the CodePen.","name":"screenshot-2023-11-02-at-2-12-42-pm","status":"inherit","uploaded_to":569372,"date":"2023-11-02 21:15:18","modified":"2023-11-02 21:19:56","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":1179,"height":629,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.12.42-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.12.42-PM.png","medium-width":464,"medium-height":248,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.12.42-PM.png","medium_large-width":768,"medium_large-height":410,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.12.42-PM.png","large-width":1179,"large-height":629,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.12.42-PM.png","1536x1536-width":1179,"1536x1536-height":629,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.12.42-PM.png","2048x2048-width":1179,"2048x2048-height":629,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.12.42-PM-826x441.png","card_image-width":826,"card_image-height":441,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.12.42-PM.png","wide_image-width":1179,"wide_image-height":629}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/dxPLNj\/left?editors=0010"},{"acf_fc_layout":"content","content":"<h3>Steps<\/h3>\n<p>You can also set <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Slider.html#steps\">step<\/a> values with either a single value, which is used to determine the interval for each step, or an array of values, which determine exact positions on the track for snapping thumbs.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2139982,"id":2139982,"title":"Screenshot 2023-11-02 at 2.13.09 PM","filename":"Screenshot-2023-11-02-at-2.13.09-PM.png","filesize":92982,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.09-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\/screenshot-2023-11-02-at-2-13-09-pm","alt":"Click the image to open the CodePen.","author":"6561","description":"","caption":"Click the image to open the CodePen.","name":"screenshot-2023-11-02-at-2-13-09-pm","status":"inherit","uploaded_to":569372,"date":"2023-11-02 21:15:23","modified":"2023-11-02 21:20:22","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":1179,"height":628,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.09-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.09-PM.png","medium-width":464,"medium-height":247,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.09-PM.png","medium_large-width":768,"medium_large-height":409,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.09-PM.png","large-width":1179,"large-height":628,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.09-PM.png","1536x1536-width":1179,"1536x1536-height":628,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.09-PM.png","2048x2048-width":1179,"2048x2048-height":628,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.09-PM-826x440.png","card_image-width":826,"card_image-height":440,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.09-PM.png","wide_image-width":1179,"wide_image-height":628}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/pMvoMy\/left?editors=0010"},{"acf_fc_layout":"content","content":"<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Slider.html#labelFormatFunction\">labelFormatFunction<\/a> property allows you to customize the labels of slider values without altering the values themselves.<\/p>\n<h2>Histogram<\/h2>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Histogram.html\">Histogram<\/a> widget provides a simple UI for displaying data in a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Histogram\">histogram<\/a>. This API allows you to specify an array of <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Histogram.html#bins\">bins<\/a>, each with a minimum and maximum bound along with a count. You can also add an <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Histogram.html#average\">average<\/a> line or any other <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Histogram.html#dataLines\">data line<\/a> to indicate meaningful values in the dataset.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2139992,"id":2139992,"title":"Screenshot 2023-11-02 at 2.13.36 PM","filename":"Screenshot-2023-11-02-at-2.13.36-PM.png","filesize":70332,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.36-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\/screenshot-2023-11-02-at-2-13-36-pm","alt":"Click the image to open the CodePen.","author":"6561","description":"","caption":"Click the image to open the CodePen.","name":"screenshot-2023-11-02-at-2-13-36-pm","status":"inherit","uploaded_to":569372,"date":"2023-11-02 21:15:27","modified":"2023-11-02 21:20:47","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":1179,"height":628,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.36-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.36-PM.png","medium-width":464,"medium-height":247,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.36-PM.png","medium_large-width":768,"medium_large-height":409,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.36-PM.png","large-width":1179,"large-height":628,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.36-PM.png","1536x1536-width":1179,"1536x1536-height":628,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.36-PM.png","2048x2048-width":1179,"2048x2048-height":628,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.36-PM-826x440.png","card_image-width":826,"card_image-height":440,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.13.36-PM.png","wide_image-width":1179,"wide_image-height":628}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/mNBVoj\/left?editors=0010"},{"acf_fc_layout":"content","content":"<p>You also have access to each <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Histogram.html#dataLineCreatedFunction\">data line element<\/a> and <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Histogram.html#barCreatedFunction\">bar element<\/a> for customizing the style of each bar including adding events for data exploration if desired.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":579762,"id":579762,"title":"temp-anomaly","filename":"temp-anomaly.png","filesize":140359,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/temp-anomaly.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\/temp-anomaly","alt":"Histogram bars can be colored to match data in the map.","author":"6561","description":"","caption":"Histogram bars can be styled to match the data in the associated map.","name":"temp-anomaly","status":"inherit","uploaded_to":569372,"date":"2019-08-02 19:42:21","modified":"2019-08-02 19:42: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":1432,"height":583,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/temp-anomaly-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/temp-anomaly.png","medium-width":464,"medium-height":189,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/temp-anomaly.png","medium_large-width":768,"medium_large-height":313,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/temp-anomaly.png","large-width":1432,"large-height":583,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/temp-anomaly.png","1536x1536-width":1432,"1536x1536-height":583,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/temp-anomaly.png","2048x2048-width":1432,"2048x2048-height":583,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/temp-anomaly-826x336.png","card_image-width":826,"card_image-height":336,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/temp-anomaly.png","wide_image-width":1432,"wide_image-height":583}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-update-data\/index.html"},{"acf_fc_layout":"content","content":"<h2>HistogramRangeSlider<\/h2>\n<p>The HistogramRangeSlider combines the Histogram widget with the Slider into a cohesive widget. This widget was specifically designed for filtering applications. It includes a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-HistogramRangeSlider.html#rangeType\">rangeType<\/a> property for determining how the histogram renders as the user slides the thumbs. The <code>rangeType<\/code> also tells the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-HistogramRangeSlider.html#generateWhereClause\">generateWhereClause<\/a> method how it should construct the SQL where clause for filtering features in the view.<\/p>\n<p>In addition, we expose <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-HistogramRangeSlider.html#excludedBarColor\">excludedBarColor<\/a> and <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-HistogramRangeSlider.html#includedBarColor\">includedBarColor<\/a> as options for easily changing the style of the histogram bars.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2140002,"id":2140002,"title":"Screenshot 2023-11-02 at 2.14.27 PM","filename":"Screenshot-2023-11-02-at-2.14.27-PM.png","filesize":112823,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.14.27-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\/screenshot-2023-11-02-at-2-14-27-pm","alt":"Click the image to open the CodePen.","author":"6561","description":"","caption":"Click the image to open the CodePen.","name":"screenshot-2023-11-02-at-2-14-27-pm","status":"inherit","uploaded_to":569372,"date":"2023-11-02 21:15:32","modified":"2023-11-02 21:21:11","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":1180,"height":630,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.14.27-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.14.27-PM.png","medium-width":464,"medium-height":248,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.14.27-PM.png","medium_large-width":768,"medium_large-height":410,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.14.27-PM.png","large-width":1180,"large-height":630,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.14.27-PM.png","1536x1536-width":1180,"1536x1536-height":630,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.14.27-PM.png","2048x2048-width":1180,"2048x2048-height":630,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.14.27-PM-826x441.png","card_image-width":826,"card_image-height":441,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screenshot-2023-11-02-at-2.14.27-PM.png","wide_image-width":1180,"wide_image-height":630}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/wVrMVZ\/left?editors=0011"},{"acf_fc_layout":"content","content":"<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-histogramrangeslider\/index.html\">HistogramRangeSlider sample<\/a> in the JS API documentation demonstrates how to use the slider for filtering features in a FeatureLayer. Click the image below to explore this sample in more detail.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":580302,"id":580302,"title":"Screen Shot 2019-08-05 at 11.12.10 AM","filename":"Screen-Shot-2019-08-05-at-11.12.10-AM.png","filesize":55800,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-05-at-11.12.10-AM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\/screen-shot-2019-08-05-at-11-12-10-am","alt":"The HistogramRangeSlider can be used to filter features in a layer.","author":"6561","description":"","caption":"The HistogramRangeSlider can be used to filter features in a layer.","name":"screen-shot-2019-08-05-at-11-12-10-am","status":"inherit","uploaded_to":569372,"date":"2019-08-05 18:12:30","modified":"2019-08-05 18:12:49","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":991,"height":525,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-05-at-11.12.10-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-05-at-11.12.10-AM.png","medium-width":464,"medium-height":246,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-05-at-11.12.10-AM.png","medium_large-width":768,"medium_large-height":407,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-05-at-11.12.10-AM.png","large-width":991,"large-height":525,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-05-at-11.12.10-AM.png","1536x1536-width":991,"1536x1536-height":525,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-05-at-11.12.10-AM.png","2048x2048-width":991,"2048x2048-height":525,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-05-at-11.12.10-AM-826x438.png","card_image-width":826,"card_image-height":438,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Screen-Shot-2019-08-05-at-11.12.10-AM.png","wide_image-width":991,"wide_image-height":525}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-histogramrangeslider\/index.html"},{"acf_fc_layout":"content","content":"<h2>More examples<\/h2>\n<p>The following samples in the JS API documentation demonstrate how to use these widgets in various scenarios. <\/p>\n<ul>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-histogram\/index.html\">Histogram widget<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-histogramrangeslider\/index.html\">HistogramRangeSlider<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-update-data\/index.html\">Update a renderer&#8217;s attribute<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-sm-color\/index.html\">Generate continuous color visualization<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-sm-size\/index.html\">Generate data-driven continuous size visualization<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-histogram-color\/index.html\">Customize ColorSlider Histogram<\/a><\/li>\n<\/ul>\n<p>I encourage you to try out these widgets in your own apps! Don\u2019t hesitate to reach out and provide feedback.<\/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":[{"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&#038;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\/banner2-card.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/banner2-wide.jpg"},"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>Interactive widgets for data exploration<\/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\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interactive widgets for data exploration\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\" \/>\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=\"2023-11-02T22:06:30+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\/interactive-widgets-for-data-exploration#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Interactive widgets for data exploration\",\"datePublished\":\"2019-08-07T15:00:07+00:00\",\"dateModified\":\"2023-11-02T22:06:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"data exploration\",\"jsapi4\",\"SmartMapping\",\"whats new june 2019\",\"widgets\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\",\"name\":\"Interactive widgets for data exploration\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2019-08-07T15:00:07+00:00\",\"dateModified\":\"2023-11-02T22:06:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Interactive widgets for data exploration\"}]},{\"@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":"Interactive widgets for data exploration","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\/interactive-widgets-for-data-exploration","og_locale":"en_US","og_type":"article","og_title":"Interactive widgets for data exploration","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2023-11-02T22:06:30+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\/interactive-widgets-for-data-exploration#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Interactive widgets for data exploration","datePublished":"2019-08-07T15:00:07+00:00","dateModified":"2023-11-02T22:06:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration"},"wordCount":5,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["data exploration","jsapi4","SmartMapping","whats new june 2019","widgets"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration","name":"Interactive widgets for data exploration","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2019-08-07T15:00:07+00:00","dateModified":"2023-11-02T22:06:30+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/interactive-widgets-for-data-exploration#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Interactive widgets for data exploration"}]},{"@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 7, 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\/banner2-wide.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":34601,"name":"data exploration","slug":"data-exploration","term_group":0,"term_taxonomy_id":34601,"taxonomy":"post_tag","description":"","parent":0,"count":14,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":375692,"name":"SmartMapping","slug":"smartmapping","term_group":0,"term_taxonomy_id":375692,"taxonomy":"post_tag","description":"","parent":0,"count":2,"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"},{"term_id":27731,"name":"widgets","slug":"widgets","term_group":0,"term_taxonomy_id":27731,"taxonomy":"post_tag","description":"","parent":0,"count":20,"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\/569372","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=569372"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/569372\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=569372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=569372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=569372"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=569372"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=569372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}