Multi-line drug sentences graph

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Drug prison sentences in Spokane County</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
		<link rel="stylesheet" type="text/css" href="style.css">
			
		
	
	</head>
	
	
	<body>
	<h2>Drug use and prison, Spokane County</h2>
	<p>The number of people sent to <span style="color:black">prison</span> and <span style="color:slategrey">jail</span> in Spokane County for drug-related crimes versus <span style="color:darkblue">prison</span> and <span style="color:cornflowerblue">jail</span> for all crimes.</p>
	<script type="text/javascript">

xScale.domain([
				d3.min(data, function(d) {
					return dateFormat.parse(d.year);
					}),
				d3.max(data, function(d) {
					return dateFormat.parse(d.year);
					})
				]);
				
				yScale.domain( [d3.max(data, function(d) {
					return Math.max(+d.drug_prison, +d.drug_jail, +d.all_prison, +d.all_jail);
				}), 0]);
				
					
				svg.data([ data ])
					.append("path")
					.attr("class", "line dprison")
					.attr("d", line1)
					.attr("fill", "none")
					.attr("stroke", "black")
					.attr("stroke-width", 2);
				
				svg.data([ data ])
					.append("path")
					.attr("class", "line djail")
					.attr("d", line2)
					.attr("fill", "none")
					.attr("stroke", "slategrey")
					.attr("stroke-width", 2);
				
				svg.data([ data ])
					.append("path")
					.attr("class", "line aprison")
					.attr("d", line3)
					.attr("fill", "none")
					.attr("stroke", "darkblue")
					.attr("stroke-width", 2);
				
				svg.data([ data ])
					.append("path")
					.attr("class", "line ajail")
					.attr("d", line4)
					.attr("fill", "none")
					.attr("stroke", "cornflowerblue")
					.attr("stroke-width", 2);
				
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2]) + ")")
					//this positions axis visually, would be at 0,0 otherwise
					.call(Xaxis);
				
				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
					//this positions axis visually, would be at 0,0 otherwise. translation is relative to the graph itself, I think, not the svg, because a 0 value still gets you some top padding
					.call(Yaxis);
					
				});

</script>
	<p id="footer">Data from the <a href="https://wa-state-ofm.us/CrimeStatsOnline/">Washington Statistical Analysis Center</a></p>
	</body>

</html>

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

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