jbants/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>D3 Demo</title>
</head>
<style>
path {
    stroke: steelblue;
    stroke-width: 2;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 20px;
  padding: 8px;
  font: 12px sans-serif;
  background: white;
  border: solid 1px #aaa;
  border-radius: 8px;
  pointer-events: none;
}


</style>
<body>
<div id="tooltip"></div>
<div id="option">
    <input name="updateButton"
           type="button"
           value="Update"
           onclick="updateData()" />
</div>
</style>
<body>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    var dataFlag = 1
    var JSONData = [
                    { "name":"test1", "amount": 12000},
                    { "name":"test2", "amount": 2000},
                    { "name":"test3", "amount": 17000}
                  ]
    var JSONData2 = [
                     { "name":"test1","amount": 2000},
                     { "name":"test2","amount": 1100},
                     { "name":"test3","amount": 1300}
                  ]
    var width = 380
    var height = 200;
    var radius = 150;
    var donutWidth = 100;                            // NEW
    var pi = Math.PI;
    var color = d3.scale.ordinal()
    	.range(["#deebf7","#9ecae1","#3182bd"]);

    var arc = d3.svg.arc()
    	.outerRadius(radius - 10)
    	.innerRadius(radius - 100);

    var pie = d3.layout.pie()
    	.sort(null)
    	.startAngle(-90 * (pi/180))
    	.endAngle(90 * (pi/180))
    	.value(function(d) {
    	    return d.amount;
    	});

    var svg = d3.select("body")
    	.append("svg")
    	.attr("width", width)
    	.attr("height", height)
    	.append("g")
    	.attr("id", "pieChart")
    	.attr("transform", "translate(" + width / 2 + "," + height/1.05 + ")");

    function init() {
    	data = JSONData

    	path = svg.selectAll("path")
    		.data(pie(data))
    		.enter()
    		.append("path")
    		.on("mouseover", mouseover)
    		.on("mousemove", function(d){
    			div.html(d.data.name +"</br>"+ d.data.amount+" m<sup>3</sup>")
    		    .style("left", (d3.event.pageX) + "px")
    		    .style("top", (d3.event.pageY) + "px");
    		})
        	.on("mouseout", mouseout);

    var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 1e-6);

    function mouseover() {
      div.transition()
          .duration(300)
          .style("opacity", 1);
    }

    function mouseout() {
      div.transition()
          .duration(300)
          .style("opacity", 1e-6);
    }

    	path.transition()
    	    .duration(500)
    	    .attr("fill", function(d, i) {
    	        return color(d.data.name);
    	    })
    	    .attr("d", arc)
    	    .each(function(d) {
    	        this._current = d;
    	    }); // store the initial angles
    }

    function updateData1(){
    	data = JSONData

        path.data(pie(data));
        path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
    }

    function updateData2(){
    	data = JSONData2

        path.data(pie(data));
        path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
    }

    function arcTween(a) {
    	  var i = d3.interpolate(this._current, a);
    	  this._current = i(0);
    	  return function(t) {
    	    return arc(i(t));
    	  };
    	}

    function updateData(){
    	if (dataFlag == 1){
    		updateData2()
    		dataFlag = 2
    	}
    	else {
    		updateData1()
    		dataFlag = 1
    	}
    }

    init()
</script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>D3 Demo</title>
	</head>
	<style>
	path {
	stroke: steelblue;
	stroke-width: 2;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 60px;
	height: 20px;
	padding: 8px;
	font: 12px sans-serif;
	background: white;
	border: solid 1px #aaa;
	border-radius: 8px;
	pointer-events: none;
	}


	</style>
	<body>
	<div id="tooltip"></div>
	<div id="option">
	<input name="updateButton"
	type="button"
	value="Update"
	onclick="updateData()" />
	</div>
	</style>
	<body>
	</body>
	</html>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
	var dataFlag = 1
	var JSONData = [
	{ "name":"test1", "amount": 12000},
	{ "name":"test2", "amount": 2000},
	{ "name":"test3", "amount": 17000}
	]
	var JSONData2 = [
	{ "name":"test1","amount": 2000},
	{ "name":"test2","amount": 1100},
	{ "name":"test3","amount": 1300}
	]
	var width = 380
	var height = 200;
	var radius = 150;
	var donutWidth = 100; // NEW
	var pi = Math.PI;
	var color = d3.scale.ordinal()
	.range(["#deebf7","#9ecae1","#3182bd"]);

	var arc = d3.svg.arc()
	.outerRadius(radius - 10)
	.innerRadius(radius - 100);

	var pie = d3.layout.pie()
	.sort(null)
	.startAngle(-90 * (pi/180))
	.endAngle(90 * (pi/180))
	.value(function(d) {
	return d.amount;
	});

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("id", "pieChart")
	.attr("transform", "translate(" + width / 2 + "," + height/1.05 + ")");

	function init() {
	data = JSONData

	path = svg.selectAll("path")
	.data(pie(data))
	.enter()
	.append("path")
	.on("mouseover", mouseover)
	.on("mousemove", function(d){
	div.html(d.data.name +"</br>"+ d.data.amount+" m<sup>3</sup>")
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY) + "px");
	})
	.on("mouseout", mouseout);

	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 1e-6);

	function mouseover() {
	div.transition()
	.duration(300)
	.style("opacity", 1);
	}

	function mouseout() {
	div.transition()
	.duration(300)
	.style("opacity", 1e-6);
	}

	path.transition()
	.duration(500)
	.attr("fill", function(d, i) {
	return color(d.data.name);
	})
	.attr("d", arc)
	.each(function(d) {
	this._current = d;
	}); // store the initial angles
	}

	function updateData1(){
	data = JSONData

	path.data(pie(data));
	path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
	}

	function updateData2(){
	data = JSONData2

	path.data(pie(data));
	path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
	}

	function arcTween(a) {
	var i = d3.interpolate(this._current, a);
	this._current = i(0);
	return function(t) {
	return arc(i(t));
	};
	}

	function updateData(){
	if (dataFlag == 1){
	updateData2()
	dataFlag = 2
	}
	else {
	updateData1()
	dataFlag = 1
	}
	}

	init()
	</script>