Announcing the Official Launch of “Tu Tulum”

Tulum Raiders, Inc. proudly announces the launch of “Tu Tulum,” a community resource map and planning tool for everyone!

Follow this link for the full site:

         http://www.yohman.com/students/2012/lglancy/Tulum/TulumHome_0612.html

Project:

Tu Tulum is a neighborhood resource map for the citizens of the town of Tulum. It is a one-stop resource where community members can find out what public resources are available to them, and where. It is also a forum where the townspeople can express their opinion and make suggestions to their civic leaders about improvements that can be made, which assets they value and which deficits they would like improved in their community.

The website maps out a variety of parks, bike rack locations, civic offices, and other points of interest, and includes info windows and photos about the location. These community resources are toggled by category, so viewers can turn them on or off at their viewing convenience. Tulum is divided into “colonias” or neighborhoods. These colonias are also mapped in a toggled layer, allowing residents to see which colonia they belong to. In order to connect residents with happenings in the community, a Twitter widget streaming Tulum-related tweets is also featured on the site. This allows community organizers to reach a wider, but Tulum- centered audience when tweeting about events happening in the city.

Why does this matter?

Tulum is a rapidly emerging Caribbean coastal town in Quintana Roo, Mexico. The neighboring global tourism destinations of Cancun and Playa del Carmen are a threat to Tulum’s future, bringing upon it rapid and unmitigated growth. The 18,000 citizens of Tulum are a diverse group of Mayans, Mexicans from other states and international small business‬ owners. These citizens share a common goal: to preserve Tulum’s culture and ecosystems.

With unprecedented growth on the horizon, the Municipality of Tulum hired the Tulum Raiders, to create a civic engagement tool to help their citizens to shape the future of their communities. Tu Tulum means Your Tulum. The neighborhood portal we’ve created is a tool to give the people of Tulum a forum in which to share their visions.

Purpose of our website:

The Tulum Neighborhood Portal has two functions:

1) A one-stop neighborhood resource map for the citizens of the city of Tulum.

2) A tool for the citizens to participate in city planning by identifying places they like or that need improvement. Citizens can also suggests resources needed in the community.

Main functions:

1) Community resources: toggled by category, so viewers can turn them on or off at their viewing convenience.

2) Red/Green/Magic Wand: users can directly click the map to add three types of markers to “evaluate” their neighborhoods.

Red: Indicates an unsatisfactory area or asset that needs attention

Green: Indicates a positive asset in the community

Magic Wand: Indicates a non-existing, but desired asset

3) Twitter Widget: it does a live search and streams Tulum-related tweets. Citizens/public officials can advertise community events or announcements by including “Tulum” in their tweets to be listed in the widget. This allows them to reach Tulum- centered audience when tweeting about events happening in the city.

4) Picasa API: retrieve photos from Picasa album and show photos in slideshows. Pictures will be shown in the box below the title.

Wire Frames :

Wire Frame Home

 

Wire Frame Participate

Wire Frame Participate

The Team:

Lisa: The connection to the community and municipal staff of Tulum. Lisa collected local knowledge to create the first-ever documented boundaries of the communities of Tulum. She also collaborated with Tulum residents to test the site and receive feedback for continuous improvements. She worked on the Picasa API slideshow, authoring KMZ files in Google Earth and contributed general design and coding support.

Yumi: The Coder extraordinaire. Yumi was the main coder for Tu Tulum. She worked tirelessly through the coding details of the various redesign and functional changes the website underwent over time.

Paola: The official “traductora”(translator), she translated the web content for Tu Tulum. This includes the special HTML keys for accent marks, which were one of the earlier challenges. She also worked on photo editing for the Picasa slideshow, bringing in the Twitter feed, and styling of the website.

 Documentation:

User interaction using a Custom Functions

<Participate: red/green light + light bulb function>

We aim to make this website as an alternative tool to conventional community planning led by planners and professionals. Thus, user interaction is the key of our website. The function allows us to geographically map concerns and ideas the residents have on their own community.

The process of using this function is intuitive. Users click on the location they want to comment about, choose the type of the place (good, bad, idea), and make a comment. The “green light” and “red light” icons are also self-explanatory. It is easy for users to understand whether the place is seen positive or negative. The yellow light bulb icon symbolizes an idea that the user is interested in sharing with their community.

Considering the level of residents’ web familiarity, we tried to make this function’s user interface simple and easy to navigate. Input form is also kept simple (location, type, and comment) so that users would not be discouraged to give comments. Finally, the anonymity of the comments invites users to post any comments without the risk of repercussions that may be related to politics or other tensions in the community.

