Total Knockout: Start-to-Finish Development of Suitability Applications Using Image Server, D3.js, and Knockout.js

Michael Lippmann, Blue Raster

Total Knockout:

Start-to-Finish Development of Suitability Applications Using Image Server, D3.js, and Knockout.js

Alicia BarnashBrendan CollinsRobert Winterbottom

Pattern: Online Mapping Applications

• Focused Applications

• Curated map experience

• Mobile apps• Open Data APIs• Near real time data

• Determine locations with necessary qualities for a specific purpose.

• Ability to consume and customize analysis via web-connected devices.

Raster-based Suitability Analysis for the Web

Elevation

Landcover

Peat Soil Depth

Rainfall

Slope

Euclidean Distance from Conservation Areas

Soil Type

Soil Acidity

Soil Depth

Raster-based Suitability Analysis for the Web

• User provides thresholds for various criteria

• Each variable has a corresponding layer within Image Service.

Suitability Server-side Setup

• Preprocessing Data– Optimizing data for

ArcGIS Server.

• Create Image Service– Raster functions

replace custom server development.

Preprocessing with Arcpy

SDR

Preprocessing with Arcpy

arcpy.Describe(raster)

– Raster Format– NoData Value–Mean Cell Height / Width (resolution)– Pixel Type– Spatial Reference– Read Documentation

SDR

Preprocessing using Arcpy

arcpy.Reclassify(raster)

– Convert Floats to Integers– Remove Irrelevant Values– Read Documentation

SDR

Preprocessing using Arcpy

arcpy.Resample(raster)

– Create Common Resolution– Align Raster Pixels– Create Common Extent– Read Documentation

SDR

Preprocessing using Arcpy

Additional Helper Functions

• arcpy.CreateFileFDB– Read Documentation

• arcpy.CreateMosaicDataset– Read Documentation

• arcpy.AddRastersToMosaicDataset– Read Documentation

• arcpy.EditRasterFunction– Read Documentation

Create Raster Function Chains

Overview- Client Side Workflow

Request/Receive Image Server Data

Add to KO View Model

UI automatic refresh with KO Data Binding

function Callback(response){…return(data);

}

ViewModel.histograms(data);

<div class = “dataTitle” data-bind = “text:imageData().title”>…</div>

Requesting Image Service Data

Use Image Service Raster Functions to:- Update Mosaic Rendering- Get Raster Statistics- Export Images

based on User selected settings

Requesting Image Service Data

Requesting Image Service Data

/exportImage?/computeHistograms?

Add Image Service data to View Model

Knockout JS Library

Advantage: No need to write code/event handlers to update DOM directlyevery time the User changes suitability settings.Write Less Code

MVVM Design Pattern

Separate: Data Model - Presentation

Stored DataCode representation of data and operations on UI

User Interface

Initialize View Model

Update View Model with Image Service Data

Knockout Bindings

• visible• text• html• foreach• attr• click• Or use for storage

of particular settings.

Knockout: How it Works

Knockout: What else can we use it for?

Knockout: What else can we use it for?

Data Visualization with D3 and Highcharts

• D3 is a fantastic data visualization library, not a charting library.

• D3 has the ability to create some really beautiful visualizations.

• Highcharts is a simple plug and play charting library.

D3 Examples

D3 Examples (cont.)

D3 & Highcharts

D3 & Highcharts (cont.)

Thinking Mobile

• Mobile is changing the game and cannot be ignored.

• Develop an application using JavaScript with a mobile friendly UI.

• Test on a real device, emulator’s, simulator’s, and resizing browser windows is not enough.

Resource to Check Out

http://knockoutjs.com/

http://www.esri.com/software/arcgis/arcgisserver/extensions/image-extension

http://d3js.org/

http://www.highcharts.com/

Q & A

Portfolio available at blueraster.com/blog

@aspacebarnash

@brendancol

@rwinter85

Alicia Barnash

Brendan Collins

Robert Winterbottom