Communicating patterns in large spatiotemporal datasets can be a challenging and complicated task. While a variety of tools are available to visualize these data on the desktop, web technologies offer a unique opportunity to create interfaces that allow users to interactively explore complex multivariate datasets. In this presentation we outline a process for building spatiotemporal visualizations on the web. From data processing through architecture and development we describe technologies and languages you should know to get off the ground and walk through other important considerations in developing intuitive data exploration interfaces.

1. Spatiotemporal Interface
Development:
Using Web Technologies to Bring
Complex Data to Life
Jon Duckworth

2. 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

3. What to Expect
1. Intro to Interfaces
2. The Case for JavaScript
3. Getting Started

4. What is an Interface?

5. Data Interfaces
So you’ve got some data…

6. Data Interfaces
So you’ve got some data…
… now what!?

7. What is an interface?
A tool for…

8. What is an interface?
A tool for…
• interacting with data

9. What is an interface?
A tool for…
• interacting with data
• discovering patterns
& connections

10. What is an interface?
A tool for…
• interacting with data
• discovering patterns
& connections
• telling a story

11. What is an interface?
A tool for…
• interacting with data
• discovering patterns
& connections
• telling a story

12. Spatial Interfaces

13. Maps As Interfaces
Billy Roberts, NREL

14. Multivariate Data
Land-based wind
speed 80 m

15. Multivariate Data
Land-based/offshore
wind speed 100 m

16. Time Series Data

17. Time Series Data

18. Time Series Data

19. Time Series Data

20. Interactive Interfaces

21. Interactive Interfaces
• Empower the user

22. Interactive Interfaces
• Empower the user
• Allow exploration of novel combinations

23. Interactive Interfaces
• Empower the user
• Allow exploration of novel combinations
• Elegantly handle multivariate and
time-series data

24. Interactive Interfaces
• Empower the user
• Allow exploration of novel combinations
• Elegantly handle multivariate and
time-series data
• Make data exploration fun

25. The Beauty of JavaScript

26. Spatiotemporal Visualization

27. Spatiotemporal Visualization

28. Spatiotemporal Visualization

29. Spatiotemporal Visualization

30. Spatiotemporal Visualization

31. Spatiotemporal Visualization

32. Spatiotemporal Visualization

33. Spatiotemporal Visualization

34. Why JavaScript?

35. The Beauty of JavaScript
• Built on interaction
• Event-oriented architecture
• Rapid library development
• Accessibility

36. Getting Started

37. Start Simple!
• Link together a couple of pieces
• Embedded data
• Stick to low-dimensional datasets

38. Learn the Basics
HTML
(Structure)
Container
Left Side Right Side
Map Chart 1
Controls Chart 2
Select
Slider

39. Learn the Basics
HTML
(Structure)
CSS
(Style)
Map
Select Slider
Chart 1
Chart 2

40. Learn the Basics
HTML
(Structure)
CSS
(Style)
JavaScript
(Interaction)
Click
Select Slide
Click
Click

41. Learn the Basics
HTML
(Structure)
CSS
(Style)
JavaScript
(Interaction)
Click
Click

42. Tools for Getting Started

43. Tools for Getting Started

44. Highmaps/Highcharts
Highly featured
http://www.highcharts.com/maps/demo/data-class-two-ranges

45. Highmaps/Highcharts
Highly featured
Hover tooltips
Custom titles,
subtitles, text
Customizable
legends, colors

46. Highmaps/Highcharts
Configuration
objects

47. Highmaps/Highcharts
Thorough
documentation

48. Highmaps/Highcharts
Pre-processed
geographies

49. Highmaps/Highcharts
Very similar
charting API
http://www.highcharts.com/demo/spline-plot-bands

50. Tools for Getting Started

51. Leaflet
Slippy Maps

52. Leaflet
Slippy Maps

53. Leaflet
Slippy Maps

54. Leaflet
Supports
interactivity

55. Leaflet
Supports
interactivity

56. Leaflet
Supports
interactivity

57. Leaflet
Simple &
lightweight

58. Leaflet
Supports
variety of
layer types

59. Tools for Getting Started

60. Underscore
Data Manipulation
• Parsing
• Filtering
• Mapping
• Converting
• Templating

61. Tools for Getting Started

62. D3
Just amazing!

63. D3
Loads of
examples

64. D3
Loads of
examples
Strong user
community

65. D3
Loads of
examples
Strong user
community
Constant
maintenance &
improvement

66. D3
Loads of
examples
Strong user
community
Constant
maintenance &
improvement
https://github.com/mbostock/d3/wiki/Gallery

67. Tools for Getting Started

68. jQuery
DOM
Manipulation
Event
Management
Server
Communication

69. Tools for Getting Started

70. JavaScript Frameworks

71. JavaScript Frameworks
• Provide structure
• Event management
• Modularity
• Extensibility

72. JavaScript Frameworks
• Transparent
• Modular
• Flexible
• Lightweight

73. Parting Thoughts

74. Parting Thoughts
• Keep it simple
• Beg, borrow, and steal
• Learn iteratively
• Have fun!