Class 06.01

Assignment

Think about your final project, pick an idea, requirements (involves with color mapping, pixel/shapes drawing and geo location elements). Write a blog post of your progress, focus on the research of dataset and conceptual sketches).

Class Notes

Learned how to draw Great Circle Arc. ( Algorithm )

Sample Code: download

Note: You can switch map region inside setupMap() function by giving right coordinates. You may noticed the horizontal lines across the globe, it may be caused by the drawArc() function I ported from python, will update when I have time to dig into the code.

China Flights Map:china

 

World Flights Map:world

Class 05.02

Learn:

  1. PVector https://processing.org/tutorials/pvector/
  2. Projection http://www.gicentre.net/utils/mapprojection/
  3. Shape Data http://www.amcharts.com/svg-maps/
  4. Image Export http://learnosm.org/en/map-design/tilemill/

References:

http://kartoweb.itc.nl/geometrics/map%20projections/mappro.html
Assignments:
Dive into the dataset you will get from Moves.app, and write down your ideas of how are you going to visualize it in a blog post.

Class 04.01

Image Metadata

Face Detection

Assignment

  • Work on your photo project and post image/video on blog
  • Deadline: midnight this Sunday
  • Reference Code: zip

Class 02.02

Learn the process of data visualization.

STEPS

  1. Load Data ( load data from CSV file into object class )
  2. Analyze Data ( find the data range )
  3. Draw Shapes ( based on randomly generated data set )
  4. Mapping Color ( based on the data )
  5. Link Data ( to your generated graphs )
  6. Plot Data ( onto a big canvas )
  7. Export Data ( save as pdf )
  8. Refine and re-arrange your data graphs

Download: zip

meals

Class 02.01

Keynote

Class.02.01
 

Example Code

https://github.com/xyfeng/expressing-data/archive/master.zip

  • shape_basic (drawing basic shapes)
  • shape_diagram (using basic shapes to compose diagram)
  • shape_transform (using transform to create diagram)
  • color_spectrum (draw color spectrum in HSB mode)
  • color_spectrum_block (reduce color spectrum into color blocks)
  • color_spectrum_map (mapping color by using H/S/B)
  • color_lerp (get intermediary colors from two samples)
  • control_p5_basic (slider and text label)
  • control_p5_random (randomizing the graph)
  • control_p5_data (loading data into graph)

 

Reference

Curve:

Tutorial: https://www.processing.org/tutorials/curves/

Color:

ColorHunt: http://www.colorhunt.co/

NipponColor: http://nipponcolors.com/

HexToRGB: http://hex.colorrrs.com/