% of seats held by women in Parliement in the EU

<!DOCTYPE html>
<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