[button link=”http://michaeljgleeson.com/portfolio-items/d3js-premiership-finishing-position/#Arsenal#AstonVilla#Barnsley#BirminghamCity#BlackburnRovers#Blackpool#BoltonWanderers#BradfordCity#Burnley#CardiffCity#CharltonAthletic#Chelsea#CoventryCity#CrystalPalace#DerbyCounty#Everton#Fulham#HullCity#IpswichTown#LeedsUnited#LeicesterCity#Liverpool#WolverhamptonWanderers#Wimbledon#WiganAthletic#WestHamUnited#WestBromwichAlbion#Watford#TottenhamHotspur#SwindonTown#SwanseaCity#Sunderland#StokeCity#Southampton#SheffieldWednesday#SheffieldUnited#Reading#QueensParkRangers#Portsmouth#OldhamAthletic#NottinghamForest#NorwichCity#NewcastleUnited#Middlesbrough” target=”_blank” ]United Versus City [/button]
A D3.js visualization of English Premiership Seasons from 1996 to today.
A D3.js visualization of a the finishing positions of the teams for each season over the league’s 25 year history. I created this using d3.js created by Mike Bostock and a little jquery. The idea was to practice using d3.js and see what I could do with it. I took the final table of each season and graphed them all together. This shows the progress of teams over time. No real startling revelations, it’s common knowledge roughly where every team stands. This simply makes it more accessible. I added a toggle at the bottom allowing users to toggle the visibility of teams which also updates the url allowing people to share particular visualizations they create from this one.
For example clicking this link will show you how volatile newcastle have been over the past 20 odd years.
Or here is a look at last seasons top 5 over the past 20 years.
The idea is that Users can send versions of the visualization to other users to support analysis or make a point or just troll someone.
How to improve this version of the visualization?
Having worked on it for quite a while I decided to publish this version and create a better version later. A list of possible upgrades.
- The Magic line is a bit distracting probably remove or add a toggle to turn it off.
- The toggles for each team crest should turn the crest grey when it isn’t available it only works in firefox. Get it working in Chrome etc.
- The visualization seems a little small. I would like to add a way to zoom in or a way to control zoom. Something like this.
- Also add more dynamic buttons. i.e. they don’t need to reload the page.
What to do next with d3.js?
While coming up with this visualization I actually had thought of several other visualizations I could create. I thought of actually creating a website entirely made up of these visualizations based on the available statistics and data. If my experience in web design has taught me anything it’s these 2 simple rules.
- Content is king.
- Originality is the best content.
What I mean is what you have on your site has to be good original content. The design doesn’t matter too much it’s the content. Creating original visualizations like this one could be enough to create an interesting site. The content would change each week as the drama that is sport develops users would come back to view certain visualizations in different light. I could even update Data sets with the new results keeping the content fresh I could even expand it for other leagues or possibly sport.
I am not too sure what I am going to do exactly……. Watch this space.