Today.is.the.Day!

For better or worse the Final Projects are due today at 1:30pm. Upload your files to Dropbox.

We will be having informal presentations: come up, show us what you made, explain any changes or challenges you faced, mention anything you'd like to add if given more time (or a salary). Easy peasy!

I will be working on grading all day. Please check your email frequently -- I will ping you if there is an issue with your content.

If you are graduating....many Congrats!!!

Final Project Presentations

Final Projects are due on Monday, May 11th at 1:30pm. They must be functional and hosted on your blog. Also upload copies of your Flash .fla/.swf files or .html/data files to the class Dropbox account. Make sure your name is in the file name.

The presentations themselves are informal. Come up to the lectern, show us your completed project, and explain the steps you took to get it done. Easy! We have 26 students and 165 minutes so approx. 5 minutes per person. Questions? Ask!

Scaling Mt. Everest

Interesting interactive piece on Mt. Everest from the Washington Post:  http://www.washingtonpost.com/graphics/world/scaling-everest/#

Last Day / Last Critiques!

Today is our last regular class meeting. And we have 13 people to get through with the critiques. In an effort to save time I am not going to waste time at the front -- let's just get moving with the feedback.

HELP HOURS: this Wed May 6th from 9:45-1pm or so. Please come and ask for help!

Weekly Blog Posts #8, 9 10!

Here are the last maps to find and post on your blog.

#8: Last week's task was to find an interactive Javascript map -- any topic. Think along the lines of Labs 9 and 10.

#9: This week's task is to find a graphic regarding the earthquake in Nepal. Can be static or interactive. It is always interesting to see maps that are produced on short turnaround!

#10: One last interactive or animated map that you find especially cool. Any topic. Any style. Just something you wish you'd made!

Critique Presentation Order

Mon April 27: Robert, Nicole, Katie, Daniel, Jose, Tom, Anuraag, Alfred, Alex, Brooke, John G., Matt B, Melanie  

Mon May 4th: Christina, John B., Garrett, Sean, Tim, Jon C., Homaira, Nathan, Ramzi, Brian, Kerry, Micah, Dai

Critique details in prior blog post. 

20 points for being at the lectern (getting feedback from the class)
40 points for 2+ comments on Mon 4-27
40 points for 2+ comments on Mon 5-4

You must present on your assigned day! You must show up! No makeups. 

Recent onlines maps

New xkcd comic: http://xkcd.com/1509/large/

What town matches my politics: http://www.claritycampaigns.com/townrank

Where men aren't working: http://www.nytimes.com/interactive/2014/12/12/upshot/where-men-arent-working-map.html?abt=0002&abg=0&_r=0#/11/42.1882951/-84.3407514

How non-employed Americans spend their work days (Males vs Females):  http://www.nytimes.com/interactive/2015/01/06/upshot/how-nonemployed-americans-spend-their-weekdays-men-vs-women.html?abt=0002&abg=0&_r=3

Most religious states in America:  http://www.washingtonpost.com/blogs/govbeat/wp/2015/02/18/map-the-most-religious-states-in-america/?tid=trending_strip_4

Most liberal and conservative towns in each state:  http://www.washingtonpost.com/blogs/wonkblog/wp/2015/04/07/map-the-most-liberal-and-conservative-towns-in-each-state/?tid=hybrid_experimentrandom_3_na

Best places in the world to visit while the dollar is strong: http://www.washingtonpost.com/blogs/wonkblog/wp/2015/03/02/the-best-cheap-travel-deals-to-take-advantage-of-the-strong-dollar/?hpid=z1

Earthquake in Nepal: http://www.washingtonpost.com/graphics/world/nepal-earthquake/?hpid=z1

Not a map, but an interesting graphic (A Guide to Sweeteners):  http://www.washingtonpost.com/graphics/health/sweeteners-guide/?hpid=z4

da Labs!

Today is our last regular lab day. Starting next week we will shift into Final Project Critiques (see prior post). We still have 2 labs to work through: 9 and 10. Both are on Blackboard as a digital Word file for copy-pasting blocks of code. Both labs use the Leaflet map tiles as the basemap.

