INTRODUCTION TO PROCESSING

A data visualization tool

BY: Tian LAN

The University of Hong Kong

2013-10-10

OUTLINE• WHY

• WHAT

• HOW

• CONCLUSION.

Why Processing?

Why processing?• Data-driven research

• Visualizing -> Data mining;

• Sensible City Lab @ MIT (Personally).• Case: Live Singapore!

• Real time data: Phone calls and text message activities; bus transit data; taxi trajectories; weather condition; airlines and shipment flows.

• Put city and people under lens of data

Video demo

What is Processing?

Three perspectives of Processing• A language view• An IDE view• A community view

Three perspectives of Processing• A language view

• O-O, Java “family”.• Data type: primitive, composite• Input: mouse and keyboard events, file.

• tablets and devices (Leap Motion, Kinect…)

• Graphics and renders: 2D/3D, shape, shaders, camera, light…• Math• …

• Reference

Three perspectives of Processing• A language view (backbone of a sketch)

• void setup() {• size(400, 400);• stroke(255);• }• • void draw() {• line(150, 25, mouseX, mouseY);• }• • void mousePressed() {• background(192, 64, 0);• }

Initializing work: canvas size, render mode,

parsing…

Loop work: updating, animation, …

User input: mouse event, …

Three perspectives of Processing• An IDE view

• Plug into Eclipse

Three perspectives of Processing• A community view (Reference)

Three perspectives of Processing• A community view (None of our business?)

• Unfolding map library• Geo-visualization;• More user interaction: multi-touch gestures;• Multi-map providers, tile-based map.• For Processing 1.5 only. • Shape file; GeoJASON file.

Three perspectives of Processing• A community view (None of our business?)

• Unfolding map + TileMill

How to use Processing?

“Hello world”

Other selected solutions of visualizing data

A little bit thought

Technology or Art?

Image courtesy of Data Visualization Laboratory

Data sources• NASA data center• MARSA: Geolife• HK Government: data.one

• Data Tang (数据堂)

• Stanford Network Dataset Collection• Social media (Twitter API, micro blog API, …)

Liqui Data

Video demo

Recommended online resources:

• http://datavlab.org (Not accessible on Oct. 16)

• http://www.civn.cn (Currently not available; server down)

• Onformative studio

• http://www.visualisingdata.com/index.php/resources/

• 视物致知