Winds for a Healthy Change – Blowing out with a bang

Winds for a Healthy Change (Beta)

I. Project

A. Introduction

Air quality is a national problem. States with some of the largest populations, such as New York, California, and Texas, fail to meet the Environmental Protection Agency’s National Ambient Air Quality Standards. Chronic exposure to high particulate matter (PM), ozone, or smog contributes to upper and lower respiratory problems, asthma, decreased lung capacity, or worse. The health effects of poor air quality result from a number of factors including transportation to and from school, outdoor physical activity, and lack of knowledge of poor air quality days, or “Action Days.”

The problem is especially acute in Los Angeles. According to the American Lung Association’s State of the Air Report 2012, Los Angeles County ranks among the top five dirtiest cities in terms of air pollution.  Many of these airborne pollutants, such as ozone and particulate matter, have been found to significantly decrease lung function and capacity, with low-income communities most adversely affected.

Our website explores the factors—both direct and indirect—that have the greatest effect on air quality, specifically the concentration of particulate matter in the air and factors like wind and weather. With a real-time map showing air quality combined with up-to-the-minute weather conditions, our website offers what has the potential to become an indispensable tool for those most concerned with the effects of poor air like parents, health professionals, and educators.

B. Description

Up until now, maybe the most common place to get an update on current air quality conditions has been through an occasional warning from local radio stations when the air quality is especially poor. These announcements lack regularity and are subject to the daily news cycle. Even if air quality is bad, the warning may be withheld due to broadcasting time restraints.

In order to address gaps in knowledge about air quality Winds for a Healthy Change proudly presents a website to help the U.S. public, with an emphasis on Los Angeles, mitigate the threats of poor air quality.

The central feature of our website is real-time data that comes from the AirNow website. AirNow is a product of a combined effort between the United States Environmental Protection Agency, the National Oceanic and Atmospheric Administration, and the National Park Service. The AirNow website generates and displays the information we use, but restricts the user to a larger region, such as the general southwest, and does not combine the information with additional factors like weather. Their website also does not incorporate the useful Google interface.

Our website gives users a way to check air quality conditions before they make decisions like when to go outside. The relevancy to fields related to planning is clear. While it is designed with the general public in mind, we believe it will be especially useful specific user groups, especially those who spend a lot of time outdoors—like children—and those who are susceptible to respiratory ailments, like the elderly and infirm. The implications for issues concerning environmental are considerable, as users can see in real-time how poor air quality might be disproportionately affecting regions that have less access to medical resources are more susceptible to disease.

C. Functionality

The website welcomes the user by requesting a piece of information that is among one of the first things a child learns about where they live: their zipcode. From there, the website takes the user to the entered zipcode and presents them a collection of easy to read data.

The first is an outline of the zipcode the user enters. The second is a box appears showing three pieces of information. This includes the zip code, basic demographic information like population and density, and three indications air quality: the air quality index for today, and the air quality index for the prior two days.

An additional piece of data relates to another important factor influencing air quality: wind direction. Surrounding the chosen zip code is a grid of 30 arrows that give information about current wind conditions. The direction of the arrows indicates where the wind is blowing, and their thickness indicates how strongly. Wind direction is an important factor to consider because often air quality is affected not only by the reading in the selected zip code, but also the readings in nearby zip codes, from which polluted air can be blown in.

A secondary feature is to display cloud cover and weather, each of which have impacts on air quality, but because their impacts are less significant, are relegated to optional toggleable layers at the top of the screen. Additional toggleable layers reflect how environmental justice factor in to air quality, by graphically reflecting a vulnerability index.

Once the user has become acquainted with information offered by Winds for Healthy Change, they have the option to do a new search and explore a second feature of our website: historical data. In this option, the user can access air quality data from the past to understand how today’s data stacks up against the past, going back to August 2009

Features at the edges of the screen offer help to the user if there is any confusion about the what the information on the site. A legend in the bottom right corner of the screen informs the user of how to interpret the data, explaining wind speed and air quality indicators. A Guide Me tab at the top offers tips about how to navigate the site. An About section gives a summary of the project and information about the developers.

II. Diagram

III. Team

