Homeless Population in NYC (Line)

<!doctype html>
<html>
<head>
<title>Interactive Tree Map</title>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
</body>
<script>
var parseDate = d3.timeParse("%Y");

function homelessLine() { 
    
var margin = {left: 70, right: 50, top: 60, bottom: 80};

var height = 500 - margin.top - margin.bottom;
var width = 500 - margin.right - margin.left

var parseDate = d3.timeParse("%Y");

// GET + FORMAT DATA

d3.csv("homelessPopulation2.csv", function(data){
      data.year = parseDate(data.year);
      data.population = +data.population;
      return data}, function(error, data){
    if (error) throw error;
	
	var yScale = d3.scaleLinear()
				.domain([0, d3.max(data, function(d){return d.population})])
				.rangeRound([height, 0])
  			.nice()

var xScale = d3.scaleTime() 
				.domain(d3.extent(data, function(d){ return d.year})) 
				.rangeRound([0,width]);

var yAxis = d3.axisLeft(yScale).ticks(5).tickPadding(5);
	var xAxis = d3.axisBottom(xScale).ticks(d3.timeYear.every(2))

var svg = d3.select("body").append('svg')
		.attr('width', width + margin.right + margin.left)
		.attr('height', height + margin.bottom + margin.top)
		.style("background-color","lightgrey")

var chartGroup = svg.append("g")
		.attr("width",width)
		.attr("transform", "translate("+margin.left+","+margin.top+")");

// Define Variables for the Grid
	var tickCount;
	var y2Pos;

tickCount = 10;
	y2Pos = (0)

// Draw the Grid
	chartGroup.selectAll("line.horizontalGrid").data(yScale.ticks(10)).enter().append("line")
		.attr("x1", width)
		.classed("horizontalGrid", true)
		.attr("x2", 0)
		.attr("y1", function(d){return yScale(d)})
		.attr("y2", function(d){return yScale(d)})
		.attr("fill","none")
		.attr("stroke","darkgrey")
		.attr("stroke-width","1px");

chartGroup.selectAll("line.verticalGrid").data(xScale.ticks(tickCount)).enter().append("line")
		.attr("y1", height)
		.classed("verticalGrid", true)
		.attr("y2", y2Pos)
		.attr("x1", function(d){return xScale(d)})
		.attr("x2", function(d){return xScale(d)})
		.attr("fill","none")
		.attr("stroke","darkgrey")
		.attr("stroke-width","1px");

// Attach the Axes
	chartGroup.append("g")
		.attr("class","Xaxis")
		.call(xAxis)
		.attr("transform","translate(0,"+height+")")
		.selectAll("text")
		  .style("text-anchor", "end")
			.attr("dx", "-.8em")
			.attr("dy", ".15em")
			.attr("transform", "rotate(-65)");
	chartGroup.append("g")
		.attr("class","Yaxis")
		.call(yAxis)
		.selectAll("text")
		  .style("text-anchor", "middle")
			.attr("dy", "-1em")
			.attr("transform", "rotate(-90)");

// Define the Lines
	var line = d3.line()
		.x(function(d){return xScale(d.year)})
		.y(function(d){return yScale(d.population)})
		.curve(d3.curveBasis);

var line2 = d3.line()
		.x(function(d){return xScale(d.year)})
		.y(function(d){return yScale(d.children)})
		.curve(d3.curveBasis);

var line3 = d3.line()
		.x(function(d){return xScale(d.year)})
		.y(function(d){return yScale(d.singleWomen)})
		.curve(d3.curveBasis);

var line4 = d3.line()
		.x(function(d){return xScale(d.year)})
		.y(function(d){return yScale(d.singleMen)})
		.curve(d3.curveBasis);

var line5 = d3.line()
		.x(function(d){return xScale(d.year)})
		.y(function(d){return yScale(d.adultsInFamilies)})
		.curve(d3.curveBasis);

// Attach the Line ('path')
	chartGroup.append("path")
		.attr("d", line(data))
		.attr('class','line')
		.classed("homelessLine",true);

chartGroup.append("path")
		.attr("d", line2(data))
		.attr('class','line2')
		.classed("homelessLine",true);

chartGroup.append("path")
		.attr("d", line3(data))
		.attr('class','line3')
		.classed("homelessLine",true);

chartGroup.append("path")
		.attr("d", line4(data))
		.attr('class','line4')
		.classed("homelessLine",true);

chartGroup.append("path")
		.attr("d", line5(data))
		.attr('class','line5')
		.classed("homelessLine",true);

chartGroup.append("text")
		  .attr("y", -45)
		  .attr("x", (height/2)- height)
		  .attr("text-anchor", "middle")
		  .attr("transform", "rotate(-90)")
		  .style("font-size", "13px")
		  .style("text-decoration", "underline")
		  .text("Total Number of Homeless");

chartGroup.append("text")
		  .attr("y", (height) + margin.top)
		  .attr("x", (width/2))
		  .attr("text-anchor", "middle")
		  .style("font-size", "13px")
		  .style("text-decoration", "underline")
		  .text("Year");
	
	
	var title = svg.append("text")
		  .attr("x", 250)
		  .attr("y", (margin.top / 2))
		  .attr("text-anchor", "middle")
		  .style("font-size", "20px")
		  .style("text-decoration", "underline")
		  .text("Homeless Population in New York City")
		  .style("font-family","Raleway")
	
	d3.select("g.Yaxis g.tick").remove()
	d3.selectAll("g.tick text").style("font-size","10px")
});
}
homelessLine();
</script>
</html>

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