<!-- 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);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js