Data Visualization of IPL data using two datasets (Ball_by_Ball and Matches) provided by Kaggle User - harsha547.
The dashboard currently has following features:
- Seasons (provides overview of each season data available in the dataset)
- SeasonOverview (actually detailed, provides different visualizations for the season including total matches in the season, Net Run Rate of each match, total venues involved, etc.)
- VenueOverview (provides specific info regarding a venue in selected season like average runs in innings, matches, highest scored match, etc.)
- MatchOverview (provides information regarding a match from basic to advanced like match winner, type of extra runs received and conceded by either team, etc.)
Minor notes:
- I've represented name of teams as Team_Name_{their id} just to give better visual appearance of them in the whole project.
- Data of some matches is not complete in Ball_by_Ball.csv so some parameters like NRR couldn't be calculated. For example: for match id - 501230, 501250 and a few more inning two neither has all players out nor does the match gets over.
Click here to checkout the hosted app.
Pardon me for slow loading of assets (CSV files), it's not really under my control. Heroku free dyno servers sleep. Read more about it here.
- VueJS (core frontend framework). Reasons to choose:
- Out of the box lot of functionality (routing, data-binding and what not.)
- Bonus Points 😛
- ChartJS for rendering charts. Reason(s) to choose:
- I already had experience with it before starting the project
- It fulfills the exact need of the project and is lightweight as compared to other solutions.
- Element UI for UI components, Reason(s) to choose:
- I was exploring different options like vuetify but they felt too heavy compared to project's need, this one looks minimilistic.
- LocalForage as storage API library, Reason(s) to choose:
- Handled all my complex get/set works in IndexedDB
- Naturally drops to another db (WebSQL, localstorage) if IndexedDB not available
- Firebase for hosting (core app)
- Easiest and fastest hosting solution in my opinion.
- Heroku for hosting (backend file provider)
- Made a express app which serves our CSVs deployed on heroku. Finally, CORS...!
- You create the webapp in VueJS ✅ (tried to make code as modular as possible using component based architecture using VueJS)
- You can optimize the loading time ✅ (optimized loading time by caching the stuff in IndexedDB using localforage so we don't make fetch requests every time to get CSVs)
- You make it mobile responsive ❌
- You make it a PWA ✅ (done, vue-pwa plugin of vue-cli automatically enabled PWA capabilities by injecting a workbox powered SW. I updated manifest.json file and added relevant app icons to let chrome show add to homescreen popup)
- You make it offline usable ✅ (after first load, the application is served offline via service worker, thanks to vue-pwa plugin)
- Player Partnerships' table in sorted order
- Batting and Bowling stats of team (in particular season, match, venue)
- Github type contribution chart for showing a match's ball by ball detail
npm install
npm run serve