The photo slideshow streaming in photos from the Picasa API is an additional feature of Tu Tulum. Eventually, if users would like to contribute photos to the photo banner, they can directly be uploaded to a public Picasa album, which will automatically add them to the slideshow.

Custom Layers

The neighborhoods of Tulum were nothing more than unofficial borders known to some residents of Tulum by word of mouth. The Tulum Raiders employed AutoCad files provided by the municipality of Tulum to author KMZ files of the neighborhoods. This layer was then toggled by neighborhood, and one “all neighborhoods” toggle box to allow users to see what neighborhood they belong to, as well as the names and boundaries.

A Google places layer was also included in the website, highlighting the relevant community resources. These points include an info window containing a photo and description of the location.  The homepage also features a legend for the user to locate these points easily.

 Evaluation:

  • What worked: narrowing down the focus of the website, using sharp design, specifying the geography in twitter widget to eliminate Turkish bag pipe tweets.
  • What did not: Spanish accents (we did fixed the problem in the end).
  • What would you do if you had more time: upgrading the user interface (making side bars on the right and changing to a more minimalist design, easier single-access to the “participate” function…etc)
  • What is the future of the project: A testing phase of the website will be implemented with the support of the Tulum Municipality. If the website is successful, then the city may choose to buy server space to host the website in the long term. The website is also a model for the sister-city project of Little Tokyo. The Tulum Raiders are interested in benefitting additional communities with modified versions of this resource in the future.

 

 

Week 10: Launching GeoStories

It’s with great pleasure that we announce the quasi-official public launch of GeoStories!

GeoStories-Home Page

GeoStories is an easy-to-use and versatile story-mapping platform that enables users to create personal narratives around the places they’ve been and the experiences they’ve had there.

The site’s simple, streamlined interface allows users to pair their personal thoughts with meaningful images or videos pulled from the media site(s) of their preference (Picasa, Flickr, YouTube, Vimeo, etc.), almost instantly transforming the ubiquitous digital map into a personal memoir, descriptive genealogy, historical non-fiction, or lighthearted travel journal.

Audience
GeoStories can be used by a broad swath of the academic and civilian population–anyone looking to connect, contextualize, and share the many remarkable moments and memories of their lives. The GeoStories site represents a small but important step in making the educational mapping tools of academia available to a larger public, and yet, can still be used in developing the kind of rich historical narratives needed for research purposes.

Team
GeoStories is a start-up funded by E.Y. Ventures and founded by Uyen Ngo and Andrew Pogany. As Chief Experience Officer, Ngo has dedicated her considerable time and expertise to the design and programming of the entire GeoStories site. She also created two instructional videos. As Senior Story Teller, Pogany has contributed to the site’s concept and content. He also created a video, and led the integration of Google Places.

Design History
The GeoStories interface began as a slightly highfalutin concept, one that sought to use an ornamental frame as the border of our central map.

GeoStories-First Interface Concept

After recognizing the limits of our time, funding and technical know-how, we simplified the interface, stripping it of any excessive aesthetic concerns and focusing primarily on functionality.

GeoSories-- Beta Story Board Interface

Feeling as if this was a solid base to build upon, we did just that: focus on adding functionality and increasing usability until whipping the GeoStories site into its present form.

GeoStories--New Story Board Interface

How It Works
You begin creating your geostory from the GeoStories Story Board. Upon entering the Story Board page, the user is greeted by a pop-up window of useful instructions.

GeoStories-- Instructional Modal

The Story Board consists of three functional tabs: Story Board, Table of Contents, and Related Places.

Each geostory is built of chapters; each chapter represents a different location; and each location can be detailed with personal thoughts and narrative text, as well as imagery or video.

As each chapter is completed, you’ll see a numbered icon representing the chapter appear in the GeoStories map display. Clicking on the icon will reveal the full, multimedia description of your experience.

Additionally, as each chapter is completed, GeoStories creates a corresponding button underneath the Table of Contents tab.

Each chapter can then be enriched by clicking the Related Places tab, which will display those Google Place categories related to the chapter’s location. These can be toggled on and off.

Once all the desired number of chapters has been written, and the user hits the Publish button, the map display zooms out to reveal all chapter icons, numbered and linked—a narrative constellation that can be explored and shared.

Likewise, the Table of Contents tab will then contain buttons for all chapters, providing an additional way of manually navigating back and forth within the geostory.

