Scatter plot with lines, test

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Australian energy by fuel type</title>
		<style type="text/css">

body {
				font-family: Helvetica, Arial, sans-serif;
				background-color: white;
				padding: 50px;
			}

h1 {
				font-size: 48px;
				font-weight: bold;
				margin-bottom: 10px;
				margin-top: 0px;
			}

h2 {
				font-size: 26px;
				font-style: normal ;
			}

p {
				font-size: 14px;
				line-height: 18px;
				margin:0;
			}

a {
				font-size: 14px;
				line-height: 18px;
			}

ul {
				font-size: 14px;
				padding-left: 15px;
			}

em {
				color: red;
				font-weight: bold;
				font-style: italic;
			}
			.label {
				fill: darkslategray;
				font-size: 10px;
			}

.label2 {
				fill: white;
				font-size: 10px;
			}

.barcolor {
				fill: cadetblue;
			}

.barcolor:hover {
				fill: darkblue;
			}

.circcolor {
				fill: cadetblue;
			}

.circcolor:hover {
				fill: purple;
			}
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 10px;
			}

.y.axis path,
			.y.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

</style>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
	</head>
	<body>

<h1>Australian energy by fuel type</h1>
		<img src="https://proecogroup.eu/sites/default/files/images/proecogroupPropjekty.jpg">

<h2>Coal versus Oil</h2>
		<p>This is an exercise. The following bar chart was created using d3.</p>
		<p>The data shows the amount of energy from coal and from oil generated in Australia, from 1977 to 2013, in Petajoules (10<sup>15</sup> Joules).</p>
		<p>The x-axis shows the amount of energy from coal, while the y-axis shows the mount of energy generated from oil.</p>
		<p>X-axis and y-axis not to scale</p>
		<p>(pass the mouse over a circle to see the year it refers to)</p>
		<br>

var w = 700
					var h = 550
					var padding = [ 5, 10, 20, 50 ];  //Top, right, bottom, left

var xScale = d3.scale.linear()
								.range([ padding [3], w - padding[1] ]);

var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);

var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(12);

var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.ticks(12);

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

//var next = d3.select(this).node().nextSibling;
					// Here is where I put the var = next, before the d3.csv. Is that the correct position?

d3.csv("australianenergy.csv", function(data) {

xScale.domain([ 0, d3.max(data, function(d) {
						return +d.Coal;
						}) * 1.1]);

yScale.domain([ d3.max(data, function(d) {
						return +d.OilLPG;
						}) * 1.1, 0]);

var circs = svg.selectAll("circle")
										.data(data)
										.enter()
										.append("circle")

var lines = svg.selectAll("line")
										.data(data)
										.enter()
										.append("line");

circs.attr("cx", function(d) {
								return xScale(d.Coal)
							})
							.attr("class", "circcolor")
							.attr("cy", function(d) {
								return yScale(d.OilLPG);
							})
							.attr("r", 0.1)
							.append("title")
							.attr("class", "label")
							.text(function(d) {
								return "In the year of " + d.Year + ", Energy from Coal was " + d.Coal + " and from Oil was " + d.OilLPG + " Petajoules";
							});

circs.sort(function(a, b) {
								return d3.ascending(+a.Coal, +b.Coal);
							})
							.transition()
							.delay(function(d, i) {
								return i * 50;
							})
							.duration(2000)
							.attr("r", 5);

lines.attr("x1", function(d) {
								return xScale(d.Coal)
							})
							.attr("y1", function(d) {
								return yScale(d.OilLPG)
							})
							.attr("x2", function(d) {

//If a next sibling exists…
								if (d3.select(this).node().nextSibling) {

//Get the __data__ object for the next (sibling) element
									var nextData = d3.select(this).node().nextSibling.__data__;
									
									//Uncomment the following lines and watch the console
									//to see how this works
									// console.log(d3.select(this));
									// console.log(d3.select(this).node());
									// console.log(d3.select(this).node().nextSibling);
									// console.log(d3.select(this).node().nextSibling.__data__);
									// console.log(d3.select(this).node().nextSibling.__data__.Coal);
									// console.log(nextData);

return xScale(nextData.Coal);

} else {

//Otherwise, just reuse the x1 value
									//(so this line is basically rendered as a point)
									return xScale(d.Coal);

}

})
							.attr("y2", function(d) {

//If a next sibling exists…
								if (d3.select(this).node().nextSibling) {

//Get the __data__ object for the next (sibling) element
									var nextData = d3.select(this).node().nextSibling.__data__;

return yScale(nextData.OilLPG);

} else {

//Otherwise, just reuse the y1 value
									//(so this line is basically rendered as a point)
									return yScale(d.OilLPG);

}

})
							.style("stroke", 1)
							.style("stroke", "gray");

svg.append("g")
						.attr("class", "x axis")
						.attr("transform", "translate(0," + (h - padding[2]) +")")
						.call(xAxis);

svg.append("g")
						.attr("class", "y axis")
						.attr("transform", "translate(" + (padding[3]) + ",0)")
						.call(yAxis);

});

</script>
			<p> Source: Australian Energy Statistics.</p>
			<a href="https://www.industry.gov.au/Office-of-the-Chief-Economist/Publications/Pages/Australian-energy-statistics.aspx#">Department of Industry and Science</a>
	</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js