var     width=890,
		height=500,
		padding = [ 20, 10, 50, 100 ],
		dateFormat = d3.time.format("%Y");   

		//scales
		xScale = d3.time.scale()
								.range([ padding[3] ,width-padding[3]]),


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


		//Axis

		xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(15)
							.tickFormat(function(d){
								return dateFormat(d);
							});


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


		//line generator

		var line = d3.svg.line()
			 	   .x(function(d){
			 	   		return xScale(dateFormat.parse(d.year)); 
			 	   })

			 	   .y(function(d){

			 	   		return yScale(+d.rd);  
			 	   });

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

		//France data
 		d3.csv('R&DFrance.csv',function(franceData){

 	
 			//Italy data
 			d3.csv('R&DItaly.csv',function(italyData){

 				var merged = franceData.concat(italyData);
 				console.log(merged);

 				xScale.domain([
 						d3.min(merged,function(d){
 							return dateFormat.parse(d.year);
 						}),
 						d3.max(merged,function(d){
 							return dateFormat.parse(d.year);
 						})

 					]);

 				yScale.domain([
 					  d3.max(merged,function(d){
 					  	  return +d.rd;
 					  }),
 					  0
 					]);

 				svg.data([ franceData ])
						.append("path")
						.attr("class", "line france")
						.attr("d", line)
						.attr("fill", "none")
						.attr("stroke", "blue")
						.attr("stroke-width", 2);
				svg.data([ italyData ])
						.append("path")
						.attr("class", "line italy")
						.attr("d", line)
						.attr("fill", "none")
						.attr("stroke", "red")
						.attr("stroke-width", 2);

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



 			});
});