Following up on my previous lab report about Community Gardens, the NYC Green Spaces project broadens the scope of the existing map and provides an interactive, data-driven entry point to urban greenery in NYC.

The purpose of this map is to connect people to publicly accessible green spaces in New York City. Community Gardens, selected Parks Properties, and Block-level Street Trees paint a picture of active and passive greenery in the city.

Aggregate statistics and chart visualizations create a narrative context, while interactive map popups provide more details and pathways to engagement.

Datasets

The following NYC OpenData datasets were used to build the map:

• GreenThumb Community Gardens
• GreenThumb site visits
• Parks Properties
• Street Trees Blockface Metrics
• Borough Boundaries

I also used this bounding box generator to create custom zoom boundaries for the geographic filtering functionality.

Methodology

Map layers were created through a combination of NYC Open Data API calls and custom Mapbox Studio vector tiles. API queries were filtered to only include columns with relevant information and rows with applicable entries.

The Parks Properties dataset was constrained to entries that are public green spaces which includes the following classifications: Flagship Park, Nature Area, Community Park, Neighborhood Park, Triangle/Plaza and Historic House Park. I based these filters on the definitions provided in the data dictionary for Parks Properties. I wanted to make sure that any park represented in the map was a true urban green space: publicly available land that can serve as a third space to enjoy nature within the big city.

Community gardens were fetched in their entirety with filters to exclude columns for administrative data like congressional districts. Cliking on a Community Garden polygon fetches GreenThumb Site Visits data to create comprehensive popups that combine logistical information such as hours and address, with contextual information such as composting capacity and presence of wildlife. Joining the two datasets into a popup gives people an informative and actionable understanding of any Community Garden in the city.

Popups for Community Gardens were very challenging to make. The GreenThumb Site Visits API provides a long list of interesting features and amenities including solar panels, composting, farmers markets, types of vegetation and more. The challenge was to present that information in a human-readable, sentence structure format instead of a checklist that just says solar panels: yes, composting: no, etc. I spent a chunk of time grouping the response fields into logical categories – i.e. services, plant life, animal life – and then making and refining conditional statements that could handle any number of true or false cases within each category. The end result is still a work in progress but it represents a more readable and approachable way to present text data.

Due to the size of the Trees Blockface dataset and Socrata API limits, the Trees Blockface data was downloaded as a geoJSON, cleaned up in qGIS, and then uploaded as a vector tile set using Mapbox Studio’s Mapbox Tiling Service. Street trees data is meant to provide a background for passive urban greenery. On which streets can people enjoy the soothing presence of nature without necessarily spending time in a park?

Extracting data for accurate metrics proved challenging. My initial implementation utilized Mapbox’s queryRenderedFeatures() function to get features from the map. However, upon inspection, it was leaving out too features that weren’t rendered at certain zoom levels. To get around this, I made additional API calls to the Parks Properties and Community Gardens datasets.

Trees Blockface metrics were queried from the map due to the same API limitations issue encountered previously. As such, Trees Blockface metrics are an estimate. The rendering of trees data is mostly complete but there was no way to ensure a combination of geographic boundary and full rendering of the tileset.

The project is hosted on Netlify.

Design Process

It was important to make sure that I was telling a story and not just rendering data on a map. To accomplish this, I defined a clear purpose for the project: to connect people to publicly accessible green spaces in New York City.

Every decision had to answer questions like “does this help someone find a new green space? can they follow up on that knowledge and visit the green space? Is there enough context provided outside of the map to encourage people to explore inside the map?”

I refined the application through several rounds of user testing. I was able to test the map on two users, one of whom was available for multiple rounds of testing and feedback. I asked general questions about how they interact with urban green spaces and what they’re lacking, and then functional questions including applying geographic filters, getting information on a community garden, and finding a new park.

The following improvements to design and functionality came as a result of user testing:

Tree Representation

My initial representation of street trees relied on the 2015 Street Trees Survey data which is an enormous collection of every street tree in New York. I tested a small segment of the trees and was surprised to hear users say it was visually appealing, but not helpful. The the sheer volume of data points overwhelmed every other piece of information on the map. More importantly, they didn’t care about individual points. They wanted an overall vibe of trees, not specific information about every single trees. How green is my neighborhood? My block?

My first attempt at addressing their feedback was to transform the point representation of trees into a heat map. It was an improvement but still dominated the map. I went back to the Open Data portal to look for alternatives and found the Trees Blockface dataset. This aggregates trees into a trees-per-street metric, which I could visualize as lines and symbolize in bins according to distribution of trees. The end result was a clean, easily digestible background of street trees context that succeeding in providing the overall vibe of trees without getting in the way of the interactive polygons representing Parks and Community Gardens.

Legend format

As I began to incorporate data viz and aggregate metrics, the container that I had used for the legend became overburdened and difficult to itnerpret. A user said it lacked hierarchy and looked messy. I fixed this by introducing section headers and decoupling the metrics from the legend. The result is an overlay with metrics, charts and filters in the top left corner and an overlay with legend info in the bottom right corner.

Landing Page

Initially, the map was the first thing that rendered. Testers described liking the aesthetics of the map but being overwhelmed by the data and not knowing where to orient themselves or how to start interacting with it. I had an “about” section but it was hidden by default and users reported not knowing how to find it.

In response to user feedback, I set the “about” modal to open by default so that an introduction to the project was the first thing people see when visiting the map. I also expanded the instructional content of the modal by including clear steps and a created a tutorial gif that can show users some example interactions to get them started.

Outcome

The final product is this interactive web map.

References

• Data & Insights Client Center. “How to Query More than 1000 Rows of a Dataset,” December 8, 2022. https://support.socrata.com/hc/en-us/articles/202949268-How-to-query-more-than-1000-rows-of-a-dataset.
• “GreenThumb Garden Info | NYC Open Data.” Accessed May 2, 2023. https://data.cityofnewyork.us/dataset/GreenThumb-Garden-Info/p78i-pat6.
• “GreenThumb Site Visits | NYC Open Data.” Accessed April 11, 2023. https://data.cityofnewyork.us/Environment/GreenThumb-Site-Visits/xqbk-beh5.
• “MillionTreesNYC – NYC Tree Facts.” Accessed May 2, 2023. https://www.milliontreesnyc.org/html/urban_forest/urban_forest_facts.shtml.
• NYC Open Data. “2015 Street Tree Census – Blockface Data.” Accessed May 2, 2023. https://data.cityofnewyork.us/Environment/2015-Street-Tree-Census-Blockface-Data/2cd9-59fr.
• NYC Open Data. “Borough Boundaries.” Accessed May 2, 2023. https://data.cityofnewyork.us/City-Government/Borough-Boundaries/tqmj-j8zm.
• “Parks Properties | NYC Open Data.” Accessed May 2, 2023. https://data.cityofnewyork.us/Recreation/Parks-Properties/enfh-gkve.