aogriffiths/README

## README
Demonstrates some simple d3 transitions

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

## 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>
    <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 data =
  	[
  	{'vert':1, 'size':2,'name':'One', 'colour':'red'},
  	{'vert':2, 'size':5,'name':'Two', 'colour':'green'},
  	{'vert':3, 'size':3,'name':'Three', 'colour':'orange'}
  	];

  	var data2 =
  	  	[
  	  	{'vert':1, 'size':6,'name':'One', 'colour':'red'},
  	  	{'vert':2, 'size':2,'name':'Two', 'colour':'green'},
  	  	{'vert':3, 'size':5,'name':'Three', 'colour':'orange'}
  	  	];


  	var topg = svg.append("g")
      .attr("transform",  "rotate(270)translate(-120,0)");

    var g = topg.selectAll("g.item")
      .data(data);

     g.enter()
      .append("g")
      .attr("class", 'item');

     g
      .attr("transform", function(d){
        return "translate(" + 0 + "," + d.vert * 25 +")";
      });

    var size = function(d){return d.size * 20;};

    var t1 = 2000;
    var t2 = 4000;

    var r1 = g.select("rect.r1");

    if(r1.empty()) r1 = g
      .append("rect")
      .attr("class", 'r1');

    r1
      .attr("fill", function(d){return d.colour})
      .attr("height", 20)
      .attr("width", size);

    g.append("text")
      .attr("dy", 15)
      .attr("dx", 5)
      .text(function(d){return d.name});

    var g = topg.selectAll("g.item")
    .data(data2);

    var r1 = g.select("rect.r1")
    .transition()
    .duration(5000)
    .attr("width", size);


}
	Demonstrates some simple d3 transitions

	see it more clearly at http://bl.ocks.org/5159301
	<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>
	<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 data =
	[
	{'vert':1, 'size':2,'name':'One', 'colour':'red'},
	{'vert':2, 'size':5,'name':'Two', 'colour':'green'},
	{'vert':3, 'size':3,'name':'Three', 'colour':'orange'}
	];

	var data2 =
	[
	{'vert':1, 'size':6,'name':'One', 'colour':'red'},
	{'vert':2, 'size':2,'name':'Two', 'colour':'green'},
	{'vert':3, 'size':5,'name':'Three', 'colour':'orange'}
	];


	var topg = svg.append("g")
	.attr("transform", "rotate(270)translate(-120,0)");

	var g = topg.selectAll("g.item")
	.data(data);

	g.enter()
	.append("g")
	.attr("class", 'item');

	g
	.attr("transform", function(d){
	return "translate(" + 0 + "," + d.vert * 25 +")";
	});

	var size = function(d){return d.size * 20;};

	var t1 = 2000;
	var t2 = 4000;

	var r1 = g.select("rect.r1");

	if(r1.empty()) r1 = g
	.append("rect")
	.attr("class", 'r1');

	r1
	.attr("fill", function(d){return d.colour})
	.attr("height", 20)
	.attr("width", size);

	g.append("text")
	.attr("dy", 15)
	.attr("dx", 5)
	.text(function(d){return d.name});

	var g = topg.selectAll("g.item")
	.data(data2);

	var r1 = g.select("rect.r1")
	.transition()
	.duration(5000)
	.attr("width", size);


	}