Lab 9 builds on Lab 8 by creating proportional symbols and a time slider bar for your location data.
Lab 10 uses a new dataset to illustrate a heatmap.

Strava, a running/biking site, has a good example heatmap that even lets you choose between three color ramps for the data: http://labs.strava.com/heatmap/

This site hold the example maps referred to in Labs 6-10: http://tabler.org/maps/

DUE DATES:
Lab 8 is due today.     You must finish 8 to do 9!
Lab 9 is due next Monday April 27th
Lab 10 is due Monday May 4th (last class before finals)

PRIOR LABS:
Final cutoff for Labs 1-5 is this Wednesday. If I cannot see it on your blog, you will receive a zero.

Labs 6 and 7: I know there are several students with issues for one or both of these labs. Matt and I are working on them and will help you get them active. I intend to finish grading these 2 labs by next Monday, April 27th. 

If you are behind, PLEASE get them done! There are no exams...these labs are your work this semester. We need to shift quickly into Final Projects!

Critiques

Starting next Monday April 27th we will begin the Final Project Critiques. Don't be intimidated by the name -- the Critiques are simply a time to get feedback on final projects. Each student will show their *in-progress* map to the class and use the time to get useful comments and suggestions. I do not expect you to be done with your map, but you need to be deep in production. 

I'd like you to have a minimum of 5 questions ready that you can propose to the class regarding your map. Questions can range from content (is this enough? too much?), to design (colors effective? are the buttons easy to find/use?), to visualization style (should this be animated temporally? do I need layers? would it help to add ___?), to....really, any question! It all depends on what you are crafting and what you've been pondering/exploring. Do invest some time in your class query -- you may get some fresh perspectives and ideas. 

Although you will sign up and present one day, you need to attend BOTH days so you can contribute to the discussions. The Critique is worth 100 points -- 20 for your time at the lecturn, and 40*2 for the comments and suggestions you offer your classmates. You have to show up (and talk!) to get points. A silent attendee only gets 5 of 40 points for a day. 

Critique days are below. 13 Students each day. Approximately 12 min each. We will sign up in class today. Again, the majority of the points come from the comments/ideas you give the other presenters.

Mon April 27: Robert, Nicole, Katie, Daniel, Jose, Tom, Anuraag, Alfred, (Alex, Brooke, John G., Matt B, Melanie)
Mon May 4th: Christina, John B., Garrett, Sean, Tim, Jon C., Homaira, Nathan, Ramzi, Brian, Kerry, Micah, Dai

***Class Cancelled Today — Monday, April 13***

I’m sorry but I do not feel well. Today’s plan was to turn in Lab 8 (Intro to Leaflet) and begin Lab 9 (building on Lab 8 to make a time-series proportional symbol map).

Lab 8’s due date has been shifted to next Monday, April 20th so you can make sure it is working. I’m concerned that the pdf I offered for copy-paste has hidden formatting issues near the end so I have uploaded a copy of the write-up to Blackboard that is a standard Word document. If you are experiencing issues, try swapping out your blocks of code. If you are still having issues, please let me know. 

I will send out Lab 9 later this morning. I will also extend the deadline so that you have 2 weeks to get it functional. It is more complicated, but the output is really very neat and worthwhile. 

Please help spread the news of today’s cancellation to your classmates. Thank you!

Weekly blog post #7: Panning and Zooming example

This week I want you to find a map that allows you to interact with the display through panning the image around and zooming in and out. Think along the lines of what you can do in Google Maps...but with a neat dataset. Can be any version/style of basemap (i.e. does not have to be Google Maps). This will partner up with what we are doing for Lab 8 today with Leaflet!

Data for Lab 7: Choropleth D3 map

Lab 7 asks you to use a pre-made VA population file called va.tsv. It can be found here: http://tabler.org/json/

Right-click on the va.tsv file and save to your machine or memory stick. Then upload it to your Mason webspace with the other files for Lab 7.

For extra credit, find your own data and use it in place of the va.tsv file. Follow instructions on page 1 of the writeup.

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

Lab 3 Examples

Interactive layers in Flash

