trellis d3

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset="utf-8">
		<title>A trellis plot comparing population and disease count</title>
		<script src = "https://d3js.org/d3.v4.min.js"></script>
		<style type="text/css">
		</style>
	</head>
	<body>
		<h3>Trellis Plot Comparing Population and Number of Diseases </h3>
		<script type = "text/javascript">
			//Width and height"
			var w = 900;
			var h = 900;
			var padding = 50;

var measles = [];
			var pertussis = [];
			var smallpox = [];

var format = d3.format(".2s");
		
			var x1Scale = d3.scaleLinear();

var y1Scale = d3.scaleLinear();
			
			var x2Scale = d3.scaleLinear();

var y2Scale = d3.scaleLinear();
							
			var x3Scale = d3.scaleLinear();

var y3Scale = d3.scaleLinear();

var x1Axis = d3.axisBottom()
							.scale(x1Scale)
							.tickFormat(format)
							.ticks(7);

var y1Axis = d3.axisLeft()
							.scale(y1Scale)
							.tickFormat(format)
							.ticks(7);

var x2Axis = d3.axisBottom()
							.scale(x2Scale)
							.tickFormat(format)
							.ticks(7);

var y2Axis = d3.axisLeft()
							.scale(y2Scale)
							.tickFormat(format)
							.ticks(7);

var x3Axis = d3.axisBottom()
							.scale(x3Scale)
							.tickFormat(format)
							.ticks(7);

var y3Axis = d3.axisLeft()
							.scale(y3Scale)
							.tickFormat(format)
							.ticks(7);

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

//converts the data to integers
			var rowConverter = function(d) {
				return {
					disease: d.disease,
					population: parseInt(d.population),
					number: parseInt(d.number)

};
			}

d3.csv("health.csv", rowConverter, function(data) {
				var dataset = data;

for(var i = 0; i < dataset.length; i++) {
					var population = dataset[i].population;
					var number = dataset[i].number;
					var disease = dataset[i].disease;

if(disease == "MEASLES") {
						measles.push([population,number]);
					}

if(disease == "PERTUSSIS") {
						pertussis.push([population,number]);
					}
					if(disease == "SMALLPOX") {
						smallpox.push([population, number]);
					}
				}
							
    			x1Scale.domain([0, d3.max(measles, function(d) {return d[0];})])
				 		.rangeRound([padding,(w-padding)/3]);
				
				y1Scale.domain([0, d3.max(measles, function(d) {return d[1];})])
				 		.rangeRound([(h-padding)/3,padding]);

x2Scale.domain([0, d3.max(pertussis, function(d) {return d[0];})])
				 		.rangeRound([padding,(w-padding)/3]);

y2Scale.domain([0, d3.max(pertussis, function(d) {return d[1];})])
				 		.rangeRound([(h-padding)/3,padding]);

x3Scale.domain([0, d3.max(smallpox, function(d) {return d[0];})])
				 		.rangeRound([padding,(w-padding)/3]);

y3Scale.domain([0, d3.max(smallpox, function(d) {return d[1];})])
				 		.rangeRound([(h-padding)/3,padding]);

svg.selectAll("circle1")
				 	.data(measles)
				 	.enter()
				 	.append("circle")
				 	.attr("cx",function(d) {
				 		return x1Scale(d[0]);
				 	})
				 	.attr("cy", function(d) {
						return y1Scale(d[1]);
					})
					.attr("r", function(d) {
						return 2; //set all points to radius 2
				 	});

svg.selectAll("circle2")
				 	.data(pertussis)
				 	.enter()
				 	.append("circle")
				 	.attr("cx",function(d) {
				 		return x2Scale(d[0]);
				 	})
				 	.attr("cy", function(d) {
						return y2Scale(d[1]);
					})
					.attr("r", function(d) {
						return 2; //set all points to radius 2
				 	})
				 	.attr("transform", "translate(" + (padding+250)  + ",0)");

svg.selectAll("circle3")
				 	.data(smallpox)
				 	.enter()
				 	.append("circle")
				 	.attr("cx",function(d) {
				 		return x3Scale(d[0]);
				 	})
				 	.attr("cy", function(d) {
						return y3Scale(d[1]);
					})
					.attr("r", function(d) {
						return 2; //set all points to radius 2
				 	})
				 	.attr("transform", "translate(" + (padding+550) + ",0)");

svg.append("g") 
					.attr("class", "axis") 
					.attr("transform", "translate(0," + (w-padding)/3 + ")") 
					.call(x1Axis);

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

svg.append("g") 
					.attr("class", "axis") 
					.attr("transform", "translate(" + 300 + "," + (w-padding)/3 + ")") 
					.call(x2Axis);

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

svg.append("g") 
					.attr("class", "axis") 
					.attr("transform", "translate(" + 600 + "," + (w-padding)/3 + ")") 
					.call(x3Axis);

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

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

svg.append("text") 
					.attr("x", 100 )
					.attr("y", h/3 + 20)
					.attr("text-anchor", "middle")
      				.text("Measles")
      				.attr("fill", "black");

svg.append("text") 
					.attr("x", 400 )
					.attr("y", h/3 + 20)
					.attr("text-anchor", "middle")
      				.text("Pertussis")
      				.attr("fill", "black");

svg.append("text") 
					.attr("x", 700 )
					.attr("y", h/3 + 20)
					.attr("text-anchor", "middle")
      				.text("Smallpox")
      				.attr("fill", "black");

});

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