Skip to content

Instantly share code, notes, and snippets.

@phoebebright
Created January 4, 2013 11:44
Show Gist options
  • Save phoebebright/4452007 to your computer and use it in GitHub Desktop.
Save phoebebright/4452007 to your computer and use it in GitHub Desktop.
Text transition counts up/down
{"description":"Text transition counts up/down","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.6204455051710421,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"hidepanel":false}
var textstring = "50";
var textx = 120;
var texty = 314;
var fontsize = 253;
var squarex = 102;
var squarey = 73;
var squaresize = 300;
var squarefill = "#005A20";
var squareopacity = 0.4608;
var svg = d3.select("svg")
var square = svg.append("svg:rect")
.attr("x", squarex)
.attr("y", squarey)
.attr("width", squaresize)
.attr("height", squaresize)
.style("fill", squarefill)
.style("opacity", squareopacity);
var text = svg.append("svg:text")
.attr("x", textx)
.attr("y", texty)
.text(textstring)
.attr("stroke", "red")
.attr("class", "letter")
.style("font-size", fontsize)
.on("click", function() {
var randomnumber=Math.floor(Math.random()*101)
d3.select(this).transition()
.tween("text", function(d, i, a) {
var i = d3.interpolateRound(parseInt(this.textContent), randomnumber);
return function(t){
this.textContent = Math.round(i(t));
};
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment