D3 Arc

by Brandon

HTML

<div id="dial1"><span id="a"></span></div>

<div id="dial2"><span id="b"></span></div>
<div id="dial3"><span id="c"></span></div>

<div id="dial4"><span id="d"></span></div>

CSS

div {
  width:  300px;
  height: 300px;
  background-color:#fff; /*rgb(230, 230, 235);*/
  display: inline-block;
}

JavaScript

function gauge(chartSelect, percent) {
  var needle = [.75, 0.05],
      pivot = [0.10, 0.05];
  var domain = [0, .34, .35, .49, .5, .94, .95, 1],
      range = [-170, -117, -113, -2, 0, 113, 117, 170],
      w = 256,
      h = 256,
      m = [0, 0, 0, 0];
  var wm = w - m[1] - m[3],
      hm = h - m[0] - m[2],
      a = d3.scale.linear().domain(domain).range(range);
  var r = Math.min(wm / 2, hm / 2);
  var radius = 50;
  var ranges = [{
    start: -3,
    size: 1,
    gradient: "#red"
  }, {
    start: -2,
    size: 2,
    gradient: "#orange"
  }, {
    start: 0,
    size: 2,
    gradient: "#yellow"
  }, {
    start: 2,
    size: 1,
    gradient: "#green"
  }, ];

  var g = d3.select(chartSelect).select('g');
   
  if (g.empty()) {    
    
    
  var arc = d3.svg.arc()
    .innerRadius(radius * 2 - 5)
    .outerRadius(radius * 2)
    .startAngle(function(d, i) {
      return d.start + 0.025;
    })
    .endAngle(function(d, i) {
      return (d.start + d.size) - 0.025;
    });

  var chart = d3.select(chartSelect).append("svg:svg")
    .attr("class", "chart")
    .attr("viewBox", "0 0 300 300")
    .append("svg:g")
    .attr("transform", "translate(150 150)");


  var defs = chart.append("svg:defs")
 
  g =  d3.select(chartSelect).select('g');
  g.append('svg:circle')
    .attr('r', radius * 2.2)
    .style('fill', 'url(#outerGradient)')
    .attr('filter', 'url(#dropShadow)');

  g.append('svg:circle')
    .attr('r', radius * 2.125)
    .style('fill', 'url(#innerGradient)');

  g.append('svg:circle')
    .attr('r', radius * 2.1)
    .style('fill', 'url(#faceGradient)');



  var red_gradient = defs.append("svg:linearGradient")
    .attr("id", "red")
    .attr("x1", "0%")
    .attr("y1", "100%")
    .attr("x2", "0%")
    .attr("y2", "0%")
    .attr("spreadMethod", "pad");

  red_gradient.append("svg:stop")
    .attr("offset", "50%")
    .attr("stop-color", "red")
    .attr("stop-opacity", 1);

  red_gradient.append("svg:stop")
    .attr("offset", "100%")
   ...