Update on the Final Project

Link to working website.

In the final project for Winds of Healthy Change we would like our users to be able to enter a zipcode of interest, which would zoom the map to that particular area and pull up proper AQI data.The AQI data would include available information on a variety of pollutants (TBD).  The user would be able to see the number from the AQI index as well as the color pertinent to that particular zipcode and refer to the legend to determine if it is safe or not to be outside and at what danger level the air is.  The  wind arrows will show on default and the size of the arrow will correspond to the wind strength.  The user can use the legend to get more information about the arrows.  The user has the ability to click anywhere on the map and a polygon for the clicked zipcode appears as well as any information available about the AQI.  Both the air quality, wind speed and direction data is in real-time which would allow the user to get more accurate information than otherwise available.  There will be a few toggleable layers, weather being one of them, and some that still need to be determined.  We have broadened our user base and now have information for users nationwide, although we anticipate our website will be more relevant to people who care about outdoor air quality such as parents, and to people who are more vulnerable to poor air quality..

Historical air quality data will also be available for the user to access, although that data availability only dates back to August 1st, 2009.This will be important if users wanted to look at patterns in air quality throughout certain years, season, or time periods.

Although we have had some progress in the development of our website the following things are still in progress:

  • Calling air quality parameters of choice both historical/real-time
  • Sizing buttons dynamically
  • Thinner wind direction icon(s)
  • Entering a custom zip code rather than clicking on the map

As our project is evolving with have encountered some new challenges but are still facing some old user interface annoyances.

  • User interface issues
    • Our team has come up with a variety of different ways to present the data (some involving a Navbar, some involving having different parts of the screen greyed out).  We’ve got the Navbar to work SOMEWHAT efficiently, but there’s still some problems with alignment and working with the container.  Another problem is that we’re unable to appropriately make the calls to grey out specific areas or provide pop-up boxes (as Yoh had proposed).  We’re working on this problem diligently.
  • Integrating Bootstrap seamlessly into our webpage
    • As I mentioned earlier, we’re trying to incorporate Bootstrap CSS into our webpage, because we enjoy the ease of design.  However, we’re finding it difficult to adjust some of the parameters according to what we’re looking for, however, we need to explore the “Customize” section in further detail.  If that doesn’t work, we will probably explore other CSS options.
  • Historical data – what metrics to choose from?
    • Another thing we’re trying to adjust is how to present the data (bar graphs) using Bootstrap on the page.  We still haven’t figured out how to make the specific call, and also, we haven’t identified which pollutants we’re going to be focusing on.  We’ll need to decide this soon before we move on.
  • Highlighting polygon with AQI color – call currently inefficient
    • The call to highlight the polygon with the AQI color is currently inefficient and redundant.  We need to think about another way to make the call, or we won’t incorporate this aspect.
  • Do not know how to call for pollutant of interest
    • We’re not sure how to make the call to get the same pollutant of interest, versus randomly getting different calls for each pollutant.  We’ll need to standardized this before proceeding.

Link to website.

I got everything to work but the website looks terrible. I plan to do some formatting soon. I want to get the arrow to stop bouncing, get the highlighted census tract to go away when you click a new one, and change the labels in the google graph so you can see the ages better.

 

Week 7: Using ArcGIS

This week I reached far back into the deepest corners of my brain to recall how to make a create a map via ArcMap in order to use the layer as an overlay on my Donut Metro map. Initially, I wanted to joint a spreadsheet of my own Census data to a census tract shape file, but even though I literally did that dozens of times last winter, I couldn’t remember how to do that. Instead, I just used two of UCLA’s Mapshare pre-set layers—population of kids 6-17 in each census tract.—and institutions. There were two reasons. First, these layers may be applicable to our final project. Second, kids like donuts and I like to eat donuts in institutions.

I had trouble with the toggle option. I didn’t realize that when you embed the toggle in the html code you have to assign the toggle button a unique ID. Before I had done that, the toggle worked erratically.

Link to website.

Screenshot:

