AS4 Trellis Plot D3

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

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

.circle {
			/*fill: rgb(220,20,60);*/
			/*stroke: black;*/
			/*stroke-weight: 0.2px;*/
			opacity: 0.7;
		}

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

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

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

</style>
</head>

<body>
	<script type="text/javascript">
		
		// declare dimensions
		var h = 500,
			w = 1000,
			margin = 100,
			plotH = 200,
			plotW = 200;

var d = ["ConsumptionIndustrialCoal", "ConsumptionIndustrialDistillateFuelOil", "ConsumptionIndustrialNaturalGas"];

var xAxisYPos = h-margin,
			yAxisXPos = margin*2,
			yAxisXPos2 = margin*2 + plotW,
			yAxisXPos3 = margin*3 + 2*plotW;

var titleY = margin/2,
			titleX1 = plotW/2,
			titleX2 = margin + plotW/2 + plotW,
			titleX3 = margin*2 + plotW/2 + 2*plotW;

var yLabXTrans = h - margin - plotH/2;

// 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;
			});

// define scales and axes
			var xScale = d3.scaleLinear()
						   .domain([d3.min(dataset, function(d) { return d.Year;}), d3.max(dataset, function(d) { return d.Year})])
						   .range([0, plotW]),
				yScale1 = d3.scaleLinear()
						   .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialCoal})/10000)*10000])
						   .range([plotH, 0]),
				yScale2 = d3.scaleLinear()
						   .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialDistillateFuelOil})/20000)*20000])
						   .range([plotH, 0]),
				yScale3 = d3.scaleLinear()
						   .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialNaturalGas})/100000)*100000])
						   .range([plotH, 0]);
			var xAxis = d3.axisBottom()
						  .scale(xScale)
						  .tickValues(d3.range(d3.min(dataset, function(d) { return d.Year;}), d3.max(dataset, function(d) { return d.Year;}) + 1, 18)) // add 1 to include upper bound
						  .tickFormat(d3.format("d")),
				yAxis1 = d3.axisLeft()
						  .scale(yScale1),
				yAxis2 = d3.axisLeft()
						  .scale(yScale2),
				yAxis3 = d3.axisLeft()
						  .scale(yScale3);

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

svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + margin + ", " + yAxisXPos + ")") 
				.call(yAxis1);

svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + yAxisXPos2 + " , " + xAxisYPos + ")") 
				.call(xAxis);

svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + yAxisXPos2 + ", " + yAxisXPos + ")") 
				.call(yAxis2);

svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + yAxisXPos3 + " , " + xAxisYPos + ")") 
				.call(xAxis);

svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + yAxisXPos3 + ", " + yAxisXPos + ")") 
				.call(yAxis3);

// add chart title
			svg.append("text")
			   .text("Industrial Consumption of Various Energy Types by Year")
			   .attr("class", "title")
			   .attr("x", w/2)
			   .attr("y", margin/2)
			   .attr("text-anchor", "middle");

// add plot titles
			svg.append("text")
				 .text("Coal")
				 .attr("class", "plotnames")
				 .attr("x", plotW/2)
			     .attr("y", plotH/2)
			     .attr("transform", "translate(" + titleX1 + ", " + titleY + ")")
			     .attr("text-anchor", "middle");

svg.append("text")
				 .text("Distillate Fuel Oil")
				 .attr("class", "plotnames")
				 .attr("x", plotW/2)
			     .attr("y", plotH/2)
			     .attr("transform", "translate(" + titleX2 + ", " + titleY + ")")
			     .attr("text-anchor", "middle");

svg.append("text")
				 .text("Natural Gas")
				 .attr("class", "plotnames")
				 .attr("x", plotW/2)
			     .attr("y", plotH/2)
			     .attr("transform", "translate(" + titleX3 + ", " + titleY + ")")
			     .attr("text-anchor", "middle");

// add axis labels
			svg.append("text")
			   .attr("class", "axisLabels")
			   .attr("x", plotW*2 + 3*margin + plotW/2)
			   .attr("text-anchor", "middle")
			   .attr("y", h - margin/2)
			   .text("Year");

svg.append("text")
			   .attr("class", "axisLabels")
			   .attr("x", w/2)
			   .attr("text-anchor", "middle")
			   .attr("y", h - margin/2)
			   .text("Year");

svg.append("text")
			   .attr("class", "axisLabels")
			   .attr("x", margin + plotW/2)
			   .attr("text-anchor", "middle")
			   .attr("y", h - margin/2)
			   .text("Year");

svg.append("text")
		       .attr("class", "axisLabels")
			   .attr("x", 0)
			   .attr("y", 0)
			   .attr("text-anchor", "middle")
			   .attr("transform", "translate(30, " + yLabXTrans + ")rotate(270)") // translate and rotate y axis label
			   .text("Consumption (Million BTU)");

svg.append("text")
		       .attr("class", "axisLabels")
			   .attr("x", 0)
			   .attr("y", 0)
			   .attr("text-anchor", "middle")
			   .attr("transform", "translate(330, " + yLabXTrans + ")rotate(270)") // translate and rotate y axis label
			   .text("Consumption (Million BTU)");

svg.append("text")
		       .attr("class", "axisLabels")
			   .attr("x", 0)
			   .attr("y", 0)
			   .attr("text-anchor", "middle")
			   .attr("transform", "translate(630, " + yLabXTrans + ")rotate(270)") // translate and rotate y axis label
			   .text("Consumption (Million BTU)");

// draw circles
			svg.selectAll("circle1")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("transform", "translate(100,200)")
			   .attr("class", "circle")
			   .attr("cx", function(d) {
			   		return xScale(d.Year);
			   })
			   .attr("cy", function(d) {
					return yScale1(d.ConsumptionIndustrialCoal);
			   })
			   .style("fill", "rgb(165,42,42)")
			   .attr("r", 3);

svg.selectAll("circle2")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("transform", "translate(400,200)")
			   .attr("class", "circle")
			   .attr("cx", function(d) {
			   		return xScale(d.Year);
			   })
			   .attr("cy", function(d) {
					return yScale2(d.ConsumptionIndustrialDistillateFuelOil);
			   })
			   .style("fill", "rgb(204,204,0)")
			   .attr("r", 3);

svg.selectAll("circle3")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("transform", "translate(700,200)")
			   .attr("class", "circle")
			   .attr("cx", function(d) {
			   		return xScale(d.Year);
			   })
			   .attr("cy", function(d) {
					return yScale3(d.ConsumptionIndustrialNaturalGas);
			   })
			   .style("fill", "rgb(95,158,160)")
			   .attr("r", 3);

});

</script>
</body>

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