tyramoss/index.html

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

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


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

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

            }

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

			a:hover {
				text-decoration: underline;
			}

			a:visited {
				color: steelBlue;
			}

			a:active {
				color: steelBlue;
			}


            path:hover {
				fill: #eeeeee;
			}

            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>Aantal leraren in Nederland</h1>
          <p>In Nederland zijn, als we de universiteiten buiten beschouwing laten, zo'n 250.000 leraren werkzaam. In het primaire onderwijs verreweg het meest: 130.000.

De cijfers zijn afgeleid uit de omvang van het totale personeelsbestand (in personen) en het aandeel onderwijzend personeel. Het onderwijsondersteunende personeel is niet meegeteld. </p>
          <p>Bronnen: <a href="http://stamos.nl/index.rfx">Stamos</a> en <a href="http://www.datagraver.com/case/aantal-leraren-in-nederland">Datagraver</a>, 2015</p>
        </div>


        <script type="text/javascript">


//Set up stack method
			var stack = d3.layout.stack()
							.values(function(d) {
								return d.leraren;
							})
							.order("reverse");


//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 area generator
			var area = d3.svg.area()
				.x(function(d) {
					return xScale(dateFormat.parse(d.x));
				})
				.y0(function(d) {
					return yScale(d.y0);  //Updated
				})
				.y1(function(d) {
					return yScale(d.y0 + d.y);  //Updated
				});


//Easy colors accessible via a 10-step ordinal scale
			var color = d3.scale.category20c();


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


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


				var years = ["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"];

//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 education's name and empty array
					dataset[i] = {
						type: data[i].Onderwijs,
						leraren: []
					};

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

						//Default value, used in case no value is present
						var amount = null;

						// If value is not empty
						if (data[i][years[j]]) {
							amount = +data[i][years[j]];
						}

						//Add a new object to the emissions data array
						//for this country
						dataset[i].leraren.push({
							x: years[j],
							y: amount
						});

					}

				}

//Stack the data!
				stack(dataset);


//Set scale domains

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

				//Need to recalcluate the max value for yScale
				//differently, now that everything is stacked.

				//Loop once for each year, and get the total value
				//of bindex for that year.
				var totals = [];

				for (i = 0; i < years.length; i++) {
					totals[i] = 0;
					for (j = 0; j < dataset.length; j++) {
						totals[i] += dataset[j].leraren[i].y;
					}
				}

				yScale.domain([ d3.max(totals), 0 ]);


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


//Make a path for each type
				var paths = svg.selectAll("path")
					.data(dataset)
					.enter()
					.append("path")
					.attr("class", "area")
					.attr("d", function(d) {
						//Calculate path based on only d.emissions array,
						//not all of d (which would include the country name)
						return area(d.leraren);
					})
					.attr("stroke", "none")
					.attr("fill", function(d, i) {
						return color(i);
					});

                paths.append("title")
					.text(function(d) {
						return d.type;
					});
//
////Name type
//
//					paths.data(function(d) {
//						return [ d.type ];
//                    });
////
////Tooltips
//
//                paths.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("aantal leraren");
//


                 svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 35)
    .attr("x",0 - (h / 2))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("aantal leraren");


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


//End data load function
			});


		</script>

	</body>
</html>