Winds for a Healthy Change Midterm

Introduction:

Our website.

Los Angeles County is known for its rich culture, diverse landscape, and most importantly, its beautiful weather.  Unfortunately, also well known to most Los Angelinos is the horribly pervasive air pollution, which adversely affects many children throughout the County.  Exposure to such horrible air is attributed through a confluence of factors, such as transportation to and from schools, outdoor physical activity, and a lack of knowledge regarding poor air quality days.  Chronic exposure to high particulate matter (PM), ozone, or smog can contribute to upper and lower respiratory problems, asthma, or worse, decreased lung capacity.

In order to address such gaps, it is with great pleasure that the WINDS FOR A HEALTHY CHANGE Inc. would like to unveil its new interactive mapping tool that aims to informs students, parents, and educators about current unhealthy air quality, in order to make better-informed decisions regarding their outdoor activities.  Our tool, currently in its beta phase, provides real-time information on a number of factors related to air quality such as: temperature, wind direction, wind speed and air quality indexes.  Each of these variables will be presented in an easily understandable format that empowers, educates, and informs our target groups.


Who We Aim to Please:

  • Students – Will be able to learn about alternative modes of transportation, such as bus routes, train lines, and subway stations using the Metro information incorporated into our map.  We believe having these features will encourage students to be more sustainable, and participate in reducing automobile emission exposure by riding public transportation.  Additionally, our interactive map provides information on a number of useful locations catering to students, such as libraries, parks, zoos, schools and bookstores.
  • Parents – Will also be provided with similar amenities as students, with the additional benefits of locations pertinent to the working parent, such as hospitals, universities, and taxi stands.  We hope that parents can use this tool to determine when it is safe for their children to play outside when they are not in school.
  • Educators – Educators are our main priority with regard to our working prototype, as children spend most of the high pollutant periods within schools.  Our hope is that educators can use our website to identify periods of poor air quality in order to adjust the students’ schedules to include outdoor physical activity when PM is lowest.


Through such informed decisions, we hope to aid in reducing the overall incidence and prevalence of respiratory issues among children within Los Angeles County.

Implementation:
The Winds for a Healthy Change Inc. will promote our website as a multi-faceted tool to schools within Los Angeles County.  Teachers will be able to use our website in order to make informed decisions about poor air quality days and whether to allow children to play in such conditions.  Teachers will also be able to use the website as an educational resource to teach students about issues of sustainability, environmental justice, and air pollution.  We hope students can bring this information home to their parents or guardians, and that they will refer to our website daily, when making informed decisions.

Your Website Can Do What?!
Winds for a Healthy Change Inc. has scoured the internet in order to provide the user the most up-to-date information and technology regarding air pollution and public health.  Whereas a multitude of websites have sporadic information on  a variety of weather and air quality tools, our website combines these features together in a map that is both user friendly and easy to understand.  A few of the features we’ve gathered are:

  • 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.
    • Buffers – Indicate the extent and deposition of affected areas.
  • Places – Generates specific points of interest or things we felt the users would benefit from knowing.  These icons typically identify points of interest or outdoor activity centers.
  • Real-time bus location data- users are able to see all the LA Metro Rapid bus lines and where they are in real time as well as their direction.  We felt this would be an excellent resource for users who want to partake in reducing overall air pollution by riding public transportation.
  • Demographic Data – Allows users the ability to see a variety of demographic information that may be useful to illustrate  environmental justice issues.

Who’s who?

  • Bryan –
    • Gathered background information for project/project vision
    • Function quality control/Troubleshooting
    • Layout vision/ User appeal
    • Requisition of data
  • Julia
    • Some CSS design work
    • Developer page
    • Some data requisition
  • Sharon
    • Coding map controls and features
    • Explored Google layers and experimental functions
  • Steven
    • Requisition and parsing of data, including original data from AirNow
    • CSS style coding for site layout
    • Google Fusion Tables


“Yeah, That’s Not Going to Work” Moments:

