Text transition counts up/down

_.md

[ Launch Inlet ]
Gist #2958196 No Previous Gist

config.json

{"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}

inlet.js

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));
                };
            });



});