captainwz/gist:4653482

## gistfile1.html
<html>
	<head>
		<script src="http://d3js.org/d3.v2.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script src="d3-5-demo1.js" type="text/javascript"></script>
		<script type="text/javascript">
		function show(data){
			d3.select("body")
			  .append("svg")
			  .attr("width",300)
			  .attr("height",400)
			  .selectAll("circle")
			  .data(data.member)
			  .enter()
			  .append("circle");


			var x_scale = d3.scale.linear()
			    .range([60,280])
			    .domain([20,50]);

			var y_scale = d3.scale.linear()
			    .range([280,20])
			    .domain([160,190]);

			d3.selectAll("circle")
			  .attr("cx",function(d){return x_scale(d.age)})
			  .attr("cy",function(d){return y_scale(d.height)})
			  .attr("r",5);

			var x_axis=d3.svg.axis().scale(x_scale);

			d3.select("svg")
			  .append("g")
			  .attr("class","x__axis")
			  .attr("transform","translate(0,280)")
			  .call(x_axis);

			var y_axis=d3.svg.axis().scale(y_scale).orient("left");

			d3.select("svg")
			  .append("g")
			  .attr("class","y__axis")
			  .attr("transform","translate(60,0)")
			  .call(y_axis);
			//add title
			d3.select(".x__axis")
			  .append("text")
			  .text("age")
			  .attr("class","text")
			  .attr("x",150)
			  .attr("y",40);

			d3.select(".y__axis")
			  .append("text")
			  .text("height")
			  .attr("class","text")
			  .attr("x",-20)
			  .attr("y",150)
			  .attr("transform","rotate(-90,-20,150)translate(-40,-20)");
			//add path
			var line = d3.svg.line()
			    .x(function(d){return x_scale(d.age)})
			    .y(function(d){return y_scale(d.height)});

			d3.select("svg")
			  .append("path")
			  .attr("d",line(data.member));


		}

		</script>
		<style type="text/css">
		circle{
			stroke:black;
			stroke-width:0.5px;
			fill:blue;
			opacity: 0.6;
		}
		.y__axis path{
			fill:none;
			stroke:#00BFFF;
		}
		.x__axis path{
			fill:none;
			stroke:#00BFFF;
		}
		.y__axis,.x__axis{
			font-family: sans-serif;
			fill:#00BFFF;
			stroke:none;
			font-size: 13px;

		}
		.tick{
			fill:none;
			stroke:#00BFFF;
		}
		svg{
			position: relative;
			left: 100px;
		}
		.text{
			font-size: 20px;
			font-weight: 700;
			stroke:none;
			fill:#0080FF;
		}
		path{
			stroke:blue;
			fill:none;
		}


		</style>
	</head>
	<body>
		<script type="text/javascript">
        show(data);
		</script>
	</body>
</html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v2.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="d3-5-demo1.js" type="text/javascript"></script>
	<script type="text/javascript">
	function show(data){
	d3.select("body")
	.append("svg")
	.attr("width",300)
	.attr("height",400)
	.selectAll("circle")
	.data(data.member)
	.enter()
	.append("circle");


	var x_scale = d3.scale.linear()
	.range([60,280])
	.domain([20,50]);

	var y_scale = d3.scale.linear()
	.range([280,20])
	.domain([160,190]);

	d3.selectAll("circle")
	.attr("cx",function(d){return x_scale(d.age)})
	.attr("cy",function(d){return y_scale(d.height)})
	.attr("r",5);

	var x_axis=d3.svg.axis().scale(x_scale);

	d3.select("svg")
	.append("g")
	.attr("class","x__axis")
	.attr("transform","translate(0,280)")
	.call(x_axis);

	var y_axis=d3.svg.axis().scale(y_scale).orient("left");

	d3.select("svg")
	.append("g")
	.attr("class","y__axis")
	.attr("transform","translate(60,0)")
	.call(y_axis);
	//add title
	d3.select(".x__axis")
	.append("text")
	.text("age")
	.attr("class","text")
	.attr("x",150)
	.attr("y",40);

	d3.select(".y__axis")
	.append("text")
	.text("height")
	.attr("class","text")
	.attr("x",-20)
	.attr("y",150)
	.attr("transform","rotate(-90,-20,150)translate(-40,-20)");
	//add path
	var line = d3.svg.line()
	.x(function(d){return x_scale(d.age)})
	.y(function(d){return y_scale(d.height)});

	d3.select("svg")
	.append("path")
	.attr("d",line(data.member));


	}

	</script>
	<style type="text/css">
	circle{
	stroke:black;
	stroke-width:0.5px;
	fill:blue;
	opacity: 0.6;
	}
	.y__axis path{
	fill:none;
	stroke:#00BFFF;
	}
	.x__axis path{
	fill:none;
	stroke:#00BFFF;
	}
	.y__axis,.x__axis{
	font-family: sans-serif;
	fill:#00BFFF;
	stroke:none;
	font-size: 13px;

	}
	.tick{
	fill:none;
	stroke:#00BFFF;
	}
	svg{
	position: relative;
	left: 100px;
	}
	.text{
	font-size: 20px;
	font-weight: 700;
	stroke:none;
	fill:#0080FF;
	}
	path{
	stroke:blue;
	fill:none;
	}


	</style>
	</head>
	<body>
	<script type="text/javascript">
	show(data);
	</script>
	</body>
	</html>