foss4g 2014

Data Visualization using D3.js and Flask

Charmyne Mamador & Luis Caezar Ian Panganiban

About US

• Licensed Geodetic Engineers
• Tidal Current Energy Integrated Resource Assessment and Spatial Planning (Current)
  • WebGIS Component - Django and D3 JS
• Hackathons
  • Readysaster: Hack for Resilience
  • KabantayNgBayan: The Procurement Hack
• Web Developers - PERSYA Philippines
• We Speak - English, Filipino, HTML, CSS, Javascript, Java, Python...
• 2nd FOSS4G

Who are you?

• Researchers?
• LGU?
• Academe?
• Students?
• Spatial Scientists?
• Non Developers?

Outline

• Introduction
• Dev Machine
• Flask Development
• D3 Javascript Library
• Go Beyond

introduction

What is Data?

• a set of values (qualitative or quantitative)
• CSV, PDF, SHP, GEOTIFF, LiDAR, API, Raw Paper, ETC.
• Closed vs Open
• Data vs Information

Why do we need to visualize data?

• Readable
• Appreciation
• Understanding

Data Visualization

• Paper or Digital
• 2D or 3D
• Web/Mobile or Desktop

"The coolest thing to do with your data will be thought of by someone else"

Flask + D3 = Data Viz

What is Flask?

• Python Web Framework
• Single File Development
• Fast Implementation

D3 js (Data Driven Documents)

• Javascript Library
• Data Visualization
• Dynamic

Development Machine

Setup and Requirements

python -v

[sudo] apt-get install python-pip

[sudo] pip install --proxy http://proxy:port virtualenv

virtualenv foss4gEnv

source foss4gEnv/bin/activate

(foss4gEnv)pip install --proxy http://proxy:port flask

Flask Development

Project Implementation

• Singe File
• Multiple Files

Directory Structure

First Flask Application

				    #run.py
					from flask import Flask
					app = Flask(__name__)

					@app.route("/")
					def home():
					    return "Hello World!"

					if __name__ == "__main__":
					    app.debug = True
					    app.run()
				    

terminal: python run.py

Rendering Pages

				    #run.py
					from flask import Flask, render_template
					app = Flask(__name__)

					@app.route("/")
					def home():
					    return render_template("index.html")

					if __name__ == "__main__":
					    app.debug = True
					    app.run()
				    

Rendering Pages - Final Notes

• put all the html files in the templates folder
• put all the css files in the css folder
• put all the js files in the js folder

Data Driven Documents

D3 Overview

JavaScript library for manipulating documents based on data

Stanford University's Stanford Visualization Group

Protovis

Mike Bostock

_____ + D3 = Data Viz

Examples

Force-Directed Graph

Bullet Charts

Sequences Sunburst

Maps

Maps

Maps

TODAY's

mini

project

Peak!

bit by bit

Theme & Data

Map - with regional boundaries

Circle markers

Percentage Value

Events

Let's DO

some CARDIO

(for the fingers)

Go Beyond...

• Web Development - HTML, CSS, Javascript
• Try working with dynamic data
• 3D Web Rendering
• Application Deployment (Cloud)

"Don't just buy a new video game — make one, Don't just download the latest app — help design it. Don't just play on your phone — program it."

US Pres. Barack Obama