<!DOCTYPE html>

<meta charset="utf-8">

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<body>
<div style="margin-bottom:20px;" class="row"><div class="charts"></div></div>
</body>

<script>
var diameter = 1280,
    format = d3.format(",d"),
    color = d3.scale.category20c();
    
// our color categories
var classes = {
    // red
    'embeddedUsers': '#d62728',
    
    // oranges
    'systemUsers': '#ff7f0e',
    'dummyUsers': '#ffbb78',
    
    // light blues
    'cloudUsers': '#17becf',
    'blogUsers': '#9edae5',
    
    // greens
    'funnyUsers': '#2ca02c',
    'entertainmentUsers': '#98df8a',
    
    // purples
    'cvsUsers': '#9467bd',
    'userNames': '#c5b0d5',
    
    // blues
    'softwareUsers': '#1f77b4',
    'default': '#aec7e8'
}

// color lookup function
function getColor(category) {
  return classes[category];
}

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

var svg = d3.select(".charts").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

d3.json("auth_analysis.json", function(error, ret) {
  if (error) throw error;
  receivedData(ret);
});

function receivedData( data ) {

    var root = {children: data}; 
      
    var tree = bubble.nodes(root).filter(function(d) { return !d.children && d.value > 3; });
    
    var node = svg.selectAll(".node")
        .data(tree)
      .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    
    node.append("title")
        .text(function(d) { return d.label + ": " + format(d.value); });
    
    node.append("circle")
        .attr("r", function(d) { return d.r; })
        .style("fill", function(d) { return getColor(d.category); });
    
    node.append("text")
        .attr("dy", ".3em")
        .style("text-anchor", "middle")
        .text(
            function(d) { 
              return d.label.substring(0, d.r); 
              });
     
}

</script>