Announcing the FOPSSS!

FOPSSS Showcase

-Bradley Orego

I am here today to share with you my vision of the newest and hottest thing in the field of Sports Statistics visualization. I bring you, the Field-Of-Play Sports Statistics System! This is a new wave of technology brought to you in order to make reading sports statistics easier and more intuitive.

How obnoxious is it to try to look through tables and charts and spreadsheets just to find whatever stats your favorite player has? Why is that so difficult? Now, with FOPSSS, you can simply select a player, get a view of the field of play of that player, and a cool visualization of their statistics.

There are two facets. This is how it works:

(Example: Hockey, and the NHL)

Player View:

Select your favorite player (via search, from a list, via the system, etc.). When you select them, their image  appears on the ice, in the natural position that they play (i.e. Evgeni Malkin appears at Center Ice, because he plays Center). From here, Evgeni's stat categories are splayed out on the other end of the ice, in the appropriate position of their usual occurrence on the ice (goals from in-front, hits in the corner, Penalty Minutes in the Penalty Box, etc). Each statistic is a different size to give you an initial view of how that player ranks compared to the league. League Leaders get special colors per category, as well. Upon mouse-over, you get the actual number of their statistic in Fish-Eye view, with the closest players to them, and what their current stat is. This allows the user to quickly and easily compare players based on this statistic.

Leader View:

This occurs on the other half of the ice. Selecting a statistic category from the ice will bring the user into Leader View, which will then highlight the positions on the right-hand side that have the highest number of players leading in that category. Upon mouse-over, these positions will reveal, again in Fish-Eye, the names and current stat of each player. The more players that are ranked highly in a category, the larger the size of the position letter (i.e. lots of Right and Left Wings in goals scored, with few Centers or Defensemen), as well as the position with the actual leader being highlighted in another color. Switching between statistics is as easy as clicking on another stat from the left-hand side, and the system automatically updates the sizes and colors of the positions on the left.

The cursor is even a cute image of a hockey stick (or football, etc) to make the user happy as well as to add a little zest. This system would be applicable to other sports (such as football), by using a similar system of player positions and approximate statistic occurence (touchdowns will be in the endzone, rushing stats at the line of scrimmage, reception statistics downfield on the sidelines, passing statistics in the pocket, etc). 

No longer do you have to strain your eyes on stats sheets and vomit at the obnoxious, boxy look of statistics pages. Now, with FOPSSS, statistics is as easy as watching the game itself!

InfoVis

My design idea for assignment 4 is going to represent gasoline prices
around Rochester. I'll use icons on a map of the city to represent gas
stations, with different colors to represent different service station
brand names and different shapes to represent services offered, such as
car wash, convienance mart, etc. at a given station. The dynamic query
feature will control which stations are shown based on price, and I'll
probably extend the filters to include sorting by services offered and
brand as well.

Flight Info

I'm not entirely sure what I was thinking when doing this, but for some reason I was convinced we had to use a dynamic query so I designed my interface around that idea.  Since we don't actually need to do this, my design will be changing, but this is what I have.  I was working with the idea of displaying flight information.  The arrivals and departures are represented by images of planes either landing or taking off with the name of the airline below the image.  The text would appear underneath and would be red if a plane is delayed.  My idea was that clicking on the image would bring up a map showing weather concerns, the plane's route, take-off time, landing time, time in air, and time remaining in air.  Since I can cut out the need for a dynamic query, this will all be combined into one screen.  I will most likely use a grid-layout in which each airline will be a column, and they will be arranged by time.  The flight numbers will be large and bold to be easily identifiable.

-Robin Miller

Design Ideas

I couldn't think of a better idea, so I decided to think of ways to represent election results.  It was hard to think of things that weren't already done this year, so some of my ideas are somewhat unorthodox.  I decided to focus on a presidential election, because I'm not sure how other types of elections work.  I haven't decided whether I want to limit it to 2 parties or not.  Basically, I wanted to find a way to represent information that was mostly graphical, but would leave any room for different interpretation.  Sometimes purely graphical info is ambiguous, which is why I will need to show numbers.  As a counterexample, one of my ideas for showing popular vote results (while the election is happening) is showing a race between a donkey and an elephant, the two "mascots" of the democratic and republic parties, respectively.  This would be funny, but not useful at all, because a distance between the racers could be any number, and it wouldn't be useful to the person who wants to see how far ahead one party is.  It might be useful at a first glance, but not useful after that.  One thing that I thought would be useful is an "interactive" map of the United States.  Not sure how I would program this, but it seems like it would be the most useful graph I could make.  It would show an overall result, with the map shaded in different states depending on which party won where, but one could also click on a state and it would bring up the state in greater detail.  A user could also compare two or more states.  The main design heuristics that would be used would be difference in color, and with graphs, size.  However, I could use any number of different things to represent results from states.  I'll have to think about it more.

-Ben Reback

Patterning Flight Patterns

In a huge airport, visualization of flight patterns takes place across several monitors, each displaying several hundred lines of incoming and outgoing flight patterns. A single line represents a single flight and the text of the line gives flight number, time of arrival, gate, etc. It's ugly and hard to find your flight, especially since organization tends to be across different airlines (Continental, JetBlue, etc) instead of a single organization based on time.

