xxxxxxxxxx<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">   </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> <script type="text/javascript"> //margins var margin = { top:20, right:30, bottom: 30, left: 100 }; //chart size var width = 1000 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; //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