Storytelling of NYC Restaurants by Will Su

Main Layout

NYCFOODIVERSE is a data visualization experiment that provide immersive data exploration experience on all the restaurants in the Manhattan area, NYC.
It combines data from NYC Department of Health and Foursquare ratings to show restaurant grades, sanitation scores, violations, price tier, reviews and much more.

Link to Visualization

Tools Used

The visualization integrates data from two data sources NYC Health Inspection Data and Foursquare rating.

NYC Open Data – Restaurant Inspection data

This data includes location information of restaurant along with the inspection details like the inspection date, violation code, violation description, grade, score and inspection type.

nyc open data
sample data
Sample NYC restaurants inspection data
Foursquare Ratings API

Foursquare rating provides ratings for restaurants on ten-point scale based on user feedback. This data is gathered using the Foursquare API.


The target audience of this visualization is the general public which includes either the residents of the Manhattan area or the travelers to this area looking for a quality restaurant.

In the words of the developer Will Su “Social media food ratings are difficult to parse and generalize…”, thus this visual experience alleviates this problem by helping people not only to determine the popular restaurants but also allow them to see the sanitary conditions of the restaurant, pricing and reviews.

Visualization and Layout

The visualization is divided into three sections: Foodiverse | Graph | Map | Search

Sections for navigating the Visualizations

This section consists of text block of violation codes in the center which corresponds to one sanitation violation. For instance: Code 06D represents Food contact surface not properly washed after each use and following any activity after contamination may have occurred.

The points around the violation codes represents one restaurant in Manhattan. And the color codes depict the current Grade level which is on the basis of NYC Food Inspection rating as detailed below:

Grade A: 0-13 points
Grade B: 14-27points
Grade C: 28+ points

Lower the score, better the sanitation conditions.

In addition to that an option has been provided for changing the color of data points by the last time inspection. The data points location is assigned by force directed graph drawing algorithms.
Towards the right is a section which provide further insight into the point which is highlighted (point can be restaurant or the violation code).


Hovering on the violation codes highlights all the restaurants with that sanitary violation and the right section displays the number of restaurants that contains this problem. Further clicking on it expands the right section which details the problem and provides a list of restaurants that have this problem.

Hovering over the restaurant point highlights the sanitation problems of the restaurant. Also, clicking the restaurant point expands the right section. It includes details like:

Abstract representation of the data providing an overview
Showing the data points by how recent the last inspection occured


This section shows the data as scatter plot where X axis is the Sanitation Score and Y axis can be changed to either Foursquare rating or the Price Tier.
When the user hovers over the point, all the overlapping restaurants are revealed.

Graphical representation of the data with flexibilty to vary the y-axis

Overlapping restaurants
Restaurants with same sanitation score and Foursquare rating are revealed on hovering over the points


This section places the data on the map and has been color coded by the recent grade of the restaurant. The size of the circles represents the Sanitation Score. In addition to that on the left links have been provided to common places like Chinatown, Little Italy, Downtown and others.

Users can navigate throught the data geospatially using Map section


The search field allows the user to compare multiple restaurants by plotting data on line chart.

Restaurant comparison
Search allows for comaprison of multiple restaurants using line chart
Questions that FOODIVERSE helps in answering

Using this visualization solution, the user can find answers to the following questions:

Question Solution
Which are the top 10 filthiest restaurants New Yorker’s love the most? In the Graph section, top right represents the dirtiest restaurants with highest customer ratings.
Comparison of two or more restaurants.E.g. How Rao’s compares to Karaoke Wow! In price and reviews? Using the search box, the user can look up for the restaurants and compare them using line chart which show historical inspection record of one year. Also, the right panel provides the details.
Which are the cheapest and cleanest restaurants? In Graph section using Price Tier as y axis, the bottom left shows the restaurants which are cheapest and cleanest.
How many restaurants violated particular code like 10F? Hovering over the code shows the description and number in right panel. Clicking on it displays the list of restaurants that violated the code.
Which restaurants are in Little Italy? Using the map, the user can locate the restaurants nearby along with their details.
The visualization solution provides different levels of abstraction. The user can view data in multiple ways from an overview (Foodiverse) to detailed description (Map and Graph).
The entire visualization is viewable in single screenshot, no scrolling required.

Foodiverse: Overall picture of the data
Foodiverse provides an overview of distribution of restaurants into three grade categories: A, B and C by using color codes for the grades.
Spatial grouping of the restaurant points and violation codes. Use of force layout algorithm lends an aesthetic appeal to it.
User can view detailed information about each restaurant or violation code on the right panel.

The user cannot determine which code has most violations until they hover over the violation code.
Solution: The violation codes could have been grouped logically as concentric circles. Code with most violations in the center and with least violations towards the periphery.

Flexibility to choose own axis variable (Price tier or Foursquare rating).
Clearly labelled groups on the basis of restaurant grade with further details about Sanitation score provided on click.
Excellent way of representing overlapping information i.e. restaurants with same sanitation score and Foursquare rating on scatterplot.
Easy to find patterns between a restaurant’s sanitation level and customer’s real reflection (Foursquare rating)

It is unclear at first what the sanitation score represents. Is lower the better or higher the better?
Solution: Explicitly specifying could have solved this problem.

Color and size encodings have been used for restaurants. Color group the restaurants by the grade assigned to them. However, as each restaurant within a particular grade category can have different sanitation score, so size has been used to encode the Sanitation score.
Links (on left) to major areas assists in user search.

It is unclear what the size of the data points represents.
Solution: Description or Legend could have been provided.
Unable to scroll through the sanitation problem description in the details panel on the right as hovering away from a point change the restaurant in the details panel.
Solution: Once the user clicks on the data point the hover for other points should be disabled until user closes the right details panel.

Provides an easy way to focus on the information of a single restaurant for a year.
Also enables the users to compare two or more restaurants by presenting information as line graph.
Color coding the line on the basis of worst and best sanitation condition of one year’s inspection adds to the visual experience.

On comparing multiple restaurants, line for only one restaurant is highlighted depending on hover and details appear in right panel, all other lines are faded out.
Solution: All the lines could have been displayed and information in details panel could be updated when clicked on the line.
Interesting Findings
The sanitation problem faced by most of the restaurants is "Non-food contact surface improperly constructed. Unacceptable material used. Non-food contact surface or equipment improperly maintained and/or not properly sealed, raised, spaced or movable to allow accessibility for cleaning on all sides, above and underneath the unit."

Violation with most restaurants
Maximum restaurants has Non-food contact surface improperly constructed.
Wajima a sushi restaurant is an expensive restaurant which is very popular among the New Yorker's with Foursquare rating of 9.1/10. However, it is also one of the restaurants with maximum sanitation problems giving it a Grade C.

Dirtiest restaurant with highest customer rating.
Similarly, 10th Ave. Pizza & Cafe and Greenwich Village Comedy Club are the cleanest restaurants which are least favorite among the customers.

Cleanest restaurants with lowest customer rating.

On the whole, this is a good solution to visualizing the relationship between the restaurant inspection data and customer ratings. Along with having all the features that a usual restaurant rating website has; this visualization extends the user experience by also incorporating the food inspection data and allowing the user to explore the data using multiple views.