In my first sketch, I wanted to create a timeline that showed all incoming and outgoing flights, centered around their time of arrival/departure. I used a timeline, an easily recognizible concept from elementary school, in order to provide a quick, understandable, relative way of organizing flights at the highest level. I used color to indiciate on-time or late flights (Green means 'go' - everything is on time. Red is 'stop' - something is not on time!). However, once I realized that arrived flights also needed to be shown, I ended up with a huge list of arrived flights on one side and I started to realize this approach wouldn't scale well. A large airport, like Newark, has hundreds of flights incoming and outgoing. A simple timeline approach wouldn't work very well when you have 25 or 30 flights stacking up on each other.

My second approach sticks with the timeline approach, but partitions the timeline into tables. Each table represents a 30-minute block, and only the time from current to an hour in the future have explicit details shown. This gives the user a quick, at-a-glance access to more current events, but more distant events are still relevant. A few scenario outlines:
* You arrive at the airport 3 hours before your flight departs. You look at the screen, at the time when your flight is scheduled to leave. Because it's so far in the future, the exact departure time is not shown, but the flight is green, which means "on time".
* You arrive at the airport to pick up a family member coming in from LAX after the flight was supposed to have arrived. You look at the timeslot they were supposed to arrive in, and see it is red and marked (+1:30), signalling it is an hour and 30 minutes late.
* As your flight departure time nears, you glance at the screen. You see your flight is red, showing the adjusted time it will leave as well as the amount of time it has been delayed.

Dynamic controls would include a lensing effect, so the user can find the specific flight that interests them and mouseover to get more information. Filtering is pretty obvious - filter by airline, arrival/departure time, location/destination, late flights, all flights into a specific gate, etc.

A little morbid, but...

I actually came up with this idea when walking around the cemetery behind the school: birth/death/life expectancy in Rochester for the past 100 years or so.  Color coding and grouping, mixed with bar graphs of sorts (without graph lying) would probably be the best way to do this.  I actually thought about this because I, strangely enough, so a lot of headstones from people born in the 1800s that were 80-90 when they died, and I started thinking about the industrial revolution and how the start of Kodak and Bausch and Lomb and other large companies in the area polluting the water source might have effected the overall health of the area.  The ability to group by year, gender, socio-economic level, as well as using color coding to seperate one bar from another would be a good way to group.  I think also having a fish-eye style ability would help in keeping the overall level of detail low enough to see it all at once, but allowing the user to huver over a certain date/economic level/etc would bring up more information.  It will of course have more user control than I have shown here, like a scroll bar, and smaller lines/text that will be expanded upon when scrolled over.  This is just for a basic feel of how it might work.

-Sean Lander

Flight Information Visualization

My infoviz project will visualize the wealth of information pertaining
to flight schedules.

The first two pictures are a hand sketch, and then a more polished
digital sketch, of my first concept. Rather than simply listing
arriving flights, I show all of the flights from a given airport in
their own row. Each is positioned by its arrival time, so as time goes
by, flights move leftward, until they "arrive" at the current time.
Recently arrived flights are shown to the side. Delayed flights would
be shown with a wider bar, extending from the scheduled to the actual
time. This design could also be extended to show both arriving and
departing flights, perhaps by changing the shape of the bar to a left-
or right-pointing arrow.

The third image is a sketch of an alternative design, which places
arrows on a map to represent flights to and from a city. This view
presents more general information, taking advantage of the immediate
recognizability of a US map, but sacrifices some detail. The number of
flights is represented by the size of the arrow, the status by color,
and whether the flight is an arrival or departure.

-- Kevin Gessner

I really like the stock market.

I want to use the data from the recent stock market drop as well as historical stock market drops.  I would use a dynamic query the user could pick specific dates and specific stocks.  Stocks would be arranged alphabetically (name and symbol) on the left side of the screen with more information that could be brought up on the right.  Sliders would be used to choose a date range.  There would also be a dynamic search to pick a specific stock by name.  The overview of information would be the first thing shown with the general stock market information.  It would get more specific based on stock.  Higher priced stocks might be in a larger font, or stocks that have taken a bigger drop would be in a different color.

Flight Information

The concept I had for displaying flight information is location based,
the idea being that flight information is relevant in specific areas.
So the designs, not shown, show information displayed on top of a simple
map of the terminal, where information maps to location in the
terminal. Queries and variables could include, highlighting/displaying
late or soon to be departing/arriving flights, arrival/departure
statistics by flight number or destination, by airline.

-Gabe Schwartz

weather sketches

I'm doing weather. Explanation to be made in class.

-Emily Vukman

Can you see me?

I'm formatting this email as plain text, so hopefully you can read this.

I decided to visualize commit history in a source code tree. Since that's useful and obtaining data about it is easy.

I've got people on the right at first, but decided to move them to the bottom later to centralize controls. On the very bottom is a date slider with an A-B selection range. You should be able to drag the arrows to expand or shrink the selection. Dynamic queries, of course. I also used color to emphasize the selected area. Pretty straightforward - I'll probably embellish when I really write this thing.

Bryan Jacobs

LOL JK

Hey Carman,

Apparently the version I thought I had FTP'd onto the CSUG server wasn't the most recent (aka done) version, which means the version I gave you in the e-mail was incorrect. I'm going to re-send the most recent version, which is also the one on my USB flash drive, so...yeah

Cheers,

-Brad