And additional navigation is provided by “Next” and “Previous” buttons within the chapter info windows.

Key Functions and Technical Documentation

1. User-Generated Map: GeoStories is ultimately a tool by which users can quickly become authors of personalized, multimedia, map-based narratives. Fundamental to this function is the use of the Google Maps API, as well as the Google geocoder, which enables a non-specific location entered in the Address input to be almost instantly translated into latlong coordinates and mapped.

2. Media Upload: Popular online media management sites such as Flickr, YouTube, Picasa, and Vimeo provide image and video links for content owned by the user or deemed available for public use. Presently, GeoStories users must copy and paste the appropriate image or video link into the Pictures/Video input on the Story Board. They also have the option of including the embed codes of images and videos in the Description input.

3. Navigation: Users can navigate through the stories they’ve created using chapter buttons in the Table of Contents or “Next” and “Previous” buttons in the chapter’s info window. Table of Content buttons were coded with the help of Bootstrap; info window buttons uses the same Modal as the Instructions Pop-Up referenced below (#5). Both the Table of contents and InfoWindow buttons allow a user to move seemlessly (and non-linearly) through the story chapters.

4. Google Places: Along with Google Maps, GeoStories utilizes the Google Places API to populate the “Related Places” tab on the Story Board page.Users can search for different places of interest related to each individual chapter and its corresponding location, thereby enriching the narrative and providing GeoStories with additional functionality that widens its potential uses.

5. Useability: User experience is of utmost importance to GeoStories. That why created several instructional videos (using iMovie), a FAQ page, and an Instructional Pop-Up that appears each time the Story Board page accessed. The Instructional Pop-up was created using code for a standard modal, a “child window” that requires users to interact with it before they can return to operating the primary application.

6. Design: The GeoStories site was programmed using HTML, CSS, and Javascript. Our design code was aided considerably by BootStrap, as well as the friendly technicians at EY Ventures.

Challenges
It’s been a sharp learning curve for this 2-person team. A lot of the brainwork/coding was from Yoh. Because of the unique nature of our website, we weren’t able to always work off what we learned in class and had to rely on the genius of Yoh/Erin/Ryan. We’re very grateful for that, but wish we had more tools ourselves to do more of the foundational work.

Future Changes

1. Social Media Connection: The next iteration of the GeoStories site will necessitate a user to sign in with either their Google, Facebook, or Twitter accounts before being able to create or open stories. This will in essence set the user up with a GeoStories account. after acquiring an account, users will be able to enter the Story Board page and create, open, or share a geostories. T

2. Saving Stories: Once an account is established, users can also store their stories. Saved stories would appear in the Library page of the GeoStories site, from which the user can choose to share(via social network), delete, or edit their stories. Establishing such a library requires advanced server-side scripting.

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.

Bryan

  • 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

Sharon

  • 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

Steven

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

Julia

  • 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?”
    • Weather.com 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 weather.com’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.

Home.Land.Security Official Project Launch!!

Project:


In the wake of the murder of Trayvon Martin, there is heightened awareness of violent actions against and harassment of folks from marginalized communities by the police or otherwise. While there are existent sites that address traditional notions of safety, particularly in the form of mapping crimes, there are little or no resources available for people from these communities–people of color, queer folks, and undocumented people– to gauge how safe they are in their communities or in the communities that they are visiting. Our site is designed for vulnerable citizens and visitors of San Francisco, who wish to better identify safety risks from their viewpoint, including, but not limited to, officer involved shootings and targeted arrests for what we call “quality of life” crimes.

Home.Land.Security is an interactive learning and planning tool for the vulnerable citizens and tourists of San Francisco, who could potentially be the target of attacks similar to the killings of Oscar Grant and Trayvon Martin. We aim to show how neighborhoods and demographics are disproportionately targeted for intimidation, harassment, and excessive use of force by mapping officer involved shootings, quality of life crimes (which represent crimes in which vulnerable groups are typically targeted with excessive force), and user reported incidents that can expand past traditional notions of safety and crime.

This site highlights spatial patterns of excessive force and aid both citizens and policymakers in preventing future incidents. This site will also give people a forum to map their negative experiences with law enforcement officials or other citizens.

Check out Home.Land.Security.

Diagrams:

Team Metro:
Jordan “Google Earthling” Rosencranz
Jordan was the utility man. In addition to putting nearly 60 officer involved shootings on the map, he was instrumental in adding key functions such as activating the user reported crime form tool and switching toggle tools from checkboxes to radio buttons. He also added a search bar.
Ben “Likes Shiny Things” Palmquist
Ben made our site shine with CSS and bootstrap and took the lead on many of our debugging projects. He also handled the finicky crimespotting data, while taking the lead on coding our custom function, which ranks neighborhoods by non-traditional safety measures.
Pamela “Devil in the Details” Stephens
Pam took the reins on the GIS projects, publishing a myriad of demographic layers with clear/user friendly legends. She was the lead formatter of the initial accordion-style site design and paved the way for final design. Pam also helped format our charts.
Will “Wordsmith” Dominie
Will published all of our written content on the site, allowing the user to better understand the purpose layer and function. Will was also a GIS superstar and put in a great deal of work behind the scenes to ensure that the neighborhood ranking function worked properly. Extremely detail oriented, Will worked with divs and charts to create an intuitive user interface.

Evaluation:
Things that worked great!
o Our styling was super stylin.
o We presented our data really well. It looks good and is easy to read/understand.
• Things that worked less great!
o Forms?
o We have this strange bug in the site where our demographic layers don’t always align with the map itself. It only happens some of the time, usually after loading the map, clicking on a neighborhood to display graphs, and then changing the demographic layer. It is a disturbingly fickle bug, only occurring in some browsers and only at certain window sizes. Our only hypothesis is that it may be due to an overzealous div (a number are rigged to pop up on click ) that changes the window size. Since the map is set to 100%, perhaps the map resizes to meet the new size (we do observe a faint shift on click), but forgets to resize the map server layer? While we are usually very willing to take responsibility for our mistakes, we kinda suspect that their error might be more on google or ESRI’s end.
o It was difficult to connect the searchbar to our user reporting forms.
o Crimespotting was really annoying and difficult to work with. Sometimes they would turn their API off and then back on again randomly.

• The future of Home.Land.Security
Following our successful launch on Yohman, we will be shopping our site around to organizations that might be interested, such as copwatch.

Added functionalities:
a. Expand the project to outside of San Francisco, either by creating national website, or similar sites for other cities and counties.
b. Add a resources page for those reporting harassment that want to take action
c. Integrate more positive indicators of security for our targeted population such as availability of cultural resource centers
d. Add introductory window/awesome video to help capture the narrative of the site akin to Will’s framing in the presentation)

