Final Project Outline
I had thought of many ideas such as the stock prices visualization or construction of a physical staff by laser cutter before my final idea was confirmed, which was an extended project of my midterm.But the data illustrated for final project was completely from the one in the midterm project which demonstrated delivery platform, money, and discount. This project aimed to display the data from my personal delivery orders: location of restaurants, routes from the restaurants to NYU Shanghai, categories of orders, and time of orders. I am a kind of person who depends on delivery a great deal. Before final week, I had already made more than one hundred deliver orders ranging from bubble tea to Thai foods, where a lot of interesting properties appeared, for example, the type of food I favored most and ordered at the specific time and the time that I was likeliest to make an order. The visualization explored these properties of my orders made from both Eleme and Meituan during this semester(Sep.1 – Dec.1), which can be easily recognized through ignoring some minor information such as the name of a business and the date of order. In order to practice P5.JS and the use of API to have a better understanding of programming, I used P5.JS, Mapbox, and API to construct my final project.
Data Collection and Processing
Initially, I intended to use Meituan and Eleme API to obtain my order information by using Node.js (Tutorial is here, https://www.npmjs.com/package/meituan). However, the open Meituan Waimai Platform was only available to owners of business who update their business license, and Eleme Platform was not found. Thus, I manually extracted more than one hundred data from my order history to Excel sheet, including data, time, name of a restaurant and the link of restaurant page. Then, I put the address of each restaurant copied from the business page in Google Map to get the position in terms of latitude and longitude.
<Part of orders: Eleme & Meituan>
<Part of orders：Processed Excel sheet >
First, I only used the position as for the object’s property. Based on the location drawing model taught in class, I made the basic model that single point was drawn automatically one by one in the way that objects were listed in JSON file. Since the routes were overlapped if got from Mapbox API, I used the property of transparency to emphasize the frequency of orders I made.
To differentiate types of food, different colors are used to draw the routes from different locations. The way to realize in coding was to add the value of r, g, b to each object. But because of the diversity of the food, I generalized six categories of all food I ordered this semester: Bubble tea and desserts, BBQ and deeply fried food, Hot hot hot, Thai, Cantonese, and Korean food (because they are all meal with rice), Xiaolongbao & pizza (because they are kind of snacks which can be eaten while other things can be done), and noodles (because I ordered rice noodles a lot). Then I made some color by Adobe Kular, got the r, g, b value of each category and added the properties to JSON file. Modifying the JSON with more than one hundred objects directly was extremely troublesome, thus I added r, g, b value in CSV and converted CSV file to JSON by this website (http://www.csvjson.com/csv2json)
Visualization and Adjustment
Tool: P5.JS, Mapbox, Mapbox API
- Three functions: animateRoute(moving), drawRoute(done); drawCircle
- Preload JSON, and get properties from an array, convert the
- Animation: using percentage of drawing a route in terms of frame count
- Build mapbox function to use the style and token and to set the center and zoom level
- Use API to get the route based on two locations
- Set a 24 hour timer based on milins(), and convert the string (time in JSON) to value by split function, and compare two values.
- Add description of each color and title
- Add timer and time I ordered
- Modify the map by setting a dark style, deleting unrelated information such as streets, bridges and so on, inserting the NYU Shanghai logo to present the destination
- Add effects of flicker and sound effect to the drawing route
- The speed of loading JSON data does not match the speed of timer
- The sound is noisy when routes are intensively drawing
Self – Reflection
To be honest, I learned a lot from this class in programming skills, the concept of visualization in an effective and aesthetic way. However, the aesthetic attitude is not only limited in the class or materials, but life, instead, just as we explored fonts in our surroundings. The most important things I learnt are observation and extraction. I feel like every time I meet a great deal of information, I can somehow form a realization of extracting the one and presenting it in an effective way. The idea of deletion is very important from Envisioning Information If you can’t present data in a way that communicates your thoughts or the emergent information, there is no reason to present these data.
Also, P5.JS is a useful tool to present data, especially a lot of data with many properties. GUI.js, and mapbox are very helpful when using P5.js to make some extended projects. In addition, loading JSON file, using node.js and rita.js, making brush to draw, downloading SVG file, visualizing sound, processing image and using API enrich my knowledge of coding with processing data.