IPL Data Visualization

Data visualizations using Vue.js

A web app to visualise IPL data across all seasons with kaggle dataset..

DEMO.

Used libraries and web frameworks.

1. VueJs https://vuejs.org/ Vue.js is progressive JavaScript framework. Easy to understand. I love this language.
2. Vue-Bootstrap https://bootstrap-vue.js.org/ Bootstrap is very good in its grid system is very responsive form mobile and desktop.
3. vue-chartjs https://vue-chartjs.org/ Vue chartjs used to show basic line, bar and polar graphs etc. and its very customizable and lighweight.
4. Air Horner (sw.js) https://developers.google.com/web/fundamentals/codelabs/offline/ Google air horner to make web app offline usuable.
5. vue-router https://router.vuejs.org/ To provide the routing system in web application.
6. vue-progressbar To show page loading progress.

Bonus Points

I worked on these things for better user experience.

1. Web app in vue.js. Vue.js is progressive JavaScript framework. Easy to understand.
2. Optimised load time : No data and HTTP request' redundant in application. See image given below.
3. Make it mobile responsive : Bootstrap is used we know how it is good in its grid system and vue-chartjs . Off Animation if mobile detected for fast and smooth experience.
4. Progressive web-app : Tested on chrome Audits. Add few things like manifest.json , sw.js background theme, theme color, site is served over HTTPS for progressive web-app , add to Home screen etc. See image given below.
5. Make it offline usable : I used Air Horner (sw.js) to provide offilne service. Scripts loaded offline from serviceWorker and also add offline and online status in top right corner of web app.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Some Screenshots