DESKTOP AND WEBSITE BASED VISUALIZATION
Annual Weather and Temperature Web Visualization
In this project, I explored JavaScript and D3.js as tools for creative web visualization. I created this project with a focus on visual intuition, implementing various animations and visual cues such as ellipse size and rate of ellipse flashing to convey two different ways of visualizing precipitation data. The size of the black dot directly corresponds to how fast the ellipse blooming animation will be. The animations are triggered via mouse clicks, which added a way for the user to interact with the visual. Along with this, I mapped color to the states based on average temperatures. Overall, this project utilized common, everyday data and visualized it in a unique way that was still visually intuitive and simple to understand regardless if the user chose to interact with the map and trigger the animations.
Halo 5 Data Visualization (Desktop Application)
Using my API Key, I retrieved meaningful data from the Halo 5 Multiplayer API and filtered the data to create a connection between important statistics. I then created a visualization that communicated the player's style of playing using Processing. To further the visual, I displayed information like the top game modes (capture the flag, slayer, SWAT, etc.) because each game mode is played very differently than the other. This means that each player has a specific playing style based on game type. This desktop app is interactive, allowing the user to enter their personal, or any other person's, player username. This desktop app serves as a new way to quickly view important statistics about the player and to assess their in game capabilities, making it a perfect tool for discovering potential teammates for competitive Halo players.
Halo 5 Website Visualization
This website visualization was a group project between myself and a classmate. We decided to further develop on the results of my Halo desktop app to create new meaningful connections using HTML/CSS, JavaScript, p5.js and D3.js. I handled the backend process of retrieving the data using JavaScript, creating the visualization using p5.js and d3.js as well as maintain the website server side. My partner utilized HTML and CSS to create the website template and user prompts for inputing player user name. The website features new data that is based on completed matches and all the players involved in the matches. The visualization is not about the story of the player like the desktop app, rather it is a visualization of classic cluster analysis exploring how each team's members worked together and performed to either win or lose the match. This web visualization provides a fast way for teams and individual players to view group performances with respect to the other team's results.