Real-time Air Quality Data – The main concern was obtaining access to real-time air quality data for Los Angeles County, particularly since air quality data is generally presented at a much larger scale.  After finding an appropriate API, it was also difficult to incorporate it into our existing map, even after following the directions, links, and appropriate coding for the code to work – it appeared as though the JSON code provided by the website was wrong.  In order to remediate this problem for the midterm, we obtained static data from a number of sources, incorporated them into fusion tables, visualized the data and applied buffers in order to show the extent.

User interface – Being able to come up with a layout that could easily apply to all three of our target groups was challenging.  Since we want to display a variety of specifically chosen variables for each user, we wanted to think of a way that we could easily provide a variety of variables, but still provide the users with multiple options. We decided to use a mix of tabular and drop-down options, where users could view their specifically designated map, but also have the ability to add additional features if necessary.

Little obtained data  –  Most of the features, functionalities, and data provided on our map were obtained from existing websites, sources, and data found online.  Whereas other groups may have obtained data sources, working with existing APIs that typically are not incorporated with one another proved challenging.

Combining APIs – A lot of the APIs and features we wanted to add were problematic in that they did not work well with the one another or inhibited specific functions.  Acknowledging, working, and understanding their properties in order to have them functional was difficult.

Styling/colors – We approached styling through a number of variations, such as with Bootstrap, styling sheets, and typical CSS.  In some cases, our styling sheet conflicted with our Bootstrap coding making it difficult to alter colors or variations.


Onward and Upwards!

  • Forecasted weather projections
  • Real-time air quality data
  • Different checkboxes for each user (student, parent, educator)
  • More sophisticated layout
  • Better UI
  • Search Bar
  • Zoom in and out function
  • Expanding to all of California

Wireframe:

Week 4 Group Assignment

General Updates

Weather Data

  • Airnowgateway.org does not consider weather conditions—even temperature— so the Google weather layer is an ideal compliment to our new air quality data.
  • Aim to incorporate wind data vectors

Particulate matter data

  • Airnowgateway.org provides real-time or historical air quality data at the zip code level for a five parameters: PM 2.5, CO2, CO, N20.
  • Still trying to work on how to incorporate this into the map, and how to combine with the weather/wind data.

These are some of the primary variables we’re trying to consider on the map:

  • Wind – should this be multiple arrows, or a single arrow for each designated area?
  • Temperature – at what level does this cover?
  • AQI – how would we display this in a clear and concise way that people can understand.  Should we incorporate a legend/key?

ARC GIS Layers/Shapefiles we’re considering adding to the map:

  • Elementary/secondary schools
  • Parks/County Parks
  • Zip-codes for LA County

User-Interface

  • In the beginning, we opted to combine multiple layers on and off.  Now we’ve decided to have individual layers that can be clicked on and off (at least for the midterm).
  • Have pre-designated variables that are applicable to each user:
    • Teachers
    • Parents
    • Students
  • Still allow users to add additional layers where they see fit/necessary
    • Adaptable buffer – able to change the size of the buffer
      • Haven’t been able to figure out how this would correlate with the weather and particulate matter data (would making the buffers combine temperature/particulate matter values, etc.)

Specific Updates

  • Designating which features will be permanently displayed and which features can be altered by the users
  • Trying to assimilate at what spatial scale the weather and particulate matter data are presented at
  • Which layout would be the most efficient and straight-foward in terms of allowing the designated users to get the most out of the data
  • If and when we consider adding forecasts, how would we display this?

Updated wire frame diagram:

Week 4 Web Assignment

I’m not sure why this week ended up being so complicated. In the end, it wasn’t much more difficult than previous weeks but Javascript is a sensitive soul, easily offended by an errant namespace or unclosed function.

This week I added layers relevant to Metro’s proposed Donut Line, which includes bookstores at which to read while you’re eating a donut, cafes at which to buy a coffee to enjoy with your donut, and gyms, where you can work off all the donuts you just ate. If any one of these options does not suit your needs, all you need to do is toggle the layer on and off.

