larsboogaard/data.csv

## data.csv

          
            date
            US
            EU

            
              01/02
              2.989
              1.941

            
              01/03
              2.9948
              1.944

            
              01/06
              2.9576
              1.907

            
              01/07
              2.9391
              1.886

            
              01/08
              2.9894
              1.904

            
              01/09
              2.9652
              1.915

            
              01/10
              2.8579
              1.843

            
              01/13
              2.8257
              1.817

            
              01/14
              2.8709
              1.814

            
              01/15
              2.8912
              1.825

            
              01/16
              2.8414
              1.779

            
              01/17
              2.8194
              1.753

            
              01/21
              2.8286
              1.741

            
              01/22
              2.8656
              1.738

            
              01/23
              2.7772
              1.757

            
              01/24
              2.715
              1.709

            
              01/27
              2.7479
              1.658

            
              01/28
              2.7488
              1.665

            
              01/29
              2.6767
              1.677

            
              01/30
              2.6949
              1.742

            
              01/31
              2.644
              1.715

            
              02/03
              2.5761
              1.659

            
              02/04
              2.6294
              1.644

            
              02/05
              2.6675
              1.65

            
              02/06
              2.7003
              1.636

            
              02/07
              2.6829
              1.696

            
              02/10
              2.6674
              1.661

            
              02/11
              2.725
              1.68

            
              02/12
              2.7608
              1.686

            
              02/13
              2.732
              1.715

            
              02/14
              2.7428
              1.667

            
              02/18
              2.7069
              1.679

            
              02/19
              2.7392
              1.684

            
              02/20
              2.7509
              1.667

            
              02/21
              2.731
              1.661

            
              02/24
              2.7382
              1.69

            
              02/25
              2.7023
              1.662

            
              02/26
              2.6655
              1.68

            
              02/27
              2.6387
              1.646

            
              02/28
              2.6476
              1.617

            
              03/03
              2.6012
              1.562

            
              03/04
              2.6977
              1.624

            
              03/05
              2.7048
              1.551

            
              03/06
              2.7373
              1.598

            
              03/07
              2.7879
              1.605

            
              03/10
              2.777
              1.647

            
              03/11
              2.768
              1.653

            
              03/12
              2.73
              1.625

            
              03/13
              2.6446
              1.638

            
              03/14
              2.6543
              1.596

            
              03/17
              2.6921
              1.541

            
              03/18
              2.6722
              1.546

            
              03/19
              2.7725
              1.567

            
              03/20
              2.7716
              1.567

            
              03/21
              2.7426
              1.599

            
              03/24
              2.7281
              1.646

            
              03/25
              2.748
              1.631

            
              03/26
              2.6919
              1.578

            
              03/27
              2.681
              1.577

            
              03/28
              2.7208
              1.568

            
              03/31
              2.718
              1.536

            
              04/01
              2.7525
              1.548

            
              04/02
              2.8045
              1.566

            
              04/03
              2.7972
              1.573

            
              04/04
              2.7207
              1.616

            
              04/07
              2.6998
              1.603

            
              04/08
              2.6808
              1.553

            
              04/09
              2.6898
              1.539

            
              04/10
              2.6474
              1.557

            
              04/11
              2.6247
              1.575

            
              04/14
              2.6472
              1.52

            
              04/15
              2.6283
              1.504

            
              04/16
              2.6282
              1.526

            
              04/17
              2.7215
              1.472

            
              04/21
              2.7151
              1.485

            
              04/22
              2.7105
              1.515

            
              04/23
              2.6987
              1.534

            
              04/24
              2.6805
              1.522

            
              04/25
              2.6623
              1.529

            
              04/28
              2.7004
              1.484

            
              04/29
              2.6913
              1.497

            
              04/30
              2.6459
              1.499

            
              05/01
              2.6133
              1.469

            
              05/02
              2.5843
              1.449

            
              05/05
              2.6068
              1.458

            
              05/06
              2.5914
              1.46

            
              05/07
              2.5878
              1.473

            
              05/08
              2.6287
              1.486

## index.html
<!DOCTYPE html>
<html>

<head>

	<title>D3 Course week 6</title>
	<script type="text/javascript" src="http://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>

<p2>bron: CBS</p2>

</body>

</html>
date	US	EU
01/02	2.989	1.941
01/03	2.9948	1.944
01/06	2.9576	1.907
01/07	2.9391	1.886
01/08	2.9894	1.904
01/09	2.9652	1.915
01/10	2.8579	1.843
01/13	2.8257	1.817
01/14	2.8709	1.814
01/15	2.8912	1.825
01/16	2.8414	1.779
01/17	2.8194	1.753
01/21	2.8286	1.741
01/22	2.8656	1.738
01/23	2.7772	1.757
01/24	2.715	1.709
01/27	2.7479	1.658
01/28	2.7488	1.665
01/29	2.6767	1.677
01/30	2.6949	1.742
01/31	2.644	1.715
02/03	2.5761	1.659
02/04	2.6294	1.644
02/05	2.6675	1.65
02/06	2.7003	1.636
02/07	2.6829	1.696
02/10	2.6674	1.661
02/11	2.725	1.68
02/12	2.7608	1.686
02/13	2.732	1.715
02/14	2.7428	1.667
02/18	2.7069	1.679
02/19	2.7392	1.684
02/20	2.7509	1.667
02/21	2.731	1.661
02/24	2.7382	1.69
02/25	2.7023	1.662
02/26	2.6655	1.68
02/27	2.6387	1.646
02/28	2.6476	1.617
03/03	2.6012	1.562
03/04	2.6977	1.624
03/05	2.7048	1.551
03/06	2.7373	1.598
03/07	2.7879	1.605
03/10	2.777	1.647
03/11	2.768	1.653
03/12	2.73	1.625
03/13	2.6446	1.638
03/14	2.6543	1.596
03/17	2.6921	1.541
03/18	2.6722	1.546
03/19	2.7725	1.567
03/20	2.7716	1.567
03/21	2.7426	1.599
03/24	2.7281	1.646
03/25	2.748	1.631
03/26	2.6919	1.578
03/27	2.681	1.577
03/28	2.7208	1.568
03/31	2.718	1.536
04/01	2.7525	1.548
04/02	2.8045	1.566
04/03	2.7972	1.573
04/04	2.7207	1.616
04/07	2.6998	1.603
04/08	2.6808	1.553
04/09	2.6898	1.539
04/10	2.6474	1.557
04/11	2.6247	1.575
04/14	2.6472	1.52
04/15	2.6283	1.504
04/16	2.6282	1.526
04/17	2.7215	1.472
04/21	2.7151	1.485
04/22	2.7105	1.515
04/23	2.6987	1.534
04/24	2.6805	1.522
04/25	2.6623	1.529
04/28	2.7004	1.484
04/29	2.6913	1.497
04/30	2.6459	1.499
05/01	2.6133	1.469
05/02	2.5843	1.449
05/05	2.6068	1.458
05/06	2.5914	1.46
05/07	2.5878	1.473
05/08	2.6287	1.486
	<!DOCTYPE html>
	<html>

	<head>

	<title>D3 Course week 6</title>
	<script type="text/javascript" src="http://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>

	<p2>bron: CBS</p2>

	</body>

	</html>