JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="graph1" class="container" style="text-align:center">
  <div id="pie-chart" class="pie-chart"></div>
  <div id="slider" class="slider" style="width:300px;margin-left:auto;margin-right:auto;margin-top:20px"></div>
</div> 
<div id="graph2" class="container" style="text-align:center">
  <div id="pie-chart" class="pie-chart"></div>
  <div id="slider" class="slider" style="width:300px;margin-left:auto;margin-right:auto;margin-top:20px"></div>
</div>
<div id="graph3" class="container" style="text-align:center">
  <div id="pie-chart" class="pie-chart"></div>
  <div id="slider" class="slider" style="width:300px;margin-left:auto;margin-right:auto;margin-top:20px"></div>
</div>
<div id="graph4" class="container" style="text-align:center">
  <div id="pie-chart" class="pie-chart"></div>
  <div id="slider" class="slider" style="width:300px;margin-left:auto;margin-right:auto;margin-top:20px"></div>
</div>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
    top: 0px;
  font-weight: 300;
}
.container {
    display: inline-block;
    border: inset 2px #676767;
    border-radius: 12px;
    padding: 5px;
    float: left;
    margin-top: 0px;
    margin-bottom: 0px;
    clear: none;
}
.slider {
    display: none;
}
#pie-chart {
  background-color: #ffffff;
  /*border: 1px solid gray;*/
  font: 10px sans-serif;
  height: 200px;
  text-shadow: none;
  width: 250px;
  margin-left: auto;
  margin-right:auto;
}
#pie-chart .total{
  font-size: 18px;
  font-weight: bold;
}
#pie-chart .units{
  fill: gray;
  font-size: 12px;
    display: none;
}
#pie-chart .label{
  fill: #CCC;
  font-size: 12px;
  font-weight: bold;
    display: none;
}
#pie-chart .value{
  font-size: 12px;
  font-weight: bold;
}

#slider label {
    position: absolute;
    width: 20px;
    margin-left: -20px;
    text-align: center;
    margin-top: 30px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

function TestFunction(target, dataIndex) {
var w = 240;
var h = 200;
var r = 60;
var ir = 37;
var textOffset = 24;
var tweenDuration = 1050;

//OBJECTS TO BE POPULATED WITH DATA LATER
var lines, valueLabels, nameLabels;
var pieData = [];    
var oldPieData = [];
var filteredPieData = [];

//D3 helper function to populate pie slice parameters from array data
var donut = d3.layout.pie().value(function(d){
  return d.itemValue;
}).sort(null);

//D3 helper function to create colors from an ordinal scale
var color = d3.scale.category20c();

//D3 helper function to draw arcs, populates parameter "d" in path object
var arc = d3.svg.arc()
  .startAngle(function(d){ return d.startAngle; })
  .endAngle(function(d){ return d.endAngle; })
  .innerRadius(ir)
  .outerRadius(r);

///////////////////////////////////////////////////////////
// GENERATE FAKE DATA /////////////////////////////////////
///////////////////////////////////////////////////////////

var data;

var dataStructure = [
   {
      "data":[
         {
            "itemLabel":"Social Media",
            "itemValue":90
         },
         {
            "itemLabel":"Blogs",
            "itemValue":30
         },
         {
            "itemLabel":"Text Messaging",
            "itemValue":60
         },
         {
            "itemLabel":"Email",
            "itemValue":90
         },
      ],
      "label":"2007"
   },
   {
      "data":[
         {
            "itemLabel":"Social Media",
            "itemValue":80
         },
         {
            "itemLabel":"Blogs",
            "itemValue":20
         },
         {
            "itemLabel":"Text Messaging",
            "itemValue":70
         },
         {
            "itemLabel":"Email",
            "itemValue":90
         },
      ],
      "label":"2009"
   },   
   {
      "data":[
         {
            "itemLabel":"Social Media",
            "itemValue":70
         },
         {
            "itemLabel":"Blogs",
            "itemValue":20
         },
   ...