Category: Projects

“From City Island” (live link) describes public transit lines directly available from a point in the city. Panning around the map reveals both sparse and dense networks of accessibility.

In contrast to system-wide maps showing all modes, routes, and transfer points, From City Island represents only the points of departure nearby. Where can one travel to on a single line? To how many different places? How far?

Aerial imagery is shown while panning; clicking anywhere centers and refreshes available routes.

Stops (subway and bus) and routes (subway and bus) were exported from QGIS, and imported as GEOJSON objects to the web map. The map is centered on a random start point selected from a list of coordinates. Using turf.js, a 0.8 km buffer was created around each start point, bus and subway stops falling within this buffer area are then isolated. The subway stop objects include a route property which was used to filter the route GEOJSON object. These corresponding routes were then added as a layer to the map. The MTA Bus Time API was used to find the route corresponding to each nearby bus stop. Once the information was collected from the API, the local and express bus routes GEOJSON objects were filtered and drawn.

Next steps:

• Reverse colors: subways are currently black and buses are colored
• Display nearby stops for buses and subways.
• Add ferry routes
• When a user stops dragging, use the release point as the new center point.

Tile Swap reconfigures aerial imagery of New York City. Newfound edges of each tile draw attention to previously unnoticed boundaries and continuities within the photograph.

The image is subdivided and tiles are randomly paired and swapped. New logics are formed, and the misalignment is either heightened or imperceptable: streets find new connections, houses have different neighbors, and water has unfamiliar shores.

When panning through areas of overwhelming sameness, difference arrives as a surprise — not at the perimeter of the overall map, but suddenly at an unexpected internal edge.

Tile Swap is built as a 2D-canvas element on top of a hidden webGL-canvas element from Mapbox. In having two separate canvases, panning is tracked in one while the modified representation is shown in the other. The Mapbox canvas provides the original tiles which are drawn to the 2D canvas as an image. getImageData() is then used to return pixel arrays at each grid point. The pixels in one subdivison are swapped with its randomized pair. The original mapbox canvas is hidden overtop the reshuffled canvas with an opacity of O.

Next Steps:

• Add functionality for users to enter a custom location and change grid size
• Explore whether tiles can be cut and reorganized along street centerlines
• Use machine learning to explore blending the edges of tiles to create a new ‘place’

“Points & Polygons” is a series of four maps representing physical and organizational forms of New York City. (Live links: 01, 02, 03, 04)

Dominant forms — building footprints, street grids, and topography — are intentionally absent. However, their structuring influence is latent in everything from catch basins that describe invisible intersections to the even spacing of hydrants, playgrounds, and libraries.

In constraining the interaction to only panning, the maps invite close examination, asking: What reasoning underpins the sporatic density of parking meters? Will the patterning of catch basins be imagined as a form of communication in a future archeological dig? What does the distribution of sports fields and playgrounds say about power relations in the city? What about the scale and location of housing authority properties? Is there such as thing as “Forever Wild” and can it be described as a polygon? Are there pools anywhere other than Mill Basin and Staten Island?

The maps are built with Mapbox GL’s API. Each shapefile was curated, then exported without modification as a GEOJSON object and loaded as an individual map layer. A mouse over function describes and isolates each layer.

Next steps:

• The GEOJSON object for spot elevations was prohibitively large when loaded via the API. See if uploading to Mapbox Studio and converting to a tileset improves performance. January 17
• Differentiate each layer internally by types (athletic facilities into tennis fields, pools, etc)
• Add start points for each borough. January 17
• Translate points into polygons for libraries, post offices and public schools (Points & Polygons 02).
• Translate polygons into points for play areas, parking lots, athletic facilities and NYCHA properties (Points & Polygons 03).
• Add a debouncing function to smooth the hover effect. January 17
• Fill polygons with solid color on hover.
• Add menu to page to allow jumping between maps without spacebar.
• Allow visitors to take screenshots that can be added to a gallery.
• Code the various point objects with symbols, e.g. squares, triangles, crosses, etc.
• Add interaction for change to the next map while on a mobile device. The current interaction — pressing the space bar — doesn’t work.

Below is a list of selected data in each map:

01: Neighborhood (Points and Polygons)
– Catch basins
– Cooling towers
– Parking meters
– Hydrants
– Private pools
– Public pools
– Railroad structures
– Subway entrances

02: Polygon Distribution
– Athletic facilities
– Boardwalks
– NYC Housing Authority properties
– Open space, other
– Open space, parks
– Parking lots
– Play areas

03: Point distribution
– Bus stops
– Bus stop shelters
– Libraries
– Parking meters
– Post offices
– Public schools
– Spray showers
– Subway stations

04: Areas
– Beaches
– Business improvement districts
– Forever wild designated areas
– Functional parkland
– Historic districts
– Fresh food stores zoning
– Waterfront parks

“Identifying Darkness” explores different methods of evaluating tone and, in turn, how tone can be used to identify the original imagery anew. Each algorithm — blob detection, edge detection, and HSB value selection — uses pixel brightness differently.

In the web interface version, the map’s extent is fixed with no ability to pan or zoom. Initially represented as an aerial image, when the mouse is pressed, one of the three tonal algorithms is displayed at the current scale. When released, it returns to the aerial representation. A double click steps to the next zoom level, allowing the user to see showing how the same representational techniques produce the varying patterns across scales.

Blob detection identifies areas of contiguous pixels where brightness values are below a particular threshold. These areas are described with random colors and used to mask the original aerial photograph. The masking process uses Processing’s blendmode(ADD).

Edge detection compares each pixel’s brightness value to that of its top, right, bottom and left neighbors. If the difference in brightness is above a particular threshold, the original pixel is represented (with its original color or black).

Lastly, the pixel’s brightness value is evaluated — if above a particular threshold, it is shown in black.

“The Thick Boundary of New York” compiles found outlines of the city as identified by different agencies, histories, and data collection methods. Together, they illustrate the thickness of the city’s perimeter and its many imaginings. What is described in one isn’t necessarily in an other.

Built using Mapbox GL’s API, the various ‘islands’ are revealed by clicking on a boundary, whereupon a more familiar aerial image is shown clipped to the boundary.

Using python, the found boundaries were batch processed in QGIS: transforming them initially to the New York Long Island projection (EPSG 2263); clipping national, state, and municipal data to a particular extent; then differencing from that extent to extract a perimeter polygon; and finally, transforming and exporting that perimeter as a GEOJSON object. The full python script is availble here.

Next Steps:

• Try representing the boundaries without clipping the aerial on hover – either fill the boundary or hide all other lines.
• Dig into QGIS and understand why some layers (i.e. shoreline) were not differencing correctly and producing empty geojson objects. Curate the outline selections once this is resolved.
• Confirm that all layers are clipping the correct way (water versus land)

Data Sources:

NYC Census Tract, 2010
New York City Borough Boundaries, 2010
Mapzen Metro New York City Coastline, Land
Mapzen Metro New York City Coastline, Water
NYC Cable Franchise
NYC DSNY Frequencies
NYC Historic Districts
NYC Hydrography Structures
NYC Municipal Court Districts
NYC Neighborhood Tabulation Areas
NYC Zoning Map Index Quartersection
NYC Zoning Map Index Section
USGS Geology, 1974
NYS Hudson River Estuary Shoreline
NYS Hudson River Estuary Sediment Environment
NYS Hudson River Sediment Type
NYC Coastal Boundary
NYC Fresh Food Stores Zoning