tweening example

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0; 
    },
    button {
      margin: 0 7px 0 0;
      background-color: #f5f5f5;
      border: 1px solid #dedede;
      border-top: 1px solid red;
      border-left: 1px solid pink;
      fill: blue;
			border: solid thin green;
      font-size: 18px;
      line-height: 130%;
      text-decoration: none;
      font-weight: bold;
      color: #565656;
      cursor: pointer;
		},
    .countdown{
      width: 150px;
      height: 150px;
      font-size: 5em;
      font-weight: bold;
		}
    
  </style>
</head>

<body>
<script type="text/javascript"> 
var body = d3.select("body"), duration = 5000; 
 
body.append("div").append("input") 
        .attr("type", "button") 
        .attr("class", "countdown") 
        .attr("value", "0") 
        .style("width", "150px") 
        .transition().duration(duration).ease(d3.easeLinear) 
            .style("width", "400px") 
            .attr("value", "9"); 
 
body.append("div").append("input") 
        .attr("type", "button") 
        .attr("class", "countdown") 
        .attr("value", "0") 
        .transition().duration(duration).ease(d3.easeLinear) 
.styleTween("width", widthTween) 
            .attrTween("value", valueTween); 
 
 
function widthTween(a){ 
var interpolate = d3.scaleQuantize() 
            .domain([0, 1]) 
            .range([50, 200, 250, 350, 400]); 
 
              return function(t){ 
              return interpolate(t) + "px"; 
        }; 
    } 
 
function valueTween(){ 
var interpolate = d3.scaleQuantize()  
            .domain([0, 1]) 
            .range([1, 2, 3, 4, 5, 6, 7, 8, 9]); 
 
             return function(t){  
             return interpolate(t); 
        }; 
    }         
</script> 
</body>

https://d3js.org/d3.v4.min.js