Documentation:
o User interaction: User interaction is a key feature of our site’s design. We attempted to create an interface that encourages exploration, allowing users to explore the data presented in a nonlinear manner. In particular, we wanted users to be able to make comparisons between different neighborhoods and datasets, exploring how race, immigration, location and other factors influence policing and safety. Toward this end, we included a variety of tools for people to interact with the site. These include:
• A search bar: This allows users to easily locate a place or address.
• Forms: We have included a form that allows users to report on incidents that threaten their safety, or the safety of others. These incidents are stored in a database, and can be shown on the map.
• Radio Buttons: We included a number of layers that users can toggle using checkboxes or radio buttons.
Custom function: We authored a function (metro.showRank) that displays the relative ranking of a neighborhood and color codes the display to reflect how a safe a neighborhood is. We think its pretty neat.

o Custom layers: We created oodles of custom layers, including some with some with some really slick legends that Pam created in illustrator. These layers include:
•An Officer Involved Shooting (OIS) KML, which we later converted to an ArcMap mapserver.
•A neighborhood master layer, in which we converted our data layers (census demographics, OIS and crime statistics) to SF neighborhood boundaries using dissolve and some spatial joins. This layer was the base for our demographic layer. It also defines neighborhoods that users can click on to get more data on the safety of a neighborhood, which is shown at the bottom of the map.
•A number of demographic and neighborhood layers to allow users to explore the characteristics of their neighborhoods.

oWe also include Purpose, About Us, and FAQ tabs.

Public Launch

Note: The data presented here represents preliminary findings and should not be used without written permission from UCLA. This is a student draft of the data and is not to be used.

 Overview

Reducing greenhouse gas emissions by reducing electricity consumption is a priority of the state of California. In 2009, California implemented SB 375, which requires Metropolitan Planning Organizations (MPOs) to create Sustainable Community Strategies to address these goals. Our team, Take Electricity Seriously, Los Angeles (T.E.S.L.A.) is proud to announce the official public launch of an electricity consumption map for the City of Los Angeles (City) to give a more complete overview of where and how electricity is used. Normally, only utilities know how much electricity is used and where it is used. Producing this map has the potential to greatly impact energy policy in the City and eventually throughout the State. This map has a detail of data that can assist policymakers in their understanding of implications of electricity sustainability requirements and goals. Once results have been approved, we plan on this map being utilized by Los Angeles residents to clarify and illuminate where the major power consumers are in the city.

