matthewbednarski/d3-pie-chart.html

## d3-pie-chart.html
<!DOCTYPE html>
<html>

<head>
<meta name="description" content="D3 pie chart with changing random data"/>
	<meta name="sources" content="http://bl.ocks.org/dbuezas/9306799" />
	<meta name="sources" content="http://bl.ocks.org/jonsadka/fa05f8d53d4e8b5f262e" />
  <script src="https://rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <meta charset="utf-8">
  <title>D3 pie chart with changing random data</title>
  <style>
    body {
      font-family: sans-serif;
      width: 960px;
      height: 500px;
      position: relative;
    }
        svg {
        	width: 100%;
        	height: 100%;
        }

        path.slice{
        	stroke-width:2px;
        }

        polyline{
        	opacity: .3;
        	stroke: black;
        	stroke-width: 2px;
        	fill: none;
        }
  </style>
</head>

<body>
  <button class="update">update</button>
  <script>
    /**
     * Code from http://bl.ocks.org/dbuezas/9306799
     * Adjusted for having a variable domain size
     */

    var svg = d3.select("body")
    	.append("svg")
    	.append("g");

    svg.append("g")
    	.attr("class", "slices");
    svg.append("g")
    	.attr("class", "labels");
    svg.append("g")
    	.attr("class", "lines");

    var width = 960,
        height = 450,
    	radius = Math.min(width, height) / 2;

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

    var arc = d3.svg.arc()
    	.outerRadius(radius * 0.95)
    	.innerRadius(radius * 0.3);

    var outerArc = d3.svg.arc()
    	.innerRadius(radius * 0.9)
    	.outerRadius(radius * 0.9);

    svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var key = function(d){ return d.data.label; };


    var color = d3.scale.category20();
    //color
    	//.domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"])
    	//.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

    function randomData (){
    	var size = Math.random()*50;
    	console.log(size);
    	return d3.range(size).map(function(item){
    		return { label: _.uniqueId("label_"), value: Math.random()*100 };
    	});
    }

    change(randomData());

    d3.select(".update")
    	.on("click", function(){
    		change(randomData());
    	});


    function change(data) {

    	console.log(data);
    	/* ------- PIE SLICES -------*/
    	var slice = svg.select(".slices").selectAll("path.slice")
    		.data(pie(data), key);

    	slice.enter()
    		.insert("path")
    		.style("fill", function(d) { return color(d.data.label); })
    		.attr("class", "slice");

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

    	slice.exit()
    		.remove();

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

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

    	text.enter()
    		.append("text")
    		.attr("dy", ".35em")
    		.text(function(d) {
    			return d.data.label;
    		});

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

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

    	text.exit()
    		.remove();

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

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

    	polyline.enter()
    		.append("polyline");

    	polyline.transition().duration(1000)
    		.attrTween("points", function(d){
    			this._current = this._current || d;
    			var interpolate = d3.interpolate(this._current, d);
    			this._current = interpolate(0);
    			return function(t) {
    				var d2 = interpolate(t);
    				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.exit()
    		.remove();
    }
  </script>


</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta name="description" content="D3 pie chart with changing random data"/>
	<meta name="sources" content="http://bl.ocks.org/dbuezas/9306799" />
	<meta name="sources" content="http://bl.ocks.org/jonsadka/fa05f8d53d4e8b5f262e" />
	<script src="https://rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<meta charset="utf-8">
	<title>D3 pie chart with changing random data</title>
	<style>
	body {
	font-family: sans-serif;
	width: 960px;
	height: 500px;
	position: relative;
	}
	svg {
	width: 100%;
	height: 100%;
	}

	path.slice{
	stroke-width:2px;
	}

	polyline{
	opacity: .3;
	stroke: black;
	stroke-width: 2px;
	fill: none;
	}
	</style>
	</head>

	<body>
	<button class="update">update</button>
	<script>
	/**
	* Code from http://bl.ocks.org/dbuezas/9306799
	* Adjusted for having a variable domain size
	*/

	var svg = d3.select("body")
	.append("svg")
	.append("g");

	svg.append("g")
	.attr("class", "slices");
	svg.append("g")
	.attr("class", "labels");
	svg.append("g")
	.attr("class", "lines");

	var width = 960,
	height = 450,
	radius = Math.min(width, height) / 2;

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

	var arc = d3.svg.arc()
	.outerRadius(radius * 0.95)
	.innerRadius(radius * 0.3);

	var outerArc = d3.svg.arc()
	.innerRadius(radius * 0.9)
	.outerRadius(radius * 0.9);

	svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var key = function(d){ return d.data.label; };


	var color = d3.scale.category20();
	//color
	//.domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"])
	//.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

	function randomData (){
	var size = Math.random()*50;
	console.log(size);
	return d3.range(size).map(function(item){
	return { label: _.uniqueId("label_"), value: Math.random()*100 };
	});
	}

	change(randomData());

	d3.select(".update")
	.on("click", function(){
	change(randomData());
	});


	function change(data) {

	console.log(data);
	/* ------- PIE SLICES -------*/
	var slice = svg.select(".slices").selectAll("path.slice")
	.data(pie(data), key);

	slice.enter()
	.insert("path")
	.style("fill", function(d) { return color(d.data.label); })
	.attr("class", "slice");

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

	slice.exit()
	.remove();

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

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

	text.enter()
	.append("text")
	.attr("dy", ".35em")
	.text(function(d) {
	return d.data.label;
	});

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

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

	text.exit()
	.remove();

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

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

	polyline.enter()
	.append("polyline");

	polyline.transition().duration(1000)
	.attrTween("points", function(d){
	this._current = this._current \|\| d;
	var interpolate = d3.interpolate(this._current, d);
	this._current = interpolate(0);
	return function(t) {
	var d2 = interpolate(t);
	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.exit()
	.remove();
	}
	</script>


	</body>

	</html>