Skip to content

Instantly share code, notes, and snippets.

@krish85

krish85/index.html

Last active August 29, 2015 14:27
Show Gist options
  • Save krish85/158b7b8f15e0b14b1a51 to your computer and use it in GitHub Desktop.
Save krish85/158b7b8f15e0b14b1a51 to your computer and use it in GitHub Desktop.
Download ZIP
Animated Bar
Raw
index.html
<!DOCTYPE htm>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<meta http-equiv="refresh" content="7">
<style type="text/css">
.text{
font-size: 150%;
}
</style>
</head>
<body>
<script type="text/javascript">
var width = 700, height = 500, padding = 20, barPad=5;
var data = ["90","80","70","60","50","40","30","20"];
var barHeight = ((height - 140) - (barPad * (data.length-1))) / data.length ;
var barWidth = d3.scale.linear().domain([d3.min(data, function(d){ return d;}), d3.max(data, function(d){ return d;})]).range([padding+5, width - 200]);
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
svg.append("rect").attr("x", padding).attr("y", padding)
.attr("height", height-100).attr("width", width-100).attr("fill","black");
svg.append("line").attr("x1", padding*2).attr("y1", padding*2)
.attr("x2", padding*2).attr("y2", padding*2).style("stroke","white")
.call(transition);
svg.selectAll("g").data(data).enter().append("rect")
.attr("x", padding*2 + 5)
.attr("y", function(d,i){
return padding*2 + (i * barHeight) + (i * barPad);
})
.attr("height", barHeight)
.attr("width", 0)
.attr("fill","black")
.call(transRect, function(d) {
console.log(d);
return d;
});
svg.selectAll("g").data(data).enter().append("text")
.attr("x", padding*2 + 10)
.attr("y", function(d,i){
return padding*2 + (i * barHeight) + (i * barPad) + (barHeight/2) + 5;
})
// .text(function(d){ return 1;})
.attr("class","text")
.attr("fill","white")
.call(transText, function(d) {
return d;
});
function transition(element){
element.transition()
.attr("y2", (height- 100))
.duration(1000).delay(100);
}
function transRect(element,w){
element.transition()
.attr("height", barHeight)
.attr("width", function(w){ return barWidth(w);})
.attr("fill","gray")
.duration(7000).delay(100);
}
function transText(element,w){
element.transition()
.attr("x", function(w){ return barWidth(w) + 60;})
.duration(7000).delay(100)
.tween('text', function(d) {
var currentValue = +this.textContent;
var interpolator = d3.interpolateRound( currentValue, d );
return function( t ) {
this.textContent = interpolator( t ) + "%";
}
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment