animated bar chart

HTML

<div id="wrapper">
			<div class="chart">
				<h2>Population of endangered species from 2012 &ndash; 2016</h2>
				<table id="data-table" border="1" cellpadding="10" cellspacing="0" summary="The effects of the zombie outbreak on the populations of endangered species from 2012 to 2016">
					<caption>Population in thousands</caption>
					<thead>
						<tr>
							<td>&nbsp;</td>
							<th scope="col">2012</th>
							<th scope="col">2013</th>
							<th scope="col">2014</th>
							<th scope="col">2015</th>
							<th scope="col">2016</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th scope="row">Carbon Tiger</th>
							<td>4080</td>
							<td>6080</td>
							<td>6240</td>
							<td>3520</td>
							<td>2240</td>
						</tr>
						<tr>
							<th scope="row">Blue Monkey</th>
							<td>5680</td>
							<td>6880</td>
							<td>5760</td>
							<td>5120</td>
							<td>2640</td>
						</tr>
						<tr>
							<th scope="row">Tanned Zombie</th>
							<td>1040</td>
							<td>1760</td>
							<td>2880</td>
							<td>4720</td>
							<td>7520</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

CSS

#data-table {
	display: none;
}
.fig0 {
	background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #747474), color-stop(0.49, #676767), color-stop(0.5, #505050), color-stop(1.0, #414141));
}
.fig1 {
	background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #65c2e8), color-stop(0.49, #55b3e1), color-stop(0.5, #3ba6dc), color-stop(1.0, #2794d4));
}
.fig2 {
	background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #eea151), color-stop(0.49, #ea8f44), color-stop(0.5, #e67e28), color-stop(1.0, #e06818));
}
.bar span {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #fff), color-stop(1.0, #e5e5e5));
	display: block;
	opacity: 0;
		
	-webkit-transition: all 0.2s ease-out;
}
.bar:hover span {
	opacity: 1;
}
body {
	background: #fff;
	color: #222;
	font: 12px/20px 'Helvetica Neue', Arial, sans-serif;
	margin: 0;
	padding: 0;
}
h2 {
	font-size: 18px;
	font-weight: normal;
	line-height: 20px;
	margin: 0 0 20px 0;
	padding: 0;
	text-align: center;
}
h4 {
	color: #545454;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	margin: 0 0 20px 0;
	padding: 0;
	text-align: center;
}
a {
	color: #333;
}

/* Table */
#data-table {
	border: none; /* Turn off all borders */
	border-top: 1px solid #ccc;
	width: 540px;
}
#data-table caption {
	color: #545454;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	margin: 0 0 20px 0;
	padding: 0;
	text-align: center;
}
#data-table thead {
	background: #f0f0f0;
}
#data-table th, 
#data-table td {
	border: none; /* Turn off all borders */
	border-bottom: 1px solid #ccc;
	margin: 0;
	padding: 10px;
	text-align: left;	
}

/* Toggle */
.toggles {
	background: #ebebeb;	
	color: #545454;
	height: 20px;
	padding: 15px;
}
.toggles p {
	margin: 0;
}
.toggles a {
	background: #222;
	border-radius: 3px;	
	color: #fff;
	display: block;
	float: left;
	margin: 0 10px 0 0;
	padding: 0 6px;
	text-decoration: none;
}
.toggles a:hover {
	background:...

JavaScript

/**
 *	Animated Graph Tutorial for Smashing Magazine
 *	July 2011
 *   
 * 	Author:	Derek Mack
 *			derekmack.com
 *			@derek_mack
 *
 *	Example 4 - Animated Bar Chart via CSS Transitions (WebKit Only)
 */

// Wait for the DOM to load everything, just to be safe
$(document).ready(function() {

	// Create our graph from the data table and specify a container to put the graph in
	createGraph('#data-table', '.chart');
	
	// Here be graphs
	function createGraph(data, container) {
		// Declare some common variables and container elements	
		var bars = [];
		var figureContainer = $('<div id="figure"></div>');
		var graphContainer = $('<div class="graph"></div>');
		var barContainer = $('<div class="bars"></div>');
		var data = $(data);
		var container = $(container);
		var chartData;		
		var chartYMax;
		var columnGroups;
		
		// Timer variables
		var barTimer;
		var graphTimer;
		
		// Create table data object
		var tableData = {
			// Get numerical data from table cells
			chartData: function() {
				var chartData = [];
				data.find('tbody td').each(function() {
					chartData.push($(this).text());
				});
				return chartData;
			},
			// Get heading data from table caption
			chartHeading: function() {
				var chartHeading = data.find('caption').text();
				return chartHeading;
			},
			// Get legend data from table body
			chartLegend: function() {
				var chartLegend = [];
				// Find th elements in table body - that will tell us what items go in the main legend
				data.find('tbody th').each(function() {
					chartLegend.push($(this).text());
				});
				return chartLegend;
			},
			// Get highest value for y-axis scale
			chartYMax: function() {
				var chartData = this.chartData();
				// Round off the value
				var chartYMax = Math.ceil(Math.max.apply(Math, chartData) / 1000) * 1000;
				return chartYMax;
			},
			// Get y-axis data from table cells
			yLegend: function() {
				var chartYMax = this.chartYMax();
				var yLegend = [];
				// Number of...