xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Onderwijs in Nederland</title> <script type="text/javascript" src="https://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="https://stamos.nl/index.rfx">Stamos</a> en <a href="https://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 domainsxScale.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> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js