Introduction

Walking through the street in New York, you can always hear all kinds of sounds: drivers never hesitate to honk their car horns, lots of passengers carry huge speakers which play hip-hop songs at large volumes, and at night time drunken guys laugh or yell to each other. These really bothered me at first when I moved to New York but gradually I feel like those sounds really turned out to be a special soundscape.

With the growing interest in these combinations of loudness, I would like to explore the noise events in New York. My main questions about the visualization project are:
1. Do the season and time have to do with the number of noise complaints?
2. Are the noise complaints different between daytime and night?

As the final project of the class, I would like to combine what I’ve learned from lab two and lab four to create an interactive map dashboard to present the distributions and changes in the noise scenario. The dashboard will include a map with animation showing data changes over time. Moreover, there will be a chart section under the map to show other information about the complaints. The charts will be synchronized with the changes when the map data is filtered. Therefore, I would continue to apply the D3 also leaflet Javascript library to visualize the data and demonstrate it on the website.

Inspiration

After deciding on the project topic and how I would visualize it, I tried to look for some references for the dashboard layout, map styles, and chart types that are appropriate for the map.

Noise in NY

This map is doing the same topic as my final project, so it basically gives me a great example of how I could arrange the layout for my dashboard. Also, from the filter section, I learned that noise type may be another useful perspective to show the visualization.

The Citi Bike Commute

This 3D flow map really shows me how to design the time-series animation to correspond to the map changes. The chart underneath inspires me to use the line chart to show the distributions arranged by the month and time periods.

Socio-Economic Profile: Karantina

I was inspired by this map of its legend position arrangement. Though I didn’t design my legend in this way in the end, this is still a great reference for my future project.

Process

The following steps are the process for creating the interactive maps

Data Collecting

To collect the noise events data, I used the API to request the noise complaints data from the 311 services. Due to the noises being different form types, I needed to query them separately and then combine them together to become the complete dataset.

Data Processing and Analyzing
While the lab 4 I used circles to present the distributions, it was pretty hard to read and compare the amounts of numbers between different areas. In light of this, this time I decided to join the data with the census track units in order to create the polygon map. Hence, I applied the geopandas library to do the geojoin on the geometry column.

After finishing all the data join and cleaning work, I quickly browsed the data structure and looked for valuables I could apply for my visualization. Apart from the month and noise types, I chose to group the time into two segments; one is daytime (6 am to 5 pm), and the other is nighttime (6 pm to 5 am). Moreover, because there are too many kinds of noise in the 311 datasets, instead of showing all and making the visualization too difficult to read, I chose to pull out the top complaints from the daytime and nighttime perspectively.

Data Visualization
Continuing to use the code to do the visualization, this time I faced the trouble which really took me a long time to deal with it. To create the polygon map, I needed to prepare the GeoJSON file for the leaflet library to turn the data into visualization. However, no matter which internet resource I used to convert the CSV files into GeoJSON format, the file just didn’t organize in the right pattern. Luckily, I finally succeeded by applying the QGIS to solve the problem.

To build an interactive map, I decided to design maps into three segments: one is an overall noise complaints map, another is a daytime noise complaints map, and the last one is a nighttime complaints map. In the overall map section, I built up an animation and map generation function in order to show each of the month series maps at a regular time Moreover, in the daytime and nighttime section, I created a line chart of various noise type distributions during the time by using the D3 js library.

Result

https://cloudlun.github.io/final-project/Website/map.html

UX Research

I recruited two participants for online user testing after I finished the design. One is 29 years-old female who is a UX designer, and the other one is a 30-year-old male who now is majoring in an urban planning master During the online testing, users were asked to think out loud, would play with the website for 5 to 10 minutes, and then gave them small tasks. The tasks aimed to evaluate if they really knew how to use the interactive features, if the design layout was clear for them, and where or in which section needed to be revised. The following questions are the tasks I assigned them during the testing:

1. Can you help me find the noise complaints in March?
   If you finish, why do you do this to find the information?
   If you can’t find the information, which part made you feel confused?
   
2. Can you tell me which are the most complaint types in daytime and lifetime?
   If you finish, why do you do this to find the information?
   If you can’t find the information, which part made you feel confused?
   
   3. Can you tell me which month has the lowest complaints?
   If you finish, why do you do this to find the information?
   If you can’t find the information, which part made you feel confused?
   

Research Results
Both participants completed the tasks without facing some big problems. However, they still had some confusion and frustrations when playing with the interactive map.

1. The only content information they can learn about this map is the title. It is not enough to explain the why and what this map can do. they expect to see more captions on the website.
   
2. They think it would be better if the map can show up the information like the number of complaints when they hover over the polygon.
   
3. They think every segment should provide consistent information. They are also curious about the number of complaints of each type during the year instead of just showing the nighttime and daytime layers.
   
4. Because I put too much data in the information, when they played the animation, sometimes the map would load for a long time. This problem really confused them whether they didn’t click the play button successfully or it just the computer had a hard time rendering the picture.
   
5. They couldn’t understand what the ‘All’ button means. They suggested changing to Back or Pause.
   

Reflection

I felt a sense of achievement after I successfully completed the challenge and designed the map by applying the codes. However, because of spending too much strength and time on debugging and learning the JS library syntax. I didn’t develop an intact storyline for this visualization so audiences felt difficult to get into what this map is going to say. There are still plenty of design or information problems on the map. Next time I really needed to plan some time to revise the design and build up the insight instead of keeping coding to add the new features on the map.

Overall I think this project really helped me learn a lot and took my interactive visualization design skills up a notch, and I would try to revise this map to a better and more interesting version.