We are examining more interfaces for map animations and visualizations. It is a complex interplay of legibility and intuitiveness versus graphic design and screen real estate. It is paramount that the user can quickly and correctly figure out what they can do (don't assume your audience is all that computer savvy). But do think creatively with regard to your topic and design theme. 

The other main component this week is learning a new approach for visualizing complex data -- the "faux-GIS." This is a layering technique where a static map image is overlaid with a variety of pre-made maps of the same geographic location. The user is given the ability to control the viewing of the maps (which layers to see and how many to overlap), but the maps themselves are all pre-made. The challenge of this visualization approach is to produce multiple maps that retain legibility when layered together (as if looking through a stack of overhead transparencies). Simplicity is key. It is possible to retain detailed info, but you have to think carefully.

Below are some examples of this layering approach:

A "faux-GIS" style animation

Here is one on Sudan by the Washington Post which is very nice.

And Iraq animation has layers in addition to temporal content (could inspire a final project)
National Geographic's Antarctica map
Forbe's American Migration
NYT's Jobless rate (2009) -- a graph instead of a map

Two other interesting maps (different styles):

2008 Campaign Finance Tracker has a variety of ways to search through the data.

And this is just an interesting way to search for news geographically

27 Hilariously Bad Maps that Explain Nothing

Sometimes we learn just as much from bad examples as good ones. Please don't make these mistakes...

Map to Find and Post to your Blog! #3

A map similar to Lab 3 -- uses toggles/radio buttons/checkboxes of some form to allow the map reader to interact with the data. Layers turn on/off. The user decides how many layers to view at a time. Any topic. Any style.

Getting your Flash movie on you blog! (UPDATED)

In order to get our Flash output (the .swf file) on Blogger, we need to host the file on a different site, note the web address of it, and then paste that address in our Blogger post.

Dropbox and Google Sites are both options I proposed in class last week. Dropbox, currently, is being a pain. Google Sites, however, is working well. Both Nicole and Anuraag have had success and posted their steps on their blogs. (Thanks!!)

Nicole's post

Anuraag's post

Helpful hints for new Flash users

I asked 411 students at the end of the semester to write up hints for a student just starting out in Flash. Here are two lists. Hope these help!

1.  Understand that Flash will almost NEVER work the way you want it to

2.  Going off of #1:  Don't get discouraged.  There is almost always a work-around if you can't get your original idea to work

3.  Spend that first week really playing around with Flash and all of the tools as the more familiar you are with it, the easier it will be.

4.  Understand early that certain tools will not work the way you may be used to it.  For instance, when you draw a square, you need to select all 4 sides and the fill area together if you want to move it or resize it (group them)

5. Learn to incorporate other software programs into your work with flash...such as Illustrator, Photoshop, power point, etc.

6.  ASK FOR HELP if you find yourself stuck.  Trust me, the sooner you do that, the less confused you will be.

7.  Understand that Flash is NOT a GIS program (like ArcGIS)...so don't treat it like it is if things don't work

8.  When looking for graphics to add to a project, try and find vector layers as they tend to look a lot cleaner and crisper on your final maps

9.  Don't be afraid to used the help tool or google if you can't get ahold of your professor and you find yourself stuck.  There are many great tutorials out there on almost all the major features that you will be utilizing.

10.  Try and have fun with it.  Knowing how to properly used this software can open up so many doors to new skills in your map making ability.

1. Save early, save often and save in several different locations.

2.  Using the touchpad will drive you mad, go for an actual mouse.

3.  Focus on masks, there some of the more useful things out there.

4. It’s better to have too many layers than too few and run the risk of deleting something.

5.  Learn how to use buttons backwards and forwards, you’ll need it.

6. Use colors that facilitate easy reading for words, not what looks good.

7. Make notes in the margins of lab instructions, it’s a lot more helpful than it sounds.

8. For the love of god, if you don’t understand something, please just ask for help.

9. Balance things out, use illustrator and photoshop as well, it’ll make your life easier.

10. Test your work as often as possible, best to find something that doesn’t work earlier than later.

Lab 2 part Info!

Last week I decided to cut Lab 2 into two parts (A & B) as I felt it was just too much to tackle in one class. It was the right move, but in doing so I accidentally gave you a lab that was missing 2 key parts: how to Publish your movie and how to get it on Blogger. Your Lab 2 part A writeup ends abruptly after step 19 -- right where the scripting begins. 

Several of you have asked how to turn it in. Here's the plan:

We are going to do it all in class this Monday. We will work together to get your buttons scripted (steps 20 and onward). After we have a scripted, functional movie, we will learn how to Publish it. And then we will go through steps to get it viewable on Blogger.  I will hand out new instructions that will get us all the way through the end (and then onto our next exercise…).

What do you need to have done before class? Everything through step 19.

Do you need to have something posted on your blog by the time class starts? No.

Weekly Map to Find and Post #2

This week we are going beyond a simple static map and will be learning how to bring buttons into our movie. I want you to find an online map that uses buttons to control the playback of the information -- a flip book style where you click to move ahead in time.

Lab 2: Adding sound into the mix

Today we went over how to add sounds to the buttons you're creating for Lab 2. Simple sounds, like a beep or ping, add an addition layer of user feedback to a button. We attach sounds to the "Down" stage of a button to let the user know their click was successful (adding sound to the "Hit" doesn't work well as the action happens so quickly -- the sound may seem to play after the button has completed its action). 

