title: D3.js Gauge look like Telerik Radial Gauge
body: <p>Hello I need help to add gray (Minor and Major) graduation lines inside the gauge to capture more precisely the position of the needle. Also if you have any idea how we could put text to Major graduation lines.</p>
  
  <p>For my sample I would required 7 Major graduation lines divided by 10 minor separations (to look exactly like the Telerik Gauge).</p>
  
  <p>Here is my implementation : <a href="http://jsfiddle.net/8svg5/" rel="nofollow">http://jsfiddle.net/8svg5/</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;a id="myTooltip" title="This is my message"&gt;&lt;/a&gt;
          &lt;div id="svgTarget"&gt;&lt;/div&gt;
      &lt;/div&gt;
          &lt;script&gt;
          $(function () {
  
              var gaugeRanges = [
                  {
                      From: 1.5,
                      To: 2.5,
                      Color: "#8dcb2a"
                  }, {
                      From: 2.5,
                      To: 3.5,
                      Color: "#ffc700"
                  }, {
                      From: 3.5,
                      To: 4.5,
                      Color: "#ff7a00"
                  },
                  {
                      From: 4.5,
                      To: 6,
                      Color: "#c20000"
                  }];
  
              $("#svgTarget").mttD3Gauge({ data: gaugeRanges });
  
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  (function ($) {
      $.fn.mttD3Gauge = function (options) {
          var settings = $.extend({
              width: 300,
              innerRadius: 130,
              outterRadius: 145,
              data: []
          }, options);
  
          this.create = function () {
              this.html("&lt;svg class='mtt-svgClock' width='" + settings.width + "' height='" + settings.width + "'&gt;&lt;/svg&gt;");
              var maxLimit = 0;
              var minLimit = 9999999;
              var d3DataSource = [];
              var d3TickSource = [];
              //Data Genration
              $.each(settings.data, function (index, value) {
                  d3DataSource.push([value.From, value.To, value.Color]);
                  if (value.To &gt; maxLimit) maxLimit = value.To;
                  if (value.From &lt; minLimit) minLimit = value.From;
              });
  
              if (minLimit &gt; 0) {
                  d3DataSource.push([0, minLimit, "#d7d7d7"]);
              }
  
              var pi = Math.PI;
  
              //Control Genration
              var vis = d3.select(this.selector + " .mtt-svgClock");
              var translate = "translate(" + settings.width / 2 + "," + settings.width / 2 + ")";
              var cScale = d3.scale.linear().domain([0, maxLimit]).range([-120 * (pi / 180), 120 * (pi / 180)]);
              var arc = d3.svg.arc()
                  .innerRadius(settings.innerRadius)
                  .outerRadius(settings.outterRadius)
                  .startAngle(function (d) { return cScale(d[0]); })
                  .endAngle(function (d) { return cScale(d[1]); });
  
  
  
              var tickArc = d3.svg.arc()
                  .innerRadius(settings.innerRadius - 20)
                  .outerRadius(settings.innerRadius - 2)
                  .startAngle(function (d) { return cScale(d[0]); })
                  .endAngle(function (d) { return cScale(d[1]); });
  
              for (var i = 0; i &lt; 10; i++) {
                  var point = (i * maxLimit) / 10.0;
                  d3TickSource.push([point, point +1, "#d7d7d7"]);
              }
  
              vis.selectAll("path")
                  .data(d3DataSource)
                  .enter()
                  .append("path")
                  .attr("d", arc)
                  .style("fill", function (d) { return d[2]; })
                  .attr("transform", translate);
  
              return this;
          };
  
          return this.create();
      };
  
  }(jQuery));
  
  enter code here
  </code></pre>
  
  <p>Here is the link of the page of what i'm trying to achieve with D3.js
  <a href="http://demos.telerik.com/aspnet-ajax/gauge/examples/types/radialgauge/defaultcs.aspx?#qsf-demo-source" rel="nofollow">http://demos.telerik.com/aspnet-ajax/gauge/examples/types/radialgauge/defaultcs.aspx?#qsf-demo-source</a></p>
  
  <p>Any help will be greatly appreciated!</p>