Website Development

Our website went through many iterations. One of the biggest challenges was deciding on how to simply and clearly display a lot of information and interactive options. Another design development process was picking the color scheme. Below, you can see our wireframe ideas and some of the color options we tried when we deciding on our data presentation.

First Vision/Brainstorming:

Second Idea:

Midterm Project:

Re-envisioning:

 

Final Presentation:

 

Data representation:

Option1- Too green

Option 2- Too beige

Option 1 million- Juuuuust right!

Team Members

Jacki- Technical Genius and Principal Dreamer

Hailing from Kansas City, Jacki came to UCLA’s Urban and Regional Planning program and hit the ground running! She has worked for The Institute of the Environment for three quarters and was our liaison between our client (The Institute of the Environment) and our team. Jacki’s data analysis and ESRI GIS skills were a great addition when we were figuring out how to graphically display complex information.

Kristen- Energy Super Star and Data Cruncher

A local of Southern California, Kristen grew up with an interest in Los Angeles happenings. As an undergraduate, Kristen studied residential energy consumption and feedback technologies to increase conservation. Her knowledge of ESRI GIS and electricity measures were critical to the decision-making process regarding data analysis.

Kyle- Math Extraordinaire and Voice of Reason

Kyle is a coding wizard. Kyle hails from Anaheim, California but spent his undergraduate years in New York. As a civil engineer, Kyle was a great asset in validating our methodology and processing complex levels of data. His linear thought process helped us make our dreams and visions a reality.

Zhongbo- Creative Director and Voice of the People

Zhongbo makes the world a better looking place wherever she goes! Originally from Jilin, China, Zhongbo has a degree in civil engineering and is currently concentrating in Design and Development at UCLA’s Urban and Regional Planning program. Her ability to inspire created an engaging interface that is user-friendly. Chances are, if you saw a subtly cool design element, it was her inspiration!

Evaluation of Our Website

TESLA went through several revisions and experimented with various concepts and designs in order to make the user experience friendly, yet informative. We wanted to keep the basic user interface simple and easy to comprehend since the data being displayed is complex. In order to do this we have two separate tabs for user features, the basic option is a simple search bar where the user can search for various locations within the City. This keeps the map focus on its primary function, which is to display the EAZs and allow users to click over various sections of the map. The other options are in an advanced tab where the more nuanced and informative functions are kept such as the other years, percent change, land uses, and neighborhood energy uses and boundaries.  One function that we were not able to incorporate due to unforeseen errors and search limitations was the radius summary function. This was a complicated feature that would have allowed users to see the energy use within a certain distance of their selected EAZ. Due to time constraints we were also not able to tile all of the EAZ years down to the furthest zoom level. With more resources and time we hope to be able to expand upon this website and fill in some of these gaps.

Looking forward, we will add water data and natural gas data to the map. Through further cooperation with the utility companies in Los Angeles, we hope to obtain hourly data at the parcel level. This will add a whole new level of complexity to the website and allow policy makers and utility companies to pinpoint how seasonal and peak hour changes effect the City’s electricity consumption. Eventually the scope of our project will expand to Los Angeles County, providing a more holistic look into Southern California’s energy use.

 

Our Website- Technical Requirements

The main goal of our website was to creatively and simply display a large amount of electricity data. There were over 150,000 Energy Analysis Zones (EAZs), each with numerous pieces of data attached. Our website features several interactive features. When the website loads, the user sees a map with colorful polygons throughout the City of Los Angeles. Each polygon represents and Energy Analysis Zone, which is at the Zip+4 unit of analysis. When the user clicks on a polygon, he or she opens up an infowindow that shows electricity usage over time (in kWh/year), the dominant land use of the EAZ, and the EAZ identification number. If a user clicks on a part of the map that does not have electricity data attached to it (ie- the user does not click on an EAZ), a warning infowindow notifies the user that the website does not have data collected for that region.

Showing electricity consumption throughout the City is important, but it is also valuable for users to be able to evaluate how electricity use has changed over time. Users are able to view electricity data for the years 2005-2010. Also, there is an additional feature of being able to view the average annual change in electricity consumption. When the user clicks on the “Yearly Change” radio button, the EAZs on the map change colors to reflect an increase or decrease in consumption. Also, the scale at the bottom of the page changes to reflect the new color scheme.

