title: Different colors for each circle - D3 circle pack
body: <p>I have done the bubble chart. But I'm not getting different colors for each bubble. How could I do that? How could I give different colors for each circle? And the circle data with the highest value should always come at the center surrounded by other bubbles.</p>
  
  <p>Snippet:</p>
  
  <pre><code>var diameter = 200,
  format = d3.format(",d"),
  color = ["#7b6888", "#ccc", "#aaa", "#6b486b"];
  
   var bubble = d3.layout.pack()
  .size([diameter, diameter]);
  
     var svg = d3.select("#bubbleCharts").append("svg")
  .attr("width", diameter + 10)
  .attr("height", diameter)
  .attr("class", "bubble");
  
    var a;
  
     d3.json("flare.json", function(error, root) {
     var node = svg.selectAll(".node")
    .data(bubble.nodes(classes(root))
    .filter(function(d) { return !d.children; }))
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.x + 20 + "," + d.y + ")"; });
  
     node.append("circle")
    .attr("r", function(d) { return d.r+ 7; })
    .style("fill", function(d) { 
    for(a in color){
    return color[a]; };} );
  
      node.append("text")
    .attr("dy", ".3em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.value+"%"; });
    });
  
     function classes(root) {
      var classes = [];
  
      function recurse(name, node) {
      if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
        else classes.push({packageName: name, value: node.value});
     }
  
       recurse(null, root);
        return {children: classes};
       }
  </code></pre>
  
  <p>My data is:</p>
  
  <pre><code>   {
       "name": "Spending Activity",
       "children": [
           {"name": "Petrol", "value": 60},
           {"name": "Travel", "value": 10},
           {"name": "Medical", "value": 25},
           {"name": "Shopping", "value": 5}
       ]
     }
  </code></pre>