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=450 data-height=180></div>
</div>

CSS

body {
    background: #eeeeee;
}

.serieschart {
}

.series {
    border: 1px solid #bdc3c7;
    padding: 50px;
    background: #ecf0f1;
}

.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 el = $(".serieschart");//selector
    var corelabels;
    var dropShadowFilter, intenseShadow;
    var width = el.data("width");
    var height = el.data("height");
    var margin = {
        top: 65,
        right: 90,
        bottom: 5,
        left: 150
    };
    var items = [];
    var layerData = [];
    var distancesL0 = [];
    var distancesL1 = [];


    var rawData = [{
        "name": "Twitter",
        "vists": "15 billion",
        "unit": "per day",
        "layer1value": 1500000,
      	"layer2value": 15450

    }, {
        "name": "Facebook",
        "vists": "5 billion",
        "unit": "per day",
        "layer1value": 5000000,
        "layer2value": 2000
    }, {
        "name": "Google",
        "vists": "5 billion",
        "unit": "per day",
        "layer1value": 50000,
        "layer2value": 35000
    }, {
        "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
    }];
		
     var dd1 = [];
    var dd2 = [];

    $.each(rawData, function(k, v){
        dd1.push(v["layer1value"]);
        dd2.push(v["layer2value"]);
    });

    var meansPerGroup = [Math.max.apply(null, dd1), Math.max.apply(null, dd2)];
    
    function getCircleSize(j, key, data) {

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

        var layerArray = [];
        var total = 0;

       ...