Charts & Custom Visualizations Beyond the Map. Flora Vale Tom Wayson

Transcription

1 Charts & Custom Visualizations Beyond the Map Flora Vale Tom Wayson

2 What is data visualization?

3 Dr. John Snow s Map of London Cholera Outbreak of 1854 Florence Nightingale s Rose Diagram of the Causes of Mortality in the Army of the East of 1859 Charles Minard s Flow Map of Napoleon s Russian Campaign of 1812 Hans Rosling s Animated Visualization of Global Life Expectancy Over Time from his 2006 TED Talk

4 Why visualize data? Convert slow reasoning tasks into fast perception tasks

5

6

7 Position Size Shape Value Hue Orientation Texture

8

9

10

11

12

13

14

15 Good chart vs Bad chart

16

17

18

19

20

21 ?

22 ?

23

24

25

26

27

28 ?!

29 Charting UI/UX in ArcGIS Pro X

30 Charts as part of the spatial analysis workflow Explore data Interpret analysis results Communicate findings

31 Visualizations to support spatial analysis Distributions and frequency Category comparisons Relationships and correlations Change over time or distance

32 Distributions Understanding the shape of numerical data

33 Categories Summarizing and comparing amounts across categorical data

34 Relationships Explore correlations and trends

35 Change Visualizing trends and cycles over time or distance

36 When a map (alone) isn t the best option

37 When a map (alone) isn t the best option

38 When a map (alone) isn t the best option

39 When a map (alone) isn t the best option

40 When a map (alone) isn t the best option

41 When a map (alone) isn t the best option

42 When a map (alone) isn t the best option

43 Demo

44 CEDAR JAVASCRIPT CHARTS FOR ARCGIS

45 INTEGRATED WITH ARCGIS Use url / query or featureset

46 SMART DEFAULTS (with overrides)

47 EXTEND, RE-USE, SHARE

48 PROCESS {} definition

49 GETTING STARTED

50 Let's build this chart

51 INSTALL WITH PACKAGE MANAGER npm install or yarn

52 OR FROM CDN <!-- load the amcharts base library --> <script src=" <!-- for bar, line, and area charts --> <script src=" <!-- optionally load calcite theme --> <script <!-- load cedar --> <script

53 var definition = {}; BUILD DEFINITION Just a POJO Minimum: type, datasets, series

54 definition.type = 'bar'; DEFINITION type Predefined: 'bar', 'line', 'scatter', 'pie' Or provide your own: specification: {...}

55 DEFINITION datasets definition.datatsets = [{ url: " query: { orderbyfields: "TotPop DESC" } }]

56 DEFINITION series definition.series = [ { category: {field:"name",label:"us State"}, value: {field:"totpop_cy",label:"population"} } ]

57 CREATE CHART INSTANCE (ESM) import { Chart } from '@esri/cedar'; // create a new cedar chart at a specified element const mychart = new Chart('elementId', definition)

58 CREATE CHART INSTANCE (UMD) // create a new cedar chart at a specified element var mychart = new cedar.chart('elementid', definition)

59 SHOW THE CHART // execute query and render chart cedarchart.show()

60 WORKING WITH MAPS

61 CHARTING FEATURES

62 DATASET data definition.datatsets = [{ data: { features: graphics } }] Expects a FeatureSet

63 USE JAVASCRIPT TO FILTER/SORT graphics.sort(function(a, b) { return b.attributes.grand_tota -a.attributes.grand_tota; });

64 AGGREGATING MAP DATA

65 DATASET data WITH AGGREGATE query definition.datasets: [{ url: " query: { groupbyfieldsforstatistics: "state", outstatistics: [{ statistictype: "sum", onstatisticfield: "injuries", outstatisticfieldname: "injuries_sum" }] } }] Accepts any valid query parameters

66 CHART TYPES

67 OVERRIDING CHART DEFAULTS definition.overrides = { categoryaxis: { labelrotation: -45 }, legend: { enabled: true } } Accepts any amcharts config parameters

68 BETTER TO USE CEDAR API definition.overrides = { categoryaxis: { labelrotation: -45 } } definition.legend = { visible: true }

69 V1 COMPARED TO V0 brings improved support for multi-series charts join data from multiple queries better control of data (promises) uses AmCharts instead of vega and d3

70 V1 STILL IN BETA Gaps: docs (you're looking at it) configuring tooltips chart events (click, mouseover, etc) chart selection

71 CEDAR IN ARCGIS HUB

72 ARCGIS HUB USERS DRIVE CEDAR REQUIREMENTS Recent example built with cedar

73 SIMPLIFIED CHART BUILDING EXPERIENCE

74 EMBER-CLI-CEDAR Can be used in any Ember application

75 CEDAR'S ROAD AHEAD

76 // TODO: docs! shared ArcGIS chart spec expand cedar API import() finish v1

77 DEMO: import() ARCGIS PRO CHART

78 THE Visualizations-Beyond-the-Map