debug_01

Built with blockbuilder.org

forked from hds75's block: fresh block

forked from hds75's block: test3

<!DOCTYPE html>
<meta charset="utf-8">
<body>

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> -->

https://d3js.org/d3.v4.min.js