Barchart D3

</html><!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset="utf-8">
		<title>Barchart of Number of Diseases</title>
		<script src = "https://d3js.org/d3.v4.min.js"></script>
		<style type="text/css">
		</style>
	</head>
	<body>
		<h3> Barchart of Diseases and Count </h3>
		<script type = "text/javascript">
			//Width and height"
			var w = 700;
			var h = 500;
			var barPadding = 1;
			var padding = 100;

var xScale = d3.scaleBand();
				
			var yScale = d3.scaleLinear();

var yAxScale = d3.scaleLinear();
			
			var yAxis = d3.axisLeft()
							.scale(yAxScale)
							.ticks(7);

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

var rowConverter = function(d) {
				return {
					number: parseInt(d.number),
					disease: d.disease
				}
			}

var dataset;
			//var max = 0;

d3.csv("health.csv", rowConverter, function(data) {
				dataset = d3.nest()
  					.key(function(d) { return d.disease; })
  					.rollup(function(v) { return d3.sum(v, function(d) { return d.number; })})
  					.entries(data);

xScale.domain(d3.range(dataset.length))
						.rangeRound([padding,w-padding])
				 		.paddingInner(0.05);

yScale.domain([0,d3.max(dataset, function(d) { return d.value})])
						.range([padding, h - padding]);

yAxScale.domain([0,d3.max(dataset, function(d) { return d.value})])
						.range([h - 5, padding]);

svg.selectAll("rect")
				 	.data(dataset)
				 	.enter()
				 	.append("rect")
				 	.attr("x", function(d, i) {
			 			return xScale(i);
					})
					.attr("y", function(d) {
				 		return h - yScale(d.value);
				 	})
				 	.attr("width", xScale.bandwidth())
				 	.attr("height", function(d) {
				 		return yScale(d.value);
				 	});
				svg.selectAll("text")
			   		.data(dataset)
			   		.enter()
			   		.append("text")
			   		.text(function(d) {
			   			return d.key;
			   		})
			   		.attr("text-anchor", "middle")
			   		.attr("x", function(d, i) {
			   			return xScale(i) + xScale.bandwidth() / 2;
			   		})
			   		.attr("y", function(d) {
			   			return h - yScale(d.value) + 14;
			   		})
			   		.attr("font-family", "sans-serif")
			   		.attr("font-size", "11px")
			   		.attr("fill", "white");

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

svg.append("text") 
					.attr("transform", "translate (" + 15 + "," + (h/2) + ") rotate(-90)")
					.attr("text-anchor", "middle")
      				.text("Disease Count")
      				.attr("fill", "black");

});

</script>
	</body>
</html>