Visualising Data

Now that we know that we can present the data as JSON on a webpage we need to tell our javascript to read these files and then do something interesting with the data. Let’s start with reading the files.

Open up ‘js/results.js’ in your text editor. You should see that the function loadTeaData is being called. This loadTeaData function uses ajax.

Ajax is used to load things in the background i.e we don’t need to POST or refresh the page. See w3schools.com for more indepth information on it.

We tell the ajax function whether we are using GET or POST and the url where it will find the data. We also tell it what format it can expect the data it fetches to be in. In this case it can except to find JSON

We have a function for if there is a problem getting the data (error)

And one for it being successful (success). Inside success is where the real setup of the animation occcurs.

The variable ‘data’ is parsed into the function. This contains our whole JSON object. Straight away we are able to access the total by saying data.total. Data.teas is an array containing all the different tea types. $.each is a built in loop in jquery to go through an array of items one by one. Using $.each we’re able to go through all each tea type in turn.

Inside the loop we set ‘data’ attributes. These are not to be confused with the data object we have just passed into the function. Instead data attributes in jquery allow us to store information about an object in the object itself… In English – if we have a div in the html that represents herbal tea, we can store all the statistics about herbal tea in the div itself. You can read more about data attributes here

You can see in the loop that it is setting the data count, the data percentage, and the data scale of an id each time it runs through the loop. It sets this data on a dymanic var $(“#teabag-“+element.teatype). Each time it goes through the loop element.teatype will be different be it ‘herbal’, ‘regular’, ‘decaf’ or something else. It is grabbing this variable from our json data, and we’ve set up ids in our markup to match.

The process for our results file is this: we setup our objects by setting them as invisible and use ajax to grab the data. Once the data is parsed and stored in the tea div’s data attributes we call setupFavourites. In this function we grab the data we just stored about each tea type by reading the data attributes we just set. We then use the TweenMax animation library and create a timeline

TweenMax/TweenLite is a javascript library for animation. The ‘lite’ version has slightly less features, but is slightly smaller. It’s like Coke and Diet Coke. We’ve used TweenMax as it’s easier to setup for demonstration purposes.

TweenMax allows complex sequences of animation in very few lines of code. A good intro to TweenMax can be found here.

The setupTea function is used to hide all of our tea bags in our tea animation. This is a good basic example of TweenMax.

TweenMax has several built in functions. We use ‘set’ to instantly change something. In this case we take each of the tea bags and make them transparent using ‘autoAlpha’. The attribute ‘alpha’ would also work here.

Once the data is loaded we call setupFavourites. In this function we build a TweenMax timeline. This is a way of grouping lots of tweens together. It allows us to do all sort of crazy things with it. We can skip to a certain point, fast fast, rewind and even make it go backwards! Check out this video for more of what timelines are capable of.

This line initialises our timeline. We can now add animations or ‘tweens’ to it.

This line adds a tween to our timeline. It says that the target of out animation is the herbal tea bag div and that the animation should take 0.5 seconds. In the curly braces we have a list of things to animate. We’re scaling it to it’s percentage size, changing it’s opacity and rotating it.

Each of the tweens is carried out in order, so it will animate the herbal teabag first, then regular, then decaf and so on. Once we’ve setup all the tweens we then make sure the timeline doesn’t start straight away with this line:

Finally we have a play button. This is used to start the timeline.

On click the button’s opacity is faded out. When the tween is finished it calls the function playTeas which goes to the start of our timeline.

Congratulations you’ve visualised some data!