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.

Feature LayerYour gateway to client-side visualization

• Vector data (svg or canvas)Feature Layer

• Vector data (svg or canvas)• Interactive• Popups

Feature Layer

• Vector data (svg or canvas)• Interactive• Popups• Query (spatial and attribute)

Feature Layer

• Vector data (svg or canvas)• Interactive• Popups• Query (spatial and attribute)• Enables editing

Feature Layer

Various Ways to Visualize a Feature Layer

and more!

Various Ways to Visualize a Feature Layer

and more!

Reality

Analysis & Interpretation

Data

MapsCharts

User Experience

Action

Data

Analysis & Interpretation

User Experience

Renderers……reveal anomalies in the data...help analysis become information...ensure symbology works WITH the data, not against

RenderersSimpleRendererUniqueValueRendererClassBreaksRenderer

• A feature layer has its own default symbol• Defined in the “drawingInfo” property

Feature Layer

• A feature layer has its own default symbol• Defined in the “drawingInfo” property

Feature Layer

SimpleRendererNo Field – Show Me Where!

SimpleRendererNo Field – Show Me Where!

UniqueValueRendererWith Field Name – Show Me What!

UniqueValueRendererWith Field Name – Show Me What!

ClassBreaksRendererWith Field Name – Show Me How Much!

ClassBreaksRendererWith Field Name – Show Me How Much!

Roll your ownWith Expression Function

With Expression Function – Above and Below

With Expression Function – Above and Below

With Expression Function – Predominance Mapping

ArcGIS API for JavaScript: Mapping and Visualization

Parametric Properties on RendererrotationInfosizeInfocolorInfoopacityInfoproportionalSymbolInfoVi lV i bl P t i d S b l

Rotation• Renderer.rotationInfo

Arithmetic

0°

Geographic

0°

ArcGIS API for JavaScript: Mapping and Visualization

Varying Size – By Real-World Distance/Area• SizeInfo visual variable

ArcGIS API for JavaScript: Mapping and Visualization

Varying Size – By Data• SizeInfo visual variable

Varying Size – By Data – bounded • SizeInfo visual variable

Varying Size – By Data – By Scale

Map should lookgood 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

Predominance Mapping with Transparency

Predominance Mapping with data driven opacity

Renderers to loveDotDensityRendererBlendRendererScaleDependentRendererHeatmapRendererLabeling

Dot Density• DotDensityRenderer

ArcGIS API for JavaScript: Mapping and Visualization

DotDensity can represent 1 dot per value

BlendRenderer -- Beta

Scale Dependence• ScaleDependentRenderer

HeatmapHeatmapRenderer

Labeling• LabelLayer

SmartMappingcreateColorRenderercreateSizeRenderercreateTypeRenderercreatePredominanceRenderer

Let your data drive your visualization

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

Q & ARate This Session

ArcGIS API for JavaScript: Data Visualization

Jeremy BartleyJim Herries @jherries

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