JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

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

JavaScript

$(document).ready(function() {

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


  var width = 700;
  var height = 500;
  var margin = {
    top: 120,
    right: 100,
    bottom: 30,
    left: 100
  }

  //serieschart
  var svg = d3.select(".serieschart").append("svg")
    .attr("class", "serieschart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


  var coredata = [
    [5000, 1500, 1500, 900, 601, 400], //layer1
    [30, 100 , 1000, 200, 1000, 20] //layer2
  ];

  var items = [];

  $.each(coredata, function(layer, value) {
    $.each(value, function(j, v) {
      var obj = {
        "l": layer,
        "j": j,
        "value": v
      };
      items.push(obj);
    });
  });


items.sort(function(a, b) {
    return parseFloat(b.value) - parseFloat(a.value);
});

  var circlelayer = svg.append("g")
    .attr("class", "circlelayer");

  var circle = circlelayer.selectAll("circle")
    .data(items);

  circle.enter().append("circle")
    .attr("class", function(d, i) {
    	console.log("d",d);
      if (d.l == 0) {
        return "blue";
      }
      return "gold";
    })
    .attr("cy", 60)
    .attr("cx", function(d, i) {
    	console.log("d",d);
      return (d.j * 60) + 10;
    })
    .attr("r", function(d, i) {
   ...