DVD32015 : Module 6

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
	<style>
			.axis path,
			.axis line {
				fill: none;
				stroke: #aaaaaa;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
	</style>
</head>
<body>
	<h1>The delivery amount of liquor in Korea</h1>
	<p><strong style="color:#00A178">Soju</strong> and <strong style="color:#FFC800">Beer</strong>, unit: 1000kl</p>
	<script>
	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.value);  });

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

//France data
 		d3.csv('soju.csv',function(sojudata){

//Italy data
 			d3.csv('beer.csv',function(beerdata){

var merged = sojudata.concat(beerdata);
 				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.value;
 					  }), 0	]);

svg.data([ sojudata ])
						.append("path")
						.attr("class", "line soju")
						.attr("d", line)
						.attr("fill", "none")
						.attr("stroke", "#00A178")
						.attr("stroke-width", 4);

svg.data([ beerdata ])
						.append("path")
						.attr("class", "line beer")
						.attr("d", line)
						.attr("fill", "none")
						.attr("stroke", "#FFC800")
						.attr("stroke-width", 4);

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);
 			});
});
	</script>
</body>
</html>

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

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