Around the world in 80 bytes

Final Project

2009-05-07T00:04:00.010-04:00

Final Project:
So here it is all done. There are plenty of things I would have done differently and lots of things I still wanted to implement but had no time to do so. I'm very happy with how it turned out except a few behind-the-scenes coding problems that were way to messy for my liking and I didnt like the intro screen/preloader. Maybe later....

Anyways, here it is:

View at correct size (will not work on some browsers-if it doesn't click other link)

Final Project

More Final Project progress and comments

2009-04-21T00:49:00.002-04:00

There have been a few problems I've run into while designing this that still need figuring out, mainly design and look-wise problems, along with a few back-end problems.

Here are some things that still need figuring out:

In showing 1 hour data, should there be separation of color for earthquakes that happened within the last ten minutes as opposed to quakes that happened within the last 45 minutes?
In one day data, color will also be used to differentiate the time between the earthquakes. How many classes is best? 3 Colors, RED ORANGE YELLOW for 1 hour, 6 hours, 12+hours? Four classes? A smooth gradient going from red to yellow over a 24 hour span?
Same problem for 1 week data- 1 day, 3 day, 5+ days? etc?
Splash screen - needs alot of love and more a better and more appealing flow. (although I do like the seismogram I made, just not its placement etc)
BACKEND PROBLEMS:
Keep track of earhquake markers to allow for on the fly changes of size or other options by user
Keep track of earthquake markers in different data sets (1 hour, 1 day, 1 week) to allow the user to toggle between them without having to redraw everytime
Catch errors when user tries to view earthquakes when an active internet connection is not available - display cached data? Same problem for GoogleMap tiles not loaded.
fix pan left up down right buttons.
fix 'show source' content.
change the info content
Preloader to load all data before trying to display the map.

I didn't want to show the progress of my final project but decided to do so anyways. I figured who best to ask for opinions and ideas than the people I'm presenting it to.

If you guys have any ideas on visual changes and/or backend programming changes pleasseee let me know!

http://mason.gmu.edu/~jgonzalf/earthquakev2as3.html
(note this is NOT the most recent update)

Final Project Progress

2009-04-21T00:34:00.003-04:00

For my final project I really wanted to make a map that would be constantly changing; Something that could, whenever it were viewed, tell you what was going on at the moment in time. With technology increasing and the availability of live feeds from so many sources, this seemed like a great idea.

I ended up deciding to use the feeds from the USGS to map earthquake data around the world. Its very impressive actually see the amount of earthquakes we have in the US daily, even though most go unnoticed and not felt.

To view the data I'm using, click HERE to view 1 days data, and HERE to view a weeks worth.

Now some example code and explanation of it:
---------------------------------------------------------------

var url:String="http://earthquake.usgs.gov/eqcenter/catalogs/eqs1day-M1.txt";
var usgsDataLoader:URLLoader = new URLLoader();
usgsDataLoader.addEventListener(Event.COMPLETE, textLoaded);
usgsDataLoader.load(new URLRequest(url));
function textLoaded(event:Event):void {
var usgsDataDay:String=event.target.data as String;
}

---------------------------------------------------------------
Line 1 makes a new variable called url which contains the location to the data file we are trying to fetch and read.
Line 2 creates a new url loader - this will read information from a URL and load it into flash.
In line 3, we add an event listener to our url loader - once the URL is loaded into flash, the function "textLoaded" is run.
We finally load our usgsDataLoader variable with the info from our URL.
upon completion of loading our data, we call our textloaded function and make a new variable of type string which holds the data from our loader

There you have it...how to load external data into flash. Although we now have our data loaded into flash, there is alot we have to do before we can actually make use of it such as parsing and splitting it up or searching through our text to find parts of interest, and even more work before we can incorporate it into our FLASH ide, making information in the text actually affect something in our flash movie.

If you have any questions on how this code works feel free to post up.

switching over to AS3.0

2009-04-21T00:17:00.002-04:00

So yea - Not that I'm a big ActionScript coder (actually...not one at all) - I had been used to using the simple functions of AS2.0 - But a few weeks ago, I finally made the switch. Not because I wanted to do, but mainly because I wanted to use a map API that required the use of actionscript 3.0.

Surprisingly, the switch was pretty painless and only took a little bit to figure out its work-flow. Maybe I do have an advantage since I am a computer science major and the structure and work flow of as3 is something I'm much more used to.

Although AS3.0 will most likely look more intimidating to new coders because its a much more verbose and full language which separates the programming side with the flash IDE side, it really is much more flexible and easier to debug.

If you guys are thinkign about switching over, I say do so. Although it'll require a learning curve, there are many tutorials out there on switching over.

Actionscript.org is a great resources for any AS related questions and topics - heres a good as3 tutorial:
Getting started with AS3
and there are many more if you need some resources!

Geog411 - Lab 10 - Tsunamis and PSDs

2009-04-09T11:45:00.000-04:00

Pre-Tsunami

Post-Tsunami

Geog411: Labs 8 and 9

2009-04-09T02:13:00.003-04:00

Forgot to post lab 8 last week since I was away, so a double lab post today:

Google earth KMZs

Placemarks HERE

GMU Campus Buildings HERE

Also got a headstart on my final project over the weekend and am pretty happy with the idea and how its coming along

Geog 411-Lab 7

2009-03-19T11:38:00.002-04:00

Came out nice - Didn't change too much. Added some external links to other sources on the splash screen and a few popups.

Here it is:
Lab 7

Tip: A Few Flash Tutorials

2009-03-16T22:34:00.003-04:00

Although these tutorials aren't about doing things on a map, they are basic flash tutorials with cool ideas that can be incorporated into a map.

Keep in mind there are a million ways in flash to do the same things, so these are just some ways of doing things

Changing Colors in flash

Fade-in fade-out - This also has links to a few other cool and simple effects like zooming and masking

Mouse-over effects - pretty simple way for mouse over effects - could be used for showing data somewhere when mouse goes over city/country etc

morphing - a pretty simple way to learn how to morph - video tutorial too.

I'll add more as a find them. Hope it helps a bit

Professional Effects

2009-03-16T13:24:00.009-04:00

"Professional Effects" contain an endless amount of tricks and artistic effects that make a map look just that...professional.

With what we've learned in class so far, we are already able to make maps similar to those maps we see published on NBC, CNN, and other great map sources.

Shape Tweens, Motion tweens, timeline control and basic scripting are all we need to make the basics. It is the little details now that turn a map from a basic map, to a professional looking map.

Here are some examples of things that make a map look good:

http://www.nytimes.com/ref/world/20070622_CAPEVERDE_GRAPHIC.html

Starting off with a simple map. This map looks very clean and neat, mainly due to its simplicity. Although it has alot of information, it is very easy to navigate.
One of the things the publisher did for this map to make it look as professional as it does was to simplify everything.
-Lines are thin and neat.
-White space is very balanced.
-Very simple and good looking interactive controls (the tabs at top) - easy and intuitive to use.

http://www.nytimes.com/interactive/2008/06/09/business/20080609_GAS_GRAPHIC.html?scp=8&sq=map&st=cse#tab1

The NewYork times loves making simple maps. Little things in this map that add to its professional look include:
-quick fading in and out when switching from dataset to dataset - Easy to do, tweens with alpha changes do the job

http://www.eyesondarfur.org/satellite.html

This eyesondarfur map looks very nice.
-The contrasting colors add alot of visual appeal - the way they have boxed in the map, and the layout of the whole scene works very well.
-ZOOMING - the zooming effect is very appealing. It allows you to start with a far view of the land, and zoom in to the a desired level. Tweens (enlarging a base map) make this effect very easy to create.
-Blur Effects - sometimes when switching from one set to another, a different basemap must be used - adding blur effects give an impression of a satellite refocusing, making the map seem more 'real'
- Again, similar to the NYTimes map (and most other good looking maps), objects fade in and out quickly, instead of just appearing on the page.

http://www.washingtonpost.com/wp-srv/world/interactives/sudan/?hpid=artslot

I know we already looked at this map in class, but the little details in it make the map look so good. I'll name a few 'artistic' effects that make this look professional, whethere the map be static or dynamic
-Drop shadows on boxes make the objects stand out - gives map depth
-Borders around countries of interest define an area for our eyes to focus - choosing right size, color and alpha make this work!
-Land effects - showing mountains, rivers, etc from satellite imagery or drawn images and make more appealing and again add depth
-Layout, this makes or breaks a map I think. a fluid and well thought-out layout works well, plan this!
-Font - I love typography. The font you select, how you space it, size it, etc does alot to the look of a map (or any other design for that matter). Although the computers in the geog lab don't offer a huge list of fonts, we still have alot of work with.
Some typgraphy hints:
-Use fonts that work with what you are presenting. Somethign old or classical or historical might use some script fonts, or fonts with serifs.
- More modern designs might call for straight fonts. simple and square or rounded
- When using multiple fonts, use fonts that are the same and/or fonts that contrast. Avoid using fonts that are very similar but not. Viewers might think its a mistake.

I guess thats all for now, if I think of other things i'll post them up

Geog411 - Lab 6 - Operation Barbarossa

2009-03-16T13:24:00.007-04:00

Flash 6 is finally complete. Although I originally liked how it was coming out, I didn't like the end result. Maybe it was because I looked at it too much. Or maybe not looking at it for most of spring break and coming back to see it didn't help.

Either way, here it is:

Little details make this map look good I think. The faded Country borders on the side. The glow of the borders on the main map. The textured land effect, and small alpha effects throughout make it look smooth. The animations themselves are decent although mapping this was difficult due to multiple data sets and undefined boundaries (Countries were different back then than these borders show).

I Added the question mark button which showed some map info (like on my previous lab) but realized in retrospect that I did not fill it in and is full of dummy text.

GEOG411 LAB: Lab 6 in the works

2009-03-05T13:19:00.001-05:00

http://mason.gmu.edu/~jgonzalf/german_invasion_newmap3.html

hints, ideas, questions?

Map Find: Pangea and Continental Drift

2009-03-04T23:46:00.001-05:00

Just a google search for maps of Pangea and continental drift brings up a ton of flash-based maps. Most of these maps are very basic and use only motion and shape tweens.

Here's a couple:
http://www.suu.edu/faculty/colberg/Hazards/PlateTectonics/18_Pangaea.html
http://education.sdsc.edu/optiputer/flash/pangea_4.htm

Flash Tip: Easy Timeline Controls

2009-03-04T18:35:00.004-05:00

Gotta quick tip for you guys which I also used on the NFL schedule lab also (does it count as cheating?)

Easy way to create timeline controls
now, this trick doesnt work in every situation, especially when you have movies inside movies to make your timeline smaller, but if you have everything on the main timeline (all motions, tweens, etc), here is an easy way to add control to it.

1. Create a layer named TimelineControl.
2. On the first frame in that layer, add buttons that you want to have (stop, play, next, back, rewind, etc)
3. Insert a frame at the very end of your movie (this will make all the buttons span along the whole movie, but only uses 1 'big frame'
4. Now, back to your first frame, and say for example, we want a next button:
-select your next button
-Open the actions window (The diagonal arrow, F9, or Window > Actions)
-Type in this code:

on (release) {
gotoAndStop (_currentframe+5);
}

Thats it. You now have a next button.

This is most helpful if you want your button to move ahead or back a certain amount of frames. If you want just to move a frame forward or a frame back, on click, nextFrame(); would do the job. (and previousFrame(); )

How it works?
Actionscript is a pretty powerful yet simple programming language that follows the idea of most other object oriented programming languages (Java, C++ etc).

"_currentframe" is a flash variable that is updated by flash as the movie plays along, updating the variable to be the current frame that the movie is in. When we do _currentframe+1, we advance the movie by 5 frames, changing this to _currentframe-5 makes us go back 5 frames

Creating play and stop buttons are easy, on click or release, either do "stop();"or "play();"

Hope this helps - if you guys have any questions feel free to comment

GEOG411 Lab5: Invasion of Russia

2009-03-04T16:19:00.006-05:00

Here it is in progress. It is still pretty rudimentary information wise, but design-wise its getting to where i wanted it to be. I must say, using CS4 motion tweens really makes it easy to change paths along the timeline quickly.

LAB 5 (IN PROGRESS)
http://mason.gmu.edu/~jgonzalf/lab5.html

Map Find: Iditarod 2008 Trail Map

2009-03-03T00:49:00.002-05:00

It seems that I'm all about simple maps that show lots of information outside the mapping area when the map is interacted with. Take this map for example: http://www.iditarod.com/flashmap/

The map itself is very simple. The Iditarod checkpoints can be clicked for more information on them, as well as the legs of the trip. It looks like during the race itself, the map was updated constantly to show the current standings (possibly XML). Again, pretty simple, but full of information.

GEOG411 Lab 4: States Won By a Presidential Party

2009-02-26T09:58:00.003-05:00

Done with lab 4....

I originally had more graphics and more flashy (no pun intended) but decided to make it more simple and "eloquent".

Here's the link:

http://mason.gmu.edu/~jgonzalf/lab4.html

Even played around a bit with a "?"/Info place, although its pretty basic since you have to hold the click over it.
I really liked how it turned out, although there are some things I would change/expand. Overall I was going for a very simple and neat newspaper style map without too much clutter and think I achieved that goal. The map is meant to be on a webpage with text around and not a standalone map based on its size and simple round edges (to make blending into a website with white background more smooth)

Let me know what you guys think.

SCREENSHOT:

Map Find: NIU Huskie Line

2009-02-17T10:49:00.003-05:00

I was in Chicagoland for the weekend visiting my girlfriend and was walking around her campus. They had TVs all over campus with a nice vector map that had pictures of buses moving around it to show where the HuskieLine (their bus line) buses were at the moment.

Pretty interesting map with simple animations. Seems as though it could have been a grad students project.

GEOG411 Lab 2 &3: NFL Cardinals Schedule

2009-02-09T13:36:00.003-05:00

Flash map one, simple idea, but difficult to show with what we were allowed to use I thought. Had to show the cardinals schedule on map, showing where they played and results - would have been easy to show if all games were away, coloring states for WIN or LOSS there, but then some states have more than one team, and then what do you do with home states?

anyways, this is what i worked out. If tweens or animations were possible, when teams played in arizona, show the team they played, and then move the graphic to the state of the team played against. not sure if it makes sense.

Also, would have been possible to do a road-trip type map, moving the cardinals along a route (next game was played) and leaving behind dashed lines like map, but this would also require tweens

Mason webspace:

http://mason.gmu.edu/~jgonzalf/

Map Find: Simple Flash Map - Secret Prisons

2009-02-05T01:41:00.003-05:00

Simple flash map, some nicer ones on the same page also.

This map is sort of a flip-book style, adding labels and new images, along with a simple zoom. not bad and very easy to make.

http://www.mapsofwar.com/ind/cia-secret-prisons.html

GEOG411 Lab1: Presidential Election

2009-02-02T12:39:00.003-05:00

Lab 1 of Advance Digital Cartography.!

uploaded as a .png format as it is lossless. For some reason, flash really makes the output look horrible if you publish it as a jpg. Even with compression and quality set to 100%, the image looks flat and blurry. I'm sure there is a way to make the output better, but since flash isn't meant to be an image editing software, I wouldn't expect if publishing or exporting as .jpg is less than great.

If any of you cannot view the .png file, let me know and i'll upload the .jpg version!

And so the semester begins

2009-01-27T15:56:00.003-05:00

Advanced Digitcal Cartography, Aerial Photography, Meteorology and Climate - all interesting class this semester. Should be a good semester. So it begins.

Just for fun

2009-01-22T11:30:00.002-05:00

I had the pleasure of talking to the good people at GeoEye on GIS DAY at mason, very cool people with very interesting plans, along with their brand new GeoEye-1 Earth Imaging Satellite

although most people have seen this image already, here it is again:

http://www.geoeye.com/CorpSite/gallery/detail.aspx?iid=220&gid=1

Spring Semester

2009-01-22T11:04:00.005-05:00

And so a new semester starts. Winter break is over, inauguration just passed, and many maps have already been made to reflect it.

here are some maps showing the inauguration.

A very cool one with lots of info:
http://www.usatoday.com/news/washington/inauguration-map.htm

This is a blog but shows a good process of them making an inauguration map:
http://geopdf.blogspot.com/2009/01/inauguration-map.html

And of course, CNN always has good maps:
http://www.cnn.com/SPECIALS/2009/44.president/inauguration/map/

Final Map

2008-12-09T19:26:00.005-05:00

For my final iI decided to make a map showing both Volkswagen Dealer Locations in the Eastern US, along with the locations of major volkswagen car shows year round.

While looking at maps for the project, and ideas, I realized how many maps are used in advertisement - maps so simple that we sometimes forget they are still maps.

in creating this map, I wanted to resemble the simple style of volkswagen advertisement and mimick their still of ads. The map was kept simple with not much text or objects to dristract, but definetely gets the point across of dealer locations and show locations.

Some VW ads for reference:

http://www.adliterate.com/archives/VW_ThinkSmall.jpg
http://timescorrespondents.typepad.com/charles_bremner/images/2007/11/14/vw4.jpg
http://photo3.bababian.com/upload9/20080528/67B69885B2E3754583135C44697B5EFE.jpg

Links:
forums.vwvortex.com - Enthusiast Site
www.vw.com - VWOA main page
www.volkswagen.com -VW World Site
http://www.edmunds.com/dealerships/Volkswagen/index.html Dealersearch

with border:

Scribble maps!

2008-11-25T19:39:00.003-05:00

This map looked interesting, made up of scribbles, not sure what grouping in scribbles mean. PLUS COLOR!

Finally some colors

2008-11-11T15:49:00.002-05:00

Edited lab 7, pretty straightforward and a simple touch of color spruce up the map just a bit.

Print vs. Web-

When comparing the print version with the web version, you can def see the variations in color.
-Although I did create a black background map (the printer will hate me for it), I was surprised as to what a good job the printer in RA113 did.
-In terms of colors, the dark reds seem darker in print and more vibrant on web version.
-The lighter colors also have more depth to them in the online version as the printer can't capture all the exact colors as AI can.

2008-11-04T19:58:00.002-05:00

Symbol Maps!!!

We need more cow bell!!!!

Lab 7

2008-11-01T17:26:00.000-04:00

Irish Population In West Virginia

2008-10-21T18:52:00.001-04:00

Dot density maps. not too fun to make.

Lab 05 - Boundary Files

2008-09-30T21:09:00.004-04:00

Finished this lab after the exam on Tuesday.

While playing with the counties map and states map, i noticed that the actual state boundaries don't match up with the counties boundaries....i wonder where i went wrong..shall keep playing around to see if anything changes...

as for now:
Lab 5.

oh yea....still missing scale....will think of it shortly.....

Lab 04 - Typography

2008-09-29T14:03:00.002-04:00

So, i couldnt find the lab paper professor Halden had given us with the map with the fonts already on it, and it wasnt available online, so i used a combination of all of your (student) maps to try to recreate it...i know i put it somewhere.....if only....

Campus Maps

2008-09-23T14:14:00.001-04:00

Another interesting map. While in Chicago i was visiting my girlfriend at NIU and thought their campus map was intersting.

ChiTown - and Typography

2008-09-23T14:03:00.002-04:00

I was in Chicago for the weekend; i sat at the train station looking at the Metra map and found them interesting.

The map uses a nice selection of typography tricks. One of the main things in graphic design and typography (one of my hobbies) is to use fonts which are either the same, or obviously different. Mixing fonts that are too similar cause the reader to not be sure if they are really different, or if it was done on mistake.

The type used makes the map look very modern, combination of maps and thicknesses make you understand whats what.

Intro to Illustrator - Lab 2

2008-09-09T21:47:00.002-04:00

Drawing Spheres, Geoids, Ellipsoids and Natural Surfaces, all in shades of gray

Another test :: Go@Blogger.com

2008-09-09T20:02:00.000-04:00

Just testing out the mobile blogging feature from cellphones. Works, Ignore :-)

Blogging the world

2008-09-09T18:47:00.000-04:00

woooooooo yay maps. end.