Introduction

For the lab report, I focused on mapping restaurants in New York from the Yelp App. I was curious about the location distributions, which areas gather more restaurants, are they all close to the subway stations, and also does the price really have a positive relation to quality. To find out these questions, I created an interactive map, trying to show the geographical information from various perspectives.

Inspiration

To prepare for the visualization, firstly I was looking for design references. I was inspired by the New York 311 noise complaints map in its layout and how the creator arranged the content filters in the legend sections.

Methodology

The following steps are the process for creating the interactive maps

Gathering the Data

I collected the data by applying the Yelp API which offered restaurants in the app.

Organizing the Data Structure

Initially, I gathered the New York restaurants’ datasets into four csv files arranged by the New York Boroughs. The columns of every dataset include the name, location, longitude, latitude, alias, name, and price. However, when I do the visualization for data testing in Python, I found out that even though I selected the restaurants in Manhattan, there were plenty of restaurants near but not in the borough. Hence, I decided to combine the four datasets together and drop the duplicates.

Data Visualization

Continuing the prior lab, I was applying the D3 JS and also the other Javascript library for creating interactive maps named leaflet JS. Additionally, I was using HTML, CSS, and Github to develop the website for this map project.

At first, I visualized all the restaurants from the dataset for viewing the overall distributions. Then, I built up the filter sections according to the price and rating perspectives. Finally, in order to show the distance between restaurants and subway stations, I added the buffer features of 0.3 miles around the station points. I have also tried to select restaurants by alias like Korean, BBQ etc, but due to there are too many kinds of tags. It was pretty hard to classify and filter them, so it didn’t work out in the end

Result

https://cloudlun.github.io/yelp_mapping/Website/map.html

Reflection

After a long time of programming and debugging, I created an interactive map website that looks solid at first sight. However there were still plenty of problems that needed to be solved.

Lacking storyline

Because of spending too much strength building the visualization and website, I didn’t have enough time to develop the storyline and explained the insights for this lab.

User Interface Problems

There were some flaws in the interface of the filter section. For instance, after I click the button to cancel the buffers in the map, it works but the circle in the button doesn’t disappear. Additionally, I still need to revise the margin between filter sections. The last but not least, I need to think of how to present the map on small monitors like smartphones.