Fortunately, adding sounds to buttons is simple. I'll highlight the steps here. 

1. Get the sounds file. For this lab, I've assembled 18 basic wav files that work well for buttons. The sounds are in a folder on Blackboard. Download the file, unzip (if needed) and then "Import to Library" the whole lot. To hear what the sounds "sound" like, double click on the icon for the sound in the Library. In the pop-up window, there is a Test button on the right. Click it to hear the sound. Use the same sound for each instance of one button. If you wish to use a custom sound, that is fine. Just make sure it is short in length. We will do more elaborate sound additions later this semester (there is no requirement to go beyond the sounds provided for Lab 2A).

2. Attaching the sound to the button is done in the editing mode. Select the instance of the button on the stage and double-click to jump into the 4 button states. Click on the frame for "Down" then go to the Library and drag the icon for the sound onto the Stage. In class I said you have to drop it on top of the button, but anywhere on the stage works. Don't drag the sound icon to the keyframe...it won't attach there. How do you know if it worked? In the keyframe for the Down, you will see a small blue horizontal line (it is actually a small histogram of the sound). To test, leave the editing mode by clicking on Scene 1 near the top, turn on Enable Simple Buttons from the Control menu, and try clicking on the button. Nice thing is that it will beep even if there is no action on the button. Apply the same sound to all weeks on the timeline. 

3. Using the same technique, add sounds to the forward and backward buttons. 

If you are doing this step in a campus computer lab, you may want to bring along some headphones so you can verify it all works. 

If you run into any issues, please let me know via email. Feel free to attach the .fla file to your email so I can look into the issue. 

Lab 2 Examples from the past

Note: in the past the class had to map out an entire season for one team (not just the playoffs). But I wanted to show you layout ideas and how the buttons work.

Theo's Superbowl map

Jessica's football map

Lab 1 Grade Form

I have posted the grading form for Lab 1 on Blackboard. For those of you new to my style, it is out of 50 points and you earn points for completing components of the lab assignment. I breakdown the different components into sections -- reading through those sections on the grade form before you turn in your lab is a good way to make sure you have included the pieces I'm looking for. It is *always* better to turn in a partial lab than nothing at all. I will give you as many points as I can.

Why does it have 2 identical sides? I print and cut the forms in half lengthwise to save a bit on paper (there is a method behind the madness...). If you ever have any questions please ask!!

Animation Basics and Photoshop

Today we will being our foray into geographic visualizations with a quick survey of early cartographic animation. Yes, these will seem painfully basic and slow (or will play way.too.fast) but they set the mark as to where the field began and how much progress has been made in a relatively short period of time. They will also give us the chance to discuss the core elements of map animations -- components we will be learning to craft in the next couple of labs.

