xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Women in Parliament</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: white; font-family: Helvetica, Arial, sans-serif; color:black; } h1 { font-size: 24px; font-family: georgia, serif; margin: 10px 0 0 0; } p { font-size: 1em; margin: 10px 0 0 0; } svg { background-color: white; margin-top: 25px; padding-top: 5px; padding-left: 5px; } path { stroke: #DEDEDE; stroke-width: 1; } g.France path { stroke: #283C7D; stroke-width: 2; } g.Germany path { stroke: #7A190A; stroke-width: 2; } g.France path:hover, g.Germany path:hover { stroke: #FF0000; } path:hover { stroke: #4C1F91; } .axis path, .axis line { fill: none; stroke: black; stroke-dasharray:1, 2; stroke-width: 1; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 0.8em; } </style> </head> <body> <h1>Women's representation in national parliaments in the EU between 2004 and 2014 </h1> <p>Comparing values for Germany and France.<br> While Germany remains fairer in terms of women representation in Parliament than France, France is getting closer to its neighbour's figures.<br> German women presence in Parliement has been more stable than their French counterpart.</p> <p>In the EU, Sweden is the country getting the closer to 50% of women in Parliament and has been so for the last 10 years.<br> Hungary is at the bottom of this ranking, having been passed over by Malta who finally got more than 10% of women in the 2013 elections.</p> <script type="text/javascript"> // 1. setting the size of the svg var w = 900; var h = 600; var padding = [20, 10, 50, 80 ]; // 0 top, 1 right, 2 bottom, 3 left // 2. setting dates and scales var dateFormat = d3.time.format("%Y"); // 2.1. horizontal scale (x) var xScale = d3.time.scale() .range([padding[3], w - padding[1] - padding[3] ]); //2.2 vertical (y) var yScale = d3.scale.linear() .range([padding[0], h - padding[2] ]); // 3. setting the axis var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .tickFormat(function(d) { return dateFormat(d); }); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .tickSize(-(w-padding[3]-padding[1]-75)) .outerTickSize(0) .tickFormat(function(d) { return d + "%"; }); // 4. setting the line var line = d3.svg.line () .x(function(d) { return xScale(dateFormat.parse(d.year)); }) .y(function(d) { return yScale(+d.amount); }) .interpolate("monotone"); // 5. appending the svg to the page var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); // 6. fecthing the data d3.csv("womenEU.csv", function(data) { // 7. Restructuring the data // New array with all the years, for referencing later var years = ["2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"]; //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 country's name and empty array dataset[i] = { country: data[i].countryName, seats: [] }; //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 seats data array //for this country dataset[i].seats.push({ year: years[j], amount: data[i][years[j]] }); } } } // 7. setting the domain ie width scale to the data - set to smallest and highest values instead of zero to highest xScale.domain([ d3.min(years, function(d) { return dateFormat.parse(d); }), d3.max(years, function(d) { return dateFormat.parse(d); }) ]); // 8. setting the domain ie height scale to the data yScale.domain([ d3.max(dataset, function(d) { return d3.max(d.seats, function(d) { return +d.amount; }); }), d3.min(dataset, function(d) { return d3.min(d.seats, function(d) { return +d.amount; }); }) ]); // 9. drawing lines with the data: // 9.1. creating a group for each country var groups = svg.selectAll("g") .data(dataset) .enter() .append("g") .classed("France", function(d) { if (d.country == "France") { return true; } else { return false; } }) .classed("Germany", function(d) { if (d.country == "Germany") { return true; } else { return false; } }) ; // 9.2 Append a title with the country name (so we get easy tooltips) groups.append("title") .text(function(d) { return d.country; }); // Within each group, create a new line/path, binding just the seats data to each one groups.selectAll("path") .data(function(d) { return [ d.seats ]; }) .enter() .append("path") .attr("class", "line") .attr("d", line) .attr("fill", "none") .attr("stroke-width", 2); // 11. drawing the axis 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); svg.append("text") .attr("class", "label") .attr("transform", "rotate(-90)") .attr("y", padding[3]-80) .attr("x",0 - (h/2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("% of seats held by women in parliament"); // Borrowing Ruben V's code for data labels from Marcia G. Thanks, Ruben and Marcia!!! var datalabel = svg.selectAll(".lineLabel") .data(dataset.filter(function(d) { console.log(d.country); return (d.country == "France" || d.country == "Germany" || d.country == "Sweden" || d.country == "Hungary" ); })) .enter() .append("text") .attr("class", "lineLabel"); datalabel.attr("x", [w - padding[1] - padding[3] + 5]) .attr("y",(function(d) { return yScale( d.seats[10].amount ) +2; // year [10] -> 2014 })) .attr("fill", "black") .attr("font-size", "11px") .attr("font-family", "Helvetica, sans-serif") .text(function(d) { return d.country; }); }); // end of data load function </script> <p> source: <a href="https://mdgs.un.org/unsd/mdg/Data.aspx">United Nations</a></p> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js