tyramoss/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Birds in the Netherlands</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
		<style type="text/css">

			body {
				background-color: antiquewhite;
				font-family: Helvetica, Arial, sans-serif;
			}


            h1
            {font-family: sans-serif;
             font-weight: 100;
             font-size: 20px;
             color: burlywood;
             padding-left: 50px;
            }

			p
            {font-family: sans-serif;
             font-weight: 100;
             font-size: 11px;
             padding-left: 50px;
            }

            a:link {
				text-decoration: none;
				color: gray;
			}

			a:hover {
				text-decoration: underline;
			}

			a:visited {
				color: gray;
			}

			a:active {
				color: steelBlue;
			}

            .line:hover  {
	            stroke: black;
                stroke-width:1.5;
            }

            text
            {font-family: sans-serif;
             font-size: 9px;
            }

            svg {
				background-color: white;
			}

            #container {
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 25px;
				padding: 25px;
				background-color: white;
				box-shadow: 1px 1px 1px 1px #ccc;
            }

            .axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 9px;
			}

            #tooltip {
                position: absolute;
                padding:2px;
                background-color: antiquewhite;
                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;
                pointer-events: none;

            }

            #tooltip.hidden {
                display: none;
            }

            #tooltip p {
                padding-left: 15px;
                padding-right: 15px;
                font-family: sans-serif;
                font-size: 10px;
                line-height: 15px;

            }

		</style>

    </head>

    <body>

        <div id="tooltip" class="hidden">
            <p><span id="value"></span></p>
        </div>


        <div id="container">
		  <h1>Birds in the Netherlands</h1>
          <p>How are the birdpopulations in the Netherlands developing over the years? </p>
          <p>Source: <a href="http://www.compendiumvoordeleefomgeving.nl/indicatoren/nl1194-Stadsvogels.html?i=4-34">Compendium voor de leeromgeving</a>, 2015</p>
        </div>


        <script type="text/javascript">


//Dimensions and padding
			var w = 700;
			var h = 400;
			var padding = [ 20, 10, 50, 100 ];  //Top, right, bottom, left


//Set up date formatting and years
			var dateFormat = d3.time.format("%Y");


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

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


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

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


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

				.y(function(d) {
					return yScale(+d.amount);
				});


//Create the empty SVG image
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);


