Bar Chart D3

<!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;
			}

rect: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.</h2>

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

var heightScale = d3.scale.ordinal()
								.rangeRoundBands([ padding[0], h - padding[2] ], 0.2);

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

var yAxis = d3.svg.axis()
							.scale(heightScale)
							.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);
				});

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

heightScale.domain(data.map(function(d) { return d.State; } ));
				// heightScale.domain(d3.range(data.length));

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

rects.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.State);
					})
					.attr("width", function(d) {
						return widthScale(d.ChildAdultCare2012/d.Population2012);
					})
					.attr("height", heightScale.rangeBand())
					.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);
					});

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding[3] + "," + (h - padding[2] - 5) + ")")
					.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