The Winds team is comprised of four members. Sharon Liu is a graduate student in the UCLA Department of Civil Engineering. Bryan Moy is a 1st year Ph.D student in the School of Public Health. Julia Lembrikova is a graduate student in both the School of Public Health and Urban Planning. Steven Guerry is soon to be unemployed.

Sharon was responsible for the heavy coding lifting with significant support from Bryan, who also provided extensive design feedback and guidance. Steven and Julia offered strategy, input and feedback on specific features that were eventually incorporated into the site. They also handled many of the blog posts, wire diagrams, and narrative for the site.


  • brainstorming (and dreaming) potential designs :)
  • maintaining a wishlist for Sharon
  • writing/editing blog entries (especially post-midterm)
  • extensive guidance/UI experience
  • making the final presentation on Prezi


  • coding, debugging, troubleshooting
  • saying yea or nay to what is or isn’t possible (within our coding capabilities)
  • trying to fulfill Bryan’s wishlist (which she did!)
  • minimal contribution to blogs


  • writing blog entries
  • making wire frame diagrams for blog
  • suggestions/comments


  • Bringing high-fiber snacks :)
  • Attempting minimal tasks as needed
  • suggestions/comments

IV. Evaluation

For the most part, our website was able to quickly display three layers real-time (wind arrows, weather, and clouds) and the most recent air quality data; this typically meant the most recent 10am or 12pm reading.  Aside from the lack of real-time AirNow data from the API, calls to the API were relatively slow; therefore, the total number of calls had to be limited.  This meant that we would not be able to easily calculate long-term averages such as the historical Monday average or plot a time-series of data for that specific location.   As a result, we limited our queries to just three days–the user specified day and the two days prior.  In order to be able to utilize long-term average hourly data, we would have had to deal with data off of AirNow’s ftp server.  In that case, we realized there were 12,000+ files of hourly data– one file for each hour of the day starting from 8/1/09 to present.  Each file contained data for the entire country.  If we had more time, we would like to be able to build something similar to the Google Traffic bar which can display long-term hourly trends sorted by day of week.  We feel that this is a critical piece of information that users would need in order to make a decision on whether or not to engage in an extended amount of outdoor activity.

Another major issue was calling the wind arrows and having the wind arrows display at the correct locations.   We wanted to match traditional vector maps by showing a dense grid of arrow on a map to demonstrate actual trends; however, again, the speed at which data was received from the World Weather Online API limited this from being possible.  In addition to the number of arrows, we were also faced with the challenge of distinguishing the wind magnitude from one location to another.  Since we were not satisfied with just changing the size of one set of wind direction icons because the thickness of the arrows would change, we wanted to have the length of the arrow change.  By making this decision, we needed to create numerous sets of 8 arrows for each level of wind speed.  Initially, we used 7 sets of arrows based on the Beaufort scale, but then we realized that the arrow lengths could not be easily distinguished, so we downsized to 3 levels.

Our last major challenge was working with ArcServer.  Given the wide range of data sources/stylesheets that we were using, there were often mysterious conflicts that really hindered our use of ArcServer layers.  The problem wasn’t resolved until it was a bit too late to explore ways to add new data to the website.  We figured it out late Tuesday night and successfully called the data, but had issues displaying the data in a consistent manner.  Queries were successful, but since the queries were all nested within a getJSON call, the data often did not come in an orderly manner leading to strange display problems.  (Please uncomment the commented out section in winds.getAGSdata() to see what we mean.)  We decided to remove it altogether.

Although the website showed very useful information, the spatial relevance of the AQI was still a major issue left unresolved due to the format of AirNow API calls.  Since air quality data is measured at monitoring stations, data for a specific lat/lon cannot be obtained unless there is some sort of interpolation scheme calculating the true value based on the surrounding monitoring station values.  This would require interpolation schemes commonly used in hydrology to fill missing precipitation data such as Inverse Distance Weighting, Station Average Method, Linear Average, etc.  Even then, these interpolation schemes assume that air quality can be linearly interpolated which also a faulty assumption because dispersion is dependent on the weather conditions (including wind speed and direction as well as humidity) .  If we were interpolate, how then would we query? by the nearest X stations? within X radius?  This would unravel a whole different challenge.  Perhaps we can tackle this problem in the future using some mathematical calculation OR we could avoid calculations and just solve the problem with display  improvements (e.g. onclick display all stations within some radius and plot their respective AQI values).

