From CS 294-10 Visualization Sp10

Jump to: navigation, search


Part 1

Data Domain

Planning a travel route is supposed to be fun, but sometimes it becomes very time-consuming to assemble all the information you need to make a right call. I love to travel and it's been always more fun and enjoyale when it's not too hot or too cold. To help figuring out when and where is the best within the budget and time frame, I decided to build a interactive world map with the graph of changing temperature/rainfall/humidity/discomfort index shown according to the itinerary.

I found the world climate data from NOAA website http://www.ncdc.noaa.gov/oa/climate/ghcn-monthly/index.php





Temperature/rainfall/humidity/discomfort index will be represented with hue on the map for each month(or week). User can select city(or country) to visit (by drag and drop control, preferably) and choose duration of stay. From the itinerary, graph will show the variation of temperature(highest/lowest/average), rainfall, humidity, and discomfot index.

If time permitted, 'when is the best to visit' could be added (such as to include festivals, carnivals held once a year. etc) Also approximate total budget could be calculated from the itinerary.


I will use Protovis for the implementation.

Part 2

Changes from Storyboard

Overall design became simpler than what the storyboard said. There are several reasons for this. Humidity and discomfort index graph could not be added as there was no gridded data set which includes either humidity or wet-bulb temperature. Itinerary planning with drag-and-drop was tried but as it started to take too much time (partly due to my lack of experience in Javascript), I decided to put it aside and left it for the future work. Since original intention of this application was to allow user to quickly and easily get the idea of what the climate is like at travel destinations, I focused on showing the monthly temperature and precipitation of the region that user selects.

Final Application

When a cursor is moved over the land region, monthly chart of temperature and precipitation is shown under the world map. The region where temperature is shown becomes painted with orange dot.

Land region of the map is covered with invisible dots which each represents 3*3 degrees of longitude/latitude area. Original data set has resolution of 0.25 longitude/latitude degrees, however, data had to be filtered to lower resolution as either Protovis or Javascript could not handle the volume of high resolution data. Data set filtered to resolution of 3 degrees was used for this demo.

Here is the Link to the demo. (Apr 28, 2010: It seems that there's some problem with Internet Explorer. Try using Firefox! )

Source code can be found here: File:Jaeyoung src.zip

Commentary on the Development Process

I spent 20+ hours for this assignment. Since I'm not familiar with the web programming (especially Javascript), many hours were spent trying to figure out how Protovis and Google Map work by going through examples and documentations. I initially built a version using Google Map, but it took very long time to load the map when the data size became thousands. Some of the features that Google Map provide such as pan, zoom, easy Lat/Lng calculation to pixel were convenient but not essential. So I threw away the first version and built a new one using a picture map. Building the basic structure didn't take very long but many hours were spent trying to make things neat.

Old version (just for reference)

Old Demo Link

(Note: Google Map takes seriously long time to load with full data set of temperature ( > 1000 dots). Current version includes data set for France region only.)

[add comment]
Personal tools