ArcGIS API for JavaScript: Data
Visualization
Rene Rubalcava (Esri Inc)
Guenter Grimm (Esri UK)
Data Visualization – Why?
• Visual exploration:
- Anomalies in the data
- Trends
- Change detection
• Display of analytical results
• Interactivity (e.g. highlighting selections)
How about this?
Data Visualization – Where?
• Server – side • Client – sideX: -14.55°Y: 45.2°
Server - side rendering
• Layer Infos / LayerDrawingOptions (apply renderers to layers-
ArcGISDynamicMapServiceLayer)
• Map service with asynchronous geoprocessing
• Map viewer (ArcGIS online/ Server defaults)
Client – side rendering
• SVG
• Canvas
• Renderers on feature/graphics layers
• Feature layer Stats Plugin
Data Visualization – How?
• Service Defaults
• Canvas
• SVG
• Renderers
• A feature layer has its own default symbol
• Defined in the “drawingInfo” property
Feature Layer
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
SimpleRenderer
No Field – Show Me Where!
UniqueValueRenderer
With Field Name – Show Me What!
ClassBreaksRenderer
With Field Name – Show Me How Much!
With Expression Function – Above and Below
ArcGIS API for JavaScript: Mapping and Visualization
Dot Density• DotDensityRenderer
DotDensity can represent 1 dot per value
BlendRenderer -- Beta
Scale Dependence• ScaleDependentRenderer
HeatmapHeatmapRenderer
Labeling• LabelLayer
Renderer properties
• rotationInfo
• sizeInfo
• colorInfo
• opacityInfo
• proportionalSymbolInfo
Rotation• Renderer.rotationInfo
ArcGIS API for JavaScript: Mapping and Visualization
Arithmetic
0°
Geographic
0°
ArcGIS API for JavaScript: Mapping and Visualization
Varying Size – By Real-World Distance/Area• SizeInfo visual variable
Varying Size – By Data• SizeInfo visual variable
Varying Size – By Data – bounded • SizeInfo visual variable
Varying Size – By Data – By Scale
Map should look
good at all scales
Varying Size – By Value
ArcGIS API for JavaScript: Mapping and Visualization
Varying Color by data• ColorInfo Visual Variable
ArcGIS API for JavaScript: Mapping and Visualization
Varying Color with Stops
Varying Opacity by data• OpacityInfo Visual Variable
SmartMapping (data driven defaults)
• createColorRenderer
• createSizeRenderer
• createTypeRenderer
• createPredominanceRenderer
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
Smart Mapping API components -- Styles
Smart Mapping API components – FL Stats Plugin
Smart Mapping API components – FL Stats Plugin
Smart Mapping API components – smartMapping
Smart Mapping API components – smartMapping
SmartMapping in the ArcGIS API for JavaScriptIt’s all there
smartMapping HeatmapcreateHeatmapRenderer
smartMapping ColorcreateColorRenderer
smartMapping SizecreateSizeRenderer
smartMapping TypecreateTypeRenderer
smartMapping PredominancecreatePredominanceRenderer
Arcade
• New expression language for ArcGIS Platform
• Supports simple math and text manipulation expressions
• Profiles include Renderer
• Can dynamically add fields used for rendering
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