Updated Attrition Time Series

<html>
	<head>
		<meta charset="utf-8">
		<title>Attrition Time Series Line Chart</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<link rel="stylesheet" type="text/css" href="style-time-series.css">
		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Cutive">
	</head>
	<body>
		<div id="headspace"> &nbsp </div>
		<div id="banner">
		<div id="banner-inner">
		<h1><span>Attrition</span> Time Series</h1>
		</div>
		</div>
		<div id="container" class="center">
		<div id="header">
		<h2>Attrition Rate(a) for all commencing bachelor students by State and Higher Education Institution(b), 2001 to 2012(c)</h1>
		</div>
		<div id="time-series-chart">
		<div id="tooltip" class="hidden">
		<p><strong><span id="tooltipHeading">Important Label Heading</span></strong></p>
		</div>
		<div id="tooltipTail" class="hidden">
		</div>
		</div>

//number formats
				var dateFormat = d3.time.format("%Y");
				var percentformat = d3.format("%");
				
				//Create the empty SVG image
				var svg = d3.select("#time-series-chart")
							.append("svg")
							.attr({
								"width": width + margin.left + margin.right,
								"height": height + margin.top + margin.bottom
							  })
							.append("g")
							  .attr("transform", "translate("+ margin.left + "," + margin.top + ")");

//Set up scales
				var xScale = d3.time.scale()
                .range([0, width]);
				
				var yScale = d3.scale.linear()
                .range([0, height]);

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

var yAxis = d3.svg.axis()
								.scale(yScale)
								.orient("left")
								.tickFormat(function(d) {
									return percentformat(d);
								});

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

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

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

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

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

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

//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 attrition data array
								//for this provider
								dataset[i].attrition.push({
									year: years[j],
									rate: data[i][years[j]]
								});
							}

}

}
					
					//Uncomment to log the original data to the console
					console.log(data);

//Uncomment to log the newly restructured dataset to the console
					console.log(dataset);

//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.attrition, function(d) {
								return +d.rate;
							});
						}),
						0
					]);

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

//Append a title with the provider name (so we get easy tooltips)
					groups.attr("name", function (d){
						return d.provider;
						});
						
					//Within each group, create a new line/path,
					//binding just the attrition data to each one
					groups.selectAll("path")
						.data(function(d) {
							return [ d.attrition ];
						})
						.enter()
						.append("path")
						.attr("class", "line")
						.attr("d", line)
						.attr("fill", "none")
						.attr("stroke", "#95a5a6")
						.attr("stroke-width", 2)
						.classed("chartLine", true)
						.on("mouseover", mouseover)
						.on("mouseout", mouseout);
										
						function mouseover (d) {                                  
							var lastRate = +d[d.length - 1].rate;
							var x = width + margin.left + margin.right;
							var y = yScale(lastRate) + margin.top -5 ;
							var tailX = width + margin.left + margin.right - 20;
							var tailY = yScale(lastRate) + margin.top;

var providerName = d3.select(this.parentNode).attr("name")
							
							//Update the tooltip position and value
							d3.select("#tooltip")
							  .style("left", x + "px")
							  .style("top", y + "px")
							  .select("#tooltipHeading")							  
							  .text(providerName);
							
							d3.select("#tooltipTail")
							  .style("left", tailX + "px")
							  .style("top", tailY + "px")
							  ;
												  
							  
							  
							//Show the tooltip
							d3.select("#tooltip").classed("hidden", false);
							d3.select("#tooltipTail").classed("hidden", false);
								
								
								}
						
						
						function mouseout (d) {

d3.select("#tooltip")
									.classed("hidden", true);
								d3.select("#tooltipTail").classed("hidden", true);
								}

//Axes
					svg.append("g")
						.attr("class", "x axis")
						.attr("transform", "translate(0," + height + ")")
						.call(xAxis);

svg.append("g")
						.attr("class", "y axis")
						.call(yAxis);

});

</script>
			
			<div id="footnotes">
			<p class="left">(a) Attrition rate for year(x) is the proportion of students who commenced a bachelor course in year(x) who neither complete nor return in year(x + 1).</p>
			<p class="left">(b) Includes only Public Universities (Table A).</p>
			<p class="left">(c) Figures are based on full year data.</p>
			<p class="left">(d) Data for the Australian Defence Force Academy data are included under University of New South Wales in this publication (for all years). Australian Defence Force Academy was excluded in the corresponding tables in previous years.</p>
			<p class="left">(e) Previously University of Ballarat.</p>
			<p class="left">(f) Prior to 2006 The University of Melbourne classified Study Abroad students as award. These were re-classififed in 2006 to non-award, removing them from the scope of Retention calculation and affecting the rates.</p>
			<p class="left">(g) The Australian Maritime College is reported as a part of the University of Tasmania from 2008. These were previously reported separately.</p>
			<p class="left">(h) As a result of a collaborative partnership between Batchelor Institute of Indigenous Tertiary Education and Charles Darwin University which established The Australian Centre for Indigenous Knowledge and Education (ACIKE),</p>
			<p class="left">(i) Attrition rate (normal calculation) is based on a match process using the students' StudentID. This gives a "crude" attrition rate, which identifies students that neither complete a course nor are retained the following year at the same institution.</p>
			</div>
			<div id="source" class="left">
			<p>SOURCE: <a href="https://education.gov.au/selected-higher-education-statistics-2013-student-data">Department of Education: selected higher education statistics 2013</a>.</p>
			</div>
		
			
			
			</div>
			
		
	</body>
</html>

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

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