Academic Project
Interactive Data Visualization
D3.js
Mapbox
Boston restaurants

I completed this project with one other person for Cornell's INFO 4310: Interactive Information Course in Spring 2024; my main responsiblity was getting our data onto Mapbox, linking several map and sidebar interactions, and writing a script to fetch restaurant images.

For this project, we were given a CSV dataset of Boston restaurants with their names, ratings, cuisine types, and locations. The goal was to design and implement a consumer-oriented interactive interface that would allow users to explore restaurants and identify a place they might be interested in.

Boston restaurants

Our brainstorming phase identified two central concerns that people are likely to have when looking for a place to eat: 1.) where the restaurant is located, and 2.) whether the restaurant serves food that they like. In order to address these two concerns, we designed an interface that consists of a map displaying restaurant locations and a sidebar prompting the user to select a type of cuisine.

When the user clicks on a restaurant or selects a cuisine type, the map updates to highlight other restaurants that have the same cuisine type.

Boston restaurants

When the user selects a particular restaurant, the sidebar also updates to show more information about this location, and displays a list of similar restaurants sorted by rating. The user can hover or click on any of these recommended restaurants to see their locations and information.

We also wrote a Python script that uses Yelp's Fusion API to request image URLs for each restaurant, which we then stored in a JSON file so we could include an image in the sidebar for most locations.

While this was a technically simpler project and it was completed on a short timeline, it helped me improve my JavaScript skills by making me think through how to link user interactions between multiple elements on a page. It was also an interesting learning experience figuring out how to interface with an API in order to generate content dynamically.