We included the following…

Interactive features:

  • Geocoder- Enables users to search for a specific address or place and find out several pieces of information, including what EAZ it is located in and what the EAZ’s electricity consumption is.
  • Land Use dropdown- This feature enables users to view EAZs with a specific dominant land use. These Land Use types included Commercial, Industrial, Single Family Residential, Multi-family Residential, Mixed Residential, Other, and Not Available.

Custom Functions:

  • Google Charts API- using Google Charts API, we created customized column charts to show electricity consumption over time. We displayed the data in an infowindow so that it is visible when a user clicks on an EAZ.

Layers:

  • EAZ electricity consumption by year- This is the bread and butter of our project. The electricity use by year is the default setting that loads when our website loads.
  • Average annual change- This layer shows the average annual change (%) in electricity over time. This was calculated by finding the slope of the data from 2005-2010. As more data is added, this section will be revised and updated to show a more accurate picture.
  •  Neighborhood council totals-The electricity use of each neighborhood was totaled to show users a more aggregated picture of electricity consumption in LA
  • Show Neighborhoods- For reference, users can toggle the Neighborhood Councils layer on/off to display the boundaries for neighborhoods in Los Angeles.

Week 9: GeoStories — Final Update

We are pleased to announce that GeoStories is proceeding according to (most of) our plans.


GeoStories is still all about connecting—and contextualizing—our many remarkable moments and memories. The site’s simple, streamlined interface allows users to pair their personal thoughts with meaningful images or videos pulled from the media site(s) of their preference (Picasa, Flickr, YouTube, Vimeo, etc.), almost instantly transforming the ubiquitous digital map into a personal memoir, descriptive genealogy, historical non-fiction, or lighthearted travel journal.

    How It Works

GeoStories still works the same way, except we’ve added several functions that improve navigation and user experience.

As before, you begin creating your story chapters from the GeoStories Story Board. However, you’ll notice that the Story Board is now one of three functional tabs.

Each geostory is built of chapters; each chapter represents a different location; and each location can be detailed with personal thoughts and narrative text, as well as imagery or video.

As each chapter is completed, you’ll see a numbered icon representing the chapter appear in the GeoStories map display. Clicking on the icon will reveal the full, multimedia description of your experience.

Additionally, as each chapter is completed, GeoStories creates a corresponding button underneath the Table of Contents tab.

Each chapter can then be enriched by clicking the Related Places tab, which will display those Google Place categories related to the chapter’s location. These can be toggled on and off.

Once all the desired number of chapters has been written, and the user hits the Publish button, the map display zooms out to reveal all chapter icons, numbered and linked—a narrative constellation that can be explored and shared.

Likewise, the Table of Contents tab will then contain buttons for all chapters, providing an additional way of manually navigating back and forth within the geostory.

    Key Functions

1. User-Generated Map: GeoStories is ultimately a tool by which users can quickly become authors of personalized, multimedia, map-based narratives. Fundamental to this function is the use of the Google Maps API, as well as the Google geocoder, which enables a non-specific location entered in the Address input to be almost instantly translated into latlong coordinates and mapped.

2. Media Upload: Popular online media management sites such as Flickr, YouTube, Picasa, and Vimeo provide image and video links for content owned by the user or deemed available for public use. Presently, GeoStories users must copy and paste the appropriate image or video link into the Pictures/Video input on the Story Board. They also have the option of including the embed codes of images and videos in the Description input.

3. Connecting The Dots: GeoStories does not present individual locations as separate entities of no (explicit) relation. Its Story Board interface allows for users to attach text and media to specific locations, and then connects those locations using numbered icons and lines, thereby guiding the reader to consider each location, or chapter, as part of a larger sustained narrative. Each chapter is also now represented as a button within the Table of Contents tab, allowing for additional navigation controls.

4. Google Places: Users can now search for different places of interest related to each individual chapter and its corresponding location, thereby enriching the narrative and providing GeoStories with additional functionality that widens its potential uses.

    Notable Challenges

1. Table of Contents Design: The coding necessary to automatically create buttons within the Table Of Contents tab each time a chapter is created was complex.

2. Google Places: Making the Google Places checkboxes and markers appear took much massaging; making them clear and reload each time a chapter changed was even more difficult. Learned a lot in the process…

3. Saving Stories: It seems we may not be able to implement this prior to final presentation…

    Future Improvements

