Line chart with shaded middle area

<!doctype html>
<html lang='en-GB'>
<head></head>
<style>
	p {
		font-family: sans-serif;
		font-size: 14px;
		margin-bottom: 0;
	}
	/*template styles*/
	.gia-chart-wrapper {
		max-width: 620px;
		margin: 0 auto;
	}
	/*chart styles*/
	.y.axis line {
	    fill: none;
	    stroke: #dcdcdc;
	    stroke-dasharray: 1px 1px;
	    shape-rendering: crispEdges;
	    stroke-width: 1px;
	}
	.x.axis line {
	    fill: none;
	    stroke: #333333;
	    shape-rendering: crispEdges;
	    stroke-width: 1px;
	}
	.tick.g-baseline line {
	  	stroke: #333333;
	  	stroke-dasharray: 0;
	  	stroke-width: 1px;
	} 
	.axis text {
	    font-family: sans-serif;
	    font-size: 12px;
	    pointer-events: none;
	    fill: #bdbdbd;
	}
	.y.axis text {
	    text-anchor: end !important;
	    font-size:12px;
	    fill: #bdbdbd;
	}
	.domain {
	    display: none;
	}
	.area {
	  	fill: #eaeaea;
	  	opacity: 0.5;
	}
	.g-label-text {
	    font-family: sans-serif;
	    font-size: 14px;
	}
	.g-label-circle {
	    fill: #4bc6df;
	}
	.blueLine {
	    stroke: #005689;
	    stroke-width: 2px;
	    fill: none;
	}
	.redLine {
	    stroke: #d61d00;
	    stroke-width: 2px;
	    fill: none;
	}
	.labelBlue {
	    font-family: sans-serif;
	    font-size: 14px;
	    font-weight: 700;
	    fill: #005689;
	    text-anchor: end;
	}
	.labelRed {
	    font-family: sans-serif;
	    font-size: 14px;
	    font-weight: 700;
	    fill: #d61d00;
	    text-anchor: start;
	}
</style>

var widther = d3.select(".gia-chart").node().clientWidth;

var width = widther - margin.left - margin.right,
		    height = 330 - margin.top - margin.bottom;

//Parses date for correct time format
		var parseDate = d3.time.format("%Y").parse;

//Comma format
		format = d3.format("0,000");

//Appends the svg to the chart-container div
		var svg = d3.select(".gia-chart").append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom)
			.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//Creates the xScale 
		var xScale = d3.time.scale()
		  	.range([0, width]);

//Creates the yScale
		var yScale = d3.scale.linear()
		  	.range([height, 0]);

//Defines the y axis styles
		var yAxis = d3.svg.axis()
			.scale(yScale)
		  	.tickSize(-width)
		  	.tickPadding(8)
		  	.ticks(6)
		  	.tickFormat(function(d) { return "$" + format(d); })
			.orient("left");

//line function convention (feeds an array)
		var blueLine = d3.svg.line()
		  	.x(function(d) { return xScale(d.year); })
		  	.y(function(d) { return yScale(d.blueValue); });

var redLine = d3.svg.line()
		  	.x(function(d) { return xScale(d.year); })
		  	.y(function(d) { return yScale(d.redValue); });

//Loads the data
		d3.csv("homeValue.csv", ready);

function ready(err, data) {

if (err) throw "error loading data";

//FORMAT data
			data.forEach(function(d) {
				d.blueValue = +d.blueValue;
		    	d.redValue = +d.redValue;
		    	d.year = parseDate(d.year);
			});
			
			//Organizes the data	
		  	data.sort(function(a,b) { return a.year - b.year; });
		  	var maxY = d3.max(data, function(d) { return d.blueValue; });
		  	var maxX = d3.max(data, function(d) { return d.year; });

//Area
		  	var indexes = d3.range(data.length);

var area = d3.svg.area()
		    	.x(function(d) {return xScale(d.year); }) 
		      	.y0(function(d) { return yScale(d.blueValue); })
		      	.y1(function(d) { return yScale(d.redValue); });

//Defines the y axis styles
		  	var xAxis = d3.svg.axis()
		    	.scale(xScale)
		    	.tickPadding(8)
		    	.orient("bottom")
		    	.ticks(6)
		    	.tickFormat(d3.time.format("%Y"));

//Defines the xScale max
		  	xScale.domain(d3.extent(data, function(d) { return d.year; }));

//Defines the yScale max
		  	yScale.domain([0, maxY]);

//Appends the y axis
			var yAxisGroup = svg.append("g")
				.attr("class", "y axis")
				.call(yAxis)
				.selectAll("g")
				.classed("g-baseline", function(d) {return d == 0});

//Appends the x axis		
			var xAxisGroup = svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(0," + height + ")")
				.call(xAxis);

//Area in between
		  	var drawarea = svg.append("path")
		    	.datum(data)
		    	.attr("class", "area")
		    	.attr("d", area);

//Data join for paths 
		  	var drawBlueLine = svg.append("path")
		    	.datum(data)
		    	.attr("class", "blueLine")
		    	.attr("d", blueLine);

//Data join for paths 
		  	var drawRedLine = svg.append("path")
		    	.datum(data)
		    	.attr("class", "redLine")
		    	.attr("d", redLine);

//Append labels  
		  	var labelBlue = svg.append("text")
		      	.text("Blue states")
		      	.attr("class", "labelBlue")
		      	.attr("x", width/1.625)
		      	.attr("y", height/5);

var labelRed = svg.append("text")
		      	.text("Red states")
		      	.attr("class", "labelRed")
		      	.attr("x", width/1.575)
		      	.attr("y", height/1.55);        
		      
			//RESPONSIVENESS
		  	d3.select(window).on("resize", resized);

function resized() {

//new margin
		    	var newMargin = {top: 20, right: 10, bottom: 30, left:65};

var newWidther = d3.select(".gia-chart").node().clientWidth;

var newWidth = newWidther - newMargin.left - newMargin.right;

//Change the width of the svg
		    	d3.select("svg")
		      		.attr("width", newWidth + newMargin.left + newMargin.right);

//Change the xScale
		    	xScale
		      		.range([0, newWidth]);

//Update the blue line
		    	blueLine = d3.svg.line()
		      		.x(function(d) { return xScale(d.year); })
		      		.y(function(d) { return yScale(d.blueValue); });

d3.selectAll('.blueLine')
		      		.attr("d", blueLine);

//Update the red line
		    	redLine = d3.svg.line()
		      		.x(function(d) { return xScale(d.year); })
		      		.y(function(d) { return yScale(d.redValue); });

d3.selectAll('.redLine')
		      		.attr("d", redLine);  
		    
		    	//Updates xAxis
		    	d3.selectAll(".x.axis")
		         	.call(xAxis);

//Updates ticks
		    	xAxis
		      		.scale(xScale)
		      		.ticks(6);

//Updates yAxis
		    	d3.selectAll(".y.axis")
		      		.call(yAxis);

yAxis
		      		.tickSize(-newWidth);

//Updates labels  
		    	labelBlue
		      		.attr("x", newWidth/1.625);

labelRed
		      		.attr("x", newWidth/1.575);

//Updates area
		    	area = d3.svg.area()
		      		.x(function(d) {return xScale(d.year); }) 
		      		.y0(function(d) { return yScale(d.blueValue); })
		      		.y1(function(d) { return yScale(d.redValue); });

d3.selectAll('.area')
		      		.attr("d", area);      
		  	};    
		}
	</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js