The Dead Quiz 2 is the sequel to a quiz I made two years ago of the best horror movie deaths. Both quizzes feature animations inspired by Saul Bass’s title sequences.
With the second Dead Quiz I was able include new features like embedding the movie trailers with the YouTube Flash API, using the Flash CS4 3D transformations and inverse kinematics.
Blues Shootout is a simple shooting game starring St. Louis Blues goalie Chris Mason. It features jib-jab style animation, first-person game play, animated trash talk and a hall of fame of high scores. We built it as a way to promote the Post-Dispatch’s Blues hockey coverage.
After I built the Hope Solo game, we tried to think if there was a way to adapt and reuse the code for other projects. We brainstormed and the best match was the idea of building a similar game for the St. Louis Blues hockey team. The basic game idea is the same: Goalie defending a goal. And with most of the technical problems already solved I was able to focus on polishing the game.
We set up an appointment with Chris Mason to shoot reference photos and record audio. I created a shot list and gathered some possible statements to use as trash talk. Post-Dispatch photograph Chris Lee handled the photography, while multimedia intern Andrell Bower recorded the audio.
Before meeting with Mason, I created some preliminary tests experimenting with the look of the animation. I was interested in the way that the figure and the puck moved on a slippery surface and the way the ice reflected the action. I have limited experience on the ice and so my initial experiments looked more like an awkward figure skater than a professional hockey player. I watched goalie training videos and learned the basic techniques, vocabulary and feel of the action. When we met with Mason I was able to ask him specific questions and ask for specific poses for reference.
The game also features a hall of fame that keeps track of high scores. Because of the technical limitations imposed by the server, the hall of fame had to be stored on the users computer instead of a remote server.
This interactive scouting report features cutouts of the the St. Louis Cardinals batters popping up in a shadowbox stage of home plate. The graphic displays the batting averages and swinging percentages for different parts of the strike zone. It also tracks batting averages for different types of pitches and maps where the batter tends to hit the ball.
When the St. Louis Cardinals made it to the 2009 season playoffs, the Post-Dispatch started thinking of ways to cover the post-season games. The editors talked with a third-party stats provider to see how we could compare the Cardinals and whichever teams they play in the post season. They decided to purchase the scouting reports for the Cardinals. The scouting reports show which pitches the batters swing at and where they hit the balls.
We brainstormed ways to to show the information using everything from games, to baseball cards, to a slideshow of numbers. We decided that the easiest and most effective use of my time would be to create template that would map out the stats for each player. By building a template I made the project easily and quickly adapted to whichever teams we want to add in the playoffs.
After creating some sketches I decided to build a shadowbox stage of home plate, the catcher and the batter. I talked to Post-Dispatch photographer Huy Mach and he agreed to photograph the Cardinals at bat. He photographed two games and then taught me how to use the 600mm lens and I photographed two games. Between us we were able to photograph the roster of active players.
The stats company provided the scouting reports as a file of comma-separated values (CSV). I reformatted the data into a series of arrays. When a player is selected, the project cycles through the values in the array to display the numbers and color the parts of the graphic according to the color key I defined.
In metro St. Louis lenient plea deals, secrecy laws and outright mistakes have allowed most DWI offenders — including many chronic offenders — to avoid serious punishment — in a system-wide breakdown that has claimed lives in Missouri and Illinois. This map and timeline are part of a multi-part series on the systemic failings in the prosecution of repeat offenders.
The seven profiles track the dates and locations for arrests and and court cases using XML, google maps and a timeline that automatically expands and contracts depending on the time span between the first and last dates.
Separating the timeline information from the Flash project made updating and maintaining the project extremely simple. I posted one copy of the timeline XML and any corrections I made to the text were updated throughout the project.
The timeline drawing was created in ActionScript by dividing the width of the timeline by the number of years from the first recorded arrest to the last incident. Then the dates were automatically placed in the year by dividing the width of year bar by 12 and looking at the month of the incident.
I also created a series of heat maps that color and rank the municipalities in the St. Louis region according to DWI stops, arrests and convictions.
Solo Shootout is a soccer game starring St. Louis Athletica goalie and Olympic gold medalist Hope Solo. It features jib-jab style animation, first-person game play, animated trash talk and a secret level where the player can try playing goalie. We built the game to promote the Post-Dispatch’s coverage of the St. Louis Athletica in its first season in the Women’s Professional Soccer league.
I started off by making a working mockup of the game. This initial prototype allowed me to experiment with the technical aspects of building a game like this in Flash. How do I create a ball that can be kicked in the air with varying degrees of strength? How do I check to see if Solo catches the ball, deflects the ball or misses the ball? How do I animate and control where Hope Solo will move?
While I was working on the prototype, Post-Dispatch photographer Emily Rasinski was shooting photographs of Solo and recording her saying a range of things from trash talk to praise and encouragement. Her photos of Solo in practice helped me create her actions and make sure I was able to provide coverage for the goal.
My early version of the game featured a stylized cartoon head of Solo. I liked the look of the character—probably more than the final collaged version—but I was concerned about what it said to use a cute, cartoony character for a women’s professional sports project and whether I would feel comfortable using the same treatment for a men’s sports project. I think I would, but I was still worried about how it would be perceived. So we ultimately used a photo of her head on the figure.
I had a basic version of the game built within four days. Post-Dispatch interactive director Will Sullivan encouraged me to take the extra time to polish the game, the framing and the game play to make it a better experience. I added the animations of Solo critiquing the game at the end, I added a special secret move (a hard kick with the mouse aimed at the “N” in the strength meter), and I added an easter egg to the game that is revealed if the player is able to score enough points (actually a hint to use the Konami Code at any point in the game to try playing the game as the goalie.)
The 2009 All-Star Game was held in St. Louis this year. The Home Run Derby project tracks the home runs during the three round competition.
I built the home run tracker in advance of the competition. It uses the angle of the ball’s trajectory and the official distance to plot the position of the balls on the stadium diagram. On the night of the game, I entered the locations and distances of the home runs into a spreadsheet. I posted the finished project that night.
I built this interactive map and timeline to chronicle the 150 year history of the Missouri Botanical Garden in St. Louis, Missouri. A scrubber on the timeline reveals what buildings and features were added to the garden in each decade. The map features archival photos and new panoramic photos of the garden.
In preparation for MLB Opening Day, we posted an interactive comparison of the the St. Louis Cardinals 2009 roster. It features an alphabetical lineup of players, preseason analysis by Hall of Fame baseball writer Rick Hummel and a sortable comparison of the players’ stats.
I built the shell for this project in January but we didn’t have the lineup of players until last week.
We bypassed the the normal system for presenting interactive projects. The CMS we use for archiving and displaying projects is incredibly frustrating. It has a required ad space (that is always empty). It displays the projects inside of an iframe so that search engines ignore the content. It lacks the social bookmarking available on the rest of the site. And it doesn’t allow users to leave comments.
For these reasons we decided to bypass the system and display the graphic inside of a sports blog. This gave us everything we were looking for: improved design, better SEO, social bookmarking, commenting and all of the other blogging benefits.
I just finished working on an interactive map of St. Louis City showing how the housing market has changed in the last six years. The project features five heat maps of the city neighborhoods: Percent change in price, median price, total transactions, number of foreclosures and percent of foreclosures. The user can view individual quarters or watch animations to view the evolving housing trend.
Data guru Kevin Crowe originally approached me about working on this project last month. We talked about what we wanted to show. I built a shell for the project using dummy data. Because the data is imported from an XML file it was easy to add and change maps. When the final data arrived this week, the map required only minor tweaks.
I’m glad to be done with the project but sad to see my house on the wrong side of most of those maps and charts.
Since tax season is upon us here in the U.S., I thought I’d share an incredible piece of information design that’s pretty relevant not only because April 15 is looming, but also because a lot of people are paying more attention to the federal budget than they ever thought they would.
I stumbled onto the subject of this post while exploring a favorite (information design nerd) blog of mine, Flowing Data. I don’t remember the post, but I followed a link out of Flowing Data, and I wound up at WallStats.com.
WallStats is home to Death & Taxes: A Visual Guide to Where your Federal Tax Dollars Go, and it is simply one of the best information graphics I’ve ever seen. This magnificent poster (which can be purchased for $29.75 shipping included) distills the 1,000-plus-page federal budget into a single 36″x24″ sheet. AMAZING!
I saw this back in January, and I fired off an email to the graphic artist who put this brilliant piece of work together, Jess Bachman, to tell him how much I loved it. He was very gracious, and noted that President Obama’s budget was due out the first week of February, and he’d be pouring over the numbers in order to get the 2010 version out sometime this Spring.
I wonder if the recently passed stimulus package will be included?
At any rate, I’m trying to decide whether to wait for the 2010 version or get both the 2009 version and the 2010 version when it becomes available. Having both would be sweet indeed.
You just missed your chance to get a free copy in Flowing Data’s 10k Giveaway, but don’t worry. There’s also an opportunity to win another of Mr. Bachman’s posters thanks to Flowing Data. His 389 Years Ago poster (including a limited edition version) is on the block until Friday, Feb. 27.
Finally, here’s a video of Mr. Bachman showing off his work on the Martha Stewart Show, last April.
What we’re reading