xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>SVG from Data with D3</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <body> <h1>NEET</h1> <h2>Young people Not in Employment, Education or Training</h2> <h3>Intro</h3> <p>Youth inactivity presents the share of <strong>young people not in employment, education or training</strong> (NEET).</p> <p>Young people in education include those attending part-time or full-time education, but exclude those in non-formal education and in educational activities of very short duration.</p> <p>Employment is defined according to the ILO Guidelines and covers all those who have been in paid work for at least one hour in the reference week of the survey or were temporarily absent from such work. Young people who are NEET are at risk of becoming socially excluded, with income below the poverty-line and without the skills to improve their economic situation.</p> <h3>Data to SVG</h3> <p>The bar chart shows the data of OECD countries in 2013. If you hover over the bars you will see <strong>the percentage of the total number of young people</strong> in the corresponding age group (20-24 year-olds).</p> <p>Southern Europe, we have a problem!</p> <script type="text/javascript"> //SVG var w = 700; var h = 400; var padding = 2;//Space between bars var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Load the dataset and sort d3.csv("neet_def_gdp.csv", function(data) { data.sort(function(a, b) { return d3.descending(+a.neet_2013, +b.neet_2013); }); //Create rectangles + using svg height and data.length //for bars' height var rects = svg.selectAll("rect") .data(data) .enter() .append("rect"); rects.attr("x", 0) .attr("y", function(d, i) { return i * (h / data.length); }) .attr("width", function(d) { return d.neet_2013 * 10; }) .attr("height", h / data.length - padding) //.style("fill", "teal") //CSS Style .append("title") .text(function(d) { return d.neet_2013 + "% " + "of 20-24 year-olds in " + d.OECD_Country; }); //Adding labels to bars and //names of countries (csv first column) var texts = svg.selectAll("text") .data(data) .enter() .append("text"); texts.attr("x", function(d) { return (d.neet_2013 * 10) + 5;//Rects width + space }) .attr("y", function(d, i) { return i * (h / data.length) + (h / data.length - padding) / 2 + ((h / data.length - padding) / 2); }) .attr("font-family", "sans-serif") .attr("font-size", h / data.length - 3) .text(function(d) { return d.OECD_Country; }) }); </script> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Etiam et elementum velit, sit amet congue justo. Nulla nisl nunc, efficitur sed mi sed. Aliquam eu turpis a eros suscipit condimentum. </p> <p>Etiam et elementum velit, sit amet congue justo. Nulla nisl nunc, efficitur sed mi sed, aliquet consectetur orci. Aliquam eu turpis a eros suscipit condimentum. </p> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js