Some animation throughout the website would help to streamline transitions.  Although it’s not absolutely necessary, but it would make the website more aesthetically pleasing.   We could see this as being particularly nice when toggling panels on and off and having them fly on-screen, for example.

As for the future of Winds for a Healthy Change, Bryan and Sharon would like to eventually take the website public after another couple rounds of major UI improvements which could involve working with our data providers to generate more user-friendly data.

Presentation Comments from Audience

  • “Can you add allergen data, such as pollen, tree, etc?”
    • has the data and if a user would want to access that data, they click the icon on the map and access the data by linking to’s website and clicking on the “Pollen” tab.
  • “Can you show a longer time-series of data or show trends?”
    • Yes, we will explore that option (hopefully soon).
  • “I thought the Help! button was for us to seek help based on the (bad) data I saw.  What can I do if there air quality is bad near me?  Maybe you can add a way for users to express their concern to local policymakers?”
    • Yes, unfortunately, the Help! button ended up being confusing.  We should have left it as “User Guide” or something with a more direct meaning.  If possible, we should have a query where you can get emails of local policy makers.  Also, there could be pre-filled (yet customizable) text form for users to email from our website.  (I think that would be a separate challenge in itself.)

V. Documentation

A. User Interactions

  • Entering zipcode- Users can enter a zipcode to see real-time  AQI  data for the selected zipcode.
  • Searching historical data- By clicking on the magnifying glass on the initial screen or in the search tab, users can pick a date from August 2009 through now and view AQI data for the selected day.
  • Clicking on weather icons display forecasted weather for the user.
  • Clicking on Help! allows the user to view different functionalities of the site and helps them navigate .
  • If no zipcode is chosen, the default goes to today’s date, as well as the map of the U.S. where the user is then able to click anywhere they like.
  • Clicking on the Layers tab will allow users to add or remove features such as demographics, clouds, temperature, and wind arrow layers.
  • Users can click on the About section which provides them with information about the website and its designers.
  • A clickable legend is provided in the bottom right corner, indicating the color code for the AQI and explains the wind arrows on the map.
  • Lastly, the user can click on Sources to see where we got the information, codes, and API’s to put this map together.

B. Custom Functions

Some of the custom functions of the Winds for Healthy Change website are the ability to call real-time wind data, weather data, cloud data and most importantly real-time air quality data.  Although real-time air quality data isn’t available in every location imaginable, we were able to call any data AirNow has available.  We also have historical air quality data available for users on our site.

C. Custom Layers

Temperature data – users have the ability to view the temperature and the weather description.

Wind data – users are able to see how strong the wind is as well as the wind direction.  There are three different wind strengths represented by different colored arrows and eight different arrows in which we classify wind direction.

Air quality data – users are able to see the concentration of particulate matter from a number of monitoring sources provided by the South Coast Air Quality Management District.

Demographic Layers – Allows users the ability to see a variety of demographic information that may be useful to illustrate environmental justice issues.

We also have a layer for US states, although this layer is on by default and is not available for the user to toggle.

Week 7- Proposed Bus Stops


Two additional layers were added to the website–Unified School District boundaries and local parks.  The district boundaries will be useful to students/parents to know whether or not bus lines serve the area near schools their children currently attend or will attend.  This is important for parents who are unable to pick-up and drop-off their children.  My proposed  will help to solve this problem.  Parks were previously displayed on the map with custom markers and with Google Places, but neither of them brought out the boundaries of the park, so I wanted to make the parks pop out more.  A park layer can be toggled on/off to highlight where the nearby parks and how the public can easily access them along these proposed bus lines.

Week 3 – Proposed Bus Stops

Actual Website

METRO bus lines nearby were added to improve the map.  Since proposed bus stops were original selected in locations where METRO stops don’t already exist, there was no conflict.  Even though these proposed bus stops are in new locations, METRO has numerous lines throughout West Los Angeles, Palms, and Mar Vista.  METRO’s wide coverage positively impacts my proposed bus lines by introducing more opportunities to transfer between different agencies, thus improving access to areas lacking public transportation.

Goal: To add new functions and improve user interaction

