Transitioning numbers using d3.js

HTML

<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<h2>Transitioning numbers using d3.js</h2>

<h3 data-value="0" id="the-number">0</h3>

<input type="number" value="0" id="new-number" step="100" />

JavaScript

var formatNumber = d3.format(",d");
var createNumericTween = function (oldValue, newValue) {
  return function() {
    var i = d3.interpolateRound(oldValue, newValue);
    return function(t) {
      this.textContent = formatNumber(i(t));
    };
  };
};

var transitionNumber = function (sel, newValue, options) {
  var params = _.extend({ initialValue: 0, duration: 500, tween: createNumericTween, format: formatNumber  }, options);

  var old = parseInt(sel.attr('data-value')) || params.initialValue;
  sel.attr('data-value', newValue)
    .transition()
      .duration(params.duration)
      .tween('text', params.tween(old, newValue, params.format));
};

var newNumber = document.getElementById('new-number'),
    selection = d3.select('#the-number');

newNumber.addEventListener('change', function () {
  transitionNumber(selection, newNumber.value);
});