hanshenSun/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from mostaphaRoudsari's block: 03_workshop_the 3 circles

  
## index.html
<!DOCTYPE html>

<head>
	<title>d3js workshop - circles</title>
	<script src="http://d3js.org/d3.v3.js"></script> <!-- import D3 library -->
</head>

<body>

	<script type="text/javascript">
		// this is a modified version of Mike's example here: http://bost.ocks.org/mike/circles/

		// 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('color', (red))
							.attr('cx', function(d,i){ return i+1*4 * d});

		// let's change the colors to red
		circles.style('stroke', 'red');
    circles.style('fill', "white");

		// was it so fast? let's create a transition and set the duration time

		circles.transition()
			.duration(20000)
			.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>
	<!DOCTYPE html>

	<head>
	<title>d3js workshop - circles</title>
	<script src="http://d3js.org/d3.v3.js"></script> <!-- import D3 library -->
	</head>

	<body>

	<script type="text/javascript">
	// this is a modified version of Mike's example here: http://bost.ocks.org/mike/circles/

	// 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('color', (red))
	.attr('cx', function(d,i){ return i+14 d});

	// let's change the colors to red
	circles.style('stroke', 'red');
	circles.style('fill', "white");

	// was it so fast? let's create a transition and set the duration time

	circles.transition()
	.duration(20000)
	.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>