1. Navigation Buttons Within InfoWindows.
2. Transition from Story Board to Table of Contents upon hitting the “Publish” button.
3. Additional introductory instructional videos.

Home.Land.Security one week from public launch!

With just one week to go before our site’s public launch (seven weeks in dog time), Home.Land.Security both huskier and better groomed. Our team has been working behind the scenes in ArcMap to build a more robust demographics layer for our map, created a way to collect user-inputted using Google Forms, and added two spiffy gauge charts to our map. We’ve also improved the site’s aesthetic and interface, shifting to midnight-themed map colors and introducing radio buttons instead of check boxes to prevent too many layers from overlaying one another on the map:

As the days count down, the programming team is working on uploading the new demographic layers to the map server, adding more charts, and adding a layer displaying user-submitted data. Our team is also creating a custom Javascript function that will kick in each time a user reports a case of police harassment to determine which neighborhood that incident took place in. Finally, we will also continue to improve upon the site’s design and user interface. This week’s live version of our site-in-progress can be viewed here or here:

Tulum Raiders: Almost Live

Current Development Status: The Tulum Raiders are plugging away. We’ve revamped the look and feel of the cozy neighborhood portal to a sleeker minimalist design that demands respect. We’ve also added interactive features that allow users to map their own points in order to share their neighborhood knowledge with the entire community. When users select a point on the map, a window appears asking them if the point should appear green or red for assets and deficits, or as a magic wand, for community needs they would propose on a wish list. The Tulum Raiders store this data so that the community can access it anytime they visit the site. We hope this will inspire community members to think beyond the current status of their environment to what their neighborhoods could become. A quick pull down of the ‘orange guy’ icon to street view let’s viewers experience Tulum on the ground, while viewing the points they’ve listed. On the home page, users can now select different neighborhoods to see which their residence belongs to. This may come in handy for future civic engagement projects. We’ve also added a rotating photos slideshow to beautify and activate the site for viewer inspiration. In simplifying the site, we have also eliminated certain map viewing options so that viewers either see the “home” page with existing resources or the interactive “participate” page.

To Do’s: We are working on translating the entire site to Spanish in time for our focus group testing of the product. After our testing period, we’ll make any user interface modifications necessary to make this site run as smoothly as chocolate ice cream on a Tulum summer day. The photo slideshow is in an adjustment period, so that it can fit into a banner container along the top of the page, as displayed in the wire frames below. The weather function has been updated to a new, more reliable and expert looking source, however we are working on changing this tool to degrees Celsius. We are also working on the organization of the tabs so that the Data Source and About tabs are combined. Finally, an expert consultant is developing a table on a PHP server where user created data will be stored, enabling the sharing of information throughout the community.

Check out our final project proposal and wire frames below, and stay tuned for the live and tested site coming next week!

Final Project Proposal

Purpose of our website:

The Tulum Neighborhood Portal has two functions:

1) A one-stop neighborhood resource map for the citizens of the city of Tulum.

2) A tool for the citizens to participate in city planning by identifying places they like or that need improvement. Citizens can also suggests resources needed in the community.

Main functions:

1) Community resources: toggled by category, so viewers can turn them on or off at their viewing convenience.

2) Red/Green/Magic Wand: users can directly click the map to add three types of markers to “evaluate” their neighborhoods.

Red: Indicates an unsatisfactory area or asset that needs attention

Green: Indicates a positive asset in the community

Magic Wand: Indicates a non-existing, but desired asset

3) Twitter Widget: it does a live search and streams Tulum-related tweets. Citizens/public officials can advertise community events or announcements by including “Tulum” in their tweets to be listed in the widget. This allows them to reach Tulum- centered audience when tweeting about events happening in the city.

4) Picasa API: retrieve photos from Picasa album and show photos in slideshows. Pictures will be shown in the box below the title.

Updated Wireframes

*Note: Only 2 maps will be created: 1) Neighborhood Resources, 2) Maps to include red/green lights, and magic wand.

 

TESLA Update- Week 9

Progress is slow and steady right now. We have finalized almost all of our GIS layers and they are ready to be tiled! The ones that we have completed include: energy use for the years 2005-2010 and energy use by land use. The one layer that we are having difficulty with is the “percent change.” We used an excel document to calculate the average annual percent change in energy use for each EAZ, but when we try to join this data with the EAZs in ArcGIS the program shuts down. We think that the problem lies in the titles of our folders, which include spaces! Such a rookie move, but easily done!

 

