infographicstw/README.md

## README.md

      
    Raw
  

              README.md
            
          
    p5.js based Pie Chart for demonstration in blog.infographics.tw

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <head prefix="og: http://ogp.me/ns#">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p5.js based Pie Chart</title>
    <!-- libraries-->
    <!-- custom files-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/p5.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
  </head>
  <body></body>
</html>

## index.js
var data = [20,5,40,15,33];
var piedata = [], piecolor = [48,96,144,192,240];
var mouseAngle = 0, pieDelta = 0, hover = 0;

function setup() {
  createCanvas(640,480);
  total = data.reduce(function(a,b){ return a+b; }, 0);
  for(var i=0,count=0;i<data.length;i++) {
    piedata.push([Math.PI * 2 * count / total, Math.PI * 2 * (count + data[i]) / total]);
    count += data[i];
  }
}

function draw() {
  clear();
  for(var i=0,dx=0,dy=0;i<piedata.length;i++,dx=0,dy=0) {
    fill(piecolor[i%5]);
    if(mouseAngle >= piedata[i][0] && mouseAngle < piedata[i][1]) {
      dx = Math.cos((piedata[i][0] + piedata[i][1])/2) * 10;
      dy = Math.sin((piedata[i][0] + piedata[i][1])/2) * 10;
    }
    arc(320 + dx, 200 + dy, 300, 300, piedata[i][0], piedata[i][1], PIE);
  }
}

function mouseMoved() {
  mouseAngle = Math.PI / 2 - Math.atan((320 - mouseX) / (200 - mouseY));
  if(mouseY < 200) mouseAngle = mouseAngle + Math.PI;
}
	<!DOCTYPE html>
	<html lang="en">
	<head prefix="og: http://ogp.me/ns#">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>p5.js based Pie Chart</title>
	<!-- libraries-->
	<!-- custom files-->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/p5.min.js"></script>
	<script type="text/javascript" src="index.js"></script>
	</head>
	<body></body>
	</html>
	var data = [20,5,40,15,33];
	var piedata = [], piecolor = [48,96,144,192,240];
	var mouseAngle = 0, pieDelta = 0, hover = 0;

	function setup() {
	createCanvas(640,480);
	total = data.reduce(function(a,b){ return a+b; }, 0);
	for(var i=0,count=0;i<data.length;i++) {
	piedata.push([Math.PI * 2 * count / total, Math.PI * 2 * (count + data[i]) / total]);
	count += data[i];
	}
	}

	function draw() {
	clear();
	for(var i=0,dx=0,dy=0;i<piedata.length;i++,dx=0,dy=0) {
	fill(piecolor[i%5]);
	if(mouseAngle >= piedata[i][0] && mouseAngle < piedata[i][1]) {
	dx = Math.cos((piedata[i][0] + piedata[i][1])/2) * 10;
	dy = Math.sin((piedata[i][0] + piedata[i][1])/2) * 10;
	}
	arc(320 + dx, 200 + dy, 300, 300, piedata[i][0], piedata[i][1], PIE);
	}
	}

	function mouseMoved() {
	mouseAngle = Math.PI / 2 - Math.atan((320 - mouseX) / (200 - mouseY));
	if(mouseY < 200) mouseAngle = mouseAngle + Math.PI;
	}