title: D3JS filler gauge
body: <p>Most of the gauge charts are donuts shape, but I am looking to a fill bar dynamic graph similar to the one <a href="http://www.ikangae.net/wp-content/uploads/2014/07/Gauge_charts.png" rel="nofollow noreferrer">here</a>.</p>
  
  <p>I am not sure if there is any d3 example which can be dynamic referenced to a dynamic value such as the mouse position as I made in <a href="https://jsfiddle.net/iblasi/cvxx069t/" rel="nofollow noreferrer">this JSfiddle example</a> where a donut shape gauge is used with the code I found on <a href="http://bl.ocks.org/tomerd/1499279" rel="nofollow noreferrer">http://bl.ocks.org/tomerd/1499279</a> example with some modifications:</p>
  
  <pre><code>var gauges = [];
  
  var w = window.innerWidth;
  var h = window.innerHeight;
  
  function createGauge(name, label, min, max)
  {
      var config = 
      {
          size: 120,
          label: label,
          min: undefined != min ? min : 0,
          max: undefined != max ? max : 100,
          minorTicks: 5
      }
  
      gauges[name] = new Gauge(name + "GaugeContainer", config);
      gauges[name].render();
  }
  
  function createGauges()
  {
      createGauge("xMouse", "X - Mouse");
      createGauge("yMouse", "Y - Mouse");
  }
  
  function initialize()
  {
      createGauges();
      $( document ).on( "mousemove", function( event ) {
          gauges["xMouse"].redraw(100*event.pageX/w);
          gauges["yMouse"].redraw(100*event.pageY/h);
      });
  }
  </code></pre>
  
  <p>I know that there are other SVG such as the rectangle, but which is the best way to make a "filler bar" gauge?</p>
  
  <p><a href="https://i.stack.imgur.com/ZF6Sj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZF6Sj.png" alt="enter image description here"></a></p>