Gauge

<!DOCTYPE html>
<html lang="en">
<head>

var svg = d3.select( "#viz" )
  .append( "svg" )
  .attr( "width", width )
  .attr( "height", height );

var arc = d3.arc()
  .innerRadius( 50 )
  .outerRadius( 80 )
  .cornerRadius( 5 )
  .padAngle( 0 );

color = [ "#91cf60", "#d9ef8b", "#fee08b", "#fc8d59", "#d73027" ].reverse();

var data = makeData();

var pie = d3.pie()
  .startAngle( -Math.PI / 2 )
  .endAngle( Math.PI / 2 )
  .value( function( d ) {
    return d
  } );

var arcs = svg.selectAll( '.arc' )
  .data( pie( data[ 1 ] ) )
  .enter()
  .append( 'path' )
  .attr( "d", arc )
  .attr( "transform", "translate(200,200)" )
  .style( "fill", function( d, i ) {
    return color[ i ]
  } );

var needle = svg.selectAll( ".needle" )
  .data( data[ 0 ] )
  .enter()
  .append( 'line' )
  .attr( "x1", 0 )
  .attr( "x2", -78 )
  .attr( "y1", 0 )
  .attr( "y2", 0 )
  .style( "stroke", "black" )
  .attr( "transform", function( d ) {
    r = 180 * d / data[ 1 ][ 3 ]
    return " translate(200,200) rotate(" + r + ")"
  } );

d3.select( "#button" )
  .on( "click", function() {
    data = makeData();
    arcs.data( pie( data[ 1 ] ) )
      .transition()
      .attr( "d", arc )
    needle.data( data[ 0 ] )
      .transition()
      .ease( d3.easeElasticOut )
      .duration( 2000 )
      .attr( "transform", function( d ) {
        r = 180 * d / data[ 1 ][ 3 ]
        return " translate(200,200) rotate(" + r + ")"
      } );
  } );

function makeData() {
  newarcsdata = d3.range( 4 )
    .map( function() {
      return d3.randomUniform()();
    } )
    .sort();
  newneedledata = [ d3.randomUniform( 0, newarcsdata[ 3 ] )() ];
  return [ newneedledata, newarcsdata ];
};
  </script>
</body>
</html>

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

https://d3js.org/d3-color.v0.5.min.js

https://d3js.org/d3-interpolate.v0.9.min.js

https://d3js.org/d3-scale-chromatic.v0.3.min.js