Plot Chart

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title>Bar Chart</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;
			}

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>

<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>

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("body")
						.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