dongxiahe/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Creating SVG Elements from Data</title>
		<script type="text/javascript" src="../../d3.v3.js"></script>
		<style type="text/css">

			body {
				background-color: #dddddff;
				font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font-size: 24px;
				margin: 0;
			}

			p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}

			svg {
				background-color: while;
			}
			rect:hover {
				fill: orange;
			}

			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

			.y.axis path,
			.y.axis line {
				opacity: 0;
            }

		</style>
	</head>
	<body>
	    <p><h2>The National Commercial Housing Price of China Since 2000 (RMB/m2)</h2></p>

		<script type="text/javascript">

            var w = 70;
            var h = 100;

            var padding = [50, 20, 20, 160 ];

            var widthScale = d3.scale.linear()
				                .range([0,w - padding [1] - padding[3]])；
		    var heightScale = d3.scale.ordinal()
				                .rangeRoundBands([ Padding[0], h - padding[2]], 0.1);
            var xAxis = d3.svg.axis()
						.scale(widthScale)
						.orient("bottom");

		    var yAxis = d3.svg.axis()
						.scale(heightScale)
						.orient("left");

			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);


			d3.csv("thenationalcommercialhousingpriceofChinasince2000.csv", function(data) {

				data.sort(function(a, b) {
					return d3.descending(+a.commercialHousingAverageSellingPrice, +b.commercialHousingAverageSellingPrice);
				});

                widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.commercialHousingAverageSellingPrice*0.01;
				}) ]);

				heightScale.domain(data.map(function(d) { return d.year; } ));

				var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");

				rects.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.year);
					})
					.attr("width", function(d) {
						return widthScale(d.commercialHousingAverageSellingPrice*0.01);
					})
					.attr("height", heightScale.rangeBand())
					.attr("fill", "green")
					.append("title")
					.text(function(d) {
						return d.year + "'s commerical housing average price is " + d.commercialHousingAverageSellingPrice;
					});

				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
					.call(xAxis);

				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ",0)")
					.call(yAxis);


		});

		</script>

	</body>
</html>

## thenationalcommercialhousingpriceofChinasince2000.csv

          
            year
            commercialHousingAverageSellingPrice

            
              2013
              6237

            
              2012
              5790

            
              2011
              5357

            
              2010
              5032

            
              2009
              4681

            
              2008
              3800

            
              2007
              3863

            
              2006
              3366

            
              2005
              3167

            
              2004
              2778

            
              2003
              2359

            
              2002
              2250

            
              2001
              2170

            
              2000
              2112
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Creating SVG Elements from Data</title>
	<script type="text/javascript" src="../../d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: #dddddff;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 24px;
	margin: 0;
	}

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: while;
	}
	rect:hover {
	fill: orange;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}

	</style>
	</head>
	<body>
	<p><h2>The National Commercial Housing Price of China Since 2000 (RMB/m2)</h2></p>

	<script type="text/javascript">

	var w = 70;
	var h = 100;

	var padding = [50, 20, 20, 160 ];

	var widthScale = d3.scale.linear()
	.range([0,w - padding [1] - padding[3]])；
	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ Padding[0], h - padding[2]], 0.1);
	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left");

	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



	d3.csv("thenationalcommercialhousingpriceofChinasince2000.csv", function(data) {

	data.sort(function(a, b) {
	return d3.descending(+a.commercialHousingAverageSellingPrice, +b.commercialHousingAverageSellingPrice);
	});

	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d.commercialHousingAverageSellingPrice*0.01;
	}) ]);

	heightScale.domain(data.map(function(d) { return d.year; } ));

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.year);
	})
	.attr("width", function(d) {
	return widthScale(d.commercialHousingAverageSellingPrice*0.01);
	})
	.attr("height", heightScale.rangeBand())
	.attr("fill", "green")
	.append("title")
	.text(function(d) {
	return d.year + "'s commerical housing average price is " + d.commercialHousingAverageSellingPrice;
	});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding[3] + ",0)")
	.call(yAxis);


	});

	</script>

	</body>
	</html>
	year	commercialHousingAverageSellingPrice
	2013	6237
	2012	5790
	2011	5357
	2010	5032
	2009	4681
	2008	3800
	2007	3863
	2006	3366
	2005	3167
	2004	2778
	2003	2359
	2002	2250
	2001	2170
	2000	2112