aogriffiths/.project

## .project
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
	<name>2915574-d3-morph-path</name>
	<comment></comment>
	<projects>
	</projects>
	<buildSpec>
	</buildSpec>
	<natures>
	</natures>
</projectDescription>

## README
Demonstrates some simple d3 transitions

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

## 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="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 points1a =
  		  [
	      "M 0   0",
	      "L 100 0",
	      "L 100 100",
	      "L 0   100",
	      "z"
	      ];

  	var points1b =
  		  [
		  "M 0   0",
		  "L 200 0",
		  "L 150 100",
		  "L 50  100",
		  "z"
		  ];


  	var points1c =
  		  [
		  "M 0   0",
		  "L 200 0",
		  "L 150 100",
		  "L 100 200",
		  "L 50  100",
		  "z"
		  ];

  	var points1d =
  		  [
          "M 0   0",
          "L 100 0",
          "L 100 100",
          "L 50  100", //redundant point, but means there is a one for one mappting to points 1c
          "L 0   100",
          "z"
          ];


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

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

    var path2 = svg
    .append("g")
       .attr("transform","translate(200,50)")
    .append("path")
      .attr("d",points1a.join(" "));

    var path3 = svg
    .append("g")
       .attr("transform","translate(400,50)")
    .append("path")
      .attr("d",points1d.join(" "));

    function click(d){
      var a = this;
      var b = d;
      d3.event.preventDefault();
      path1
        .transition()
        .duration(2000)
        .attr("d",points1b.join(" "));

      path2
      .transition()
      .delay(2000)
      .duration(2000)
      .attr("d",points1c.join(" "));

      path3
      .transition()
      .delay(4000)
      .duration(2000)
      .attr("d",points1c.join(" "));}


}
	<?xml version="1.0" encoding="UTF-8"?>
	<projectDescription>
	<name>2915574-d3-morph-path</name>
	<comment></comment>
	<projects>
	</projects>
	<buildSpec>
	</buildSpec>
	<natures>
	</natures>
	</projectDescription>
	Demonstrates some simple d3 transitions

	see it more clearly at http://bl.ocks.org/2915574
	<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="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 points1a =
	[
	"M 0 0",
	"L 100 0",
	"L 100 100",
	"L 0 100",
	"z"
	];

	var points1b =
	[
	"M 0 0",
	"L 200 0",
	"L 150 100",
	"L 50 100",
	"z"
	];


	var points1c =
	[
	"M 0 0",
	"L 200 0",
	"L 150 100",
	"L 100 200",
	"L 50 100",
	"z"
	];

	var points1d =
	[
	"M 0 0",
	"L 100 0",
	"L 100 100",
	"L 50 100", //redundant point, but means there is a one for one mappting to points 1c
	"L 0 100",
	"z"
	];




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

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

	var path2 = svg
	.append("g")
	.attr("transform","translate(200,50)")
	.append("path")
	.attr("d",points1a.join(" "));

	var path3 = svg
	.append("g")
	.attr("transform","translate(400,50)")
	.append("path")
	.attr("d",points1d.join(" "));

	function click(d){
	var a = this;
	var b = d;
	d3.event.preventDefault();
	path1
	.transition()
	.duration(2000)
	.attr("d",points1b.join(" "));

	path2
	.transition()
	.delay(2000)
	.duration(2000)
	.attr("d",points1c.join(" "));

	path3
	.transition()
	.delay(4000)
	.duration(2000)
	.attr("d",points1c.join(" "));}


	}