The Northwest Bushwick Community 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:

• A preview of the map redesign
• Code for the map’s redesign
• The Northwest Bushwick Community Group’s home page

Advertisement

NYC Property Data Extractor web app prototype

I refined the prototype for the NYC Property Extractor web app a bit more with some minor UI / UX changes. The app now only lets the user select an area when they are zoomed into the neighborhood scale (greater than or equal to zoom 16). This limits the amount of data a user may select so that they won’t say be able to select all of Brooklyn and bog down the server or database. Other changes include panning and zooming the map to the area the user selects when they draw a shape or click on a tax lot.

Also see this post and this post for feedback and development of the web app.

Culture Code Cities Cells

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 4^th 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.

Game Design: Squares

For our first group assignment in Intro to Game Design with Nick Fortugno, my group was given the task of creating a game that used poker chips and any other element from another game. The only rule was that we were not allowed to modify or make anything to add to the game. What we came up with ended up being an interactive experience I would not have thought of in any other way. This was a collaboration between myself, Joo-Hee Yun, Dylan Shad and Pierce Wolcott.

We started off by designing the game so that players would place the chips on a grid with the goal of placing four chips in a row.  The grid we used was from Dylan’s kit of gaming pieces and consisted of half inch squares. A chip takes up four squares and may be aligned horizontally, vertically or diagonally. We limited the number of chips for each player to 8 so that when all of a player’s chips were placed they would then have to move existing chips on the board.

Two initial problems we faced with the game were that 1. the board size was too big and 2. the play was lacking something to make moving the chips more meaningful. We resolved this by constricting the board to 20 x 20 half inch squares and changing the goal from connecting four chips in a row to placing the chips so that they align in the corners of a square shape of any size that would fit on the board.

Here is the game description:

SQUARES

GAME DESCRIPTION

• Game is 2 – 4 players.

• Each player has a total of 8 pieces (which are different colored poker chips)

• Pieces are placed on grid consisting of half-inch squares that is 20 squares x 20 squares

• The grid is sized (1inch x 1inch) so that one poker chip takes up 4 grid squares.

• Players take turns placing poker chips on the grid one at a time.

» The Goal: Players score points by placing their poker chips so that they are in relationship to the corners of a square. The square can be as large or small as will fit on the board, but each poker chip must be an equidistant number of grid squares to its adjacent poker chip (top, left, bottom, right). The shape of a square may overlap with other players’ squares and chips, but only chip may be placed in 4 grid squares. (in other words players cannot place their chips on top of other player’s chips).

» When a player creates a square they score a point and remove the four chips belonging to that square from the board. On their following turns they then place the chips removed from the board rather than moving their chips that are on the board.

» The first player to score 3 points wins.

» Other players may strategically place their own pieces in order to block their opponents’ attempts to form squares.

» Once each player has placed all their poker chips they then must move an already placed chip.

Thesis Blog

I’m documenting my thesis progress on a separate blog. You may find it  here.

Odyssey from CartoDB

Recently at my internship with CartoDB I’ve been helping test and document a new open-source tool called Odyssey which makes it easy for anyone to tell stories with maps. For part of the testing process I created an example story based on Darwin’s Voyage. The content comes from this Wikipedia article and the latitude & longitude coordinates for each location are from GeoHack. Odyssey makes it super easy to publish your work either through a link to a full page view, an iframe embed or by downloading the html, css, and js files to publish on your own server. I’m really looking forward to seeing what kinds of stories people will tell using this tool! Here is a link to the full story I created.

Web3 JS final: Guess that NYC ‘Hood

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.

Redesigning the UI for Humanitarian OpenStreetMap Team’s data export tool

new UI design for the OSM data export tool from HOT.

new UI design for viewing an existing OSM export from HOT.

This past weekend I attended State of the Map U.S. (SOTM) in Washington D.C., the annual conference for OpenStreetMap (OSM) users in the United States. Following the conference a sprint day was held at the American Red Cross where conference participants volunteered their time and skills to improve various projects relating to OSM and well as contributing to OSM itself. The project I ended up working on was for the Humanitarian OpenStreetMap Team (HOT), a non-profit organization that assists NGO’s and other groups doing disaster relief, vulnerability analysis and other related humanitarian aid work in developing countries. HOT will typically either have OSM users add data to an un-mapped area in OSM or have locals map the area themselves using GPS and Field Papers.

