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;
	        font-family: Arial, sans-serif;
      	}

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

}

p{
      		font-size: 1em;
      		margin: 10px 0 0 0;
      		color: #777777;
      	}

rect{
			fill: #8AB7C3;
		}

rect:hover{

fill:#1D8BAB;
		}

.axis path,
			.axis line {
				fill: none;
				stroke: #777777;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
				color:#777777;
			}

.y.axis path,
			.y.axis line{
				opacity: 0;
			}

a{
				text-decoration: none;
			}

</style>

</head>
	<body>

<h1>Proportion of seats held by women in national parliaments in 2014</h1>
	<p>Countries - Descending order (%). Source: <a href="https://www.worldbank.org/">The World Bank</a></p>

var w = 700;
		var h = 3000;
		var padding = [5, 10, 20, 165];

var widthScale = d3.scale.linear()
								.range([ 0, w - padding[1] - padding[3] ]);

var heightScale = d3.scale.ordinal()
						.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);

var body = d3.select("body")

var xAxis = d3.svg.axis()
						.scale(widthScale)
						.orient('bottom');

var yAxis = d3.svg.axis()
									.scale(heightScale)
									.orient('left');

var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

//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);

});
					widthScale.domain([0, d3.max(data, function(d){
						return +d.yr2014;
					}) ]);

heightScale.domain(data.map(function(d){return d.CountryName}));
					//.attr('height', data.length * 20 )
				
				var rects = svg.selectAll("rect")
					.data(data)
					.enter()
					.append("rect")
					.attr('class','rect')

rects.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.CountryName);
					})

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

.attr('height', heightScale.rangeBand())
					.append("title")
					.text(function(d){
						return d.CountryName + "'s proportion of seats held by women: " + d.yr2014 + "%"
					});

svg.append('g')
					.attr('class','x axis' )
					.attr("transform", "translate(" + padding[3]  + "," + (h - padding[2]) + ")")
					.call(xAxis);

svg.append('g')
						.attr('class','y axis' )
						.attr('transform', 'translate(' + (padding[3] -1) + ',0)')
						.call(yAxis);

//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