A link to the map follows this screenshot:

Link to full map.

Week 3 Group Assignment: Midterm Proposal

A)

Background/Introduction:

Los Angeles is a car-centric city with an elaborate freeway system and many cars.  Studies have shown that emissions from cars as well as from diesel trucks are highly correlated with high asthma rates and respiratory problems in children. Diesel particulates, carbon monoxide, ultrafine particles, and other particulate matter (PM) are detrimental to the upper and lower respiratory system, particularly in young children.

The movement and distribution of airborne particulates is highly dependent on particles size, wind direction and prevailing weather patterns.  If parents are able to determine when particulates are lowest, they could take their children to parks during those times to minimize exposure to PM.  School officials could shift recesses and lunches to avoid high PM exposure.  Studies have been done on PM exposure and schools, in combination with weather patterns, and data has been presented to school officials, but we know of no map that allows citizens to interactively look at parks and school playgrounds to make informed decisions.

Proposal:

Our group has decided to create an interactive map of parks and schools located in Los Angeles County that utilizes current wind and weather data to actively provide particulate concentrations for a particular location (by clicking, or rolling a mouse over it) at different times during the day.  This main purpose of our project is focused on empowering our target audience – parents/guardians, school board officials, principals and school administrations – to make better informed decisions regarding when and where children should play for any given day, without the consequences of exposing them to high particulate concentrations.

With our website, users would be able to utilize a multitude of functions such as obtaining real-time weather data, viewing average particulate matter for their specific location, alternative transportation solutions, and various other components.  Through the variety of functions available, Winds for a Healthy Change focuses on the individual user, and hopes to cater to their specific need. For instance:

    • Parents can use the website in order to obtain information regarding weather and particulate matter for their specific area.
    • Educators can use the website to demonstrate environmental justice issues through the demographic layers and static average particulate matter data.
    • Students can learn be sustainable by viewing and taking local bus routes within their area, rather than driving cars.

B)  Functionalities of our Website

  • Accordion style menu to select/deselect layers and customize other features
  • Real time weather data – under the weather tab, the ability to turn on and off different variables such as temperature, humidity, precipitation, etc.
  • Static particulate matter data for LA County
  • Static demographic data (income, ethnicity, etc.) – ESRI
  • The ability for the user to see traffic data from Google in order to compare particulate matter in that area
  • Real-time LA Metro to provide alternative transportation options to reduce cars on the road

C)  Wire Frame

D) Sketches

Option 1:

Option 2:

E) Data Set List

  • EPA Data—mostly static sets exportable to Excel. We will either create a KML layer through Google Earth or create an ArcGIS layer.
  • Cal Atlas—may or may not include this because the geographic areas are limited to CARB districts.
  • AirNow.gov—largely static layer exportable for use as KML or ArcGIS.
  • L.A. County Schools—static dataset of schools.
  • Google Traffic—real time data to estimate impacts of air pollution in terms of concentration of cars.
  • Weather Data—World Weather Online API- Can access current and forecasted data for temperature, wind speed, wind direction, humidity, cloud cover, visibility, etc (key meteorological variables) [The alternate source would be Google Maps API’s built-in weather layer.  This layer would limit the website’s versatility.]

F) Milestones

Week 6 (Midterm)

  • 10-15 minute powerpoint presentation with screen shots of different aspects of our website.
  • Skeleton of our website with all functionalities working.
  • A few different clickable layers as well as two functioning API’s.
  • Have the frame of the layout in place, with minor details still to be worked out.
  • A description of our project and a beginning of a user friendly guide to our website

Week 10 (Final)

  • A thorough and easy to understand user guide for our website describing the different functions it will provide to the user and how to navigate it.
  • Features will all be functional with no bugs.
  • A final blog entry describing all the features of the site with flow charts, sketches, wire-frames, functional flow. It will also include our roles in the project
  • A project evaluation with the strengths and weaknesses of our website will also be included in the entry.
  • In addition, our website will have toggle functions, a few radio buttons, a sidebar with clickable checkboxes as well as a legend to any items placed in our map.

