//Part II: transition
		var h = 200,
			w = 600,
		  z = 20,
		  x = w / z,
		  y = h / z,
			barWidth = 50,
			barOffset = 5;
 
	var svgline1 = d3.select('#chart1').append('svg')
		.attr("width", w)
		.attr("height", h);
	
	//Draw some gridline
		drawLine(svgline1);
	 
		
	
var poly1 = [{"x": 100, "y": 100},
        {"x": 140,"y": 120},
        {"x": 160,"y": 160},
		   {"x": 180,"y": 120},
		   {"x": 220,"y": 100},
		   {"x": 180,"y": 80},
		   {"x": 160,"y": 40},
		   {"x": 140,"y": 80}];
 
var poly2 = [
        {"x": 210,"y": 70},
        {"x": 230,"y": 80},
		   {"x": 250,"y": 70},
		   {"x": 260,"y": 50},
		   {"x": 250,"y": 30},
		   {"x": 230,"y": 20},
		   {"x": 210,"y": 30},
{"x": 200, "y": 50},
{"x": 210,"y": 70}]; 


	a1 = svgline1.selectAll("rect1")
		.attr('class', 'rect1')
		.data([poly1])
		.enter().append("polygon")
		.attr("points",function(d) { 
		return d.map(function(d) {
		    return [d.x ,d.y ].join(",");
		}).join(" ");
		})
		.attr("fill","blue")
		.attr("stroke-width",2);
			
	a1.on('click',FuncTran);
	 	
	var tt = 1;
		
function FuncTran()
{ 
	tt++;
	if ( (tt % 2) == 0)
	{
		a1.transition()
		.duration(1000)
		.attr("points",function(d) { 
		return d.map(function(d,i) {
		 
		return [poly2[i].x * 2   ,poly2[i].y * 2 ].join(",");	}).join(" ");})

	var s_circle = svgline1.append("circle")
	  	.attr("cx",230 * 2)
		.attr("cy",50 *  2)
		.attr("r",300)
		.style("opacity", 0)
		.attr('fill','yellow');

	s_circle.transition()
		.duration(1000)
		.delay(600)
		.style("opacity", 1)
		.attr('r',0);

    }
	else
	{
		a1.transition()
		.duration(1000)
		.attr("points",function(d) { 
		return d.map(function(d,i) {
		//console.log(poly1[i].x);
		return [poly1[i].x   ,poly1[i].y  ].join(",");	}).join(" ");})
	}
  
	 
}
	//draw grid line - Hung Do
	function drawLine(aaa)
	{
	for (i = 0; i < (w/20) + 1; i++) { 
		aaa.append("line")
		.attr("x1", (i * 20)).attr("y1", 0)
		.attr("x2", (i * 20)).attr("y2", h)
		.attr("stroke", "#eeeeee");
	}
	//Draw the grid line - Hung Do
	for (i = 0; i < (h/20) + 1; i++) { 
		aaa.append("line")
		.attr("y1", (i * 20)).attr("x1", 0)
		.attr("y2", (i * 20)).attr("x2", w)
		.attr("stroke", "#eeeeee");
	} 
	
}
//Part I
//Create SVG element
	  	var w = 600;
	  	var h = 300;
		var padding = 30;

//Dynamic, random dataset
		var dataset = [];
		var numDataPoints = 20;
		var xRange = Math.random() * 1000;
		var yRange = Math.random() * 1000;
		for (var i = 0; i < numDataPoints; i++) {
		    var newNumber1 = Math.round(Math.random() * xRange);
		    var newNumber2 = Math.round(Math.random() * yRange);
		    dataset.push([newNumber1, newNumber2]);
		}
				
//Create scale functions
		var xScale = d3.scale.linear()
		     .domain([0, d3.max(dataset, function(d) { return d[0]; })])
		     .range([padding, w -padding*2]);   

		var yScale = d3.scale.linear()
		     .domain([0, d3.max(dataset, function(d) { return d[1]; })])
		     .range([h - padding, padding]);

		var rScale = d3.scale.linear()
		     .domain([0, d3.max(dataset, function(d) { return d[1]; })])
		     .range([2, 5]);
			 
			 	
		var xAxis = d3.svg.axis()
			.scale(xScale)
			.orient("bottom")
			.ticks(5);  //Set rough # of ticks
	
//Define Y axis
		var yAxis = d3.svg.axis()
			.scale(yScale)
			.orient("left")
			.ticks(5);

//Create SVG element
	 
			
			
		var svg =  d3.select('#scale').append('svg')
			.attr("width", w)
			.attr("height", h);		

	
//Create circles
		svg.selectAll("circle")
			.data(dataset)
			.enter()
			.append("circle")
			.attr("cx", function(d) {
				return xScale(d[0]);
			})
			.attr("cy", function(d) {
				return yScale(d[1]);
			})
			.attr("r", function(d) {
				return rScale(d[1]);
			});

	 
//Create labels
		svg.selectAll("text")
		   .data(dataset)
		   .enter()
		   .append("text")
		   .text(function(d) {
		   		return d[0] + "," + d[1];
		   })
		   .attr("x", function(d) {
		   		return xScale(d[0]);
		   })
		   .attr("y", function(d) {
		   		return yScale(d[1]);
		   })
		   .attr("font-family", "sans-serif")
		   .attr("font-size", "11px")
		   .attr("fill", "red");

//Create X axis
		svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(0," + (h - padding) + ")")
			.call(xAxis);

//Create Y axis
		svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(" + padding + ",0)")
			.call(yAxis);