D3 Examples - Magnitude as a area and color hue

Magnitude as a area and color hue

The dataset for this graph contains name, Interaction score and team to which the player belongs to. I have plotted a bubble chart in which the size of bubble varies with the interaction value for each player.Also the team members who belongs to a particular team are assigned to one color.

Channels used : Identity channe(color hue), magnitude channel (area) Marks : Bubbles.

The discriminability is maintained here by representing each team by particular color which satisfies the colour hue property and the size of each player varies with change in the interaction value. As a result the area size property is satisfied.

xxxxxxxxxx
 
<html>
<head>
<style>
text {
  font: 10px sans-serif;
}
</style>
</head>
<body>
​
​
<script>
function mapEntries(json, realrowlength, skip){
  if (!skip) skip = 0;
  var dataframe = new Array();
  
  var row = new Array();
  for (var i=0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    if (entry.gs$cell.col == '1') {
      if (row != null) {
        if ((!realrowlength || row.length === realrowlength) && (skip  === 0)){
           dataframe.push(row);
        } else {
           if (skip > 0) skip--;
        }
      }
      var row = new Array();
    }
    row.push(entry.content.$t);
  } 
  dataframe.push(row);
  return dataframe;
}
​
function drawBubbleChart(root){
    
   
    var diameter = 960;
    
   
    var color = d3.scale.category10();
    
   
    var bubble = d3.layout.pack().sort(null).size([960,960]).padding(1.5);
   
    var svg = d3.select("body")
                .append("svg")
                .attr("width",960)
                .attr("height", 960)
                .attr("class","bubble");
    
    
    var node = svg.selectAll(".node")
                  .data(bubble.nodes(root)
                  .filter(function(d){ return !d.children;}))
                  .enter()
                  .append("g")
                  .attr("class","node")
                  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  
   node.append("circle")
       .attr("r", function(d) { return d.r; })
       .style("fill", function(d) { return color(d.group)  });
 
   node.append("text")
       .attr("dy", ".3em")
       .style("text-anchor", "middle")
       .text(function(d) { 
              return d.name;
        });
}
​
function render(data){
​
  var dataframe = mapEntries(data,null,2);
  
​
  var root =  {};
    root.name = "Interactions";
    root.children = new Array();
    for (i=0;i<dataframe.length;i++){
      var item = {};
      item.name = dataframe[i][0];
      item.value = Number(dataframe[i][1]);
      item.group = dataframe[i][2];
      root.children.push(item);
    }
    
​
  drawBubbleChart(root);
}
</script>
​
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://spreadsheets.google.com/feeds/cells/1mu_vculjgx5vlbrl69phrrysdxwgcczf6vhtdnyqrwk/od6/public/values?alt=json-in-script&callback=render"></script>
</body>
</html>
    