# City of Data: Group 7

Group Members: Jacob Lei, Michael Ma, Ivy Wu, Bill Wang

---
**Codepen URL: https://codepen.io/bw2703/collab/QWarxpN/61c56923236272ab5f98f63c79b6a06d?editors=1010**

**Picture of NYC:**

**Problem Statement:**
- We took some pictures of the NYC street, and we have noticed that there are so many different coffee shops in NYC. Also, all members of our group are coffee lovers. Hence we decided to create a database for coffee shops in NYC.

**Data Structure:**
- Currently, our database only include different coffee brands in NYC, with information of name, number of stores, popular drink, founded year, and founded place.
- We are planning to generate an interactive coffee brand database visualization that allows the users to filter the coffee shop in the way they want, such as to see the "numbers of store in decending way" or "year of founded in assending way," etc.

**Firebase:**
- We first set up the firebase project called City of data
- Then we specify the names of the collection, the documents with the correspoding names: collection-brand, document-Auto generated IDs.
- After research on the coffee brands, we have recorded some of the most famous coffee brands in NYC such as Starbucks, Pret, and Blue Bottle. And we have set up attributes to describe their basic status such as name, number of stores in NYC and popular drink, etc,.

**Codepen:**
- After the database is created, we'll be mainly reading the data from Firebase. We first imported the Firebase and set the basic configurations as usual.
- In our Vue, we created a loop structure to make sure that the asychorous data is being updated in real time.
- Subsequently, a reference for the collection in the database is generated.
- Then the array of different brands is created (brandsArr), paving the path for us to represent the content of the query later, after which our app is ready to mount.

**Reflection:**
- We all consider our City of Data as a useful database visualization, especially to coffee lovers like us. Basically, the knowledge we learned from the last class just got directly converted into this work, while we made every effort to display as much helpful coffee-related information as possible.Yet it's still merely a very preliminary application.
- Other than its practical uses, some entertaining elements could have been added to make things more fun. Right now, it's designed for users to check on the quite plain table for any information they need, while it can actually be spiced up to a large extent by introducing some user-friendly interactions.
- That being said, in our defense, this project is supposed to be a prototype based on the application of database, rather than a mature interactive product. From this perspective, we feel quite satisfied with what we got for our "coffee map"; meanwhile, we've become increasingly ambitious about what we are going to do for our final project, which is supposed to be a mature interactive product I mentioned above.