Module 3: Proportion of seats held by women in national parliaments

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data with D3</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">

body {
	        background-color: #fff1e0;
	        margin: 0;
	        font-family: Arial, sans-serif;
      	}

h1{
      		position: relative;
      		font-size: 1.3em;
      		color: #43423E;
      		margin-bottom: 5px;

}

p{
      		position: relative;
      		font-size: 1em;
      		margin: 0 0 5px;
      	}

.rect{
			fill: #8AB7C3;
		}
		</style>

</head>
	<body>

var body = d3.select("body")

body.append("h1").text("Proportion of seats held by women in national parliaments in 2014")
		body.append("p").text("%")

var svg = d3.select("body")
			
			.append("svg")
			.attr('height', 1500)
			.attr('width',600 );

//Load in contents of CSV file
			d3.csv("women-in-parliaments.csv", function(data) {

data.sort(function(a, b) {
					return d3.descending(+a.yr2014, +b.yr2014);

//If your numeric values aren't sorting properly,
					//try commenting out the line above, and instead using:
					//
					//return d3.descending(+a.lifeSatisfaction, +b.lifeSatisfaction);
					//
					//Data coming in from the CSV is saved as strings (text),
					//so the + signs here force JavaScript to treat those
					//strings instead as numeric values, thereby fixing the
					//sort order (hopefully!).
				});

//.attr('height', data.length * 20 )
				
				var rects= svg.selectAll("rect")
				
					.data(data)
					.enter()
					.append("rect")
					.classed("rect", true);

rects.attr('x',0 )
					.attr('y', function(d, i){
						return i * 10;
					})

.attr('width', function(d){
						return d.yr2014 * 10;
					} )

.attr('height', 8 )
					.append("title")

.text(function(d){
						return d.CountryName + "'s proportion of seats held by women: " + d.yr2014 + "%"
					});

//Now CSV contents have been transformed into
				//an array of JSON objects.

});

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js