Skip to content

Instantly share code, notes, and snippets.

@krish85

krish85/index.html

Last active August 29, 2015 14:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save krish85/d57a1d1afb37131e109c to your computer and use it in GitHub Desktop.
Save krish85/d57a1d1afb37131e109c to your computer and use it in GitHub Desktop.
Download ZIP
Shrink Circle
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Shrinking Bubble</title>
<style>
.outer {
width: 1050px;
height: 550px;
overflow: auto;
}
.inner {
width: 1150px;
height:850px;
}
.bubble text,
.bubble rect{
position: fixed;
bottom: 0;
right: 0;
width: 200px;
border: 3px solid #8AC007;
}
</style>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div class="outer">
<div class="inner">
<div class="span8" id="graph">
</div>
</div>
</div>
<script>
var width = 1250, height = 950, padding = 20;
var maxR = 35, minR =10, duration = 10;
var years = [ 2015, 2016, 2017];
var color = d3.scale.category10();
var data = [
{"industry": "Oil", "shareHistory": [
{"year": 2015, "precentage": 55},
{"year": 2016, "precentage": 65},
{"year": 2017, "precentage": 70}
]},
{"industry": "Banking", "shareHistory": [
{"year": 2015, "precentage": 60},
{"year": 2016, "precentage": 70},
{"year": 2017, "precentage": 40}
]},
{"industry" : "Medical", "shareHistory": [
{"year": 2015, "precentage": 76},
{"year": 2016, "precentage": 64},
{"year": 2017, "precentage": 56}
]
},
{"industry": "Insurance", "shareHistory": [
{"year": 2015, "precentage": 55},
{"year": 2016, "precentage": 65},
{"year": 2017, "precentage": 75}
]},
{"industry": "Coal", "shareHistory": [
{"year": 2015, "precentage": 90},
{"year": 2016, "precentage": 70},
{"year": 2017, "precentage": 40}
]},
{"industry" : "Steel", "shareHistory": [
{"year": 2015, "precentage": 66},
{"year": 2016, "precentage": 44},
{"year": 2017, "precentage": 56}
]
},
{"industry": "Petrolium", "shareHistory": [
{"year": 2015, "precentage": 55},
{"year": 2016, "precentage": 65},
{"year": 2017, "precentage": 75}
]},
{"industry": "Electronics", "shareHistory": [
{"year": 2015, "precentage": 60},
{"year": 2016, "precentage": 50},
{"year": 2017, "precentage": 40}
]},
{"industry" : "Software", "shareHistory": [
{"year": 2015, "precentage": 76},
{"year": 2016, "precentage": 64},
{"year": 2017, "precentage": 86}
]
}
];
var rScale = d3.scale.linear().domain([0,100]).range([0,maxR]);
//var x = (width - padding)/data.length ; //300
var svg = d3.select("#graph").append("svg").attr("width", width).attr("height",height)
.attr("class", "bubble");
for (var z=0; z < data.length; z++) {
svg.selectAll("g").data(data[z].shareHistory).enter().append("circle")
.attr("cx", function(d,i){
return 100 + i * 150;
})
.attr("cy", 100 + z * 100)
.attr("r", maxR)
.attr("fill", function(d,i){
return color(z);
})
.on("mouseover", function(d,i){
d3.select(this).append("title")
.text(function(){
return d.precentage + " % probability";
})
});
svg.selectAll("g").data(data[z].shareHistory).enter().append("circle")
.attr("cx", function(d,i){
return 100 + i * 150;
})
.attr("cy", 100 + z * 100)
.attr("r",maxR)
.attr("fill", "white")
.call(transition,maxR, function(d,i){
//per = data[z].shareHistory[i].precentage;
return rScale(data[z].shareHistory[i].precentage);
})
.on("mouseover", function(d,i){
d3.select(this).append("title")
.text(function(){
//return 50;
return d.precentage + " % probability";
})
});
svg.selectAll("g").data(data[z].shareHistory).enter().append("text")
.attr("x",function(d,i){
return 92 + i * 150;
})
.attr("y",106 + z * 100)
.text(function(d,i){
return data[z].shareHistory[i].precentage;
//return "Hi";
});
}
function transition(element, start, end){
element.transition()
.duration(750)
.attr("r", end);
}
var txt = svg.selectAll("text").data(years).enter();
txt.append("text")
.attr("transform", "translate(90,"+20+")")
.text("2015");
txt.append("text")
.attr("transform", "translate(240,"+20+")")
.text("2016");
txt.append("text")
.attr("transform", "translate(390,"+20+")")
.text("2017");
svg.selectAll("rect").data(data).enter().append("rect")
.attr("x",700)
.attr("y",function(d,i){ if(i == 0){ return 35;} else {
return (i+1)*35;}})
.attr("height", 15)
.attr("width", 15)
.attr("fill",function(d,i){
return color(i);
})
.attr("class","rect");
svg.selectAll("g").data(data).enter().append("text")
.attr("x",730)
.attr("y",function(d,i){ if(i == 0){ return 47;} else {
return (i+1)*35 + 12;}})
.attr("class","label")
.text(function(d){
return d.industry + " Industry";
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment