{"id":1000352,"date":"2020-09-08T14:41:13","date_gmt":"2020-09-08T21:41:13","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1000352"},"modified":"2021-06-03T05:54:43","modified_gmt":"2021-06-03T12:54:43","slug":"how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript","title":{"rendered":"How to create a sparkline map with the ArcGIS API for JavaScript"},"author":6971,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[26451,32331,127982,756612,27911],"industry":[],"product":[36831],"class_list":["post-1000352","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-cartography","tag-how-to","tag-jsapi","tag-sparklines","tag-tutorial","product-js-api-arcgis"],"acf":{"short_description":"A look behind the scenes at the code used to render sparklines as map symbols in ArcGIS.","flexible_content":[{"acf_fc_layout":"content","content":"

Witten with Jinnan Zhang<\/a><\/em><\/p>\n

CovidPulse<\/a> presents a massive amount of data as a simple collection of wiggly local coronavirus trends. More recently, this symbology was used to visualize unemployment trends in UnemploymentPulse<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1001012,"id":1001012,"title":"CovidPulse_Sparklines","filename":"CovidPulse_Sparklines.jpg","filesize":273367,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CovidPulse_Sparklines.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript\/covidpulse_sparklines","alt":"","author":"6971","description":"","caption":"","name":"covidpulse_sparklines","status":"inherit","uploaded_to":1000352,"date":"2020-09-08 20:49:17","modified":"2020-09-08 20:49:17","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CovidPulse_Sparklines-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CovidPulse_Sparklines.jpg","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CovidPulse_Sparklines.jpg","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CovidPulse_Sparklines.jpg","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CovidPulse_Sparklines-1536x864.jpg","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CovidPulse_Sparklines.jpg","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CovidPulse_Sparklines-826x465.jpg","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CovidPulse_Sparklines.jpg","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/livingatlas.arcgis.com\/covidpulse\/#@=-91.333,39.915,6&trendType=2&trendCategories=0"},{"acf_fc_layout":"image","image":{"ID":1242422,"id":1242422,"title":"UnemploymentPulse_NormalizedRates","filename":"UnemploymentPulse_NormalizedRates.jpg","filesize":408117,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/05\/UnemploymentPulse_NormalizedRates.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-living-atlas\/mapping\/unemployment-pulse\/unemploymentpulse_normalizedrates","alt":"Local unemployment rates normalized by the national rate.","author":"6971","description":"","caption":"","name":"unemploymentpulse_normalizedrates","status":"inherit","uploaded_to":1239082,"date":"2021-05-26 19:02:04","modified":"2021-05-26 19:02:56","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/05\/UnemploymentPulse_NormalizedRates-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/05\/UnemploymentPulse_NormalizedRates.jpg","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/05\/UnemploymentPulse_NormalizedRates.jpg","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/05\/UnemploymentPulse_NormalizedRates.jpg","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/05\/UnemploymentPulse_NormalizedRates-1536x864.jpg","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/05\/UnemploymentPulse_NormalizedRates.jpg","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/05\/UnemploymentPulse_NormalizedRates-826x465.jpg","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/05\/UnemploymentPulse_NormalizedRates.jpg","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

The sparkline<\/a> symbol has many uses beyond this one, for sure, so we\u2019ll share the steps taken to render the Johns Hopkins US County cases data<\/a> as this interesting and data-dense visual mechanism. We hope that this will be a helpful resource for creating applications of your own with data of your own.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1000382,"id":1000382,"title":"Sparkline","filename":"Sparkline.png","filesize":915,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/Sparkline.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript\/sparkline","alt":"","author":"6971","description":"","caption":"","name":"sparkline","status":"inherit","uploaded_to":1000352,"date":"2020-09-08 16:54:58","modified":"2020-09-08 16:54: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":82,"height":27,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/Sparkline.png","thumbnail-width":82,"thumbnail-height":27,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/Sparkline.png","medium-width":82,"medium-height":27,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/Sparkline.png","medium_large-width":82,"medium_large-height":27,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/Sparkline.png","large-width":82,"large-height":27,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/Sparkline.png","1536x1536-width":82,"1536x1536-height":27,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/Sparkline.png","2048x2048-width":82,"2048x2048-height":27,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/Sparkline.png","card_image-width":82,"card_image-height":27,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/Sparkline.png","wide_image-width":82,"wide_image-height":27}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Here is how to render data as a sparkline in ArcGIS API for JavaScript<\/a>. Specifically, we’ll be pouring sparklines into the CIMSymbol. Prepare yourself emotionally for a lot of links and snippets. But first, warm up the reverse-engineering part of your brain by disassembling and then reassembling the nearest handy Lego creation. Jinnan and I will wait. Ok, ready?<\/p>\n

The CIMSymbol<\/h2>\n

Yes, the humble, unassuming, CIM. Never heard of it? It\u2019s heard of you. CIM stands for Cartographic Information Model. That alone should give you shivers. But what is it?<\/p>\n

The Cartographic Information Model is an energy field created by all living things. It surrounds us and penetrates us; it binds the galaxy together.<\/p>\n

Originating as the model that accommodates ArcGIS Pro\u2019s advanced symbology capabilities, the CIM is an open spec<\/a> used for all sorts of mapping. It has recently been brought into the ArcGIS API for JavaScript to support mapping there.<\/p>\n

Let’s start with this code snippet<\/a> blatantly stolen from the generous CIMSymbol section<\/a> of the JSAPI Doc. It shows an example of creating a triangle marker comprised of a CIMPointSymbol<\/a> (a point symbol used to draw point features\/graphics) containing a CIMVectorMarker<\/a> (a vector marker which can represent vector graphics)\u2026<\/p>\n"},{"acf_fc_layout":"sidebar","content":"","image_reference":false,"layout":"code_snippet","image_reference_figure":"","snippet":"const symbol = new CIMSymbol({\r\n data: {\r\n type: \"CIMSymbolReference\",\r\n symbol: {\r\n type: \"CIMPointSymbol\",\r\n symbolLayers: [{\r\n type: \"CIMVectorMarker\",\r\n enable: true,\r\n \/\/ defines the height of the marker. Modifying Size property actually changes the marker's height to the specified size and the width of marker is updated proportionally.\r\n size: 32,\r\n \/\/ an envelope which is a rectangle defined by a range of values for each coordinate and attribute\r\n frame: {\r\n xmin: 0,\r\n ymin: 0,\r\n xmax: 16,\r\n ymax: 16\r\n },\r\n markerGraphics: [{\r\n type: \"CIMMarkerGraphic\",\r\n geometry: {\r\n rings: [[[8, 16],[0, 0],[16, 0],[8, 16]]]\r\n },\r\n symbol: {\r\n type: \"CIMPolygonSymbol\",\r\n symbolLayers: [{\r\n type: \"CIMSolidStroke\",\r\n width: 5,\r\n color: [240, 94, 35, 255]\r\n }]\r\n }\r\n }]\r\n }]\r\n }\r\n }\r\n});\r\n","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"

Here’s a snapshot if you want to give your mental compiler a rest and just, like, see<\/em> it.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1000422,"id":1000422,"title":"CIMSymbol_triangleSample","filename":"CIMSymbol_triangleSample.jpg","filesize":270116,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_triangleSample.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript\/cimsymbol_trianglesample","alt":"","author":"6971","description":"","caption":"","name":"cimsymbol_trianglesample","status":"inherit","uploaded_to":1000352,"date":"2020-09-08 17:01:51","modified":"2020-09-08 17:01:51","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_triangleSample-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_triangleSample.jpg","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_triangleSample.jpg","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_triangleSample.jpg","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_triangleSample-1536x864.jpg","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_triangleSample.jpg","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_triangleSample-826x465.jpg","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_triangleSample.jpg","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/vannizhang\/pen\/LYNzONz"},{"acf_fc_layout":"content","content":"

You can try it for yourself here<\/a>, if you like.<\/p>\n

Drawing Lines in a CIMSymbol<\/h2>\n

Now let’s turn that triangle into something a bit more sparkliney. We’ll tweak the code snippet above to show a polyline instead of polygon. It only takes a couple simple changes to the CIMMarkerGraphic<\/em>; we can leave everything else the same. Instead of “rings<\/em>” in the geometry, we’ll use “paths<\/em>.” And we’ll change the symbol type from CIMPolygonSymbol<\/em> to CIMLineSymbol<\/em>.<\/p>\n

Like so\u2026<\/p>\n"},{"acf_fc_layout":"sidebar","content":"","image_reference":false,"layout":"code_snippet","image_reference_figure":"","snippet":"const symbol = new CIMSymbol({\r\n data: {\r\n type: \"CIMSymbolReference\",\r\n symbol: {\r\n type: \"CIMPointSymbol\",\r\n symbolLayers: [{\r\n type: \"CIMVectorMarker\",\r\n enable: true,\r\n \/\/ defines the height of the marker. Modifying Size property actually changes the marker's height to the specified size and the width of marker is updated proportionally.\r\n size: 32,\r\n \/\/ an envelope which is a rectangle defined by a range of values for each coordinate and attribute\r\n frame: {\r\n xmin: 0,\r\n ymin: 0,\r\n xmax: 16,\r\n ymax: 16\r\n },\r\n markerGraphics: [{\r\n type: \"CIMMarkerGraphic\",\r\n geometry: {\r\n \/\/ change the geometry from rings to paths\r\n paths: [\r\n [\r\n [0, 0],\r\n [8, 16],\r\n [16, 0]\r\n ]\r\n ]\r\n },\r\n symbol: {\r\n \/\/ change the symbol type for the CIMMarkerGraphic from CIMPolygonSymbol to CIMLineSymbol\r\n type: \"CIMLineSymbol\",\r\n symbolLayers: [{\r\n type: \"CIMSolidStroke\",\r\n width: 5,\r\n color: [240, 94, 35, 255]\r\n }]\r\n }\r\n }]\r\n }]\r\n }\r\n }\r\n});","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"

Alright, a line instead of a triangle. Here’s a codepen sandbox<\/a> of you want to kick it around.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1000572,"id":1000572,"title":"CIMSymbol_lineSample","filename":"CIMSymbol_lineSample.jpg","filesize":270878,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_lineSample.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript\/cimsymbol_linesample","alt":"","author":"6971","description":"","caption":"","name":"cimsymbol_linesample","status":"inherit","uploaded_to":1000352,"date":"2020-09-08 18:29:32","modified":"2020-09-08 18:29:32","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_lineSample-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_lineSample.jpg","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_lineSample.jpg","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_lineSample.jpg","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_lineSample-1536x864.jpg","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_lineSample.jpg","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_lineSample-826x465.jpg","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_lineSample.jpg","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/vannizhang\/pen\/xxVXjNN?editors=1000"},{"acf_fc_layout":"content","content":"

You have taken your first step into a larger world.<\/p>\n

Formatting, and Fitting, a Custom Line<\/h2>\n

But how can we use it to plot our own data? Good question. Let’s further modify the code snippet, this time we’ll use a slightly more complex set of numbers representing some pretend data values:<\/p>\n

5, 40, 15, 25, 10.<\/em><\/strong><\/p>\n

First, we’ll update the frame<\/em> property with our new data in mind. for the sake of simplicity, we’ll just set the xmin and ymin to 0 for now. The maximum value in our data range is 40, so that can be the frame’s new ymax. We’ll also set the xmax to 40, which means we’re working in a 40×40 square frame \u2014a little Cartesian coordinate space for the line geometry to live in.<\/p>\n

The size<\/em> property is the actual height into which the frame gets squeezed (or stretched, or whatever). Width is proportional.<\/p>\n

 <\/p>\n"},{"acf_fc_layout":"sidebar","content":"","image_reference":false,"layout":"code_snippet","image_reference_figure":"","snippet":"frame: {\r\n xmin: 0,\r\n ymin: 0,\r\n xmax: 40,\r\n ymax: 40\r\n}","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"

Next we just create the path array with our data set up as coordinates. We’ll stick the data values in at the Y value and distribute the X values evenly across our 40 pixel frame. The API allows you to have multiple paths, but we only need one array of points for our sparkline paths.<\/p>\n"},{"acf_fc_layout":"sidebar","content":"","image_reference":false,"layout":"code_snippet","image_reference_figure":"","snippet":"paths: [\r\n [\r\n [0, 5],\r\n [10, 40],\r\n [20, 15],\r\n [30, 25],\r\n [40, 10]\r\n ]\r\n]","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"

Look, a sparkline!<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1000822,"id":1000822,"title":"CIMSymbol_dataLineSample","filename":"CIMSymbol_dataLineSample.jpg","filesize":266890,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_dataLineSample.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript\/cimsymbol_datalinesample","alt":"","author":"6971","description":"","caption":"","name":"cimsymbol_datalinesample","status":"inherit","uploaded_to":1000352,"date":"2020-09-08 19:39:53","modified":"2020-09-08 19:39:53","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_dataLineSample-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_dataLineSample.jpg","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_dataLineSample.jpg","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_dataLineSample.jpg","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_dataLineSample-1536x864.jpg","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_dataLineSample.jpg","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_dataLineSample-826x465.jpg","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_dataLineSample.jpg","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/vannizhang\/pen\/WNwXRzV?editors=1000"},{"acf_fc_layout":"content","content":"

Check it out<\/a> in the codepen editor. Play around with the size<\/em>, frame<\/em>, and data values to get a sense for the pushing and pulling that it does to the rendering. There’s a few moving parts and you might at first feel like Peter Griffin struggling to open the blinds<\/a>, but hang in there.<\/p>\n

Dynamic Sparkline Data<\/h2>\n

Now let’s see how we can feed this suspiciously sparkline-like thing actual dynamic data. We\u2019ll draw a sparkline for Los Angeles County representing “Total Confirmed Cases.”<\/p>\n

We can get the Covid-19 timeseries data for each US County from this Feature Layer<\/a>. And here is an example query<\/a> to fetch all features for Los Angeles county from this feature layer.<\/p>\n

After fetching all the features, we will loop through them and get the value we want to visualize from each feature and save them into a new array (like the array of numbers we made manually in the previous example).<\/p>\n"},{"acf_fc_layout":"sidebar","content":"","image_reference":false,"layout":"code_snippet","image_reference_figure":"","snippet":"\/\/ fetch features for Los Angeles County using it's FIPS code\r\nconst response = await esriRequest('https:\/\/services9.arcgis.com\/6Hv9AANartyT7fJW\/arcgis\/rest\/services\/USCounties_cases_V1\/FeatureServer\/1\/query?where=FIPS%3D%2706037%27&outFields=*&orderByFields=dt&f=json');\r\n\r\n\/\/ get an array of numbers for the confirmed\r\nconst confirmed = response.data.features.map(feature=>feature.attributes.Confirmed);","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"

Now we have a long list of numbers corresponding to confirmed coronavirus cases in Los Angeles County. But this data has many more numbers than we were dealing with in the fake data example, so we need a better way to find the max number from this list instead of picking it manually. Here\u2019s a little doodad that does that for us\u2026<\/p>\n"},{"acf_fc_layout":"sidebar","content":"","image_reference":false,"layout":"code_snippet","image_reference_figure":"","snippet":"const ymax = confirmed.reduce((prev, curr) => Math.max(prev, curr), Number.NEGATIVE_INFINITY);","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"

Construct the path coordinates, just like in the sample above, and you get an honest to goodness sparkline.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1000982,"id":1000982,"title":"CIMSymbol_Sparkline","filename":"CIMSymbol_Sparkline.jpg","filesize":96175,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_Sparkline.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript\/cimsymbol_sparkline","alt":"","author":"6971","description":"","caption":"","name":"cimsymbol_sparkline","status":"inherit","uploaded_to":1000352,"date":"2020-09-08 20:44:44","modified":"2020-09-08 20:44:44","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_Sparkline-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_Sparkline.jpg","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_Sparkline.jpg","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_Sparkline.jpg","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_Sparkline-1536x864.jpg","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_Sparkline.jpg","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_Sparkline-826x465.jpg","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/CIMSymbol_Sparkline.jpg","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/vannizhang\/pen\/bGpYmqo?editors=1000"},{"acf_fc_layout":"content","content":"

Play with it here in this<\/a> codepen sample.<\/p>\n

If you are interested in creating a version of CovidPulse for your area, the full code is available here on GitHub: https:\/\/github.com\/vannizhang\/covid19-trend-map<\/a><\/p>\n

Hopefully this is sufficient to get you going on using CIMSymbols to render sparkline maps. There are so many applications for sparklines to represent time series data as compact distilled visualizations of a dynamic geographic phenomenon. We’re excited to see the maps of time and space that you make.<\/p>\n

Visit CovidPulse<\/a> for an ongoing visualization of the pandemic and this video<\/a> describing it and sparklines.<\/p>\n

Map Well! Jinnan<\/a> and John<\/a><\/p>\n"}],"authors":[{"ID":6971,"user_firstname":"John","user_lastname":"Nelson","nickname":"John Nelson","user_nicename":"j_nelson","display_name":"John Nelson","user_email":"John_Nelson@esri.com","user_url":"http:\/\/www.adventuresinmapping.com","user_registered":"2018-03-02 00:19:05","user_description":"I have far too much fun looking for ways to understand and present data visually, hopefully driving product strategy and engaging users. I work in the ArcGIS Living Atlas team at Esri, pushing and pulling data in all sorts of absurd ways and then sharing the process. I also design user experiences for maps and apps.\r\nWhen I'm not doing those things, I'm chasing around toddlers and wrangling chickens, and generally getting into other ad-hoc adventures. Life is good.\r\nYou might also like these Styles for ArcGIS Pro: esriurl.com\/nelsonstyles","user_avatar":""},{"ID":233942,"user_firstname":"Jinnan","user_lastname":"Zhang","nickname":"Jinnan_Zhang","user_nicename":"jinnan_zhang","display_name":"Jinnan Zhang","user_email":"Jinnan_Zhang@esri.com","user_url":"https:\/\/github.com\/vannizhang","user_registered":"2021-05-24 18:18:00","user_description":"Jinnan is a Senior Product Engineer at Esri's the Living Atlas team, He is interested in developing apps using TypeScript, React and Redux (if necessary), ArcGIS API for JavaScript, D3 and Vanilla JS.","user_avatar":""}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/SparklineSymbol_Card.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/SparklineSymbol_Banner.jpg"},"yoast_head":"\nHow to create a sparkline map with the ArcGIS API for JavaScript<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a sparkline map with the ArcGIS API for JavaScript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-03T12:54:43+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\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript\"},\"author\":{\"name\":\"John Nelson\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/c7b930618049977e8eb11eef6b671468\"},\"headline\":\"How to create a sparkline map with the ArcGIS API for JavaScript\",\"datePublished\":\"2020-09-08T21:41:13+00:00\",\"dateModified\":\"2021-06-03T12:54:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript\"},\"wordCount\":12,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"cartography\",\"How to?\",\"jsapi\",\"sparklines\",\"Tutorial\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript\",\"name\":\"How to create a sparkline map with the ArcGIS API for JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2020-09-08T21:41:13+00:00\",\"dateModified\":\"2021-06-03T12:54:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a sparkline map with the ArcGIS API for JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/c7b930618049977e8eb11eef6b671468\",\"name\":\"John Nelson\",\"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\/2018\/04\/Profile.jpg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Profile.jpg\",\"caption\":\"John Nelson\"},\"description\":\"I have far too much fun looking for ways to understand and present data visually, hopefully driving product strategy and engaging users. I work in the ArcGIS Living Atlas team at Esri, pushing and pulling data in all sorts of absurd ways and then sharing the process. I also design user experiences for maps and apps. When I'm not doing those things, I'm chasing around toddlers and wrangling chickens, and generally getting into other ad-hoc adventures. Life is good. You might also like these Styles for ArcGIS Pro: esriurl.com\/nelsonstyles\",\"sameAs\":[\"http:\/\/www.adventuresinmapping.com\",\"https:\/\/www.instagram.com\/johnmnelson\/\",\"www.linkedin.com\/in\/johnmnelson\",\"https:\/\/x.com\/john_m_nelson\",\"https:\/\/www.youtube.com\/JohnNelsonMaps\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/j_nelson\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to create a sparkline map with the ArcGIS API for JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript","og_locale":"en_US","og_type":"article","og_title":"How to create a sparkline map with the ArcGIS API for JavaScript","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2021-06-03T12:54:43+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\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript"},"author":{"name":"John Nelson","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/c7b930618049977e8eb11eef6b671468"},"headline":"How to create a sparkline map with the ArcGIS API for JavaScript","datePublished":"2020-09-08T21:41:13+00:00","dateModified":"2021-06-03T12:54:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript"},"wordCount":12,"commentCount":1,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["cartography","How to?","jsapi","sparklines","Tutorial"],"articleSection":["Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript","name":"How to create a sparkline map with the ArcGIS API for JavaScript","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2020-09-08T21:41:13+00:00","dateModified":"2021-06-03T12:54:43+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"How to create a sparkline map with the ArcGIS API for JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/c7b930618049977e8eb11eef6b671468","name":"John Nelson","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\/2018\/04\/Profile.jpg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Profile.jpg","caption":"John Nelson"},"description":"I have far too much fun looking for ways to understand and present data visually, hopefully driving product strategy and engaging users. I work in the ArcGIS Living Atlas team at Esri, pushing and pulling data in all sorts of absurd ways and then sharing the process. I also design user experiences for maps and apps. When I'm not doing those things, I'm chasing around toddlers and wrangling chickens, and generally getting into other ad-hoc adventures. Life is good. You might also like these Styles for ArcGIS Pro: esriurl.com\/nelsonstyles","sameAs":["http:\/\/www.adventuresinmapping.com","https:\/\/www.instagram.com\/johnmnelson\/","www.linkedin.com\/in\/johnmnelson","https:\/\/x.com\/john_m_nelson","https:\/\/www.youtube.com\/JohnNelsonMaps"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/j_nelson"}]}},"text_date":"September 8, 2020","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-a-sparkline-map-with-the-arcgis-api-for-javascript","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/SparklineSymbol_Banner.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":26451,"name":"cartography","slug":"cartography","term_group":0,"term_taxonomy_id":26451,"taxonomy":"post_tag","description":"","parent":0,"count":558,"filter":"raw"},{"term_id":32331,"name":"How to?","slug":"how-to","term_group":0,"term_taxonomy_id":32331,"taxonomy":"post_tag","description":"","parent":0,"count":115,"filter":"raw"},{"term_id":127982,"name":"jsapi","slug":"jsapi","term_group":0,"term_taxonomy_id":127982,"taxonomy":"post_tag","description":"","parent":0,"count":7,"filter":"raw"},{"term_id":756612,"name":"sparklines","slug":"sparklines","term_group":0,"term_taxonomy_id":756612,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":27911,"name":"Tutorial","slug":"tutorial","term_group":0,"term_taxonomy_id":27911,"taxonomy":"post_tag","description":"","parent":0,"count":183,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2686,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":361,"filter":"raw"}],"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\/1000352","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\/6971"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1000352"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1000352\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1000352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1000352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1000352"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1000352"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1000352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}