D3 week 6

<!DOCTYPE html>
<html>

<head>

<title>D3 Course week 6</title>
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">
			
			body {
				background-color: #f2f2f2;
			}

h2 {
				font-family: helvetica;
				font-weight: bold;
				font-size: 24px;
				color: #1A1A1A;
				margin-bottom: 0px;
			}

p {
				font-family: helvetica;
				font-size: 15px;
				color: #1A1A1A;
				margin-bottom: 0px;
			}

p2 {
				font-family: helvetica;
				font-size: 10px;
				color: #AAAAAA;
				margin-bottom: 0px;
				text-align: right;
			}

.yaxis,
			.xaxis text {
				font-family: helvetica;
				font-size: 10px;
				shape-rendering: crispEdges;
			}
			.yaxis path,
			.yaxis line,
			.xaxis path,
			.xaxis line {
					fill: none;
					stroke: black;
			}

</style>

</head>

<body>

<h2>Interest</h2>

<p>Interest rates in 2014 in % in the <strong style="color: steelblue;">United States</strong> and <strong style="color: red;">European Union</strong></p>
	<script>

var w = 700
	var h = 500
	var padding = [ 40, 40, 40, 40 ]; //Top, right, bottom, left

var dateFormat = d3.time.format("%m/%d")

var xScale = d3.time.scale()
						.range([ padding[3], w - padding[1] - padding[3] ]);

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

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

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

var lineUS = d3.svg.line()
					.x(function(d) { return xScale(dateFormat.parse(d.date)); })
					.y(function(d) { return yScale(d.US); });

var lineEU = d3.svg.line()
					.x(function(d) { return xScale(dateFormat.parse(d.date)); })
					.y(function(d) { return yScale(d.EU); });

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

d3.csv("data.csv", function(data) {

xScale.domain([ 
				d3.min(data, function(d) { return dateFormat.parse(d.date);
				}), 
				d3.max(data, function(d) { return dateFormat.parse(d.date);
				}) 
			]);

yScale.domain([ 
				d3.max(data, function(d) { return +d.US;
				}) + 0.5, 
				d3.min(data, function(d) { return +d.EU;
				}) - 0.5
			]);

svg.data([ data ])
			.append("path")
			.attr("class", "line")
			.attr("d", lineUS)
			.attr("fill", "none")
			.attr("stroke", "steelblue")
			.attr("stroke-width", 3);

svg.data([ data ])
			.append("path")
			.attr("class", "line")
			.attr("d", lineEU)
			.attr("fill", "none")
			.attr("stroke", "red")
			.attr("stroke-width", 3);

svg.append("g")
			.attr("class", "xaxis")
			.attr("transform", "translate(0," + (h - padding[2]) + ")")
			.call(xAxis);

svg.append("g")
			.attr("class", "yaxis")
			.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
			.call(yAxis);

});

</script>

</body>

</html>

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

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