G) Concerns

  • Not enough real-time particulate matter data. Most data we have found is static
    • PM data is not current (from 2006-2008)
  • Struggled to get the actual API url, although we have lots of data, it’s not an API
  • Creating unique Arc GIS layers and overlaying them into Google Maps API
    • How the layers will look at various zoom layers and to what specificity/resolution they should be at
  • Layout design that is simplified/streamlined, but still presents all the material to various targeted users

Initial Work #1

Initial Work #2

Week 3: Web Assignment

As you can see from the below screenshot (or maybe you can’t), this week focused on incorporating existing Metro Lines into our proposed route. I would have liked to have only listed the applicable routes in my second heading, but I couldn’t figure it out. I had to list every line just like we had in the classes tutorial and then in the text tell the reader which routes are most applicable. Also, I don’t know why the screen shot is so small within this blog post. I still haven’t mastered the art of PC-based screen shots.

Link to site.

Introduction to Winds of Healthy Change

Group Name: “Winds of Healthy Change”

Background/Introduction:

Los Angeles is a car-centric city with an elaborate freeway system and many cars. Studies have shown that emissions from cars as well as from diesel trucks are highly correlated with high asthma rates and respiratory problems in children. Diesel particulates, carbon monoxide, ultrafine particles, and other particulate matter (PM) are detrimental to the upper and lower respiratory system, particularly in young children.

The movement and distribution of airborne particulates is highly dependent on particles size, wind direction and prevailing weather patterns.  If parents are able to determine when particulates are lowest, they could take their children to parks during those times to minimize exposure to PM.  School officials could shift recesses and lunches to avoid high PM exposure.  Studies have been done on PM exposure and schools, in combination with weather patterns, and data has been presented to school officials, but we know of no map that allows citizens to interactively look at parks and school playgrounds to make informed decisions.

Proposal:

Our group has decided to create an interactive map of parks and schools located in Los Angeles County that utilizes current wind and weather data to actively provide particulate concentrations for a particular location (by clicking, or rolling a mouse over it) at different times during the day.  This main purpose of our project is focused on empowering our target audience – parents/guardians, school board officials, principals and school administrations – to make better informed decisions regarding when and where children should play for any given day, without the consequences of exposing them to high particulate concentrations.

MURP CivE Staff  

Julia- Stress-free Computer Interaction Coordinator

Julia was born in Russia, but has been in Santa Monica the last 21 years.  She is in the dual degree program for MPH/MURP with an emphasis in Environmental health Sciences. She loves animals and hopes to continue on to veterinary school and incorporate her current degrees in the study of zoonotic diseases and the human-animal interface to prevent things like Contagion from occurring. :)

Steven- Coding Cat

Steven is a second year student in UCLA’s masters program for Urban and Regional Planning. After working four and a half years in the independent film industry, Steven returned to school in order to work in the realm of environmental advocacy and policy and specifically their intersection with urban issues. Originally from northern California, Steven earned his undergraduate degree in Film Studies and Spanish from UC Santa Barbara.

Sharon- Dynamic Data Director

Sharon was born in Albuquerque, New Mexico but grew up in southern California.  Sharon holds both a B.S. and M.S. in Civil and Environmental Engineering from UCLA. She is currently pursuing a PhD specializing in hydrology and water resources.  Her research focuses on the impact of development on the urban water balance.

Bryan – Wacky Web Designer

Hailing from Chicago, Illinois, Bryan is what you would consider a bicoastal-hopper.  As an undergraduate at UCLA, Bryan studied Environmental Science, with an emphasis in the Environmental Health Sciences.  Making his way over to the East Coast, he recently finished his MPH in Epidemiology, focusing on the intersection between the built environment and public health.  Returning back to the West Coast as a first year PhD student at UCLA’s Fielding School of Public Health, Bryan is definitely excited at applying his experiences together and tackling many of the challenges and opportunities that come his way.