arcgis api for javascript: data visualization...data visualization ... 2017 esri developer summit...

ArcGIS API for JavaScript: Data

Visualization

Ben Ramseth & Rene Rubalcava

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

• Documentation

Arcade

• Add calculated dynamic fields

Arcade

• New ways to explore your data

Arcade

• Awesome Demo Fun Time!

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