<!-- raphael works it's pixie magic to fill this empty div with the svg elements -->
<div id="holder"></div>
<!-- some links to trigger the transform functions. Meh, whatever-->
<div class="buttons">
<p><strong>Is the glass?</strong>
<span class="prediction_1"><a href="#">Half full</a></span>
<span class="prediction_2"><a href="#">Half empty</a></span>
<span class="prediction_3"><a href="#">Meh, whatever</a></p></span>
</div>body {
color: #000000;
font-family: Verdana,arial,Helvetica,sans-serif;
font-size: 90%;
margin: 20px;
}
#holder {
width: 395px;
height: 245px;
}
.buttons {
position: relative;
overflow: visible;
}
.buttons a {
color: #000;
text-decoration: none;
border-bottom: 5px solid;
}
.buttons a:hover {
color: #999;
text-decoration: none;
}
.prediction_1 a{
border-bottom-color: #C1272D;
}
.prediction_2 a{
border-bottom-color: #7F3A7F;
}
.prediction_3 a{
border-bottom-color: #51A8D0;
}/*
* Hi, thanks for stopping by.
* I've forked a version of this pen that I believe
* is a lot simpler to follow.
* All comments and suggestions are very welcome!
*/
// Nominated the div to hold the Raphael area
var r = Raphael("holder", 395, 245);
// Set variables for animation speed easing
var speed = 800;
var easing = "bounce";
// Draw the lines and base for the chart
r.path("M5,0 345,122").attr("stroke-dasharray",". ");
r.path("M5,25 345,147").attr("stroke-dasharray",". ");
r.path("M5,50 345,172").attr("stroke-dasharray",". ");
r.path("M5,75 345,197").attr("stroke-dasharray",". ");
r.path("M5,100 345,222").attr("stroke-dasharray",". ");
r.path("M0,105 5,100 345,222 340,227z").attr({stroke:"none", fill:"#999"});
// These strings will be used to flesh out the new paths when they are transformed
var innerPath = " 15,110 0,105z";
var outerPath = " 20,105 15,110 0,105z";
//All of the graph results in a whole bunch of arrays
canadaResults = [100,100,9];
usaResults = [93,86,16];
ukResults = [86,72,23];
franceResults = [79,65,30];
germanyResults = [72,58,37];
brazilResults = [65,44,44];
africaResults = [58,37,51];
indiaResults = [51,37,58];
chinaResults = [44,44,65];
japanResults = [37,58,72];
ausResults = [30,65,79];
otherLAResults = [23,72,86];
otherEuropeResults = [16,86,93];
otherAsiaResults = [9,100,100];
// create variables for each path, inner and outer for each bar
var canada_inner, canada_outer,
usa_inner, usa_outer,
uk_inner, uk_outer,
france_inner, france_outer,
germany_inner, germany_outer,
brazil_inner, brazil_outer,
africa_inner, africa_outer,
india_inner, india_outer,
china_inner, china_outer,
japan_inner, japan_outer,
aus_inner, aus_outer,
otherLA_inner, otherLA_outer,
otherAsia_inner, otherAsia_outer,
otherEurope_inner, otherEurope_outer = r.path();
//create raphael sets to group the paths together in paris. One love.
var canadaBar = r.set();
var usaBar = r.set();
var ukBar = r.set();
var franceBar = r.set();
var germanyBar = r.set();
var brazilBar = r.set();
var africaBar = r.set();
var indiaBar = r.set();
var chinaBar = r.set();
var japanBar = r.set();
var ausBar = r.set();
var otherLABar = r.set();
var otherEuropeBar = r.set();
var otherAsiaBar = r.set();
var allBars = r.set();
// this function will run with the document loads and create the first instances of the bars
function createCountries (i) {
// each bar's path is created using a corresponding value from the arrays above
// Canada
canada_inner = r.path("M0," + ((100 - canadaResults[i]) + 5) + " 15," + ((100 - canadaResults[i]) + 10) + innerPath);
canada_outer = r.path("M0," + ((100 - canadaResults[i]) + 5) + " 5," + (100 - canadaResults[i]) + " 20," + ((100 - canadaResults[i]) + 5) + outerPath).attr({opacity:".5"});
// USA
usa_inner = r.path("M0," + ((100 - usaResults[i]) + 5) + " 15," + ((100 - usaResults[i]) + 10) + innerPath);
usa_outer = r.path("M0," + ((100 - usaResults[i]) + 5) + " 5," + (100 - usaResults[i]) + " 20," + ((100 - usaResults[i]) + 5) + outerPath).attr({opacity:".5"});
// United Kingdom
uk_inner = r.path("M0," + ((100 - ukResults[i]) + 5) + " 15," + ((100 - ukResults[i]) + 10) + innerPath);
uk_outer = r.path("M0," + ((100 - ukResults[i]) + 5) + " 5," + (100 - ukResults[i]) + " 20," + ((100 - ukResults[i]) + 5) + outerPath).attr({opacity:".5"});
// France
france_inner = r.path("M0," + ((100 - franceResults[i]) + 5) + " 15," + ((100 - franceResults[i]) + 10) + innerPath);
france_outer = r.path("M0," + ((100 - franceResults[i]) + 5) + " 5," + (100 - franceResults[i]) + " 20," + ((100 - franceResults[i]) + 5) + outerPath).attr({opacity:".5"});
// Germany
germany_inner = r.path("M0," + ((100 - germanyResults[i]) + 5) + " 15," + ((100 - germanyResults[i]) + 10) + innerPath);
germany_outer = r.path("M0," + ((100 - germanyResults[i]) + 5) + " 5," + (100 - germanyResults[i]) + " 20," + ((100 - germanyResults[i]) + 5) + outerPath).attr({opacity:".5"});
// Brazil
brazil_inner = r.path("M0," + ((100 - brazilResults[i]) + 5) + " 15," + ((100 - brazilResults[i]) + 10) + innerPath);
brazil_outer = r.path("M0," + ((100 - brazilResults[i]) + 5) + " 5," + (100 - brazilResults[i]) + " 20," + ((100 - brazilResults[i]) + 5) + outerPath).attr({opacity:".5"});
// Africa
africa_inner = r.path("M0," + ((100 - africaResults[i]) + 5) + " 15," + ((100 - africaResults[i]) + 10) + innerPath);
africa_outer = r.path("M0," + ((100 - africaResults[i]) + 5) + " 5," + (100 - africaResults[i]) + " 20," + ((100 - africaResults[i]) + 5) + outerPath).attr({opacity:".5"});
// India
india_inner = r.path("M0," + ((100 - indiaResults[i]) + 5) + " 15," + ((100 - indiaResults[i]) + 10) + innerPath);
india_outer = r.path("M0," + ((100 - indiaResults[i]) + 5) + " 5," + (100 - indiaResults[i]) + " 20," + ((100 - indiaResults[i]) + 5) + outerPath).attr({opacity:".5"});
// China
china_inner = r.path("M0," + ((100 - chinaResults[i]) + 5) + " 15," + ((100 - chinaResults[i]) + 10) + innerPath);
china_outer = r.path("M0," + ((100 - chinaResults[i]) + 5) + " 5," + (100 - chinaResults[i]) + " 20," + ((100 - chinaResults[i]) + 5) + outerPath).attr({opacity:".5"});
// Japan
japan_inner = r.path("M0," + ((100 - japanResults[i]) + 5) + " 15," + ((100 - japanResults[i]) + 10) + innerPath);
japan_outer = r.path("M0," + ((100 - japanResults[i]) + 5) + " 5," + (100 - japanResults[i]) + " 20," + ((100 - japanResults[i]) + 5) + outerPath).attr({opacity:".5"});
// Australia
aus_inner = r.path("M0," + ((100 - ausResults[i]) + 5) + " 15," + ((100 - ausResults[i]) + 10) + innerPath);
aus_outer = r.path("M0," + ((100 - ausResults[i]) + 5) + " 5," + (100 - ausResults[i]) + " 20," + ((100 - ausResults[i]) + 5) + outerPath).attr({opacity:".5"});
// Other Latin America
otherLA_inner = r.path("M0," + ((100 - otherLAResults[i]) + 5) + " 15," + ((100 - otherLAResults[i]) + 10) + innerPath);
otherLA_outer = r.path("M0," + ((100 - otherLAResults[i]) + 5) + " 5," + (100 - otherLAResults[i]) + " 20," + ((100 - otherLAResults[i]) + 5) + outerPath).attr({opacity:".5"});
// Other Europe
otherEurope_inner = r.path("M0," + ((100 - otherEuropeResults[i]) + 5) + " 15," + ((100 - otherEuropeResults[i]) + 10) + innerPath);
otherEurope_outer = r.path("M0," + ((100 - otherEuropeResults[i]) + 5) + " 5," + (100 - otherEuropeResults[i]) + " 20," + ((100 - otherEuropeResults[i]) + 5) + outerPath).attr({opacity:".5"});
// Other Asia
otherAsia_inner = r.path("M0," + ((100 - otherAsiaResults[i]) + 5) + " 15," + ((100 - otherAsiaResults[i]) + 10) + innerPath);
otherAsia_outer = r.path("M0," + ((100 - otherAsiaResults[i]) + 5) + " 5," + (100 - otherAsiaResults[i]) + " 20," + ((100 - otherAsiaResults[i]) + 5) + outerPath).attr({opacity:".5"});
// the inner and outer paths are grouped together suing set.push()
canadaBar.push(canada_inner,canada_outer);
usaBar.push(usa_inner,usa_outer);
ukBar.push(uk_inner,uk_outer);
franceBar.push(france_inner,france_outer);
germanyBar.push(germany_inner,germany_outer);
brazilBar.push(brazil_inner,brazil_outer);
africaBar.push(africa_inner,africa_outer);
indiaBar.push(india_inner,india_outer);
chinaBar.push(china_inner,china_outer);
japanBar.push(japan_inner,japan_outer);
ausBar.push(aus_inner,aus_outer);
otherLABar.push(otherLA_inner,otherLA_outer);
otherEuropeBar.push(otherEurope_inner,otherEurope_outer);
otherAsiaBar.push(otherAsia_inner,otherAsia_outer);
//The bars are spaced downwards and along the lines
canadaBar.transform("T0,0");
usaBar.transform("T25,9");
ukBar.transform("T50,18");
franceBar.transform("T75,27");
germanyBar.transform("T100,36");
brazilBar.transform("T125,45");
africaBar.transform("T150,54");
indiaBar.transform("T175,63");
chinaBar.transform("T200,72");
japanBar.transform("T225,81");
ausBar.transform("T250,90");
otherLABar.transform("T275,99");
otherEuropeBar.transform("T300,108");
otherAsiaBar.transform("T325,117");
// all the bars are joined together and coloured as one
allBars.push(
canadaBar,
usaBar,
ukBar,
franceBar,
germanyBar,
brazilBar,
africaBar,
indiaBar,
chinaBar,
japanBar,
ausBar,
otherLABar,
otherAsiaBar,
otherEuropeBar
);
allBars.attr({fill:"#C1252D", stroke:"none"});
}
// A very similar function to the one above. Each time a link is clicked this function is called passing a number to i which corresponds to a value in the arrays
function animateCountries (i) {
canada_inner.animate({path:"M0," + ((100 - canadaResults[i]) + 5) + " 15," + ((100 - canadaResults[i]) + 10) + innerPath}, speed, easing);
canada_outer.animate({path:"M0," + ((100 - canadaResults[i]) + 5) + " 5," + (100 - canadaResults[i]) + " 20," + ((100 - canadaResults[i]) + 5) + outerPath}, speed, easing);
usa_inner.animate({path:"M0," + ((100 - usaResults[i]) + 5) + " 15," + ((100 - usaResults[i]) + 10) + innerPath}, speed, easing);
usa_outer.animate({path:"M0," + ((100 - usaResults[i]) + 5) + " 5," + (100 - usaResults[i]) + " 20," + ((100 - usaResults[i]) + 5) + outerPath}, speed, easing);
uk_inner.animate({path:"M0," + ((100 - ukResults[i]) + 5) + " 15," + ((100 - ukResults[i]) + 10) + innerPath}, speed, easing);
uk_outer.animate({path:"M0," + ((100 - ukResults[i]) + 5) + " 5," + (100 - ukResults[i]) + " 20," + ((100 - ukResults[i]) + 5) + outerPath}, speed, easing);
france_inner.animate({path:"M0," + ((100 - franceResults[i]) + 5) + " 15," + ((100 - franceResults[i]) + 10) + innerPath}, speed, easing);
france_outer.animate({path:"M0," + ((100 - franceResults[i]) + 5) + " 5," + (100 - franceResults[i]) + " 20," + ((100 - franceResults[i]) + 5) + outerPath}, speed, easing);
germany_inner.animate({path:"M0," + ((100 - germanyResults[i]) + 5) + " 15," + ((100 - germanyResults[i]) + 10) + innerPath}, speed, easing);
germany_outer.animate({path:"M0," + ((100 - germanyResults[i]) + 5) + " 5," + (100 - germanyResults[i]) + " 20," + ((100 - germanyResults[i]) + 5) + outerPath}, speed, easing);
brazil_inner.animate({path:"M0," + ((100 - brazilResults[i]) + 5) + " 15," + ((100 - brazilResults[i]) + 10) + innerPath}, speed, easing);
brazil_outer.animate({path:"M0," + ((100 - brazilResults[i]) + 5) + " 5," + (100 - brazilResults[i]) + " 20," + ((100 - brazilResults[i]) + 5) + outerPath}, speed, easing);
africa_inner.animate({path:"M0," + ((100 - africaResults[i]) + 5) + " 15," + ((100 - africaResults[i]) + 10) + innerPath}, speed, easing);
africa_outer.animate({path:"M0," + ((100 - africaResults[i]) + 5) + " 5," + (100 - africaResults[i]) + " 20," + ((100 - africaResults[i]) + 5) + outerPath}, speed, easing);
india_inner.animate({path:"M0," + ((100 - indiaResults[i]) + 5) + " 15," + ((100 - indiaResults[i]) + 10) + innerPath}, speed, easing);;
india_outer.animate({path:"M0," + ((100 - indiaResults[i]) + 5) + " 5," + (100 - indiaResults[i]) + " 20," + ((100 - indiaResults[i]) + 5) + outerPath}, speed, easing);
china_inner.animate({path:"M0," + ((100 - chinaResults[i]) + 5) + " 15," + ((100 - chinaResults[i]) + 10) + innerPath}, speed, easing);
china_outer.animate({path:"M0," + ((100 - chinaResults[i]) + 5) + " 5," + (100 - chinaResults[i]) + " 20," + ((100 - chinaResults[i]) + 5) + outerPath}, speed, easing);
japan_inner.animate({path:"M0," + ((100 - japanResults[i]) + 5) + " 15," + ((100 - japanResults[i]) + 10) + innerPath}, speed, easing);
japan_outer.animate({path:"M0," + ((100 - japanResults[i]) + 5) + " 5," + (100 - japanResults[i]) + " 20," + ((100 - japanResults[i]) + 5) + outerPath}, speed, easing);
aus_inner.animate({path:"M0," + ((100 - ausResults[i]) + 5) + " 15," + ((100 - ausResults[i]) + 10) + innerPath}, speed, easing);
aus_outer.animate({path:"M0," + ((100 - ausResults[i]) + 5) + " 5," + (100 - ausResults[i]) + " 20," + ((100 - ausResults[i]) + 5) + outerPath}, speed, easing);
otherLA_inner.animate({path:"M0," + ((100 - otherLAResults[i]) + 5) + " 15," + ((100 - otherLAResults[i]) + 10) + innerPath}, speed, easing);
otherLA_outer.animate({path:"M0," + ((100 - otherLAResults[i]) + 5) + " 5," + (100 - otherLAResults[i]) + " 20," + ((100 - otherLAResults[i]) + 5) + outerPath}, speed, easing);
otherEurope_inner.animate({path:"M0," + ((100 - otherEuropeResults[i]) + 5) + " 15," + ((100 - otherEuropeResults[i]) + 10) + innerPath}, speed, easing);
otherEurope_outer.animate({path:"M0," + ((100 - otherEuropeResults[i]) + 5) + " 5," + (100 - otherEuropeResults[i]) + " 20," + ((100 - otherEuropeResults[i]) + 5) + outerPath}, speed, easing);
otherAsia_inner.animate({path:"M0," + ((100 - otherAsiaResults[i]) + 5) + " 15," + ((100 - otherAsiaResults[i]) + 10) + innerPath}, speed, easing);
otherAsia_outer.animate({path:"M0," + ((100 - otherAsiaResults[i]) + 5) + " 5," + (100 - otherAsiaResults[i]) + " 20," + ((100 - otherAsiaResults[i]) + 5) + outerPath}, speed, easing);
}
$('.prediction_1').bind('click', function(e) {
animateCountries(0);
allBars.animate({fill:"#C1252D"}, speed);
e.preventDefault();
return false;
});
$('.prediction_2').bind('click', function(e) {
animateCountries(1);
allBars.animate({fill:"#5F3A5F"}, speed);
e.preventDefault();
return false;
});
$('.prediction_3').bind('click', function(e) {
animateCountries(2);
allBars.animate({fill:"#51A8D0"}, speed);
e.preventDefault();
return false;
});
createCountries(0);
External CSS
This Pen doesn't use any external CSS resources.