aogriffiths/.AREADME

## .AREADME
Demonstrates some simple d3 transitions

see it more clearly at http://bl.ocks.org/2942278

## .project
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
	<name>2942278-reshape-a-square</name>
	<comment></comment>
	<projects>
	</projects>
	<buildSpec>
	</buildSpec>
	<natures>
	</natures>
</projectDescription>

## index.html
<html lang="en">
  <head>
    <title>D3 Transitions</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <!-- JS -->
    <!--
    <script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script>
    -->
    <script type="text/javascript" src="../2902093/d3.js"></script>
    <script type="text/javascript" src="../2902093/d3v.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </head>
  <body>
  	<style type="text/css" media="screen">
	path {
		fill: #fff;
		stroke: #000;
		stroke-width: 2px;
	}
	</style>
    <div id="vis"></div>
    <script type="text/javascript">
        main();
    </script>
  </body>
</html>

## main.js
function main() {
  var svg = d3.select("#vis").append("svg")
    .attr("width", 800)
    .attr("height", 600);

    var rect =
      {
        x:100,
        y:100,
        width:50,
        height:30
      };

    var rect2 =
    {
      x:160,
      y:100,
      width:50,
      height:30
    };

    var pie = [50,300];

    var bigy = 50000;


    arcer = d3.svg.arc();

  	var points1 =
  		  [
          "M 10,10",
          "A 100,100 0 0,1 110,110",
          "L 60,110",
          "A 50,50 0 0,0 10,60",
          "Z"
	      ];

  	var points2 =
      [
       "M 10,10",
       "L 110,10",
       "A 100,100 0 0,1 110,10",
       "L 110,110",
       "L 10,110",
       "A 90,90 0 0,0 10,110",
       "L 10,110",
       "Z"
     ];

    var points2 =
      [
       "M 10,10",
       "A 100000,100000 0 0,1 110,10",
       "L 110,110",
       "A 100000,100000 0 0,0 10,110",
       "Z"
     ];


	svg
    .append("g")
      .attr("transform","translate(0,20)")
      .append("text")
    .text("click me")
      .on("click", click);

    var path1 = svg
    .append("g")
       .attr("transform","translate(0,50)")
    .append("path")
      .attr("d",points1.join(" "));

    svg
    .append("rect")
      .attr("x",rect.x)
      .attr("y",rect.y)
      .attr("width",rect.width)
      .attr("height",rect.height);

    var a = true;
    function click(){
      if(a){
      path1
        .transition()
        .duration(2000)
        .attr("d",points2.join(" "));
      a = !a;
      }else{
        path1
        .transition()
        .duration(2000)
        .attr("d",points1.join(" "));
        a = !a;
      }

      var tarc = {
          innerRadius: 100,
          outerRadius: 120,
          startAngle: 0.25 * Math.PI/4,
          endAngle: 1 * Math.PI/4
        };
      var tarc2 = {
          innerRadius: 100,
          outerRadius: 120,
          startAngle: 1 * Math.PI/4,
          endAngle: 1.3 * Math.PI/4
        };

      svg.selectAll("path.a")
        .data([{rect:rect,arc:tarc},{rect:rect2,arc:tarc2}])
        .enter()
        .append("path")
        .attr("class","a")
        .transition()
        .duration(2000)
        .tween("arc", rectToArcTweenFactory(pie, bigy));

    }
}
	Demonstrates some simple d3 transitions

	see it more clearly at http://bl.ocks.org/2942278
	<?xml version="1.0" encoding="UTF-8"?>
	<projectDescription>
	<name>2942278-reshape-a-square</name>
	<comment></comment>
	<projects>
	</projects>
	<buildSpec>
	</buildSpec>
	<natures>
	</natures>
	</projectDescription>
	<html lang="en">
	<head>
	<title>D3 Transitions</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<!-- JS -->
	<!--
	<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script>
	-->
	<script type="text/javascript" src="../2902093/d3.js"></script>
	<script type="text/javascript" src="../2902093/d3v.js"></script>
	<script type="text/javascript" src="main.js"></script>
	</head>
	<body>
	<style type="text/css" media="screen">
	path {
	fill: #fff;
	stroke: #000;
	stroke-width: 2px;
	}
	</style>
	<div id="vis"></div>
	<script type="text/javascript">
	main();
	</script>
	</body>
	</html>
	function main() {
	var svg = d3.select("#vis").append("svg")
	.attr("width", 800)
	.attr("height", 600);

	var rect =
	{
	x:100,
	y:100,
	width:50,
	height:30
	};

	var rect2 =
	{
	x:160,
	y:100,
	width:50,
	height:30
	};

	var pie = [50,300];

	var bigy = 50000;


	arcer = d3.svg.arc();

	var points1 =
	[
	"M 10,10",
	"A 100,100 0 0,1 110,110",
	"L 60,110",
	"A 50,50 0 0,0 10,60",
	"Z"
	];

	var points2 =
	[
	"M 10,10",
	"L 110,10",
	"A 100,100 0 0,1 110,10",
	"L 110,110",
	"L 10,110",
	"A 90,90 0 0,0 10,110",
	"L 10,110",
	"Z"
	];

	var points2 =
	[
	"M 10,10",
	"A 100000,100000 0 0,1 110,10",
	"L 110,110",
	"A 100000,100000 0 0,0 10,110",
	"Z"
	];


	svg
	.append("g")
	.attr("transform","translate(0,20)")
	.append("text")
	.text("click me")
	.on("click", click);

	var path1 = svg
	.append("g")
	.attr("transform","translate(0,50)")
	.append("path")
	.attr("d",points1.join(" "));

	svg
	.append("rect")
	.attr("x",rect.x)
	.attr("y",rect.y)
	.attr("width",rect.width)
	.attr("height",rect.height);

	var a = true;
	function click(){
	if(a){
	path1
	.transition()
	.duration(2000)
	.attr("d",points2.join(" "));
	a = !a;
	}else{
	path1
	.transition()
	.duration(2000)
	.attr("d",points1.join(" "));
	a = !a;
	}

	var tarc = {
	innerRadius: 100,
	outerRadius: 120,
	startAngle: 0.25 * Math.PI/4,
	endAngle: 1 * Math.PI/4
	};
	var tarc2 = {
	innerRadius: 100,
	outerRadius: 120,
	startAngle: 1 * Math.PI/4,
	endAngle: 1.3 * Math.PI/4
	};

	svg.selectAll("path.a")
	.data([{rect:rect,arc:tarc},{rect:rect2,arc:tarc2}])
	.enter()
	.append("path")
	.attr("class","a")
	.transition()
	.duration(2000)
	.tween("arc", rectToArcTweenFactory(pie, bigy));

	}
	}