## onderwijs.csv

          
            Onderwijs
            2000
            2001
            2002
            2003
            2004
            2005
            2006
            2007
            2008
            2009
            2010
            2011
            2012

            
              Hoger beroepsonderwijs
              18316
              17865
              19958
              20530
              20222
              18314
              20930
              22426
              24158
              25104
              25230
              26253
              26696

            
              Middelbaar beroepsonderwijs
              29232
              29748
              31255
              31009
              29594
              28474
              29072
              29904
              27290
              27466
              27713
              26959
              27445

            
              Voortgezet onderwijs
              66938
              70224
              73418
              74077
              73948
              74207
              75395
              76838
              75593
              77506
              76576
              75472
              74542

            
              Primair onderwijs
              115751
              121516
              127650
              128803
              129441
              131166
              133198
              142398
              135049
              141300
              139536
              135285
              131317
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Onderwijs in Nederland</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

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


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

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

	}

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

	a:hover {
	text-decoration: underline;
	}

	a:visited {
	color: steelBlue;
	}

	a:active {
	color: steelBlue;
	}


	path:hover {
	fill: #eeeeee;
	}

	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>Aantal leraren in Nederland</h1>
	<p>In Nederland zijn, als we de universiteiten buiten beschouwing laten, zo'n 250.000 leraren werkzaam. In het primaire onderwijs verreweg het meest: 130.000.

	De cijfers zijn afgeleid uit de omvang van het totale personeelsbestand (in personen) en het aandeel onderwijzend personeel. Het onderwijsondersteunende personeel is niet meegeteld. </p>
	<p>Bronnen: <a href="http://stamos.nl/index.rfx">Stamos</a> en <a href="http://www.datagraver.com/case/aantal-leraren-in-nederland">Datagraver</a>, 2015</p>
	</div>


	<script type="text/javascript">


	//Set up stack method
	var stack = d3.layout.stack()
	.values(function(d) {
	return d.leraren;
	})
	.order("reverse");



	//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 area generator
	var area = d3.svg.area()
	.x(function(d) {
	return xScale(dateFormat.parse(d.x));
	})
	.y0(function(d) {
	return yScale(d.y0); //Updated
	})
	.y1(function(d) {
	return yScale(d.y0 + d.y); //Updated
	});



	//Easy colors accessible via a 10-step ordinal scale
	var color = d3.scale.category20c();



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


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


	var years = ["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"];

	//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 education's name and empty array
	dataset[i] = {
	type: data[i].Onderwijs,
	leraren: []
	};

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

	//Default value, used in case no value is present
	var amount = null;

	// If value is not empty
	if (data[i][years[j]]) {
	amount = +data[i][years[j]];
	}

	//Add a new object to the emissions data array
	//for this country
	dataset[i].leraren.push({
	x: years[j],
	y: amount
	});

	}

	}

	//Stack the data!
	stack(dataset);


	//Set scale domains

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

	//Need to recalcluate the max value for yScale
	//differently, now that everything is stacked.

	//Loop once for each year, and get the total value
	//of bindex for that year.
	var totals = [];

	for (i = 0; i < years.length; i++) {
	totals[i] = 0;
	for (j = 0; j < dataset.length; j++) {
	totals[i] += dataset[j].leraren[i].y;
	}
	}

	yScale.domain([ d3.max(totals), 0 ]);


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



	//Make a path for each type
	var paths = svg.selectAll("path")
	.data(dataset)
	.enter()
	.append("path")
	.attr("class", "area")
	.attr("d", function(d) {
	//Calculate path based on only d.emissions array,
	//not all of d (which would include the country name)
	return area(d.leraren);
	})
	.attr("stroke", "none")
	.attr("fill", function(d, i) {
	return color(i);
	});

	paths.append("title")
	.text(function(d) {
	return d.type;
	});
	//
	////Name type
	//
	// paths.data(function(d) {
	// return [ d.type ];
	// });
	////
	////Tooltips
	//
	// paths.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("aantal leraren");
	//


	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 35)
	.attr("x",0 - (h / 2))
	.attr("dy", "1em")
	.style("text-anchor", "middle")
	.text("aantal leraren");


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




	//End data load function
	});



	</script>

	</body>
	</html>
Onderwijs	2000	2001	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012
Hoger beroepsonderwijs	18316	17865	19958	20530	20222	18314	20930	22426	24158	25104	25230	26253	26696
Middelbaar beroepsonderwijs	29232	29748	31255	31009	29594	28474	29072	29904	27290	27466	27713	26959	27445
Voortgezet onderwijs	66938	70224	73418	74077	73948	74207	75395	76838	75593	77506	76576	75472	74542
Primair onderwijs	115751	121516	127650	128803	129441	131166	133198	142398	135049	141300	139536	135285	131317