D3.js Premiership Season

Home/Playgound, Web Design/D3.js Premiership Season
  • Premiership Season d3js

Click here to open in a new window  Or check out the iframe below.

[title size=”1″]What is this?[/title]

This is my first attempt at a piece using D3.js  a java script language for Data driven documents. I am attempting to learn the language and this is a piece I crafted using my initial training in d3.js.

[title size=”1″]What is D3.js?[/title]

D3.js is a java script language for data driven documents. It was created my Mike Bostock, there are better examples explaining what the language is and what it does here and here. I will leave it to them to explain. I am merely a novice and am still learning the language.

[title size=”1″]The Concept. [/title]

I was very excited about d3.js from the first time I heard about it so I jumped straight in. Despite the fact that I was informed of is steep learning curve, I blindly thought my knowledge of java script and html would give me a head start. I did a few tutorials and I jumped straight in to coding. I decided to use the English premiership as I had come across a data set for this before.  I thought it would be a nice simple way to get to know the language and produce something that can highlight my new skill set.

Looking back I regret jumping into d3.js as quickly as I did.  I should of spent more time getting to know the language and all the things it can do. I ended up modifying the showcase example to create the piece. There is nothing innovative or creative in terms of d3 in this piece merely editing an previous piece to use a different dataset.I added a panel of check boxes to add remove various teams. This is a nice bit of interactivity but it has nothing to do with d3.js. The check boxes are all done through jquery. I didn’t even create the check boxes dynamically. They are hard-coded into the HTML. This highlights where I made my mistake. I was creating things before I knew what the tools I had in front of me could do. The reason to use d3.js is to visualize large sets of data. I am only visualizing one set of date. A better example of d3.js would be to create a piece that allows the user to show many different seasons of the premier league. Possibly different leagues, La Liga , Seria A. This would defiantly be a more interesting use of d3 and definitely a more interesting piece but that is not the piece I did.

Fortunately there was one good thing from this piece, I started to come to gripes with the d3.js. While I am still a long way off from knowing the lanugae or being able to use it creatively. I am a lot closer then I was. I am encouraged to learn more

[tagline_box backgroundcolor=”” shadow=”yes” border=”1px” bordercolor=””  highlightposition=”left” link=”” linktarget=”” button=”” title=”” description=”Looking back I regret jumping into d3.js as quickly as I did.  I should of spent more time getting to know the language and all the things it can do.”][/tagline_box]

[title size=”1 “] To continue or not to continue?[/title]

Like any coding project especially one in a language you are still coming to grips with, this project was a frustrating at times and I altered my plans several times. Sometimes I had to because of assumptions I made about the language and other times it was simply to stop my self from ripping my hair out. Once I did get the thing working and saw what d3.js can do, inspiration took me and I came up with several ideas to extend the project. While initially I thought it would be pointless continuing this project I realized it would help me to further my understanding of the language.

To that end I have decided to continue this project. I have several Ideas I am hoping to implement. For example

[checklist icon=”arrow” iconcolor=”” circle=”yes”]

  • Make the entire project more dynamic so it can use many different data sets i.e. other seasons.
  • Add the functionality whereby a user can move forward and back through the data form match day to match day.
  • Add tool-tips indicating what happened to each data point ,the match the result.
  • The ability to zoom in. Like this example. http://bl.ocks.org/stepheneb/1182434
  • Create different charts. for example a Graph based on teams league position instead of point totals.
  • The ability to change the variables interactively.


[title size=”1″]Finally……[/title]

I am going to continue the project in order to learn more d3.js. While the ideas I have outlined may not be the exact future of this project I hope to attempt this in order to learn the language. Inspiration may take me in another direction but for now the plan is similar to the one outlined above.

By |July 16th, 2013|Categories: Playgound, Web Design|Tags: |1 Comment

One Comment

  1. […] D3.js Premiership Season […]

Leave A Comment