jueyang/index.html

## index.html
<!DOCTYPE html>
<head>
	<meta charset='utf-8'>
</head>
<style>
	body {
		margin:0;
		padding:20px;
	}
	section {
		font:14px/1.667 'Avenir';
		padding:10px;
	}
	section.region {
		float:left;
		margin-left:20px;
		text-align:center;
	}
	div {
		margin:10px;
		padding:0 10px;
		background:#f2f2f2;
	}
	#south-asia {
		background:#66D6D3;
	}
	#east-asia {
		background:#66D9E7;
	}
	#east-africa {
		background:#E2C661;
	}
</style>
<body>
	<section>
	  In this example, region area corresponds to the number of projects.
	</section>
	<script src='http://d3js.org/d3.v3.min.js'></script>
	<script>
		var regions = ['South Asia','East Asia','East Africa'];

		var southAsia = [
			{'amount':100,'region':'South Asia','country':'Vietnam'},
			{'amount':200,'region':'South Asia','country':'Vietnam'},
			{'amount':200,'region':'South Asia','country':'India'},
			{'amount':200,'region':'South Asia','country':'India'},
			{'amount':200,'region':'South Asia','country':'Laos'},
		];

		var eastAsia = [
			{'amount':100,'region':'East Asia','country':'China'},
			{'amount':200,'region':'East Asia','country':'China'},
			{'amount':200,'region':'East Asia','country':'Japan'},
		];

		var eastAfrica = [
			{'amount':100,'region':'East Africa','country':'Libya'},
			{'amount':200,'region':'East Africa','country':'Egypt'}
		];

		d3.selectAll('.region')
		  	.data(regions)
		  .enter()
			.append('section')
			.attr('class','region')
			.attr('id',function(d){return d.toLowerCase().split(' ').join('-');})
			.append('p')
			.text(function(d){return d;})

		function addCountries (elId,data){
			d3.select(elId)
			.selectAll('.country')
			.data(data)
		  .enter()
			.append('div')
			.attr('class','country')
			.append('p')
			.text(function(d){return d.country;})
		}

		addCountries('#south-asia',southAsia);
		addCountries('#east-asia',eastAsia);
		addCountries('#east-africa',eastAfrica);

	</script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset='utf-8'>
	</head>
	<style>
	body {
	margin:0;
	padding:20px;
	}
	section {
	font:14px/1.667 'Avenir';
	padding:10px;
	}
	section.region {
	float:left;
	margin-left:20px;
	text-align:center;
	}
	div {
	margin:10px;
	padding:0 10px;
	background:#f2f2f2;
	}
	#south-asia {
	background:#66D6D3;
	}
	#east-asia {
	background:#66D9E7;
	}
	#east-africa {
	background:#E2C661;
	}
	</style>
	<body>
	<section>
	In this example, region area corresponds to the number of projects.
	</section>
	<script src='http://d3js.org/d3.v3.min.js'></script>
	<script>
	var regions = ['South Asia','East Asia','East Africa'];

	var southAsia = [
	{'amount':100,'region':'South Asia','country':'Vietnam'},
	{'amount':200,'region':'South Asia','country':'Vietnam'},
	{'amount':200,'region':'South Asia','country':'India'},
	{'amount':200,'region':'South Asia','country':'India'},
	{'amount':200,'region':'South Asia','country':'Laos'},
	];

	var eastAsia = [
	{'amount':100,'region':'East Asia','country':'China'},
	{'amount':200,'region':'East Asia','country':'China'},
	{'amount':200,'region':'East Asia','country':'Japan'},
	];

	var eastAfrica = [
	{'amount':100,'region':'East Africa','country':'Libya'},
	{'amount':200,'region':'East Africa','country':'Egypt'}
	];

	d3.selectAll('.region')
	.data(regions)
	.enter()
	.append('section')
	.attr('class','region')
	.attr('id',function(d){return d.toLowerCase().split(' ').join('-');})
	.append('p')
	.text(function(d){return d;})

	function addCountries (elId,data){
	d3.select(elId)
	.selectAll('.country')
	.data(data)
	.enter()
	.append('div')
	.attr('class','country')
	.append('p')
	.text(function(d){return d.country;})
	}

	addCountries('#south-asia',southAsia);
	addCountries('#east-asia',eastAsia);
	addCountries('#east-africa',eastAfrica);

	</script>
	</body>