A recent example of a HOT task was mapping the town of Macenta in Guinea to help doctors and aid workers there stop an outbreak of Ebola. I’ve captured some screen shots of Macenta on both Google Maps and OSM to demonstrate the amount of data contributed by OSM users, Google Maps is on the left and OSM is on the right.

It’s a bit hard to tell from the zoom level but if you look carefully you’ll see hundreds of buildings, minor roads and some land use areas that have been mapped on OSM which are missing from Google Maps. This was accomplished in a vary short amount of time after HOT made an announcement to the OSM community. Additionally MapBox helped spread the word and has made this process easier with their recently designed user-friendly OSM editor, iD. This data is very important for the doctors and aid workers on the ground to find out where dense population centers are located and to determine how the outbreak is spreading. Nice work OSM contributors and HOT!

One crucial aspect about OSM is that all of it’s data (for the entire world) is available for download for free. The problem is that most services that offer “extracts” of the OSM Planet file (about 400 GB in size so you don’t want to download it all at once!) filter out custom tags that HOT organizations use which are crucial to their work. HOT therefore offers it’s own OSM data extract tool, but the problem with it is that it was sort of thrown together by a developer without much thought to usability. So during the sprint day at SOTM I partnered up with Jue Yang, a talented front-end designer at Development Seed, to redesign the export tool’s interface. The wireframes at the top of this post are what we came up with. We submitted our work as an issue in the HOT Export Tool repository on GitHub. I’m including screenshots of the old version below for comparison.

The original / existing homepage of HOT’s export tool.

What the UI currently looks like when creating a new export.

entering text for fields and selecting an area to export.

The following page where the user selects parameters for their data extract. We simplified this process by combining it with the first step in the new UI design.

What an existing job / export looks like currently. Jue redesigned this part which is the second image at the top of this post.

Visualizing Global CO2 output and GNI with an interactive Scatterplot graph

This is a Processing Sketch that visualizes data relating to climate change from the World Bank Data Indicators. Two visualizations can be toggled using a switch in the upper right corner. Specific data for each country can be viewed by hovering the mouse over each circle. Color scheme was borrowed from Cynthia Brewer’s Color Brewer tool.

Process:

1. I downloaded data from World Bank Data indicators in the Climate Change category. I noticed problems with the raw data:
   • Not every country listed has data for the same year.
   • There are aggregates of countries within the dataset such as “East Asia and the Pacific” or “Sub-Saharan Africa”. While these may be useful, for my data-viz I’m attempting to compare only countries.
2. To sort out countries only from the raw data:
   • Grabbed category data for 2010 as this was the latest year available for the CO2 kt category.
   • Combined the data into one spread sheet.
   • Used a join in QGIS to a world dataset file so that only matching countries would be imported. I used the ‘Country Code’ key from the World Bank data and joined it to Natural Earth‘s ne_10m_admin_0_countries.shp ‘Adm0_a3_is’ column.
   • To only keep matching countries from Natural Earth and the World Bank I filtered out data with NULL values using an SQL WHERE clause:
     • SQL SELECT * FROM ne_10m_admin_0_countries WHERE "pop_gni_co2_2010_Country Name" != 'NULL' AND "pop_gni_co2_2010_GNI_2010" !='' AND "pop_gni_co2_2010_CO2_2010" != '' AND "pop_gni_co2_2010_POP_2010" != ''
3. I noticed that some countries lacked data for 2010. To fix this I manually added data from the next available previous year to try to fill in the gaps (probably not the most statistically sound method). These problem countries are listed below. A couple countries such as Myanmar and North Korea did not have any data from the World Bank so were excluded from the viz.
   • Countries shown that had no data for 2010. Their values were replaced with data from next available previous year. The countries and year of data is listed below:
     • Argentina GNI (country & per capita) 2006
     • Greenland GNI (country & per capita) 2009
     • Libya GNI 2009
     • Sudan and South Sudan: I split Sudan’s CO2 evenly as South Sudan has no data in this category (probably due to it being a relatively new country)
     • Djibouti GNI (country & per capita) 2005
     • Somalia / Somaliland GNI (both) 1990
     • Iran (both GNI) 2009

1. In future iterations the following features would be added:
   • Animate the circles when switching visualizations.
   • Add an ability to turn on/off the logarithm.
   • Highlight all circles by region when hovering over a region in the legend.
   • Improve the typography.
   • Add a label for the toggle switch.
   • Show a projection of the trend into the future
   • Toggle a view to display the data on a world map.

Code is available on Github.

Map Story Update v 0.2

 

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.