Web Design

Home/Web Design
Permalink Gallery

D3Js Premiership finishing position.

D3Js Premiership finishing position.


[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.

  1. The Magic line is a bit distracting probably remove or add a toggle to turn it off.
  2. 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.
  3. 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.
  4. 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.

  1. Content is king.
  2. 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.



Permalink Gallery

Loaded Post Production Website

Loaded Post Production Website


[dropcap]T[/dropcap]he guys over at Loaded Post-Production.com required a website and I was happy to oblige. Simple as that. They need an online business card of a site. The type of website that shows you are alive and doing business.

[tagline_box backgroundcolor=”lightblue” shadow=”yes” border=”1px” bordercolor=”” highlightposition=”bottom” link=”http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226/?ref=Michael_J_Gleeson”  linktarget=”_blank” button=”Take  a Look ” title=”This is the Avada theme from themeforest. I like this theme a lot and highly recommend it as one of the best themes on the site, imho. “][/tagline_box]

[dropcap]F[/dropcap]or the sake of convenience I used a themeforest template, having spent 2 years of my life in the website design industry, not a lot but hear me out, I find the templates on themeforest to be a quick and cost effective alternative to creating a site from scratch. Many of these templates are so well designed that you are getting a  high quality site at an extremely low price. They have a very simple business model, create high quality highly customizable sites and sell them over and over again. At time of writing this theme Avada had sold over 35,000 times at $50 dollars which is over a million in sales. So it is a pretty well developed theme. The theme is being constantly updated and new features added all the time. Before you ask No I didn’t create it, but i am very impressed with the theme. Its not the only one there are thousands more.

I could of developed a website from scratch but it would of taken time and I would not of reached the quality of the design behind the avada theme.






Permalink Gallery

This very website.

This very website.

The website you are looking like now was designed by me, Michael J Gleeson. O.K.

This site is an example of converting a Theme from theme forest/ One of the many services I offer. I have experience and have creating sites from scratch myself, all of which where created while working for a particular company so I can’t really claim those sites here. The purist among you will argue that using a template is the equivalent to creating art by using Paint by numbers. When it came to creating my own site. I had two options. Take out a blank sheet of paper and start designing my work of art from scratch or take a template from Themeforest and build on top of it to create what you see before you.

There were many arguments for doing either. The main reason I went with a Template (theme) was time. I could get a template up and running in a fraction of the time. Another reason is “content”. The key to web design is “Content is king”.  People will come to your site to see your content. What the website is or how it looks is secondary. I wanted to spend my time creating content for my site to encourage people to hire me as a graphic Designer or one of my other skills not as web designer.

Last but note least, this is a word press site, which may mean nothing to you but it means I can change the theme of the site easily enough in about a year or so. This means I can be constantly changing the look of my site to new themes on a regular basis. As technology changes so does web deisgn. Instead of keeping up with changes in the industry I let those clever chaps at theme forest do It for me and I simply buy a fashionable theme. Done.

One example that highlights all of the above, the fact that this site is responsive. I.e. it will change depending on weather you are using an Ipad a smart phone or a normal screen. This is built into the site. If I was designing my own I would have to develop this side myself.