AS4 Trivariate Scatterplot D3

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

<head>
	<title>AS4 Trivariate Scatterplot</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;
		}

.legend {
			font-family: sans-serif;
			font-size: 13px;
		}

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

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

</style>
</head>

<body>
	<script type="text/javascript">
		// declare dimensions
		var h = 500,
			w = 800,
			margin = 100,
			axisBuffer = 20;

var xAxisYPos = h-margin,
			yAxisXPos = margin;

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

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

// define scales and axes
			var xScale = d3.scaleLinear()
						   .domain([0, Math.ceil(d3.max(dataset, function(d) { return Math.log(d.ConsumptionIndustrialKerosene)})/1)*1])
						   .range([margin, w-margin]),
				yScale = d3.scaleLinear()
						   .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialCoal})/10000)*10000])
						   .range([h-margin, margin]);

var xAxis = d3.axisBottom()
						  .scale(xScale),
				yAxis = d3.axisLeft()
						  .scale(yScale);

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

// draw y axis
			svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + yAxisXPos + ", 0)") 
				.call(yAxis);

// add chart title
			svg.append("text")
			   .text("Kerosene Consumption against Coal Consumption by Industrial Sector")
			   .attr("class", "title")
			   .attr("x", w/2)
			   .attr("y", margin/2)
			   .attr("text-anchor", "middle");

// add axis labels
			svg.append("text")
			   .attr("class", "axisLabels")
			   .attr("x", w/2)
			   .attr("text-anchor", "middle")
			   .attr("y", h - margin/2)
			   .text("Log Kerosene Consumption by Industrial Sector (Million BTU)");

svg.append("text")
		       .attr("class", "axisLabels")
			   .attr("x", 0)
			   .attr("y", 0)
			   .attr("text-anchor", "middle")
			   .attr("transform", "translate(25, " + h/2 + ")rotate(270)") // translate and rotate y axis label
			   .text("Coal Consumption by Industrial Sector (Million BTU)");

// draw circles
			svg.selectAll("circle")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("class", "circle")
			   .attr("cx", function(d) {
			   		return xScale(Math.log(d.ConsumptionIndustrialKerosene));
			   })
			   .attr("cy", function(d) {
					return yScale(d.ConsumptionIndustrialCoal);
			   })
			   .style("fill", function (d) {
			   		return getColour(d.State)
			   })
			   .attr("r", 3);

svg.append("text")
			   .attr("class", "legend")
			   .attr("x", w-margin + 30)
			   .attr("y", h/2 - 20)
			   .attr("text-anchor", "left")
			   .text("Michigan")
			   .style("fill", "rgb(0,0,128)");

svg.append("text")
			   .attr("class", "legend")
			   .attr("x", w-margin + 30)
			   .attr("y", h/2)
			   .attr("text-anchor", "left")
			   .text("California")
			   .style("fill", "rgb(220,20,60)");

svg.append("text")
			   .attr("class", "legend")
			   .attr("x", w-margin + 30)
			   .attr("y", h/2 + 20)
			   .attr("text-anchor", "left")
			   .text("Florida")
			   .style("fill", "rgb(255,215,90)");

});

</script>
</body>

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