Posts Tagged ‘CartoDB’

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.

odyssey-scroll-example-capture

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.

Screen Shot 2013-09-16 at 8.34.55 PM

link to interactive map

The inspiration for this map came from Rebecca Solnit’s Infinite City; an illustrative atlas that features a collection of maps and writings about San Francisco. One of my favorite maps in the book is titled; “Poison/Palate”. The map shows locations of sites designated as either a ‘palate’, ‘poison’, ‘poison/palate’ or ‘EPA Superfund.’  Farmers markets, organic farms and well known eateries are juxtaposed next to nuclear research laboratories, chemical plants, and Silicon Valley’s legacy of tech waste.  The map I made shows only locations of NYC’s farmers markets linked to their nearest superfund site (within city limits, their are many more just outside in other counties and New Jersey). With more time I would include other types of ‘palate’ and ‘poison’ sites such as notable NYC eateries and restaurants.  Further user interaction with the data would developed as well; such as the ability to search all sites from a certain distance of an address entered by the user.

Data was obtained from the EPA and NY State open-data.  CartoDB is being used to host and render the data live; a PostGIS SQL query links the two data-sets and a subtle light-grey base-map I imported from MapBox puts the data in context.  To process the data I used GDAL’s ogr2ogr utility to query out the 5 boroughs of farmers markets from all of NY.  I used QGIS to perform a spatial query on the EPA data to only select sites within the NYC boroughs (this could probably be done with ogr2ogr but I’m not certain).

*note: when searching for superfund data the EPA Environmental Dataset Gateway is a good place to start. Superfund sites are also known as “Comprehensive Environmental Response, Compensation, and Liability Act (CERCLA)”, a term that comes up a lot in the EPA websites.

**the list of NYC farmers markets I used appears incomplete. The dataset I originally downloaded from nyc open-data contains more records but the address data is not easily geocodable; there are many addresses like: “Crotona Park South & Clinton Ave, in Crotona Park” instead of the typical format of street address, city, state, zipcode. Given more time I could have reconciled the state and city datasets and included more market locations.

Bike Collisions and Routes June 2013

Link to interactive map

This map shows cycling crashes recorded by the NYPD for June 2013, following the launch of Citibike in late May that year.  Bicycle lanes are shown color coded for off-street (green) or on street (purple), transitional (yellow), or null (grey). Ultimately my goal is to show where collisions tend to take place and if there has been an increase and in what areas following the launch of Citibike. This data only represents a sample of the dataset I collected, more collision data can be found hereThe map was created using CartoDB with QGIS and GDAL for inspecting and editing the geo-data prior to visualization.

NYC bicycle facility data is available here

Citibike station data is available here: which I believe is the live update.