JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="holder">
  <div class="serieschart" data-role="serieschart" data-width=300 data-height=300></div>
</div>

CSS

body {
  background: #eeeeee;
}

.serieschart {}

.gold {
  fill: #f38d04;
}

.blue {
  fill: #04b9ee;
}

.label-layer1 {
  font-size: 14px;
  font-family: "Helvetica";
  fill: orange;
}

.label-layer0 {
  font-weight: bold;
  font-size: 12px;
  font-family: "Helvetica";
  font-variant: small-caps;
  fill: #34495e;
}

.label-layer2 {
  font-weight: bold;
  font-size: 12px;
  font-family: "Helvetica";
  font-variant: small-caps;
  fill: #2980b9;
}

.label-layer3 {
  font-size: 14px;
  font-family: "Helvetica";
  font-variant: small-caps;
  //fill: #3498db;
}

.pointer0 {
  fill: none;
  stroke: #34495e;
}

.pointer1 {
  fill: none;
  stroke: orange;
}

.pointer2 {
  fill: none;
  stroke: none;
}

JavaScript

$(document).ready(function() {

  // ------------------------------------------------------------------------------------
  // Declarations 
  // ------------------------------------------------------------------------------------


  var rawData = [{
    "name": "Twitter",
    "vists": "15 billion",
    "unit": "per day",
    "layer1value": 15000000,
    "layer2value": 450
  }, {
    "name": "Facebook",
    "vists": "5 billion",
    "unit": "per day",
    "layer1value": 5000000,
    "layer2value": 2000
  }, {
    "name": "Google",
    "vists": "5 billion",
    "unit": "per day",
    "layer1value": 5000000,
    "layer2value": 25000
  }, {
    "name": "Netflix",
    "vists": "10 billion",
    "unit": "per day",
    "layer1value": 3000000,
    "layer2value": 2200
  }, {
    "name": "Ebay",
    "vists": "8 billion",
    "unit": "per day",
    "layer1value": 2500000,
    "layer2value": 17700
  }, {
    "name": "Klout",
    "vists": "2 billion",
    "unit": "per day",
    "layer1value": 1000000,
    "layer2value": 45
  }];


  function getCircleSize(j, key, data) {

    function getPercentage(value, total) {
      return ((value / total) * 100);
    }

    var layerArray = [];
    var total = 0;
    $.each(data, function(index, value) {
      layerArray.push(value[key]);
      total += value[key];
    });

    var layerSet = [];
    var ratios = [100, 25];
    for (var i = 0; i < layerArray.length; i++) {
      layerSet.push(parseInt(getPercentage(layerArray[i], total) * ratios[j - 1], 10));
    }

    return layerSet;
  }

  function getCoreData(d) {

    var returneddata = [];
    for (var i = 1; i <= 2; i++) {
      returneddata.push(getCircleSize(i, "layer" + i + "value", d));
    }

    return returneddata;
  }

  var coredata = getCoreData(rawData);

  function getLayerLabel(key, d) {
    var layer = [];

    $.each(d, function(index, value) {
      layer.push(value[key]);
    });

    return layer;
  }


  function getCoreLabels(d) {
    var corelabels = [];
  ...