03_workshop_the 3 circles

forked from mostaphaRoudsari's block: 03_workshop_the 3 circles

forked from horikoshi-kazuki's block: 03_workshop_the 3 circles

<!DOCTYPE html>

<head>
	<title>d3js workshop - circles</title>
	<script src="https://d3js.org/d3.v3.js"></script> 
</head>

<body>

// first let's draw 3 circles
		// this is how a circle looks like
		// <circle cx="40" cy="60" r="10"></circle>

// and this is what we want to create to get started
		
// 		<svg width="720" height="120">
//   			<circle cx="40" cy="60" r="10"></circle>
//   			<circle cx="80" cy="60" r="10"></circle>
//   			<circle cx="120" cy="60" r="10"></circle>
// 		</svg>

// first we need to add an svg element to body
 		svg = d3.select('body')
 			.append('svg')
				.attr('width', '720px')
 				.attr('height', '120px');
		
		// now let's append 3 circles to svg
		// I will use a data list with length of 3
 		var data = [10, 20, 30];
		
 		var circles = svg.selectAll('circle')
 						.data(data)
 						.enter()
 						.append('circle')
 							.attr('r', 10)
 							.attr('cy', 60)
//  							.attr('cx', function(d){ return 4 * d});
 							.attr('cx', function(d,i){ return (i+1)* 40});
    				
    
		// let's change the colors to red
// 		circles.style('fill', 'red');

// was it so fast? let's create a transition and set the duration time		
		
// 		circles.transition()
// 			.duration(2000)
// 			.style('fill', 'red');

// let's add a delay between each color change
		// comment the one above

// 		circles.transition()
// 			.delay(function(d, i){return i * 1000})
// 			.duration(2000)
// 			.style('fill', 'red');

// you can perform several changes in a single transition
    circles.transition()
			.delay(function(d, i){return i * 1000})
			.duration(2000)
			.style('fill', 'red')
			.attr('r', '15')
			.attr('cy', '80');
	</script>
</body>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js