Giter VIP home page Giter VIP logo

project-2-cheltenham-winners-2016-2018's Introduction

Cheltenham Winners 2016-2018

As an interested person in horse racing, I find it quite easy to study the form and have a punt on a horse based on the facts and statistics. To some people it can be very off putting as there is a lot of details to consider if you are trying to back a winner. Some of these factors would be the age of the horse, the going(how soft the ground is), the distance of the race and the recent form of the horse. If horse racing is a hobby well then all this is of interest to you but sometimes a person may want to have a punt on a horse for the big racing festivals which only come around once a year.

From the research I have carried out, it is clear that a person with little to no experience or any great interest in horse racing will still have heard of certain famous trainers and jockeys. For this reason I was inspired to create an application for those people who simply want to back a horse for the Cheltenham Racing Festival based on the facts of who the jockey is riding or the trainer who trains the horse.

I have gathered data from the last three Cheltenham Festivals and will add new data each year after the close of the festival. I feel that in ten years time, I will have a copulate amount of data which will help the user pick the most accurate winner based on information given.

Although I know for a long time what data I wanted to use for this project, it was testing to figure out what exactly I could chart. Normally you would chart figures but in this project I’m not actually charting the number of winners per race, I am looking at the stats and facts of each race so that you can see and get an idea for which trainer or jockey or both has a good or bad record per race.

UX

The purpose of this application is for the user to pick a horse, based on previous winning statistics, who want to back on the bases of which jockey and trainer has won the most. As I mentioned before, trying to pick a horse to punt on can be quite off putting if you try and factor in all the variables. And so for this reason I knew I had to keep the applications’ simplicity to a minimum.

In terms of text, I kept both pages to a minimum so not to overwhelm the user. With regards to colour, I used warm but vibrant colours. The gold banner at the top of each page is to grab the users attention but not to scare or shock. The gold and green colours used throughout the application are the official colours of the Cheltenham Racing Festival so I thought it would be a nice touch to incorporate as much as possible but not too much. The user has a total of 6 filters which they may like to apply. The application does not require all six filters to be applied for it to work. The user may simply use one filter if they wish so and this may give them enough information depending on how in depth they would like to get. The first filter is ‘Years’ which allows the user to check any of the last three years or select all years. The second filter is ‘Race’ which allows the user to pick the race of their choice of which they would like to check. The third filter is ‘Horse’ which allows the user to pick a horse which is a previous winner of the Cheltenham Festival. The fourth filter is ‘Favourite’ which benefits the user if they are interested in whether the horse was a favourite that won the race. The fifth filter is ‘Grade’. This is included for the more advanced user which tells you the level of the race. The higher the grade the more elite the race is and the horses in this race. Grade 1 is the highest ranked race. And finally the sixth filter is ‘Age’ which again may benefit the more advanced user. This would be important when looking at the handicap races with large number of horses participating. You would find that a certain age horse would be more inclined to win certain races.

Two pie charts were used to represent the final selections based on the filters applied. As mentioned earlier, the focus of this application is to highlight the most common statistics for the user and not the actually number of winners.

Technologies Used

  • HTML – code used to represent output to the user
  • CSS – used to style the code to make it more appealing to the user.
  • Bootstrap – used to enhance the user’s experience and make it effortless
  • Popper.js - a JavaScript library for enabling dropdown.
  • D3.js - a JavaScript library for manipulating documents based on data.
  • JQuery
  • JavaScript

Wireframes

Wireframes were drawn manually with pen and paper and uploaded to the wireframe folder.

Testing

The application was tested on 21" monitor and 15" laptop screen and on the following phone screens: iPhone 6/7/8; Galaxy S5, Pixel 2; Pixel 2XL; iPhone 5/SE; and iPhone x. It was also tested on iPad and iPad Pro screen sizes. The site was also tested on different internet platforms such as google chrome and internet explorer.

Manual testing was carried out to ensure that the seamless flow of the application was of the highest standard. Some of the features tested are as follows:

Each link works from home page Each link works from winners’ stats page The site is responsive across all screen sizes and devices Both charts and filters are all interactive. ‘Reset All’ will reset all filters and charts

Deployment

The site is hosted on github pages (https://brianquinlan1989.github.io/Project-2-Cheltenham-Winners-2016-2018/). It is deployed from the master branch.

Run locally

To run this site locally, you need to fork the repository from Github and enter the following command in your terminal: git clone https://github.com/brianquinlan1989/Project-2-Cheltenham-Winners-2016-2018.git

Credits

Media

The image used on the home page was sourced from Google images at www.google.com

Content

The data used in this application was sourced from website such as www.Sportinglife.com and was pulled together by myself.

Acknowledgements

The inspiration for this application originated from my love of sport and horse racing. Many people enjoy watching racing but again are not sure how to pick a winner as there is so many factors to consider. This application is a simplified version for those who not got the knowledge or understanding of the sport that is horse racing.

project-2-cheltenham-winners-2016-2018's People

Contributors

brianquinlan1989 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.