Final Project Proposal

In prior years, 99% of final projects involved Flash. But this semester there are 2 viable avenues: Flash or JavaScript. The examples from the past give you a good sense of what you can pull off in Flash. What about JavaScript? Below is a link that shows the output of our 5 labs plus links to examples of other maps and techniques. Find something that inspires you!

http://tabler.org/maps/

Even more interesting maps

Whom do you hang with maps:  http://www.npr.org/blogs/krulwich/2013/04/16/177512687/a-whom-do-you-hang-wit...

Carbon Map: http://www.carbonmap.org/#intro

Vancouver's Olympic Sites: http://www.nytimes.com/interactive/2010/02/09/sports/olympics/2010-olympics-venue-map.html?_r=2&

Value by Alpha map (static): http://www.cartogrammar.com/blog/value-by-alpha-maps/

Dorling Cartograms: http://mbostock.github.io/protovis/ex/cartogram.html

Another: http://www.datadrivenconsulting.com/js/protovis/cartogramemp.html
A Century of Cicadas (by the NYTimes): http://www.nytimes.com/interactive/science/a-century-of-cicadas.html?_r=0
US/Mexico border (1/2 way down article): http://www.latimes.com/news/local/la-me-ff-secure-border-20130310-dto,0,7065262.htmlstory#graphic-container
DC Metro map: 2 different symbology approaches: http://apps.washingtonpost.com/g/page/local/metro-maps-the-silver-line/134/?hpid=z9
Council on Foreign Relations map of Vaccine-preventable diseases: http://www.cfr.org/interactives/GH_Vaccine_Map/#map
And a static map: World Map of Currency: http://i.imgur.com/oNSHDMT.jpg

More Interesting Maps

American Migration: http://www.forbes.com/special-report/2011/migration.html
Historical maps: http://www.the-map-as-history.com/

World imagery: http://www.flashearth.com/

Nice Campus map for Univ of Wisconsin: http://map.wisc.edu/

Zillow real-time house prices: http://www.zillow.com/homes/22030_rb/

Another nice campus map: http://maps.utwente.nl/index2.php?lang=nl
Metro Trends: http://datatools.metrotrends.org/charts/metrodata/CESMap_files/CESMap.cfm?statids=38,29

And The National Map viewer courtesy of USGS: http://viewer.nationalmap.gov/viewer/

Final Project examples

