Explore MLB Stadiums

Technology Used: jQuery, Leaflet, D3, geoJSON

About: This application was part of a school assignment. The assignment was to create an application from ground up. I had to create a persona that would be the typical user of the application. I also had to create a scenario representing the typical experience a user would have if they used the application. Then I created a lo-fi wireframe of the application.

Process: The first thing that I did was to think of a topic that I wanted to create an application for. I decided to explore the history and facts about MLB stadiums. Secondly, I needed to decide what features the application would have. I decided that the application would have a search bar to search based on team name, a home button in case the user wanted to go back to the inital extent of the application, and a popup side panel. The side panel has information about the stadium and a d3 graph that shows the every MLB team's winning percentage at the selected stadium. I used Leaflet as the basis for the application. Leaflet allowed me to display a geoJSON file of MLB points. I changed the points to display the logo of the teams. I was able to modify Leaflet's standard popup window to become a side panel that slides into view when a logo is clicked. In the side panel, I managed to develop a d3 graph showing the winning percentage of each team at the stadium. If you hover over a point in the graph, a popup window will display the team name and the winning percentage.