A3-RobinHeld
From CS294-10 Visualization Fa07
Contents |
[edit] Assignment 3: West Coast Weather Visualizer
[edit] Data Source
- Climatic measurements gathered by the National Climatic Data Center (NCDC) will be used. The data will be obtained from a website published by the NCDC, which includes climatic reports for several U.S. cities based on data accumulated from 1971 to 2000. The available documents include average and median values for temperature, precipitation, snowfall, and more, arranged by month. The datasets can be found here: NCDC Monthly Weather Reports
[edit] Scope
- To reasonably limit the scope of the project, I will focus on five major West coast cities: Seattle, Portland, San Francisco, Los Angeles, and San Diego. I will give the user the options to compare monthly values of average temperature, extreme temperatures, and average precipitation between the cities. The extreme temperatures are based on the highest and lowest value recorded within each month over the 30-year span covered by the data sets.
[edit] Interface Description (Preliminary)
- The interface will allow the user to toggle the display of each city's data. The cities will be listed in order of decreasing latitude, and their labels and data points will be correspondingly color-coded. A line graph will plot the average temperature (in degrees Fahrenheit) against the months of the year, and will always be visible. The independent axis, with time in months, will be quantitative (intervals) and the dependent axis (temperature) will be quantitative (ratios). Therefore, it makes sense to use a line graph to illustrate how the temperature changes month to month. The user will also have the option of turning on or off the temperature extremes for each month, which will be displayed as vertical bars. The use of vertical bars will allow the observer to quickly assess the range of temperatures within each month for each city, and simultaneously place the average temperature within that range. Average precipitation will be represented by filled circles plotted on top of the average temperature data points. The areas of the circles will be determined using Flannery's apparent scaling function (see the lecture from September 12). This choice of visualization will allow the user to quickly assess how precipitation changes over time and between cities, without obscuring the average temperature data.
- It should be noted that any combination of cities and data types will be available, with the exception that the average temperatures will always be plotted. This choice has been made to simplify the implementation of the various visualization options. For instance, if one wished to only display the average precipitation specifically WITHOUT viewing the average temperatures, then the graduated circles could not be plotted on the average temperature data points anymore. Rather, the temperature vs month plot would have to removed, and either the circles would need to be plotted along a horizontal line, or else a new line graph displaying the rain data would be necessary. Therefore, the permanence of the average temperature portion of the display seems reasonable.
- The interface will likely be implemented using Adobe Flash.
[edit] Story Board (Preliminary)
- Story board images of the West Coast Weather Visualizer.
- The upper left panel shows a default view of the interface, with one city selected and only the average temperatures visualized. If one turns on the "temperature extremes" option, the panel in the upper right corner results. The vertical bars clearly indicate ranges of values. On the other hand, if one wishes to look at average precipitation, the lower left panel results. Graduated circles appear over the data points, indicating the average rainfall for each month. The lower right panel illustrates a comparison between the average monthly temperatures for two cities. Keep in mind that multiple cities can be displayed at the same time, and that rainfall and extreme ranges can be simultaneously viewed.
[edit] Final Implementation
- The final version of the West Coast Weather visualizer (WCWV) can be downloaded here:
- Media:WCW.swf
- Media:WCW.zip
- If you wish to look at the ActionScript code, open up the WestCoastWeather3.fla file from the WCW.zip archive linked above. All of the code is found in the "Actions" field for the "Background" Layer. Please note that the .fla file was created using Adobe Flash CS3, and I'm not sure if it will open correctly with previous versions.
[edit] Description
- WCWV is an Adobe Flash-based program. When it is opened, the user is greeted with a blank line graph with months on the independent axis and temperature in degrees Fahrenheit on the dependent axis. Five major West coast cities are listed on the right side of the interface: Seattle, Portland, San Francisco, Los Angeles and San Diego. The placement of the cities' buttons reflect their relative latitudes along the coast. The buttons are also colored in "rainbow order." Each button can be pressed to toggle the display of the corresponding city's data, which are plotted in the same color as the button. The interface is designed to allow the user to simultaneously display the data of any combination of cities. There are also multiple types of climate data that can be displayed. The monthly average temperature (averaged over 30 years from 1971 to 2001) is always on and cannot be disabled. However, the user can also elect whether or not to display the average monthly high and low temperatures, as well as the average monthly precipitation in inches. The ranges of the temperature highs and lows are displayed as translucent polygons, while the precipitation values are shown as graduated circles. As mention in the preliminary interface description, the graduated circles' sizes are assigned using Flannery's apparent scaling function (see the lecture from September 12). The figure below demonstrates the appearance of WCWV when all of Portland's climate data is enabled.
- Example screen of the West Coast Weather visualizer. Portland's temperature data (average, high, and low) and precipitation data are displayed.
- Clutter
- It should be noted that it can be difficult to tell between the cities' data when all cities are enabled, as seen below:
- Note how difficult it is to distinguish between the cities' data when all are displayed simultaneously.
- To deal with the clutter problem, the visualizer can emphasize one city's data. When the user hovers the mouse cursor over a city's button, a semi-transparent "screen" is placed over all of the other cities' data, thereby emphasizing the current selection. The color of the screen is either black or white, depending on which is best to increase the visibility of the current city's color scheme. The figure below demonstrates the feature while San Francisco is selected (the mouse cursor is not visible):
- Here, only San Francisco's data is emphasized. The other cities' data are still displayed so one can easily compare their climate trends to those of SF.
[edit] Changes Between Storyboard and Final Implementation
- Temperature Extremes
- Originally, it was planned to display the extreme temperatures for each city. The specific values would have been the highest and lowest temperatures recorded in each month from the 30 years of available data. However, when it came to implement the interface, it was decided that the extremes were outliers by nature. Therefore, they would not be particularly useful if one wanted to compare typical temperatures between the various cities. The final implementation therefore includes the average daily highs and lows within each month. This gives a more reasonable idea of the temperature variations for each city.
- Temperature Range Visualization
- Originally, the temperature ranges for each city were going to be indicated by vertical lines. However, that choice of visualization obscured too much of the data. For instance, Portland and Seattle have similar temperature ranges, so for a given month, one city's temperature range could completely obscure the other city's range. This could possibly be avoided by horizontally offsetting each city's range bar, but that just results in more clutter. Instead, the temperature range data is displayed using separate lines to indicate the highs and lows, and those lines are connected to produce a translucent polygon. The translucency allows one to see multiple cities' data at the same time.
[edit] Comments on Implementation
- Overall Time Taken: 20 Hours
- I had never used Flash before, so the task that took me the most time was getting acquainted with ActionScript 3.0. Specifically, I needed to learn the general syntax of the language and figure out how to catch and pass mouse events. I also worked with a few ideas on how to update the display in response to each button press. In the end, I chose to have each button change a boolean value, such as whether or not Seattle's data should be drawn. I then implemented an "updateDisplay()" function that would be called after each button press. UpdateDisplay() clears the graph and redraws it using the new display settings.
- It also took some time to decide on the best way to display the temperature highs and lows. As described above, the original idea was to use vertical bars to indicate the range of values. But the bars obscured each other, so other options were explored. The current implementation (two line graphs filled by a translucent polygon) seemed the cleanest and easiest to read.
