debug_06_test

forked from hds75's block: test3

forked from hds75's block: debug_01

<!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);

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

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