Evo Energy - UK Energy Consumption Guide

The Evo Energy UK Energy Consumption Guide, an interactive infographic to display energy consumption over the last 40 years, sounds on the surface like it’s going to be fairly dry and dull. However the information has been brought to life in a ‘fun’ and interactive way with clouds, trees, levers, hot air balloons… and a sheep.

The infographic was well received, picking up ‘Site of the Day’ awards from both The FWA and Awwwards, in addition to being featured in .Net Magazine and Web Designer Magazine. Plus gaining Epiphany the Corporate Award from the Information is Beautiful awards.

One of my favourite parts of the infographic is the changing colour of sky upon scrolling down to the first dataset. This was achieved by converting the scroll distance over the first 400px into a percentage, then into a decimal, and using that to set an element’s opacity. So when scrolling down it will ‘reveal’ the blue sky. I like that it’s completely unexpected, and adds to the overall feeling of the page.

Layered tree images can be navigated between to show the data per decade by using a hover event to set different classes on the tree’s container, in addition to mousing over fuel types to display consumption percentages.

The same interface is used beneath to navigate between decades of a tree diagram, again setting classes on a container to set specific sizes for the elements within.

The sky changes colour over the first 400px of scrolling, so I set a scroll event on the document to repeatedly call the function to calculate the sky colour

skyColour($(document).scrollTop());
$(document).scroll(function() {
    skyColour($(document).scrollTop());
});

The function checks if you are within the top 400px of the page, then turns this distance into a percentage to set as the opacity of the uppermost layer of sky

function skyColour(s) {
    if(s < 400) {            
        p = 100 - (100 * s/400);
        p = p.toFixed(0);
        if(p > 99) {$('.morning-sky').css({'opacity':1});}
        else if(p < 10) {$('.morning-sky').css({'opacity':0});}
        else {$('.morning-sky').css('opacity','.'+p);}
    } else {
        $('.morning-sky').css({'opacity':0});
    }
}