AS4 SPLOM

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

<head>
	<title>AS4 Scatterplot Matrix</title>	
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>

.circle {
			fill: rgb(70,130,180);
			/*stroke: black;*/
			/*stroke-weight: 0.2px;*/.;
			opacity: 0.5;
		}

.title {
			font-family: sans-serif;
			font-size: 20px;
		}

.axisLabels {
			font-family: sans-serif;
			font-size: 12px;
		}

.plotnames {
			font-family: sans-serif;
			font-size: 14px;
		}

.line {
			fill: none;
			stroke: black;
			stroke-width: 1;
		}

</style>
</head>

<body>
	<script type="text/javascript">
		
		// declare dimensions
		var h = 800,
			w = 800,
			margin = 100,
			H = 200,
			W = 200;

// coordinates for lines
		var h1 = [[margin, margin], [margin+H,margin], [margin+2*H,margin], [margin+3*H,margin]],
			h2 = [[margin, margin+H], [margin+H,margin+H], [margin+2*H,margin+H], [margin+3*H,margin+H]],
			h3 = [[margin, margin+2*H], [margin+H,margin+2*H], [margin+2*H,margin+2*H], [margin+3*H,margin+2*H]],
			h4 = [[margin, margin+3*H], [margin+H,margin+3*H], [margin+2*H,margin+3*H], [margin+3*H,margin+3*H]],
			v1 = [[margin, margin], [margin,margin+H], [margin,margin+2*H], [margin,margin+3*H]],
			v2 = [[margin+H, margin], [margin+H,margin+H], [margin+H,margin+2*H], [margin+H,margin+3*H]],
			v3 = [[margin+2*H, margin], [margin+2*H,margin+H], [margin+2*H,margin+2*H], [margin+2*H,margin+3*H]],
			v4 = [[margin+3*H, margin], [margin+3*H,margin+H], [margin+3*H,margin+2*H], [margin+3*H,margin+3*H]];

// create svg variable
		var svg = d3.select("body")
					.append("svg")
					.attr("height", h)
					.attr("width", w);

// load in data
		d3.csv("calData.csv", function(dataset) {
			
			// make strings numeric
			dataset.forEach(function(d) {
				d.Year = +d.Year;
				d.ConsumptionIndustrialCoal = +d.ConsumptionIndustrialCoal;
				d.ConsumptionIndustrialDistillateFuelOil = +d.ConsumptionIndustrialDistillateFuelOil;
				d.ConsumptionIndustrialNaturalGas = +d.ConsumptionIndustrialNaturalGas;
			});

var line = d3.line()
						 .x(function(d) { return d[0]; })
						 .y(function(d) { return d[1]; })

// draw lines
			svg.append("path")
		       .datum(h1)
		       .attr("class", "line")
		       .attr("d", line);

svg.append("path")
		       .datum(h2)
		       .attr("class", "line")
		       .attr("d", line);
		       			
		    svg.append("path")
		       .datum(h3)
		       .attr("class", "line")
		       .attr("d", line);

svg.append("path")
		       .datum(h4)
		       .attr("class", "line")
		       .attr("d", line);
		       			
		    svg.append("path")
		       .datum(v1)
		       .attr("class", "line")
		       .attr("d", line);

svg.append("path")
		       .datum(v2)
		       .attr("class", "line")
		       .attr("d", line);

svg.append("path")
		       .datum(v3)
		       .attr("class", "line")
		       .attr("d", line);

svg.append("path")
		       .datum(v4)
		       .attr("class", "line")
		       .attr("d", line);

// define scales and axes
			var	xScale1 = d3.scaleLinear()
						   .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialCoal})/10000)*10000])
						   .range([0, W]),
				xScale2 = d3.scaleLinear()
						   .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialDistillateFuelOil})/20000)*20000])
						   .range([0, W]),
				xScale3 = d3.scaleLinear()
						   .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialNaturalGas})/100000)*100000])
						   .range([0, W]),
				yScale1 = d3.scaleLinear()
						   .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialCoal})/10000)*10000])
						   .range([H, 0]),
				yScale2 = d3.scaleLinear()
						   .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialDistillateFuelOil})/20000)*20000])
						   .range([H, 0]),
				yScale3 = d3.scaleLinear()
						   .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialNaturalGas})/100000)*100000])
						   .range([H, 0]);
			var xAxis1 = d3.axisBottom()
						  .scale(xScale1),
				xAxis2 = d3.axisTop()
						  .scale(xScale2),
				xAxis3 = d3.axisBottom()
						  .scale(xScale3),
				yAxis1 = d3.axisLeft()
						  .scale(yScale1),
				yAxis2 = d3.axisRight()
						  .scale(yScale2)
						  .ticks(7),
				yAxis3 = d3.axisLeft()
						  .scale(yScale3);

// draw x axes
			svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + margin + " , " + margin*7 + ")") 
				.call(xAxis1)
				.selectAll("text")	
			        .style("text-anchor", "end")
			        .attr("dx", "-1em")
			        .attr("dy", "-0.6em")
			        .attr("transform", "rotate(-90)");

svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + margin*3 + " , " + margin + ")") 
				.call(xAxis2)
				.selectAll("text")	
			        .style("text-anchor", "start")
			        .attr("dx", "1em")
			        .attr("dy", "1.2em")
			        .attr("transform", "rotate(-90)");

svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + margin*5 + " , " + margin*7 + ")") 
				.call(xAxis3)
				.selectAll("text")	
			        .style("text-anchor", "end")
			        .attr("dx", "-1em")
			        .attr("dy", "-0.6em")
			        .attr("transform", "rotate(-90)");

// draw y axes
			svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + margin + ", " + margin + ")") 
				.call(yAxis1);

svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + margin*7 + ", " + margin*3 + ")") 
				.call(yAxis2);

svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + margin + ", " + margin*5 + ")") 
				.call(yAxis3);

// add chart title
			svg.append("text")
			   .text("Scatterplot Matrix of Industrial Energy Consumption")
			   .attr("class", "title")
			   .attr("x", w/2)
			   .attr("y", margin/2 - 10)
			   .attr("text-anchor", "middle");

// add axis labels
			svg.append("text")
		       .attr("class", "axisLabels")
			   .attr("x", 0)
			   .attr("y", 0)
			   .attr("text-anchor", "middle")
			   .attr("transform", "translate(40," + margin*2 + ")rotate(270)") // translate and rotate y axis label
			   .text("Coal");

svg.append("text")
		       .attr("class", "axisLabels")
			   .attr("x", 0)
			   .attr("y", 0)
			   .attr("text-anchor", "middle")
			   .attr("transform", "translate(40," + margin*4 + ")rotate(270)") // translate and rotate y axis label
			   .text("Distilled Fuel Oil");

svg.append("text")
		       .attr("class", "axisLabels")
			   .attr("x", 0)
			   .attr("y", 0)
			   .attr("text-anchor", "middle")
			   .attr("transform", "translate(40," + margin*6 + ")rotate(270)") // translate and rotate y axis label
			   .text("Natural Gas");

svg.append("text")
		       .attr("class", "axisLabels")
			   .attr("x", margin*2)
			   .attr("y", h-30)
			   .attr("text-anchor", "middle")
			   .text("Coal");

svg.append("text")
		       .attr("class", "axisLabels")
			   .attr("x", margin*4)
			   .attr("y", h-30)
			   .attr("text-anchor", "middle")
			   .text("Distilled Fuel Oil");

svg.append("text")
		       .attr("class", "axisLabels")
			   .attr("x", margin*6)
			   .attr("y", h-30)
			   .attr("text-anchor", "middle")
			   .text("Natural Gas");

// draw circles
			svg.selectAll("circle1")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("transform", "translate(" + margin + ", " + margin + ")")
			   .attr("class", "circle")
			   .attr("cx", function(d) {
			   		return xScale1(d.ConsumptionIndustrialCoal);
			   })
			   .attr("cy", function(d) {
					return yScale1(d.ConsumptionIndustrialCoal);
			   })
			   .attr("r", 3);

svg.selectAll("circle2")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("transform", "translate(" + margin*3 + ", " + margin + ")")
			   .attr("class", "circle")
			   .attr("cx", function(d) {
			   		return xScale2(d.ConsumptionIndustrialDistillateFuelOil);
			   })
			   .attr("cy", function(d) {
					return yScale1(d.ConsumptionIndustrialCoal);
			   })
			   .attr("r", 3);

svg.selectAll("circle3")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("transform", "translate(" + margin*5 + ", " + margin + ")")
			   .attr("class", "circle")
			   .attr("cx", function(d) {
			   		return xScale3(d.ConsumptionIndustrialNaturalGas);
			   })
			   .attr("cy", function(d) {
					return yScale1(d.ConsumptionIndustrialCoal);
			   })
			   .attr("r", 3);

svg.selectAll("circle4")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("transform", "translate(" + margin + ", " + margin*3 + ")")
			   .attr("class", "circle")
			   .attr("cx", function(d) {
			   		return xScale1(d.ConsumptionIndustrialCoal);
			   })
			   .attr("cy", function(d) {
					return yScale2(d.ConsumptionIndustrialDistillateFuelOil);
			   })
			   .attr("r", 3);

svg.selectAll("circle5")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("transform", "translate(" + margin*3 + ", " + margin*3 + ")")
			   .attr("class", "circle")
			   .attr("cx", function(d) {
			   		return xScale2(d.ConsumptionIndustrialDistillateFuelOil);
			   })
			   .attr("cy", function(d) {
					return yScale2(d.ConsumptionIndustrialDistillateFuelOil);
			   })
			   .attr("r", 3);

svg.selectAll("circle6")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("transform", "translate(" + margin*5 + ", " + margin*3 + ")")
			   .attr("class", "circle")
			   .attr("cx", function(d) {
			   		return xScale3(d.ConsumptionIndustrialNaturalGas);
			   })
			   .attr("cy", function(d) {
					return yScale2(d.ConsumptionIndustrialDistillateFuelOil);
			   })
			   .attr("r", 3);

svg.selectAll("circle7")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("transform", "translate(" + margin + ", " + margin*5 + ")")
			   .attr("class", "circle")
			   .attr("cx", function(d) {
			   		return xScale1(d.ConsumptionIndustrialCoal);
			   })
			   .attr("cy", function(d) {
					return yScale3(d.ConsumptionIndustrialNaturalGas);
			   })
			   .attr("r", 3);

svg.selectAll("circle8")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("transform", "translate(" + margin*3 + ", " + margin*5 + ")")
			   .attr("class", "circle")
			   .attr("cx", function(d) {
			   		return xScale2(d.ConsumptionIndustrialDistillateFuelOil);
			   })
			   .attr("cy", function(d) {
					return yScale3(d.ConsumptionIndustrialNaturalGas);
			   })
			   .attr("r", 3);

svg.selectAll("circle9")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("transform", "translate(" + margin*5 + ", " + margin*5 + ")")
			   .attr("class", "circle")
			   .attr("cx", function(d) {
			   		return xScale3(d.ConsumptionIndustrialNaturalGas);
			   })
			   .attr("cy", function(d) {
					return yScale3(d.ConsumptionIndustrialNaturalGas);
			   })
			   .attr("r", 3);

});

</script>
</body>

https://d3js.org/d3.v4.min.js