D3 Examples - debug

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
​
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<script>
​
var width = 960
    height = 500
​
var arc_colors = ["#F3A54A", "#AA7CAA", "#CCDE66", "#4B90A6"]
var inner_radius = 60
var radius_width = 10
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
​
var arc = d3.arc()
​
var data = []
for (var k=0; k<4; k++){
​
  var score = 0.7 * Math.random()
  var startAngle = Math.random() * 2 * Math.PI
  var endAngle = startAngle + score * 2 * Math.PI
  data.push({
          startAngle: startAngle,
          endAngle: endAngle,
          innerRadius: inner_radius + k * radius_width,
          outerRadius: inner_radius + (k + 1) * radius_width,
          fill: arc_colors[k]
        })
​
}
​
svg.selectAll("path").data(data).enter()
      .append("path")
      .style("fill", function(d){ return d.fill })
      .attr("d", arc);
​
d3.interval(function() {
  svg.selectAll("path").transition()
      .duration(2000)
      .attrTween("d", function(d){ return arcTween(d, 0.7 * Math.random()) })
}, 3000, -3000)
​
function arcTween(d, new_score) {
    var new_startAngle = Math.random() * 2 * Math.PI
    var new_endAngle = new_startAngle + new_score * 2 * Math.PI
    var interpolate_start = d3.interpolate(d.startAngle, new_startAngle)
    var interpolate_end = d3.interpolate(d.endAngle, new_endAngle)
    return function(t) {
      d.startAngle = interpolate_start(t)
      d.endAngle = interpolate_end(t)
      return arc(d)
    }
}
​
</script>
​
​
​
​
<!-- <!DOCTYPE html>
<html>
  <head>
    <title>debug_01</title>
    <meta charset='utf-8' />
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <button id="random">Random Number</button>
    <div id="chart"></div>
    <script>
​
var width = 150, height = 150, twoPi = 2 * Math.PI;
​
var arc = d3.arc()
    .innerRadius(40)
    .outerRadius(50)
        .startAngle(0)
        .endAngle(1/2*Math.PI);
​
var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
​
var meter = svg.append("g")
    .attr("class", "progress-meter");
​
meter.append("path")
    .attr("class", "background")
    .attr("d", arc.endAngle(twoPi));
​
var foreground = meter.append("path")
    .attr("class", "foreground");
​
foreground.attr("d", arc.endAngle(twoPi * 0))
​
foreground.transition().duration(2500).attrTween("d", arcTween);
​
function arcTween() {
  var i = d3.interpolate(0, twoPi);
  return function(t) {
    return arc.endAngle(i(t))();
  };
}
​
function randNumberBounds(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
      
var button = document.getElementById("random");
button.addEventListener("click", function() {
        d3.select("#chart").datum([randNumberBounds(0, 100)]).call(gauge);
});
​
        </script>
    </body>
</html> -->
    