Health Record

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title>Health Record</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				background-color: white;
			}

h1 {
				font-family: sans-serif;
				font-size: 30px;
				padding-left: 30px;
				padding-top: 10px;
			}

h2 {
				font-family: sans-serif;
				font-size: 12px;
				padding-left: 30px;
				font-weight: normal;
				padding-top: 10px;
			}

#container {
				width: 800px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
				border: 1px solid #ccc;
				/*box-shadow: 3px 3px 5px 6px #ccc;*/
			}

svg {
				background-color: white;
			}

circle:hover {
				fill: orange;
			}

.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			.axis text{
				font-family: sans-serif;
				font-size: 10px;
			}

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

</style>
	</head>
	<body>
		<div id="container">

<h1>Unite States Health Record</h1>
		<h2>This chart reflects health status in different states in US. The value repersents the ration of people
			involved in the healthy lunch program. As the population in each status varies, this chart uses the ratio instead of the original number.

Y Axis represents people involved in WIC(Women, Infants and Children Program).</h2>
		</div>

var xScale = d3.scale.linear()
								.range([ padding[3], w - padding[1] - padding[3] ]);

var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);

var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(10)
							.tickFormat(d3.format(",.2%"));

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

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

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

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

xScale.domain([
					d3.min(data, function(d){
						return +d.ChildAdultCare2012/d.Population2012;
					}), 
					d3.max(data, function(d){
						return +d.ChildAdultCare2012/d.Population2012;
				})]);

yScale.domain([d3.max(data, function(d){
					return +d.WIC2011;
				}), d3.min(data, function(d){
					return +d.WIC2011;
				})]);
				// heightScale.domain(d3.range(data.length));

var circles = svg.selectAll("circle")
								.data(data)
								.enter()
								.append("circle");

circles.attr("cx", function(d){
						return xScale(+d.ChildAdultCare2012/d.Population2012);
					})
					.attr("cy", function(d) {
						return yScale(+d.WIC2011);
					})
					.attr("r", 0.0)
					// .attr("width", function(d) {
					// 	return widthScale(d.ChildAdultCare2012/d.Population2012);
					// })
					// .attr("height", heightScale.rangeBand())
					.attr("fill", "steelblue")
					.append("title")
					.text(function(d) {
						var x = d.ChildAdultCare2012/d.Population2012;
						return d.State + "'s child and adult care participants ratio (over state population) " + d3.format(",.2%")(x);
					});

circles.transition()
					.duration(2000)
					.attr("r", 5);
					
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2]) + ")")
					.call(xAxis);

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

</script>

</body>
</html>

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

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