Posts Tagged ‘javascript’

nwb-map-redesign

The Northwest Bushwick Community Map is meant to be a resource for local community organizations and tenants rights groups to easily access disparate information around land use, housing and urban development for the neighborhood of Bushwick in Brooklyn, NY. It is also intended to be a tool to inform NYC residents about what kinds of indicators may be used to predict new urban development and help prevent displacement of residents in their own neighborhoods. Recently I had the opportunity to work with the original author of the map and some fellow designers in the MFA DT program at Parsons to improve the map’s design and functionality.

Background

In the fall of 2014 two members of the Northwest Bushwick Community Group (NWB), Michael ‘Ziggy’ Mintz and Brigette Blood, met with several graduate students from MFA DT to discuss improvements to the beta-version of the map. Previously, the map used vanilla Leaflet.js with GeoJSON data created from NYC’s MapPLUTO and Department of Buildings permits open data. However the original map lacked a cohesive design and was slow in regards to loading of the data due to technical issues.

Map Improvements

To improve the interactivity of the map I chose to host the data on CartoDB and use the CartoDB.js library to handle loading, styling and toggling of the map’s data layers. When the user selects layers, CartoCSS and SQL code is passed to CartoDB to retrieve and style the data being rendered on the map. Hosting the data on CartoDB also allows for processing of the data in the CartoDB dashboard using PostgreSQL and PostGIS. This is beneficial as SQL scripts can be run to automate the processing of new data when the map needs to be updated.

To improve the context of the map (the Who, What, Where, When, Why and How) the MFA DT team asked Ziggy and Brigette to provide us with some real world stories that show how the data relates to the dwindling affordable housing stock and displacement of longtime residents in Bushwick. To accomplish this we used the Odyssey.js Javascript API to create an interactive slide show with the map which transitions between three of NWB’s stories. With a bit of hacking we were was able to use the changing of the slides as a jQuery event trigger to toggle the map’s data layers. This allows for the slide show to give background and context about the project while also relating seemingly abstract data in a visceral way.

Besides Cartodb.js and Odyssey.js we added some other features to the map to make it more useful for the Bushwick community. As there is a large Latino presence in Bushwick it was imperative to have the text of the map’s UI and the overall website toggle between English and Spanish. Additionally the non-map parts of the site were redesigned responsively using CSS Media Queries so that the other content such as “Get Help” can be easily viewed on a mobile device.

Future Plans

In the future NWB plans on adding participatory map data they’ve collected on housing vacancy and new development as well as stories of people who have experienced being displaced or harassed by their landlords. These features may be integrated with the current map or developed separately, but either way CartoDB and Odyssey will allow for the further creation of customized interactive map content to be readily achievable.

Links:

cccc-screen-shot

A project I worked on for a digital zine Elia Vargas is putting together. I also submitted this to a call for entries for the Istanbul Biennial, which was announced by Stamen Design. You may view the live / interactive version here.

Culture Code Cities Cells

In the last several decades cultural production has shifted from being shaped primarily by geographically separate places to a world that has become continually influenced by interconnected networks. The pivotal factor being that mobile devices and the web now mediate how many people experience their lives. In response, the data generated from these devices and shared across the web are informing how users of the technology view the world from their constant connectivity to email, social media and instant messaging. Thus we may choose to work from about any location at any time. We learn about events as they are unfolding. Time is now experienced in milliseconds rather than large hourly blocks (what’s on my Twitter feed vs. how has the news progressed since last evening?)

In this map the shape of the continents has been created from geotagged photos on Flickr. Nations and states / provinces are shown as Voronoi cells, also generated from Flickr user data (in a given place do Flickr users think it’s administrative area A or B?) Ten minutes of geotagged tweets collected on September 4th are shown in their temporal sequence that contrast with standard time zones which highlight on a mouseover. This map is an attempt to ask if we should rethink how we define time and place. Just as time was standardized following the advent of telecommunications and the rail roads, our computerized networks suggest the future of time is not what it used to be.

Guess That NYC ‘Hood from Chris Henrick on Vimeo.

An in progress NYC neighborhood guessing game for the web that runs on Node JS via the Express framework and MongoDB with Leaflet JS, GeoJSON and Underscore JS. This was my final for Web 3: Javascript last semester, taught by Mani Nilchiani. The user navigates a map of New York City and selects neighborhoods that come from a dataset by PediaCities. Their guesses are checked against the neighborhood boundary data and then stored in a NoSQL database (MongoDB). If the guess is correct then the polygon for that neighborhood disappears from the map and they are color coded blue in the left part of the interface.

I’d like to make the game two player using web sockets so players could compete against one another, as well as add a timer to give a sense of urgency. There is also the possibility of making this game more in depth conceptually such as providing historical information about the neighborhood being guessed as commentary on gentrification in NYC.

