2015 foss4g track: spatiotemporal interface development: using web technologies to bring complex...

Spatiotemporal Interface Development:

Using Web Technologies to Bring Complex Data to Life

Jon Duckworth

Jon Duckworth

M.Eng. Civil Engineering Univ. of Colorado Denver | 2013- 2015

Intern & GIS Scientist National Renewable Energy Lab | 2014- present

__________________________________________

HTML/CSS/JS Python PostgreSQL/PostGIS R Command Line Utilities HDF5

What to Expect

1. Intro to Interfaces

2. The Case for JavaScript

3. Getting Started

What is an Interface?

Data Interfaces

So you’ve got some data…

Data Interfaces

So you’ve got some data…

… now what!?

What is an interface?

A tool for…

What is an interface?

A tool for…

• interacting with data

What is an interface?

A tool for…

• interacting with data

• discovering patterns

& connections

What is an interface?

A tool for…

• interacting with data

• discovering patterns

& connections

• telling a story

What is an interface?

A tool for…

• interacting with data

• discovering patterns

& connections

• telling a story

Spatial Interfaces

Maps As Interfaces

Billy Roberts, NREL

Multivariate Data

Land-based wind speed 80 m

Multivariate Data

Land-based/offshore wind speed 100 m

Time Series Data

Time Series Data

Time Series Data

Time Series Data

Interactive Interfaces

Interactive Interfaces

• Empower the user

Interactive Interfaces

• Empower the user

• Allow exploration of novel combinations

Interactive Interfaces

• Empower the user

• Allow exploration of novel combinations

• Elegantly handle multivariate and

time-series data

Interactive Interfaces

• Empower the user

• Allow exploration of novel combinations

• Elegantly handle multivariate and

time-series data

• Make data exploration fun

The Beauty of JavaScript

Spatiotemporal Visualization

Spatiotemporal Visualization

Spatiotemporal Visualization

Spatiotemporal Visualization

Spatiotemporal Visualization

Spatiotemporal Visualization

Spatiotemporal Visualization

Spatiotemporal Visualization

Why JavaScript?

The Beauty of JavaScript

• Built on interaction

• Event-oriented architecture

• Rapid library development

• Accessibility

Getting Started

Start Simple!

• Link together a couple of pieces

• Embedded data

• Stick to low-dimensional datasets

Learn the Basics

HTML

(Structure)

Container Left Side Right Side Map Chart 1 Controls Chart 2 Select Slider

Learn the Basics

HTML

(Structure)

CSS

(Style)

Map

Select Slider

Chart 1

Chart 2

Learn the Basics

HTML

(Structure)

CSS

(Style)

JavaScript

(Interaction)

Click

Select Slide

Click

Click

Learn the Basics

HTML

(Structure)

CSS

(Style)

JavaScript

(Interaction)

Click

Click

Tools for Getting Started

Tools for Getting Started

Highmaps/Highcharts

Highly featured

http://www.highcharts.com/maps/demo/data-class-two-ranges

Highmaps/Highcharts

Highly featured

Hover tooltips

Custom titles, subtitles, text

Customizable legends, colors

Highmaps/Highcharts

Configuration objects

Highmaps/Highcharts

Thorough documentation

Highmaps/Highcharts

Pre-processed geographies

Highmaps/Highcharts

Very similar charting API

http://www.highcharts.com/demo/spline-plot-bands

Tools for Getting Started

Leaflet

Slippy Maps

Leaflet

Slippy Maps

Leaflet

Slippy Maps

Leaflet

Supports interactivity

Leaflet

Supports interactivity

Leaflet

Supports interactivity

Leaflet

Simple & lightweight

Leaflet

Supports variety of layer types

Tools for Getting Started

Underscore Data Manipulation

• Parsing

• Filtering

• Mapping

• Converting

• Templating

Tools for Getting Started

D3

Just amazing!

D3

Loads of examples

D3

Loads of examples

Strong user community

D3

Loads of examples

Strong user community

Constant maintenance & improvement

D3

Loads of examples

Strong user community

Constant maintenance & improvement

https://github.com/mbostock/d3/wiki/Gallery

Tools for Getting Started

jQuery

DOM Manipulation

Event Management

Server Communication

Tools for Getting Started

JavaScript Frameworks

JavaScript Frameworks

• Provide structure

• Event management

• Modularity

• Extensibility

JavaScript Frameworks

• Transparent

• Modular

• Flexible

• Lightweight

Parting Thoughts

Parting Thoughts

• Keep it simple

• Beg, borrow, and steal

• Learn iteratively

• Have fun!