Finding world's greatest cricketer by comparing top 5 batsmen of ODI and Test cricket given by Wisden-100 list.
Click here to view the deployed webapp.
npm install
npm run serve
We are juding each player's performance in batting and bowling of both Test and ODI format of cricket. Thus, all visualizations are segregated accordingly. Each chart has a winner of that particular factor. The player who wins in important factors and having most number of wins will be the winner.
Wikipedia says, “Sachin Tendulkar is a former Indian cricketer, widely regarded to be the greatest cricketer of all time.”
Let's try to prove or disprove the given statement.
-
VueJS Framework:
Vue is a progressive framework for building user interfaces.
It provided me features like virtual DOM, client side routing, data-binding and a lot more. -
Element UI:
A Vue 2.0 based component library for developers and designers.
It provided me some beautiful components cause of which lots of time was saved. -
ChartJS:
It is a JavaScript library that allows you to draw different types of charts by using the HTML5 canvas element.
All my charts are really good looking all because of this highly customisable library. -
vue-d2b:
Vue extension for d2b data viz library, used Sunburst Chart from the same
Sunburst Chart is ideal for displaying hierarchical data. I used it to show overall performances of players.
- Collection of raw data and it's verification
- Processing of raw CSV data into desired JSON format
- Deciding what to visualize :p
- Developed using Vue, started project via vue-cli. Followed component architecture and other best practices.
- Precalculated results from given data CSVs and directly using results via JSON files generated,
it optimized the loading time by a good extent. - Loading routes lazily at runtime.
- Project isn't responsive for now.
- Implemented as PWA:
- Fully works offline
- Javascript (which also contain our results json) and CSS chunks are cached after first load hence users can view visualizations with slow/no internet connectivity.
- User can add to home screen and install the app.