//Load data
			d3.csv("vogels.csv", function(data) {


				var years = ["1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];

//Create a new, empty array to hold restructured dataset
				var dataset = [];

//Loop once for each row in data
				for (var i = 0; i < data.length; i++) {

//Create new object with this birds's name and empty array
					dataset[i] = {
						bird: data[i].Vogel,
						birdindex: []
					};

//Loop through all the years
					for (var j = 0; j < years.length; j++) {

						// If value is not empty
						if (data[i][years[j]]) {
							//Add a new object to the birdindex data array
							//for this bird
							dataset[i].birdindex.push({
								year: years[j],
								amount: data[i][years[j]]
							});
						}

					}

				}


//Set scale domains
				xScale.domain([
					d3.min(years, function(d) {
						return dateFormat.parse(d);
					}),
					d3.max(years, function(d) {
						return dateFormat.parse(d);
					})
				]);

				yScale.domain([
					d3.max(dataset, function(d) {
						return d3.max(d.birdindex, function(d) {
							return +d.amount;
						});
					}),
					0
				]);

//Make index=0 line (not very flexible yet)
 svg.append("line")
        .attr("stroke", "black")
        .attr("x1", 100)
        .attr("y1", 192)
        .attr("x2", 600)
        .attr("y2", 192);


//Make a group for each bird
				var groups = svg.selectAll("g")
					.data(dataset)
					.enter()
					.append("g");

//Within each group, create a new line/path,
//binding just the birdindex data to each one
				groups.selectAll("path")
					.data(function(d) {
						return [ d.birdindex ];
		                    })
                 	.enter()
                    .append("path")
                    .attr("class", "line")
                    .attr("stroke-width", 0)
                    .attr("stroke", "burlywood")
                    .attr("d", line)
					.attr("fill", "none")
                    .transition()
                    .duration(2500)
                 	.attr("stroke-width", 1.5);

//Name bird
                groups.selectAll("path")
					.data(function(d) {
						return [ d.bird ];
                    })

//Tooltips

                .on("mouseover", function(d) {

                //location tooltip
                var xPosition = (d3.event.pageX);
                var yPosition = (d3.event.pageY-30);

                //Update the tooltip position and value
                d3.select("#tooltip")

                  .style("left", xPosition + "px")
                  .style("top", yPosition + "px")
                  .select("#value")
                  .text(d)

                //Show the tooltip
                d3.select("#tooltip").classed("hidden", false);
                })

                .on("mouseout", function() {

                //Hide the tooltip
                d3.select("#tooltip").classed("hidden", true);

                });


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

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


 //y axis name
                svg.append("text")
                    .attr("x",(padding[3]-50))
                    .attr ("y", h/2-6)
                    .text("Index");


 //x axis name
                svg.append("text")
                    .attr("x",w/2)
                    .attr ("y",h-10)
                    .text("Year");


//End data load function
			});


		</script>

	</body>
</html>

## vogels.csv

          
            Vogel
            1990
            1991
            1992
            1993
            1994
            1995
            1996
            1997
            1998
            1999
            2000
            2001
            2002
            2003
            2004
            2005
            2006
            2007
            2008
            2009
            2010
            2011
            2012
            2013
            2014

            
              Swift
              
              
              89
              117
              99
              107
              84
              82
              89

            
              Pigeon
              100
              118
              109
              124
              120
              108
              97
              115
              84
              87
              86
              83
              80
              71
              80
              80
              83
              89
              95
              92
              94
              91
              90
              87
              86

            
              Sparrow
              100
              113
              107
              98
              87
              96
              74
              74
              46
              47
              41
              42
              43
              43
              44
              49
              48
              44
              42
              45
              46
              51
              47
              45
              48

            
              House Martin
              100
              91
              104
              101
              92
              82
              80
              80
              79
              76
              86
              83
              73
              75
              87
              104
              103
              98
              102
              103
              108
              108
              102
              108
              113

            
              Jackdaw
              100
              93
              107
              105
              111
              81
              75
              71
              55
              49
              56
              52
              48
              45
              40
              45
              38
              42
              43
              46
              43
              49
              48
              48
              50

            
              Great Tit
              100
              98
              105
              96
              107
              95
              108
              134
              104
              105
              103
              102
              102
              109
              119
              119
              127
              127
              128
              127
              135
              126
              122
              121
              117

            
              Blackbird
              100
              111
              104
              117
              117
              98
              107
              112
              114
              115
              120
              116
              113
              116
              120
              124
              127
              132
              130
              127
              127
              122
              123
              117
              123

            
              Blue Tit
              100
              129
              124
              124
              129
              115
              143
              155
              116
              123
              120
              126
              133
              127
              135
              154
              163
              149
              149
              147
              160
              166
              160
              162
              160

            
              Starling
              100
              134
              114
              120
              109
              92
              71
              92
              50
              43
              51
              50
              50
              32
              42
              46
              40
              48
              44
              37
              35
              35
              35
              33
              32

            
              Collared Dove
              100
              108
              102
              108
              110
              91
              101
              105
              97
              95
              97
              103
              110
              102
              87
              93
              88
              88
              88
              92
              87
              89
              82
              84
              83

            
              Finch
              100
              135
              123
              178
              208
              169
              182
              178
              162
              163
              169
              150
              134
              154
              151
              157
              166
              174
              167
              164
              167
              160
              155
              154
              148
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Birds in the Netherlands</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: antiquewhite;
	font-family: Helvetica, Arial, sans-serif;
	}


	h1
	{font-family: sans-serif;
	font-weight: 100;
	font-size: 20px;
	color: burlywood;
	padding-left: 50px;
	}

	p
	{font-family: sans-serif;
	font-weight: 100;
	font-size: 11px;
	padding-left: 50px;
	}

	a:link {
	text-decoration: none;
	color: gray;
	}

	a:hover {
	text-decoration: underline;
	}

	a:visited {
	color: gray;
	}

	a:active {
	color: steelBlue;
	}

	.line:hover {
	stroke: black;
	stroke-width:1.5;
	}

	text
	{font-family: sans-serif;
	font-size: 9px;
	}

	svg {
	background-color: white;
	}

	#container {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	padding: 25px;
	background-color: white;
	box-shadow: 1px 1px 1px 1px #ccc;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 9px;
	}

	#tooltip {
	position: absolute;
	padding:2px;
	background-color: antiquewhite;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	pointer-events: none;

	}

	#tooltip.hidden {
	display: none;
	}

	#tooltip p {
	padding-left: 15px;
	padding-right: 15px;
	font-family: sans-serif;
	font-size: 10px;
	line-height: 15px;

	}

	</style>

	</head>

	<body>

	<div id="tooltip" class="hidden">
	<p><span id="value"></span></p>
	</div>


	<div id="container">
	<h1>Birds in the Netherlands</h1>
	<p>How are the birdpopulations in the Netherlands developing over the years? </p>
	<p>Source: <a href="http://www.compendiumvoordeleefomgeving.nl/indicatoren/nl1194-Stadsvogels.html?i=4-34">Compendium voor de leeromgeving</a>, 2015</p>
	</div>


	<script type="text/javascript">


	//Dimensions and padding
	var w = 700;
	var h = 400;
	var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left


	//Set up date formatting and years
	var dateFormat = d3.time.format("%Y");


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

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


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

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


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

	.y(function(d) {
	return yScale(+d.amount);
	});


	//Create the empty SVG image
	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);


	//Load data
	d3.csv("vogels.csv", function(data) {


	var years = ["1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];

	//Create a new, empty array to hold restructured dataset
	var dataset = [];

	//Loop once for each row in data
	for (var i = 0; i < data.length; i++) {

	//Create new object with this birds's name and empty array
	dataset[i] = {
	bird: data[i].Vogel,
	birdindex: []
	};

	//Loop through all the years
	for (var j = 0; j < years.length; j++) {

	// If value is not empty
	if (data[i][years[j]]) {
	//Add a new object to the birdindex data array
	//for this bird
	dataset[i].birdindex.push({
	year: years[j],
	amount: data[i][years[j]]
	});
	}

	}

	}



	//Set scale domains
	xScale.domain([
	d3.min(years, function(d) {
	return dateFormat.parse(d);
	}),
	d3.max(years, function(d) {
	return dateFormat.parse(d);
	})
	]);

	yScale.domain([
	d3.max(dataset, function(d) {
	return d3.max(d.birdindex, function(d) {
	return +d.amount;
	});
	}),
	0
	]);

	//Make index=0 line (not very flexible yet)
	svg.append("line")
	.attr("stroke", "black")
	.attr("x1", 100)
	.attr("y1", 192)
	.attr("x2", 600)
	.attr("y2", 192);


	//Make a group for each bird
	var groups = svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g");

	//Within each group, create a new line/path,
	//binding just the birdindex data to each one
	groups.selectAll("path")
	.data(function(d) {
	return [ d.birdindex ];
	})
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("stroke-width", 0)
	.attr("stroke", "burlywood")
	.attr("d", line)
	.attr("fill", "none")
	.transition()
	.duration(2500)
	.attr("stroke-width", 1.5);

	//Name bird
	groups.selectAll("path")
	.data(function(d) {
	return [ d.bird ];
	})

	//Tooltips

	.on("mouseover", function(d) {

	//location tooltip
	var xPosition = (d3.event.pageX);
	var yPosition = (d3.event.pageY-30);

	//Update the tooltip position and value
	d3.select("#tooltip")

	.style("left", xPosition + "px")
	.style("top", yPosition + "px")
	.select("#value")
	.text(d)

	//Show the tooltip
	d3.select("#tooltip").classed("hidden", false);
	})

	.on("mouseout", function() {

	//Hide the tooltip
	d3.select("#tooltip").classed("hidden", true);

	});



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

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


	//y axis name
	svg.append("text")
	.attr("x",(padding[3]-50))
	.attr ("y", h/2-6)
	.text("Index");


	//x axis name
	svg.append("text")
	.attr("x",w/2)
	.attr ("y",h-10)
	.text("Year");




	//End data load function
	});



	</script>

	</body>
	</html>
Vogel	1990	1991	1992	1993	1994	1995	1996	1997	1998	1999	2000	2001	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012	2013	2014
Swift																			89	117	99	107	84	82	89
Pigeon	100	118	109	124	120	108	97	115	84	87	86	83	80	71	80	80	83	89	95	92	94	91	90	87	86
Sparrow	100	113	107	98	87	96	74	74	46	47	41	42	43	43	44	49	48	44	42	45	46	51	47	45	48
House Martin	100	91	104	101	92	82	80	80	79	76	86	83	73	75	87	104	103	98	102	103	108	108	102	108	113
Jackdaw	100	93	107	105	111	81	75	71	55	49	56	52	48	45	40	45	38	42	43	46	43	49	48	48	50
Great Tit	100	98	105	96	107	95	108	134	104	105	103	102	102	109	119	119	127	127	128	127	135	126	122	121	117
Blackbird	100	111	104	117	117	98	107	112	114	115	120	116	113	116	120	124	127	132	130	127	127	122	123	117	123
Blue Tit	100	129	124	124	129	115	143	155	116	123	120	126	133	127	135	154	163	149	149	147	160	166	160	162	160
Starling	100	134	114	120	109	92	71	92	50	43	51	50	50	32	42	46	40	48	44	37	35	35	35	33	32
Collared Dove	100	108	102	108	110	91	101	105	97	95	97	103	110	102	87	93	88	88	88	92	87	89	82	84	83
Finch	100	135	123	178	208	169	182	178	162	163	169	150	134	154	151	157	166	174	167	164	167	160	155	154	148