Skip to content

Instantly share code, notes, and snippets.

@abhishekpolavarapu

abhishekpolavarapu/README.md

Last active February 17, 2016 08:51
Show Gist options
  • Save abhishekpolavarapu/f182a73ad607b05bfbd1 to your computer and use it in GitHub Desktop.
Save abhishekpolavarapu/f182a73ad607b05bfbd1 to your computer and use it in GitHub Desktop.
Download ZIP
Magnitude as a area and color hue
Raw
README.md

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.

R image

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.

Raw
data.tsv
We can make this file beautiful and searchable if this error is corrected: No tabs found in this TSV file in line 0.
Name Interaction Team
Alice 26 A
Bob 14 B
Chole 200 C
Dave 7 A
Eric 35 B
Fiannula 99 C
Geoff 16 A
Hamid 10 B
Ian 8 C
Jane 3 A
Kinga 9 B
Leo 17 C
Mina 16 A
Noirin 1 B
Raw
index.html
<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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment