ddombrow/jsbin.zulirelu.html

## jsbin.zulirelu.html
<!DOCTYPE html>
<html>
<head>
<script src="http:////cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <svg id="threat" height="200" width="200"></svg>
  </div>
  <script>
    var twoPi = 2 * Math.PI;
    var width = 200;
    var height = 200;
    var progress = 0;
    var total = 100;
    var formatPercent = d3.format(".0%");

    var arc = d3.svg.arc()
        .startAngle(0)
        .innerRadius(65)
        .outerRadius(95);

    var svg = d3.select("#threat");

    var threatDial = svg.append("g").attr("class", "threat-dial");
    threatDial.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    threatDial.append("path")
    .attr("class", "background")
    .attr("d", arc.endAngle(twoPi));

    var foreground = threatDial.append("path")
    .attr("class", "foreground");

    var text = threatDial.append("text")
    .attr("y", 10)
    .attr("text-anchor", "middle")
    .attr("class", "scoreNum");

    var text2 = threatDial.append("text")
    .attr("y", 35)
    .attr("text-anchor", "middle")
    .attr("class", "threatLabel");
    text2.text("Risk Score");

    var animate = function(score){
        var s = score;
        var percentage = score / 100;
        var i = d3.interpolate(progress, percentage);

        d3.transition().duration(1200).tween("progress", function () {
            return function (t) {
                progress = i(t);

                var severityClass = "foreground"
                if (score > 0 && score < 25) {
                  severityClass = "low";
                }
                if (score >=25 && score < 50 ) {
                  severityClass = "medium";
                }
                if (score >= 50 && score < 75) {
                  severityClass = "high"
                }
                if (score )
                foreground.attr("class", severityClass);

                foreground.attr("d", arc.endAngle(twoPi * progress));
                text.attr("class", "scoreNum " + severityClass);
                text.text(Math.floor(progress*100));
            };
        });
    };


    setTimeout(function () {
      animate(22);
      setTimeout(function () {
        animate(45);
        setTimeout(function () {
          animate(60);
              setTimeout(function () {
                animate(85);
              }, 1000);
        }, 1000);
      }, 1000);
    }, 1000);


  </script>
</body>
</html>

## jsbin.zulirelu.less
.threat-dial {
  .background {
    fill: #E1E1E1;
    stroke: #CCCCCC;
    stroke-width: 1px;
  }

  .foreground {
    fill: #FF0000;
  }

  .low {

    fill: #2ECCFA;
  }

  .medium {
    fill: #3ADF00;
  }

  .high {
    fill: #FE9A2E;
  }

  .critical {
    fill: #FF0000;
  }

  .threatLabel {
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
  }

  .scoreNum {
    font-family: Helvetica, sans-serif;
    font-size: 64px;
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http:////cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div>
	<svg id="threat" height="200" width="200"></svg>
	</div>
	<script>
	var twoPi = 2 * Math.PI;
	var width = 200;
	var height = 200;
	var progress = 0;
	var total = 100;
	var formatPercent = d3.format(".0%");

	var arc = d3.svg.arc()
	.startAngle(0)
	.innerRadius(65)
	.outerRadius(95);

	var svg = d3.select("#threat");

	var threatDial = svg.append("g").attr("class", "threat-dial");
	threatDial.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	threatDial.append("path")
	.attr("class", "background")
	.attr("d", arc.endAngle(twoPi));

	var foreground = threatDial.append("path")
	.attr("class", "foreground");

	var text = threatDial.append("text")
	.attr("y", 10)
	.attr("text-anchor", "middle")
	.attr("class", "scoreNum");

	var text2 = threatDial.append("text")
	.attr("y", 35)
	.attr("text-anchor", "middle")
	.attr("class", "threatLabel");
	text2.text("Risk Score");

	var animate = function(score){
	var s = score;
	var percentage = score / 100;
	var i = d3.interpolate(progress, percentage);

	d3.transition().duration(1200).tween("progress", function () {
	return function (t) {
	progress = i(t);

	var severityClass = "foreground"
	if (score > 0 && score < 25) {
	severityClass = "low";
	}
	if (score >=25 && score < 50 ) {
	severityClass = "medium";
	}
	if (score >= 50 && score < 75) {
	severityClass = "high"
	}
	if (score )
	foreground.attr("class", severityClass);

	foreground.attr("d", arc.endAngle(twoPi * progress));
	text.attr("class", "scoreNum " + severityClass);
	text.text(Math.floor(progress*100));
	};
	});
	};


	setTimeout(function () {
	animate(22);
	setTimeout(function () {
	animate(45);
	setTimeout(function () {
	animate(60);
	setTimeout(function () {
	animate(85);
	}, 1000);
	}, 1000);
	}, 1000);
	}, 1000);


	</script>
	</body>
	</html>
	.threat-dial {
	.background {
	fill: #E1E1E1;
	stroke: #CCCCCC;
	stroke-width: 1px;
	}

	.foreground {
	fill: #FF0000;
	}

	.low {

	fill: #2ECCFA;
	}

	.medium {
	fill: #3ADF00;
	}

	.high {
	fill: #FE9A2E;
	}

	.critical {
	fill: #FF0000;
	}

	.threatLabel {
	font-family: Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	}

	.scoreNum {
	font-family: Helvetica, sans-serif;
	font-size: 64px;
	}
	}