Status Monitor: Pulsating Ball

Variation on the status monitor bar chart with a pulsating ball. I prefer to have the ball outgrow the svg but you can set "r" to max-out at svg height/width to keep full ball even at 100%.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  border: 1px solid;
}

text {
  fill: white;
  font-size: 100px;
  font-weight: 600;
  font-family: Helvetica;
}

</style>
<body>

<svg width="960" height="500" id="chart"></svg>
</body>

var width = 960;
var height = 500;

// our "random" status value
var value = [Math.round(Math.random()*height)];  
    console.log(value);

//Create SVG element
var svg = d3.select("#chart")               // select DOM svg with id "chart"

var ball = svg.selectAll("circle")             // select non-existent "rects"
             .data(value)                   // take every element of list data
             .enter()                       
             .append("circle")               
             .attr("cx", width/2)            
             .attr("cy", height/2 )          
             .attr("r", value)         
           
   
// label
var label = svg.append("text")
              .text(100*value/height + "%")
              .attr("x", width/2 - 100)
              .attr("y", height/2 + 50);

// create transition to a new value/color
setInterval(function () { 
  var newval = [Math.round(Math.random()*height)];                           // new random number for transition
  var ballcolor = "rgb("+ 255*newval/height +", 0, 100)"                         // new color for transition
      ball.transition().attr("y", height - newval)
                      .attr("r", newval )    // transition the bar
                      .attr("fill", ballcolor);

//var labelcolor = "rgb("+ 255*newval/height+255 +","+ 255*newval/height+255 +","+ 255*newval/height+255 +" )";                                       
    label.transition().text(100*newval/height + "%");   		// transition label

}, 750);

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js