JSFiddle - React, Tailwind, and code Playground

Animated Raphaël.js svg bar-chart

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<!-- 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>

CSS

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;
 }

JavaScript

// 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...