SPLOM d3

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset="utf-8">
		<title>A SPLOM comparing year, population, and disease count</title>
		<script src = "https://d3js.org/d3.v4.min.js"></script>
		<style type="text/css">
		</style>
	</head>
	<body>
		<script type = "text/javascript">
			//Width and height"
			var w = 900;
			var h = 900;
			var padding = 50;

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

var yearScale = d3.scaleLinear();
			
			var popScale = d3.scaleLinear();

var xNumAxis = d3.axisBottom()
							.scale(numScale)
							.tickFormat(format)
							.ticks(7);

var yNumAxis = d3.axisLeft()
							.scale(numScale)
							.tickFormat(format)
							.ticks(7);

var xYearAxis = d3.axisBottom()
							.scale(yearScale)
							.tickFormat(format)
							.ticks(7);

var yYearAxis = d3.axisLeft()
							.scale(yearScale)
							.tickFormat(format)
							.ticks(7);

var xPopAxis = d3.axisBottom()
							.scale(popScale)
							.tickFormat(format)
							.ticks(7);

var yPopAxis = d3.axisLeft()
							.scale(popScale)
							.tickFormat(format)
							.ticks(7);

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,
					number: parseInt(d.number),
					population: parseInt(d.population),
					year: parseInt(d.year)
				}
			}
			var dataset = [];

d3.csv("health.csv", rowConverter, function(data) {

for(var r = 0; r < data.length; r++) {
					var num = data[r].number;
					var pop = data[r].population;
					var year = data[r].year;

dataset.push([num,pop,year]);

}

numScale.domain([0, d3.max(dataset, function(d) {return d[0];})])
				 		.rangeRound([padding,(w-padding)/3]);
				
				yearScale.domain([0, d3.max(dataset, function(d) {return d[1];})])
				 		.rangeRound([padding,(w-padding)/3]);

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

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

svg.selectAll("circle2")
				 	.data(dataset)
				 	.enter()
				 	.append("circle")
				 	.attr("cx",function(d) {
				 		return numScale(d[0]);
				 	})
				 	.attr("cy", function(d) {
						return popScale(d[1]);
					})
					.attr("r", function(d) {
						return 2; //set all points to radius 2
				 	})
				 	.attr("transform", "translate(0, " + h/3 + ")");

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

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

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

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

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

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

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

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

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

svg.append("g")
					.attr("class", "axis")
					.attr("transform", "translate(" + (h/3 + 35)   + "," + (h - padding)/3 + 15 + ")")
					.call(yYearAxis);

svg.append("g")
					.attr("class", "axis")
					.attr("transform", "translate(" + padding  + "," + (h - padding)/3 + 15 + ")")
					.call(yYearAxis);

svg.append("g")
					.attr("class", "axis")
					.attr("transform", "translate(" + 2*(h/3)  + "," + (h - padding)/3 + 15 + ")")
					.call(yYearAxis);

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

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

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

svg.append("g")
				 	.attr("class", "axis")
				 	.attr("transform", "translate(" + padding + "," + (2*h/3 - padding+ 15) + ")")
				 	.call(yPopAxis);

svg.append("g")
				 	.attr("class", "axis")
				 	.attr("transform", "translate(" + (h/3 + 35) + "," + (2*h/3 - padding+ 15) + ")")
				 	.call(yPopAxis);

svg.append("g")
				 	.attr("class", "axis")
				 	.attr("transform", "translate(" + 2*(h)/3 + "," + (2*h/3 - padding+ 15) + ")")
				 	.call(yPopAxis);

});

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