Code for the project is available on GitHub.

 

So after a lot of work I’ve arrived at the second major update for my Major Studio Two project which tells the story of my brother Mike’s thru-hike on the Pacific Crest National Scenic Trail through an interactive web media experience.

Major milestones include:

1. Debugging a Leaflet map interaction where the animated marker (representing my brother’s position) triggers popups to open on the stationary markers.

2. Improving the interaction between scrolling and the animated marker start and stop using the JQuery Waypoint library. Now when the user scrolls, then animated marker will only start and stop when the user passes the correct chapter chronologically. I found that users tend to scroll up and down through the site fairly quickly to get an idea of long it is. Previously this would have caused the animated marker interaction to be buggy.

3. I’ve also managed to do some user testing for the site today which has proven to be super helpful. I will admit that all the folks that have helped me out have been DT students so I will also test the site with some people outside of my program for a different perspective. Here’s some feedback I’ve received so far:

1. The title bar doesn’t stand out enough and blends in with the rest of the site too much. The url of the site would also help with the title (no url as of yet…)

2. The Alan Watts quote on the opening slide is hard to read; try masking the area behind it with a transparent fill. (fixed)

3. Initially the user has no idea who the main character is. It would be helpful to add some background about Mike and the PCT in general prior to the start of his story.

4. The map transition from overview to the start of the trail should be slightly smoother and more seamless.

5. It’s somewhat confusing where the marker is going in relation to the content. Some suggestions to improve this are to break up each chapter’s path so that the marker will travel shorter distances. Then have photos or other text blocks trigger the marker to move. This would also help connect the particulars of the content with the map. Text blocks could even be highlighted so that when the user hovers or clicks on them their location is displayed in the map. Another suggestion was to repeat each chapter title over the top of the map so that the user is aware of the connection between the area being traveled and the map chapter.

6. When the marker is moving the map tends to shake. I’m not sure if this is something I have a lot of control over but will definitely think about.

7. Add a locator map to show the regional overview (ie: the current state or entire trail) so that the user has an idea of where on the whole trail Mike is.

8. Use Lazy Loading JQuery library to load the images as the user scrolls. This will help cut down on overall loading time and improve performance of the site.

9. Possibly consider adding menu options to the title bar so that the user can jump to certain chapters. This will be somewhat tricky to implement but may be necessary. Also adding forwards and backwards arrows could be helpful with navigating chapters. Worth testing though.

Positive feedback I recieved was that the site is very readable and would make a good narrative template overall. The first image is liked by everyone I’ve tested and serves as a good introductory slide.

Lastly, some updates from a house keeping perspective are to make the site cross-browser compatible (right now I’ve only been developing it using Google’s Chrome browser) and organizing the javascript code into separate modules / files.

Looks like some more updates and then another round of user testing will be needed. Looking forward to completing this project and submitting it to the student mapping competition for NACIS this year in Pittsburg, PA.

 

Triggering PopUps with an AnimatedMarker in Leaflet JS from Chris Henrick on Vimeo.

With the help of my web-developer guru friend Eric Brelsford, I’ve managed to figure out one of the last pieces of my Map Story project which was having the animated marker on the map open popups on stationary markers that represent points of interests, natural features, towns, etc. I’ve documented the code in a GitHub Gist which can be viewed live on this block. Excited to be wrapping this project up soon (hopefully!).

Weather Underground API improvement

Posted: October 16, 2013 in CC Lab
Tags: , ,

Screen Shot 2013-10-16 at 5.23.32 PM

I managed to write a javascript function that creates html elements for the API calls from Weather Underground. This way I don’t have to hard code an API call for each city. The function is passed an object that contains {“key” :  “value”} pairs of states (or countries) and cities,as well as parameters such as the API key, specific data to grab, and the html list element to append new list item elements to. A satellite image and various other weather data  are pulled for each location and then written to the DOM. I also got this script running locally using Node.js and Python’s SimpleHTTPServer module.  

Live example here

madlib generator

Posted: October 16, 2013 in CC Lab, Uncategorized
Tags:

Screen Shot 2013-12-16 at 12.30.28 PM

Older assignment from CC Lab that creates a mad lib by selecting words stored in an array at random.

link to assignment here

every-shooting