Some from 2011
Some from 2012
Fabiana (hers started with a video of the current season...but I don't have that linked here)
Chelsea
Matt
Teddy
From 2013:
Elena
Jared
from a special topics grad class in 2013:
Chris
Ellen

Fading images in and out (a la PBS documentaries)

I have been saying in class that to fade a photo or image in or out of your Flash movie you'll need to use a shape tween. But this is incorrect. And it has been frustrating me as it is the way it has been done for a long time.

Flash 2014 will not shape tween a photo or image or bitmap unless it has been converted into a vector shape. And converting to vector (Modify->Bitmap->Trace Bitmap) is decidedly rough on your image. It will look terrible.

So how do you gently fade in/out a photo or block of text in your Spash Screen? Motion tween. Plop your image on the first frame of the block. Convert to Symbol->Graphic (Motion tweens require symbols -- this is opposite of shape tweens). Add the Motion Tween -- this creates the long blue block of frames. At the end of the blue block, insert a keyframe (it will look like a small black diamond as opposed to the normal black circle). With that diamond frame selected, change the alpha of your symbol in the Properties panel. You can also move it if you wish to have the image slide in or out of the stage.

I have come to the conclusion that the type of tween you use is really based on the object you have. Vector shapes? Go for a shape tween. Images/bitmaps/psd/png/jpeg/gif/etc go for a Motion tween. Both can let you move/change alpha. If you need to change the shape of something (morph) you will need to be vector so you can use a shape tween.

Last bits of difference: shape tweens look at the first keyframe and the one immediately after to figure out what to do. They need simple vector (drawing) objects.

Motion tweens look at the first keyframe and any changes within the blue tween box. They do not care if there is a black circle keyframe at the end. You make changes by adding special keyframes within the blue frames. Motion tweens require symbols.

For Lab 6: the json file of VA

http://tabler.org/json/

On this page you will find the VA json file. Right-click and save as...

Setting up a GMU Website (for Labs 6-10)

Today we are making a shift in the way we construct web maps -- a jump into JavaScript!

Before we get into the lab itself, we need a place to store our files. Conveniently, as Mason students you receive 20MB of personal webspace.

Setting up a GMU Website

https://webdev.gmu.edu/setting-up-a-mason-web-site/

By default, everything should be set up. Your web address is http://mason.gmu.edu/~username, where username is the part that comes before @gmu.edu on your E-Mail.

Sending Files to a GMU Website

Most FTP programs will be able to transmit files to your GMU website as long as they support SFTP.  One free program that works is called WinSCP (www.winscp.net).  Other options, provided by GMU ITU, are Secure Shell (Windows) or Cyberduck (Mac), listed here under Utilities:

http://itservices.gmu.edu/downloads/index.cfm

Details for Connecting

Hostname – mason.gmu.edu

Username and Password – The same used to login to Blackboard

Final Project Proposal time is here!

This semester we will be doing a proposal posted to your blog and a short presentation to the class of your topic and concept. The goal is to gather lots of resources and feedback right from the start. The proposal is due on Mon April 6 at the start of class and presentations will be the same day. You need to have the information below filled out on your blog and have an inspirational site or two to show the class. 

Here's the scoop: in approx. 500 words, propose an idea for your Final Project. Explain the topic, the reason you've selected it, the audience of the map(s), the type of visualization you envision (be specific and reference labs we've done if relevant), the data source (and if it has been acquired), the production steps (data processing, software, etc.), and a schedule. Also discuss any issues/obstacles you foresee.

For the presentation: No powerpoint needed. Show us your blog and paraphrase your proposal. If you are inspired by an online map, show us! Explain how yours will be different/better/more detailed, etc. If you cannot find an online map similar to your idea, find an example of the style of interactive or animated map you want to do as a visual reference point -- a site that inspires you. If there are a couple of sites you want to pull ideas from, show us them as well. The proposal & presentation are worth 50 points total (as much as a lab) -- so take it seriously.

There are a variety of visualization options: smooth, temporal animation; motion and shape tweening animation; step-by-step "book-like" animation; "faux" GIS (where the user gets to turn layers on and off ); D3 and Leaflet (both upcoming). The one requirement is that the project is showcased on your blog. You can choose to use any combination of software programs for the development (ArcMap, Illustrator, Photoshop. etc.).

At this point you should have a decent grasp as to what you can do in Flash. We still have four more labs left to try a few different things. Go ahead and propose your ideal project (what you'd *really* like to see) and we'll discuss what is doable. Modifications can be made if needed. My hope is that your project can be used for potential employers (or grad schools) as an example of what you can do. And there are even student map competitions for visualizations!

Weekly map to find and post: #6

This week I want you to find a web map that adds interest by utilizing a splash screen. Any style, any topic. Add a sentence or two explaining why you selected it!

Space visualization

Distance to Mars:  http://www.distancetomars.com/

What do you think?

Moving Blocks of Frames in Flash

How do you move a block of content in the timeline (multiple keyframes spread over several layers). Although you can highlight content in several layers, you cannot click and drag them to later frames. But you can cut and paste them. The trick is to use the functions under Edit -> Timeline. First, select the keyframes you want to move (with their layers unlocked). Go to Edit (at the top) -> Timeline -> Cut frames. Then select the new frame location and Edit -> Timeline-> Paste Frames. If you end up with duplicate layers (some filled and some blank), you can delete the blank ones. 

If you are working to add a Splash Screen at the front of your Lab 5 movie, this might prove to be the easiest technique. Select, cut, and move all your content further down on the timeline so you have blank frames at the front for your new Splash content. 

If all you need is one blank frame in all of your layers, there is a quick trick. Unlock all the layers. Click on the frame number you want (say, Frame 1) -- in the grey section with the Frame numbers, not on a layer. Hit F5 (or Insert -> Timeline -> Frame). You'll get one new frame in every layer (effectively shifting all your content to the right one space). If you need one frame in just one layer, click on the correct spot in that layer and do the same. 

Warning: if you have scripts referring to Frame Numbers (not labels), shifting your keyframes with any of the above methods will mess up all the scripts. 

If you have a handy trick you're using a bunch, please post a comment!

Splash Screen Examples

Battle of Fredericksburg:  http://www.civilwar.org/battlefields/fredericksburg/maps/fredericksburg-anima...

Council on Foreign Relations (they have well-crafted pieces):  http://www.cfr.org/publication/interactives.html

Israeli/Palenstinian Conflict: http://www.cfr.org/israel/crisis-guide-israeli-palestinian-conflict/p13850

Top Secret America: http://projects.washingtonpost.com/top-secret-america/map/

Wanderlust: http://awesome.good.is.s3.amazonaws.com/features/011/Wanderlust/index.html

Sea of Steel: http://www.washingtonpost.com/wp-srv/special/local/dc-recovered-guns/?hpid=z2

UPDATE to Lab 4: Tweens

During the demo on Monday, Jose suggested a new method for setting up the Day 0-4 polygons needed for the shape tweens. Below I have the initial system followed by the new approach. Both work, but I believe the new approach is easier.

---Writeup's version--

The writeup tells you to start on Frame 1 and draw a polygon to match the Day 1 line (which extends on the east side way out into the Atlantic/Gulf for the later masking step). Then you add a keyframe at your Day 1 frame to get a copy of the shape there. To get Day 0 you go back to frame one and move the nodes of the polygon to fit around NYC. Once that looks good you jump ahead in the timeline (to Day 2), add a keyframe, and adjust the Day 1 shape to fit Day 2. And then add a keyframe at Day 3, and adjust the Day 2 shape to fit the Day 3 line. And then a keyframe at Day 4, with adjustments to the Day 3 shape to cover the entire 48 states. This process works, but you have to be very careful not to cross nodes or let them snap together lest Flash get confused (resulting in a shape tween that twists upon itself). 

--New version--

The new idea (from Jose - thanks!!) is to simply digitize a brand new shape for each Day. This initially may sound like more work, but I believe it is easier to draw a fresh polygon than move individual nodes (and adjust their handlers to fit the new Day). The shape tween doesn't care how you make the shapes at each keyframe -- it can be something adjusted or a brand new shape. With this approach, you can start at Day 0, make a small "city" circle for NYC. The add a keyframe at Day 1. Delete your NYC circle and draw a new polygon for the Day 1 line that pushes way out into the water. Then a new keyframe for Day 2. Delete Day 1's shape and make a new one for Day 2, etc.

For both versions, you will be adding shape tweens in-between the Days to make the movement progress over time. Make sure your polygons have transparent fills (for a drawing object this is found by clicking on the paint bucket color options -- there is text at the top for "Alpha" which is an adjustable %). If you want to have the color change through time, you can change the color of the fill slightly for each Day. 

One more note: to get your pen tool to give you curves, you need to click and drag when putting down a node. The "drag" will bring up "handlers" which give you curve adjustments. If you need to add handlers to a node, hold down the Pen tool and select Convert Anchor Point Tool. Click and drag on the node and handlers should appear. 

If you have more questions or have found a handy trick, post a comment! Anything that saves time/work is a good thing!

Morphin'

This week we are discussing shape tweening -- animations that morph the shape of a symbol to convey the data change through time. With shape tweening, it is possible to do motion tweening at the same time (moving the symbol across the stage while it is changing shape/color). Shape tweening is very engaging when done well (but it takes time to get it to work smoothly). Here are some examples to dissect: Maps of War (we looked at these before but they are really good examples of morphing animations)

Imperial History

History of Religion

March of Democracy (not as good...rather flashy...but interesting from a design and interface standpoint)

American History (warning: it has narration)

A cartogram generator that uses nice shape tweens.

NYTimes: What Global Neighbors are Buying

WWII 1941-42

Gulf Oil Spill

Videos by Pedro Miguel Cruz (in particular: Visualizing Empires Decline).

London Tube vs. Geography
and a very nice animated map of the Battle of Barbarossa in WWII

For Lab 4, we will be using masks to keep our expanding shape visually bound to the land (not overflowing into the sea). Here is a video touching on the basics of using a mask (skip the first part and start 4:15 into the video)

This is not an animation, but you might find it interesting and/or amusing (as amusing as Geographers tend to get).

Maps to find and post to your blog: #4 & 5

This week I want you to find two different maps:
#4: a map that uses a shape tween style of animation (a polygon that morphs through time)
#5: a good design of an interactive timeline.

Any style, any topic. Can't use the same map for #4 and #5. Add a sentence or two explaining why you selected the maps!

Lab 4: Tweens

Here is our data source: Rates of travel from NYC to the rest of the continental US