Status Monitor: Bar Chart

A bar chart with value and color transitions. Could be used for status monitors (ie. CPU/Memory/Disk usage).

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

svg {
  border: 1px solid;
}

text {
  fill: #3f3f3f;
  font-size: 100px;
  font-weight: 600;
  font-family: Helvetica;
  margin-top: 100px;
}

</style>
<body>

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

var width = 960;
var height = 500; 
var scale_factor = 0.75;

// 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 bar = svg.selectAll("rect")             // select non-existent "rects"
             .data(value)                   // take every element of list data
             .enter()                       // and enter a...
             .append("rect")                // a "rect"
             .attr("x", 0)                  // with x = 0
             .attr("y", height - value)     // and y = 0
             .attr("width", width)          // with width = w
             .attr("height", value)         // and height data
   
// label
var label = svg.append("text")
              .text(100*value/height + "%")
              .attr("x", width/2 - 100)
              .attr("y", value);

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

</script>

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