Here are the other features we have been working on:

  1. Adding a neighborhood council boundary layer that can be toggled on/off
  2. Radius Summary –> on click or search. Features might include: 1. a pie chart showing the dominant land use of EAZs within a certain radius and/or 2.  the sum of energy use within a radius
  3. Google charts as info-windows that include a barchart for energy use over time when  the user clicks on an EAZ
  4. Simple Layout- we are still deciding the final layout. Right now, the basic electricity map will have the EAZs with 2010 electricity data. Users can click on the map and access the google charts infowindows that have electricity usage for the EAZ, electricity usage over time, and the dominant land use. This layer will have a geocoder search bar for a user to input his/her point of interest. Also, they can toggle on/off the neighborhood councils outline.
  5. Advance features- This layer will include the electricity use as toggable layers for 2005-2010. It will also allow you to filter electricity use by the dominant land use so that the user can only see the electricity use for Single-family residences or Manufacturing. Another feature will be the radius summary.

As of right now, we have not made any changes to our wireframe.

Week 8: GeoStories Home Stretch!

Back from Israel and ready to finish our GeoStories website for the final.

As a reminder, GeoStories is a social story-mapping platform that enables users to create personal narratives around the places they’ve been and the experiences they’ve had there. The site’s simple, streamlined interface allows users to pair their personal thoughts with meaningful images or videos pulled from the media site(s) of their preference (Picasa, Flickr, YouTube, Vimeo, etc.), almost instantly transforming the ubiquitous digital map into a personal memoir, descriptive genealogy, historical non-fiction, or lighthearted travel journal.

Final Project goals/Wireframes:

After consultation with EY Ventures, the final product of GeoStories is looking to be more a prototype/envisioning tool of the different types (historical, adventurous, public health/urban planning tool, etc.) and capacities of stories users can create instead of previous visions of saving/editing/sharing stories on the GeoStories website. This is because finding a way around hosting a server/storage space for story content has not come to fruition. Final goals for the website Andrew stated in the last post are: 

1. Creating a “Table of Contents”: A second tab on the Story Board page, a form that consists of buttons that represent the chapters a user has created in the “Story Board” section of the site. Yoh has courteously set us on the path towards creating the necessary function. The first tab will be where the user inputs content, then after they hit ‘Publish’, it will shift to the second tab, “Table of Contents” of the newly generated story. This story can be viewed as many times before the page is refreshed, as GeoStories has no current way to save stories. 

2. Navigation Buttons Within InfoWindows: Advancement in this area requires that Issue 1 first be resolved. We hope to emulate what is seen in Penguin Books, with navigation embedded within the info windows themselves which can move from chapter to chapter. http://wetellstories.co.uk/stories/week1/. An added bonus would be to figure out how to draw the red line between chapters really slowly.

3. Saving the Story: The way to save individual stories so that they can be accessed, edited, and shared later apparently requires the use of Server-Side Scripting, which, we have been advised, is presently beyond our pay-grade. And so we search for a way to capture a story via its URL. It seems this option may not be feasible. This will be a bonus feature if we can figure it out.

4. How-To: We want to create instructions on how to use the site. Once we have our main StoryBoard page/function figured out, we’ll incorporate class suggestions in creating a tutorial for the user. A step-by-step guide to flesh out the introductory video.

5. Angling the Brand: Is their a unique way to position GeoStories so that it stands apart from its most obvious competitors (HistoryPin, TripLine); is it necessary to do so, or is the generic, stripped down nature of GeoStories an advantage? I think GeoStories simplicity can stand on its own. 

6. Library: Instead of its initial intention in being a reservoir for user stories, I hope to make quick video demonstrations similar to the intro video on different types of stories users have the potential to create (old stories of their grandparents, present day vacations/trips, public health/urban planning teaching tools, etc.). I think if we do this, it will give GeoStories a uniqueness from similar engines such as TripLine and HyperCities.

Current Status: I was away last week and Andrew was in charge of moving forward. He has been working with EY Ventures on the programming and coding. We will regroup in class Wednesday and form a game plan of individual responsibilities to make sure we reach our final goals.

Challenges/Issues: It’s been a sharp learning curve for this 2-person team. A lot of the brainwork/coding was from Yoh. Because of the unique nature of our website, we weren’t able to always work off what we learned in class and had to rely on the genius of Yoh/Erin/Ryan. We’re very grateful for that, but wish we had more tools ourselves to do more of the foundational work.