arcgis api for javascript: data visualization · 2016-03-18 · •vector data (svg or canvas) •...
TRANSCRIPT
![Page 1: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/1.jpg)
ArcGIS API for JavaScript: Data Visualization
Jeremy BartleyJim Herries @jherries
March 8–11, 2016 | Palm Springs, CA
Esri Developer Summit
The ArcGIS API for JavaScript lets you build powerful interactive mapping applications. Learn how you can turn your raw data into information with simple layer styling, rich pop-up windows, and interactive data-driven visualizations.
![Page 2: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/2.jpg)
Feature LayerYour gateway to client-side visualization
![Page 3: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/3.jpg)
• Vector data (svg or canvas)Feature Layer
![Page 4: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/4.jpg)
• Vector data (svg or canvas)• Interactive• Popups
Feature Layer
![Page 5: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/5.jpg)
• Vector data (svg or canvas)• Interactive• Popups• Query (spatial and attribute)
Feature Layer
![Page 6: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/6.jpg)
• Vector data (svg or canvas)• Interactive• Popups• Query (spatial and attribute)• Enables editing
Feature Layer
![Page 7: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/7.jpg)
Various Ways to Visualize a Feature Layer
and more!
![Page 8: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/8.jpg)
Various Ways to Visualize a Feature Layer
and more!
![Page 9: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/9.jpg)
Reality
Analysis & Interpretation
Data
MapsCharts
User Experience
Action
![Page 10: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/10.jpg)
Data
Analysis & Interpretation
User Experience
![Page 11: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/11.jpg)
Renderers……reveal anomalies in the data...help analysis become information...ensure symbology works WITH the data, not against
![Page 12: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/12.jpg)
RenderersSimpleRendererUniqueValueRendererClassBreaksRenderer
![Page 13: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/13.jpg)
• A feature layer has its own default symbol• Defined in the “drawingInfo” property
Feature Layer
![Page 14: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/14.jpg)
• A feature layer has its own default symbol• Defined in the “drawingInfo” property
Feature Layer
![Page 15: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/15.jpg)
SimpleRendererNo Field – Show Me Where!
![Page 16: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/16.jpg)
SimpleRendererNo Field – Show Me Where!
![Page 17: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/17.jpg)
UniqueValueRendererWith Field Name – Show Me What!
![Page 18: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/18.jpg)
UniqueValueRendererWith Field Name – Show Me What!
![Page 19: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/19.jpg)
ClassBreaksRendererWith Field Name – Show Me How Much!
![Page 20: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/20.jpg)
ClassBreaksRendererWith Field Name – Show Me How Much!
![Page 21: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/21.jpg)
Roll your ownWith Expression Function
![Page 22: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/22.jpg)
With Expression Function – Above and Below
![Page 23: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/23.jpg)
With Expression Function – Above and Below
![Page 24: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/24.jpg)
With Expression Function – Predominance Mapping
ArcGIS API for JavaScript: Mapping and Visualization
![Page 25: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/25.jpg)
Parametric Properties on RendererrotationInfosizeInfocolorInfoopacityInfoproportionalSymbolInfoVi lV i bl P t i d S b l
![Page 26: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/26.jpg)
Rotation• Renderer.rotationInfo
Arithmetic
0°
Geographic
0°
ArcGIS API for JavaScript: Mapping and Visualization
![Page 27: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/27.jpg)
Varying Size – By Real-World Distance/Area• SizeInfo visual variable
ArcGIS API for JavaScript: Mapping and Visualization
![Page 28: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/28.jpg)
Varying Size – By Data• SizeInfo visual variable
![Page 29: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/29.jpg)
Varying Size – By Data – bounded • SizeInfo visual variable
![Page 30: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/30.jpg)
Varying Size – By Data – By Scale
Map should lookgood at all scales
![Page 31: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/31.jpg)
Varying Size – By Value
ArcGIS API for JavaScript: Mapping and Visualization
![Page 32: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/32.jpg)
Varying Color by data• ColorInfo Visual Variable
ArcGIS API for JavaScript: Mapping and Visualization
![Page 33: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/33.jpg)
Varying Color with Stops
![Page 34: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/34.jpg)
Varying Opacity by data• OpacityInfo Visual Variable
![Page 35: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/35.jpg)
Predominance Mapping with Transparency
![Page 36: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/36.jpg)
Predominance Mapping with data driven opacity
![Page 37: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/37.jpg)
Renderers to loveDotDensityRendererBlendRendererScaleDependentRendererHeatmapRendererLabeling
![Page 38: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/38.jpg)
Dot Density• DotDensityRenderer
ArcGIS API for JavaScript: Mapping and Visualization
![Page 39: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/39.jpg)
DotDensity can represent 1 dot per value
![Page 40: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/40.jpg)
BlendRenderer -- Beta
![Page 41: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/41.jpg)
![Page 42: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/42.jpg)
![Page 43: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/43.jpg)
Scale Dependence• ScaleDependentRenderer
![Page 44: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/44.jpg)
HeatmapHeatmapRenderer
![Page 45: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/45.jpg)
Labeling• LabelLayer
![Page 46: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/46.jpg)
SmartMappingcreateColorRenderercreateSizeRenderercreateTypeRenderercreatePredominanceRenderer
Let your data drive your visualization
![Page 47: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/47.jpg)
Smart Mapping
• Introduced in 3.13• Takes the guesswork out of:
- What colors to use…for fill, outline, background fill outline, etc- What opacity to use on each color- What size to use for lines, markers, outlines on markers- What size is appropriate for what scale
• Does this by looking at the data, the basemap, and the story you want to tell
• Data driven defaults
• Used by authoring and data exploration apps
![Page 48: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/48.jpg)
Smart Mapping API components -- Styles
![Page 49: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/49.jpg)
Smart Mapping API components – FL Stats Plugin
![Page 50: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/50.jpg)
Smart Mapping API components – FL Stats Plugin
![Page 51: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/51.jpg)
Smart Mapping API components – smartMapping
![Page 52: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/52.jpg)
Smart Mapping API components – smartMapping
![Page 53: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/53.jpg)
SmartMapping in the ArcGIS API for JavaScriptIt’s all there
![Page 54: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/54.jpg)
smartMapping HeatmapcreateHeatmapRenderer
![Page 55: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/55.jpg)
smartMapping ColorcreateColorRenderer
![Page 56: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/56.jpg)
smartMapping SizecreateSizeRenderer
![Page 57: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/57.jpg)
smartMapping TypecreateTypeRenderer
![Page 58: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/58.jpg)
smartMapping PredominancecreatePredominanceRenderer
![Page 59: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/59.jpg)
Q & ARate This Session
ArcGIS API for JavaScript: Data Visualization
Jeremy BartleyJim Herries @jherries
![Page 60: ArcGIS API for JavaScript: Data Visualization · 2016-03-18 · •Vector data (svg or canvas) • Interactive • Popups • Query (spatial and attribute) Feature Layer • Vector](https://reader030.vdocument.in/reader030/viewer/2022013010/5f066d7b7e708231d417f159/html5/thumbnails/60.jpg)
Download the Esri Events app and find your event
Select the session youattended
Scroll down to the “Feedback” section
Complete Answers,add a Comment,
and Select “Submit”
Please rate this Session ArcGIS API for JavaScript: Data Visualization