This past weekend I had the opportunity to participate in the Re3 Story Hack sponsored by The New School, Hyperakt, Vizzuality, Canada Engineers Without Borders, and Blue Ridge Foundation NY. The hackathon’s goal was to address social issues such as homelessness, poverty, immigration detention, solitary confinement, and gun violence through creating narratives and tools that challenge the main stream media’s representation of these issues. My team was to tackle the issue of gun violence; specifically addressing the lack of mental health resources for inner city communities that deal with gun violence as well as the normalization of violence, specifically with young adults. The first part of our day on saturday was spent doing research that took the form of interviewing two violence interrupters working in Brooklyn.  Both were men that had done jail time and chose to return to their communities with the goal of doing work to end violence taking place within them. Hearing these men’s stories, work, and perspectives was an invaluable experience and in itself alone worth attending the hackathon.

From these interviews we brainstormed ideas and reflected them back to one of the interrupters who spent the day at the hackathon with us and another team working on the issue of gun violence.  Our team who was composed of a documentary film maker, a professional graphic designer, a person working in media and a couple other MFA students from SVA and Pratt came up with the idea to create a series of posters and a website that centers around 4 central ideas we gained from our interviews; 1. Every Shooting is a Mass Shooting, 2. What goes up comes down, 3. Hurt People Hurt People. and 4. Check your status.

“Every Shooting” became the title of our project. It metaphorically refers to the act of a single shooting causing a ripple effect in a community. Not only are the perpetrator and victim affected but also are their friends, significant others, family, teachers, place of worship, and other community members. These ripple effects lead to unaddressed trauma in communities, a point which is expanded in #3.

“What goes up comes down” was inspired by one of the interrupters stories of firing gun shots into the air off a fire escape. At the time he had no thought that the bullets would land some where, potentially endangering someone’s life. This symbolizes that actions have consequences and asks youth to consider the consequences of their actions before acting.

“Hurt People Hurt People” draws from the fact that those who have been traumatized and abused are likely to inflict abuse on others. This was the case with one of the interrupters we spoke with, growing up he experienced both domestic violence and sexual abuse.  Not having anyone to talk to about these experiences he internalized them and as a result inflicted violence on others.  It wasn’t until he did jail time and reflected on his situation did he start to consider why he had performed violent acts.

The last point asks the viewer to “Check their status” or to reflect on their mental and emotional state. It asks a series of questions and then presents links to resources where the individuals can seek help.

Another web developer, Paul Schreiber, and I coded the website portion of the project while Stuart Rogers created the poster designs. Other members of our team worked on the copy and theme. The website can be viewed temporarily here: bit.ly/every_shooting

Our goal is for this project to become integrated with a Instagram campaign (proposed by the other group that was also tackling gun violence) that targets youth and tries to create a point of entry for them to access resources that will help them achieve positive goals in life and stray away from violence. We are now looking into meeting andworking with the Fortune Society to see how the project can move forward.  The hackathon was very intense and a ton of work but it was a very rewarding experience, I’m glad I chose to dedicate a weekend to it.

hurricane-evac

link to interactive map here

Following the Cartography and GIS Dorkshop I gave last weekend I was invited to give a 3 hour open-source Geo demonstration with QGIS, Tile Mill, and MapBox at a Trans-Disciplinary Design class taught by Mathan Rathinam, here at Parsons.  The class is dealing with issues relating to environmental hazards and disaster resilience in NYC, so to make the connection between the class and the Geo tools we used some spatial data from NYC Open Data. We pulled in two datasets; one for hurricane evacuation zones and another for evacuation centers. The zones have a classification from 1 – 6, with 1 being the highest at risk areas prone to flooding and 6 being the least. In the class I demonstrated how to load and style this data in TileMill using a sequential color scheme as demonstrated on Cynthia Brewer’s Color Brewer Cartography guideIn the map above I’ve refined the design a little further, using some advanced labeling with SVG icons from TileMill’s open-source Maki icon repository. I also used the MapBox API to add a “Find My Location” button that will drop an icon based on the user’s IP address.  Additionally, clicking on an icon will reveal it’s full address in the upper right hand corner.  I enjoyed teaching the material to the class and look forward to giving more workshops and demos, hopefully bringing in some guest speakers as well. Thanks again to Mathan and his class for having me, it was a pleasure.

Fun with the Weather Underground API

Posted: September 27, 2013 in CC Lab
Tags: , ,

wunderground_api_fun

link to live example here

code on github here

For this assignment I used the Weather Underground’s API to create weather identifiers for some of my favorite cities. The API call grabs data for satellite imagery, current weather, wind, high, and low temperatures for the day. In my next iteration (unfinished) I’m looking to write the javascript code so that an object of areas and cities can be given rather than rewriting the $.ajax script 4 times.  For example an object called `geo` would have the following:

{
‘NY’ : ‘New_York’,
‘CA’ : ‘San_Francisco’,
‘MI’ : ‘Detroit’,
‘Germany’ : ‘Berlin’
}

and could be passed to a function that then generates data for all four locations, rather than hard-coding them. A further option could ask for a list of cities as user input and then generate the data.