New stuff:

  • using METRO API
  • connecting polylines (Thanks, Yoh!)
  • adding/removing layers on demand (buttons!) <– two types
  • styling with CSS (simple)
  • icon legend


  • polyline function doesn’t always work (especially when bus stops are far apart)
  • Google Earth kmz place icons are saved/loaded correctly
  • remove METRO bus lines button only removes the last “liveBus” and not all of them
  • bus lines are not labeled
  • lacks marker customization (size, origin, etc)
  • many more…

Week 2- Proposed Bus Stops


I included additional features to justify why I chose the locations for the proposed bus stops.  Aside from improving access to schools and parks, these bus stops also provide access to many businesses in the area including pharmacies, grocery stores, restaurants, banks, etc.  Increased use of these bus lines will help to reduce greenhouse gas emissions, support local businesses, and promote physical activity.

Week 1 Site Reviews – LA/OC Real-time Precipitation

As a field hydrologist-in-training, I often find myself looking at real-time precipitation maps to see when exactly it started to rain, how much it rained, where it’s raining, etc.  These are key questions when you’re waiting to drive out to your study site to collect storm water samples.  I help a PhD student grab Station Fire runoff samples after the huge 2009 fire in the San Gabriel Mountains.  We collected samples every 1-2 hours during and immediately after the storm.  For this reason, I came to depend on real-time precipitation maps.  Currently, I use the Los Angeles Department of Public Works (LADPW) website frequently for research and I also like to check Orange County Department of Public Works’ (OCDPW) website when I’m at home visiting my family.  For this assignment, I decided to evaluate the two websites.


Site #1: Los Angeles County Real-time Precipitation (

LADPW provides real-time precipitation data in this static map.  Gauges throughout the county are displayed in one view and links provide detailed information for each gauge.  A stream network is also provided in the background.  Surrounding county names are also named appropriately.  Above the map are options to change the temporal resolution of the data (last 1 hour, 3 hours, 6 hours, etc).  After clicking on the link, a new map is loaded with the appropriate data.  Freeways are the only spatial referencing tool on this map, aside from the county boundary lines.  I’m not familiar with this map interface (i.e. it’s not Google, Bing, etc).

PROs: maps fits on a typical computer screen, gauges are labeled, full time-series of data at each gauge is available

CONs: no interactive panning, no zooming option, lack of spatial referencing (i.e. topography would be helpful)

Overall, this maps is not very exciting to look at or work with and it would definitely be nice if it had a better interface.   It provides a large amount of data, but the blue bar on the top with the different temporal scales is not quite so easy to find as it is of of the map and it blends in with the browser since there are no spaces before.  A larger font size across the entire website would also be nice.


Site #2: Orange County Real-time Precipitation (

OCDPW’s website has a more up-to-date look to the way they display their data.  It’s built on a dynamic, simple, and familiar map made by Google (roads, cities, labels, land cover, etc are already in there by default, but you can also change to the satellite or terrain modes).  Gauges are not labeled, but the gauge name and number show up when you hold your cursor over the black rectangles with precipitation values.  When you click on the values, the total precipitation recorded during those different time-scales is shown. A drop-down menu provides the option to look at different temporal scales of data (i.e. 15-minute, 30-minutes, 1 hour, etc) and only the GoogleMap refreshes (not the entire browser).  I believe this makes the website faster to load.

PROs: google maps! (many useful built-in functions),  panning, zooming, display versatility /customization, small panning window in the bottom right corner, option to display only gauges recording data, fast map refreshing speed

CONs: no precipitation time-series (vector)

Overall, the Google Map interface greatly enhances the utility of this website.  These built-in functions are familiar to a wide range of people and there won’t be any learning involved on how to use to the website.  (This saves time and energy.)  Although data is available on a wider range of time-scales, not all of the real-time data is actually provided.  Only totals for each temporal scale are provided; thus, this limits its usefulness for people who need it real-time (e.g. researchers).



I found the OCDPW website to be better than the LADPW website because it’s easier to use, more intuitive, and aesthetically pleasing.  For an average user, it provides enough information.  If I were to build a similar website, I would definitely improve the information on the pop-up to have a link to high temporal resolution data.  With that addition, the OCDPW website would have all the PROs found in both counties’ websites.

Based on this comparison, I definitely would want to have zooming and panning capabilities for my group’s project.  I feel that those two are critical characteristics of a good web map.  I am also a big fan of Google products and would like to incorporate them into my team’s project.