arcgis api for javascript: data visualization...data visualization ... 2017 esri developer summit...
TRANSCRIPT
![Page 1: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/1.jpg)
ArcGIS API for JavaScript: Data
Visualization
Ben Ramseth & Rene Rubalcava
![Page 2: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/2.jpg)
Data Visualization – Why?
• Visual exploration:
- Anomalies in the data
- Trends
- Change detection
• Display of analytical results
• Interactivity (e.g. highlighting selections)
![Page 3: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/3.jpg)
How about this?
![Page 4: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/4.jpg)
Data Visualization – Where?
• Server – side • Client – sideX: -14.55°Y: 45.2°
![Page 5: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/5.jpg)
Server - side rendering
• Layer Infos / LayerDrawingOptions (apply renderers to layers-
ArcGISDynamicMapServiceLayer)
• Map service with asynchronous geoprocessing
• Map viewer (ArcGIS online/ Server defaults)
![Page 6: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/6.jpg)
Client – side rendering
• SVG
• Canvas
• Renderers on feature/graphics layers
• Feature layer Stats Plugin
![Page 7: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/7.jpg)
Data Visualization – How?
• Service Defaults
• Canvas
• SVG
• Renderers
![Page 8: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/8.jpg)
• A feature layer has its own default symbol
• Defined in the “drawingInfo” property
Feature Layer
![Page 9: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/9.jpg)
Renderers
• SimpleRenderer - only location information - no field - where?
• UniqueValueRenderer - what?
• ClassBreaksRenderer - how much?
• DotDensity
• BlendRenderer
• ScaleDependentRenderer
• HeatmapRenderer
• TemporalRenderer
• Labeling - LabelLayer
With Expression Function
Above-Below
Predominance
![Page 10: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/10.jpg)
SimpleRenderer
No Field – Show Me Where!
![Page 11: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/11.jpg)
UniqueValueRenderer
With Field Name – Show Me What!
![Page 12: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/12.jpg)
ClassBreaksRenderer
With Field Name – Show Me How Much!
![Page 13: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/13.jpg)
With Expression Function – Above and Below
![Page 14: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/14.jpg)
ArcGIS API for JavaScript: Mapping and Visualization
Dot Density• DotDensityRenderer
![Page 15: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/15.jpg)
DotDensity can represent 1 dot per value
![Page 16: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/16.jpg)
BlendRenderer -- Beta
![Page 17: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/17.jpg)
![Page 18: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/18.jpg)
![Page 19: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/19.jpg)
Scale Dependence• ScaleDependentRenderer
![Page 20: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/20.jpg)
HeatmapHeatmapRenderer
![Page 22: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/22.jpg)
Renderer properties
• rotationInfo
• sizeInfo
• colorInfo
• opacityInfo
• proportionalSymbolInfo
![Page 23: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/23.jpg)
Rotation• Renderer.rotationInfo
ArcGIS API for JavaScript: Mapping and Visualization
Arithmetic
0°
Geographic
0°
![Page 24: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/24.jpg)
ArcGIS API for JavaScript: Mapping and Visualization
Varying Size – By Real-World Distance/Area• SizeInfo visual variable
![Page 25: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/25.jpg)
Varying Size – By Data• SizeInfo visual variable
![Page 26: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/26.jpg)
Varying Size – By Data – bounded • SizeInfo visual variable
![Page 27: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/27.jpg)
Varying Size – By Data – By Scale
Map should look
good at all scales
![Page 28: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/28.jpg)
Varying Size – By Value
ArcGIS API for JavaScript: Mapping and Visualization
![Page 29: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/29.jpg)
Varying Color by data• ColorInfo Visual Variable
ArcGIS API for JavaScript: Mapping and Visualization
![Page 31: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/31.jpg)
Varying Opacity by data• OpacityInfo Visual Variable
![Page 32: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/32.jpg)
SmartMapping (data driven defaults)
• createColorRenderer
• createSizeRenderer
• createTypeRenderer
• createPredominanceRenderer
![Page 33: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/33.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 34: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/34.jpg)
Smart Mapping API components -- Styles
![Page 35: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/35.jpg)
Smart Mapping API components – FL Stats Plugin
![Page 36: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/36.jpg)
Smart Mapping API components – FL Stats Plugin
![Page 37: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/37.jpg)
Smart Mapping API components – smartMapping
![Page 38: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/38.jpg)
Smart Mapping API components – smartMapping
![Page 39: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/39.jpg)
SmartMapping in the ArcGIS API for JavaScriptIt’s all there
![Page 40: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/40.jpg)
smartMapping HeatmapcreateHeatmapRenderer
![Page 41: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/41.jpg)
smartMapping ColorcreateColorRenderer
![Page 42: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/42.jpg)
smartMapping SizecreateSizeRenderer
![Page 43: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/43.jpg)
smartMapping TypecreateTypeRenderer
![Page 44: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/44.jpg)
smartMapping PredominancecreatePredominanceRenderer
![Page 45: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/45.jpg)
Arcade
• New expression language for ArcGIS Platform
• Supports simple math and text manipulation expressions
• Profiles include Renderer
• Can dynamically add fields used for rendering
• Documentation
![Page 46: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/46.jpg)
Arcade
• Add calculated dynamic fields
![Page 47: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/47.jpg)
Arcade
• New ways to explore your data
![Page 48: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/48.jpg)
Arcade
• Awesome Demo Fun Time!
![Page 49: ArcGIS API for JavaScript: Data Visualization...Data Visualization ... 2017 Esri Developer Summit DC--Presentation, 2017 Esri Developer Summit DC, ArcGIS API for JavaScript: Data Visualization](https://reader031.vdocuments.mx/reader031/viewer/2022011904/5f23d2ffb0fa301e403c2108/html5/thumbnails/49.jpg)
Thank you for attending our session
• Please check out the samples and documentation for further information and
resources regarding visualization.
https://developers.arcgis.com/javascript/3/jssamples/#renderers,_symbols,_visualization