We will also be fiddling with Photoshop for Lab 1. The initial plan was to do little Photoshop with some Flash mixed in but our copies of Flash have not magically appeared yet. While we wait for Flash we will be working with some satellite imagery. I will also show you a few tricks in Photoshop that can help you modify graphics for your animations during the semester (be gone pesty white box!). https://www.youtube.com/watch?v=SV38L4c4JKY

And lastly, I will discuss the metaphor of Flash so that we can jump into the program a little faster next week.

Send me your blog addresses

If you don't see your name linked in the middle of the right sidebar on this page:

-email your blog address (http://*****.blogspot.com) to jhallden@gmu.edu

-include your preferred first name

Make sure you get your first post up as well!

Moving Beyond Static...

Let's take a look at the range of cartographic animations/visualizations on the Web starting with the earliest styles. 

Early animations and visualizations that have influenced the discipline:

http://www.ncgia.ucsb.edu/projects/gig/v2/About/abApps.htm  Urban Change (scroll down to that section on the page)

http://www.ciesin.org/datasets/cdc-nci/cdc-nci.html  AIDS data animations

http://geography.uoregon.edu/envchange/clim_animations/  Global Climate Animations

Time-series animations (limited or no interaction):

http://maps.unomaha.edu/AnimatedFlightAtlas/FlightTrafficAnimation.html  Animated Atlas of Air Traffic

http://www.cdc.gov/obesity/data/trends.html  Obesity Maps (the animations are gone but I'm leaving the link as the data is interesting)

http://www.nasa.gov/centers/goddard/news/topstory/2003/0619lightning_prt.htm  Lightning strikes globally

http://www.mapsofwar.com/  Maps of War site -- esp. the Imperial History map

Interactive/Exploratory (to varying degrees):

http://valley.lib.virginia.edu/VoS/cwmaps1.html  Battle Maps

http://nationalmap.gov/small_scale/100topos/index.html  What remains of the old USGS National Atlas 

http://www.lakeshorepreserve.wisc.edu/   Explore the Interactive Map

http://map.uoregon.edu/  U of Oregon campus map

http://stats.oecd.org/OECDregionalstatistics/  Regional Statistics

Real-time Data:

http://www.sailwx.info/  Sailing vessels (sometimes slow to load)

http://www.gasbuddy.com/gb_gastemperaturemap.aspx  Gas Buddy

http://earthquake.usgs.gov/earthquakes/map/  USGS Earthquake Map

http://www.fly.faa.gov/flyfaa/usmap.jsp   FAA flight delays

Fly though maps:

http://www.pbs.org/harriman/maps/w_fly_maps.html  Western Alaskan fly through visualizations

3D Models:

http://svs.gsfc.nasa.gov/  NASA Visualization Center

http://www.google.com/gadgets/directory?synd=earth&cat=featured&previ...  Google Earth gallery

Misc. 
http://www-969.ibm.com/software/analytics/manyeyes/#/visualizations  (compendium of many different visualization styles)

http://www.ubasics.com/dighole/  If you dig straight down....?

Setting up your Blogger site

• Setup a personal GGS 411 blog 
• Go to https://blogger.com/
• Sign up
• Choose a snazzy name for your site
• Add a photo of yourself
• Subscribe to the class blog
• When done, email jhallden@gmu.edu the web address and your preferred name. 
• I will add the addresses to the class blog

• To get your mind back in mapping mode….
• Find an interesting example of an interactive map -- any topic!
• Take a screen shot
• Make a New Post with:
• screen shot of map
• a link to what you selected
• and a few sentences explaining why you find it compelling (need to comment to get the full 5 points)

Class syllabus

Anticipating a potential snow day today (and a resulting need to update the calendar in the class syllabus), I opted not to get printed copies of the syllabus. Please find it on Blackboard -- and do go through it! I consider it a contract between us and will follow it throughout the semester. Any changes to the calendar (due to cancellations or software issues or whatever) will be posted on Blackboard asap and will be announced to the class.

If you ever have a question about what we are doing or what is expected of you, please ask! And the soon the better. I have more options at my disposal before things get messy/go missing.

Welcome!

Yup, you found it. The blog for GGS411 this Spring '15 at Mason.

Glad to have you on board. :)