wqm9425/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!


    data=[5,6,4,2,3]
    key=["1","2","3","4","5"]

    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

    var color = d3.scaleOrdinal(d3.schemeCategory10);
    //var key = function(d){ return d.data.label; };

    var arc = d3.arc()
      .outerRadius(200 - 10)
      .innerRadius(70);

 		var pie = d3.pie()
      .sort(null)
      .value(function(d) {
          return d;
      });

 		var path = svg.selectAll(".arc")
                .data(pie(data),key)
                .enter()
                .append('path')
                .attr("class", "donut")
                .attr('d', arc)
    						.attr("transform", "translate(500,200)")
                .attr('fill', function(d,i) {
                    return color(i);
                });
    /* ------- SLICE ARCS -------*/

	slice.enter()
		.insert("path")
		.attr("class", "slice")
		.style("fill", function(d,i) { return color(i); })
		.each(function(d) {
			this._current = d;
		});

	var slice = svg.select(".slices").selectAll("path.slice")
		.data(pie(data),key);

	slice
		.transition().duration(duration)
		.attrTween("d", function(d) {
			var interpolate = d3.interpolate(this._current, d);
			var _this = this;
			return function(t) {
				_this._current = interpolate(t);
				return arc(_this._current);
			};
		});

	slice = svg.select(".slices").selectAll("path.slice")
		.data(pie(data), key);

	slice
		.exit().transition().delay(duration).duration(0)
		.remove();

	/* ------- TEXT LABELS -------*/

	var text = svg.select(".labels").selectAll("text")
		.data(pie(was), key);

	text.enter()
		.append("text")
		.attr("dy", ".35em")
		.style("opacity", 0)
		.text(function(d) {
			return d.data.label;
		})
		.each(function(d) {
			this._current = d;
		});

	function midAngle(d){
		return d.startAngle + (d.endAngle - d.startAngle)/2;
	}

	text = svg.select(".labels").selectAll("text")
		.data(pie(data), key);

	text.transition().duration(duration)
		.style("opacity", function(d) {
			return d.data.value == 0 ? 0 : 1;
		})
		.attrTween("transform", function(d) {
			var interpolate = d3.interpolate(this._current, d);
			var _this = this;
			return function(t) {
				var d2 = interpolate(t);
				_this._current = d2;
				var pos = outerArc.centroid(d2);
				pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
				return "translate("+ pos +")";
			};
		})
		.styleTween("text-anchor", function(d){
			var interpolate = d3.interpolate(this._current, d);
			return function(t) {
				var d2 = interpolate(t);
				return midAngle(d2) < Math.PI ? "start":"end";
			};
		});

	text = svg.select(".labels").selectAll("text")
		.data(pie(data), key);

	text
		.exit().transition().delay(duration)
		.remove();

	/* ------- SLICE TO TEXT POLYLINES -------*/

	var polyline = svg.select(".lines").selectAll("polyline")
		.data(pie(was), key);

	polyline.enter()
		.append("polyline")
		.style("opacity", 0)
		.each(function(d) {
			this._current = d;
		});

	polyline = svg.select(".lines").selectAll("polyline")
		.data(pie(data), key);

	polyline.transition().duration(duration)
		.style("opacity", function(d) {
			return d.data.value == 0 ? 0 : .5;
		})
		.attrTween("points", function(d){
			this._current = this._current;
			var interpolate = d3.interpolate(this._current, d);
			var _this = this;
			return function(t) {
				var d2 = interpolate(t);
				_this._current = d2;
				var pos = outerArc.centroid(d2);
				pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
				return [arc.centroid(d2), outerArc.centroid(d2), pos];
			};
		});

	polyline = svg.select(".lines").selectAll("polyline")
		.data(pie(data), key);

	polyline
		.exit().transition().delay(duration)
		.remove();


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!


	data=[5,6,4,2,3]
	key=["1","2","3","4","5"]

	var svg = d3.select("body").append("svg")
	.attr("width", 960)
	.attr("height", 500)

	var color = d3.scaleOrdinal(d3.schemeCategory10);
	//var key = function(d){ return d.data.label; };

	var arc = d3.arc()
	.outerRadius(200 - 10)
	.innerRadius(70);

	var pie = d3.pie()
	.sort(null)
	.value(function(d) {
	return d;
	});

	var path = svg.selectAll(".arc")
	.data(pie(data),key)
	.enter()
	.append('path')
	.attr("class", "donut")
	.attr('d', arc)
	.attr("transform", "translate(500,200)")
	.attr('fill', function(d,i) {
	return color(i);
	});
	/* ------- SLICE ARCS -------*/

	slice.enter()
	.insert("path")
	.attr("class", "slice")
	.style("fill", function(d,i) { return color(i); })
	.each(function(d) {
	this._current = d;
	});

	var slice = svg.select(".slices").selectAll("path.slice")
	.data(pie(data),key);

	slice
	.transition().duration(duration)
	.attrTween("d", function(d) {
	var interpolate = d3.interpolate(this._current, d);
	var _this = this;
	return function(t) {
	_this._current = interpolate(t);
	return arc(_this._current);
	};
	});

	slice = svg.select(".slices").selectAll("path.slice")
	.data(pie(data), key);

	slice
	.exit().transition().delay(duration).duration(0)
	.remove();

	/* ------- TEXT LABELS -------*/

	var text = svg.select(".labels").selectAll("text")
	.data(pie(was), key);

	text.enter()
	.append("text")
	.attr("dy", ".35em")
	.style("opacity", 0)
	.text(function(d) {
	return d.data.label;
	})
	.each(function(d) {
	this._current = d;
	});

	function midAngle(d){
	return d.startAngle + (d.endAngle - d.startAngle)/2;
	}

	text = svg.select(".labels").selectAll("text")
	.data(pie(data), key);

	text.transition().duration(duration)
	.style("opacity", function(d) {
	return d.data.value == 0 ? 0 : 1;
	})
	.attrTween("transform", function(d) {
	var interpolate = d3.interpolate(this._current, d);
	var _this = this;
	return function(t) {
	var d2 = interpolate(t);
	_this._current = d2;
	var pos = outerArc.centroid(d2);
	pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
	return "translate("+ pos +")";
	};
	})
	.styleTween("text-anchor", function(d){
	var interpolate = d3.interpolate(this._current, d);
	return function(t) {
	var d2 = interpolate(t);
	return midAngle(d2) < Math.PI ? "start":"end";
	};
	});

	text = svg.select(".labels").selectAll("text")
	.data(pie(data), key);

	text
	.exit().transition().delay(duration)
	.remove();

	/* ------- SLICE TO TEXT POLYLINES -------*/

	var polyline = svg.select(".lines").selectAll("polyline")
	.data(pie(was), key);

	polyline.enter()
	.append("polyline")
	.style("opacity", 0)
	.each(function(d) {
	this._current = d;
	});

	polyline = svg.select(".lines").selectAll("polyline")
	.data(pie(data), key);

	polyline.transition().duration(duration)
	.style("opacity", function(d) {
	return d.data.value == 0 ? 0 : .5;
	})
	.attrTween("points", function(d){
	this._current = this._current;
	var interpolate = d3.interpolate(this._current, d);
	var _this = this;
	return function(t) {
	var d2 = interpolate(t);
	_this._current = d2;
	var pos = outerArc.centroid(d2);
	pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
	return [arc.centroid(d2), outerArc.centroid(d2), pos];
	};
	});

	polyline = svg.select(".lines").selectAll("polyline")
	.data(pie(data), key);

	polyline
	.exit().transition().delay(duration)
	.remove();


	</script>
	</body>