D3 Examples - debug_06

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
  <style>
    text {
      font-family: 'Verdana', sans-serif;
    }
  </style>
  <script src='//d3js.org/d3.v4.min.js'></script>
  </head>
  <body>  
    <svg></svg>
        <script>
var arc_colors = ['#f3a54a', '#aa7caa', '#ccde66', '#4b90a6'];
​
var arc = d3.arc()
        .outerRadius(60)
        .innerRadius(50)
        .startAngle(-0.5 * Math.PI);
​
var svg = d3.select('svg')
        .attr('width', '400')
        .attr('height', '400');
​
​
​
var width = svg.attr('width'), height = svg.attr('height');
​
​
​
svg.append('g').attr('transform', 'translate(' + width/2 + ',' + height/2 + ')');
​
svg.select('g').append('path')
        .datum({startAngle: (-0.5 * Math.PI), endAngle: 0.5 * Math.PI})
    .attr('class', 'background')
        .attr('d', arc)
        .style('fill', '#aa7caa');//ddd
​
svg.select('g').append('path')
        .datum({endAngle: -0.5 * Math.PI})
        .attr('class', 'foreground')
        .style('fill', '#f3a54a')
        .attr('d', arc);
​
svg.select('g').append('text')
    .attr('x', (width/2)+width.x).attr('y', -15)
        .attr('class', 'label')
//      .text(function(d) { return 0.0; })
        .text(0.0)
    .style('font-size', '16px').style('alignment-baseline', 'hanging').style('text-anchor', 'middle')
        .style('fill', '#000000');
​
​
d3.interval(function() {
    var value = Math.random() * 100;
    svg.select('path.foreground').transition()
            .duration(1250)
            .attrTween('d', arcTween(value));
    svg.select('text.label').transition()
            .text(Math.round(value * 10)/10);
}, 1500);
​
function arcTween(angle) {
    return function(d) {
        var interpolate = d3.interpolate(d.endAngle, (-0.5*Math.PI+(angle/100)*Math.PI));
        return function(t) {
            d.endAngle = interpolate(t);
            return arc(d);
    };
  };
}
​
</script>
</body>
</html>
​
​
​
​
​
<!-- <script>
var width = 400, height = 400;
var arc_colors = ["#f3a54a", "#aa7caa", "#ccde66", "#4b90a6"];
var inner_radius = 60, 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.5 * 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(2500)//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> -->
    