Linear representation of the women seats in parliament in Cuba and in the USA

<html>
	<head> 
		<title>Gender balance in Cuba and in the USA, 2013</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"> </script>
		<style type="text/css">
	body {
	background-color: ivory;
	font-family: sans-serif;

}

h1 {
	font-size: 20px;
	margin: 0;
	font-family: verdana;
	color: dimgray;
}

p {
	font-size: 14px;
	margin: 10px 0 0 0;
	font-family: sans-serif;
	color: dimgray;

}

svg {
	background-color: ivory; 
}

.axis path,
	.axis line {
		fill: none;
		stroke: dimgray;
		shape-rendering: crispEdges;

}
	.axis text {

font-family: verdana;
		font-size: 14px;

}

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

</style>

</head>
	 <body>

<h1> Gender balance in Cuba and in the USA </h1>
	 	
	 	<p>Percentage of parliamentary seats held by women in Cuba and in the USA expressed as a ratio of those held by men - source: <a href="https://https://hdr.undp.org/en">UNDP human development index</a>,2014</p>
	 	<script type="text/javascript">

var w = 800;
	 	var h = 500;
	 	var padding = [20, 10, 50, 150]; //top, right, bottom, left

var dateFormat = d3.time.format("%Y");

var xScale = d3.time.scale()
	 								.range([ padding[3], w - padding[1] - padding[3] ]);

var yScale = d3.scale.linear()
	 								.range([ padding[0], h - padding[2] ]);

var xAxis = d3.svg.axis()
	 					.scale(xScale)
	 					.orient("bottom")
	 					.ticks(7)
	 					.tickFormat(function(d) {
	 							return dateFormat(d);
	 					});

var yAxis = d3.svg.axis()
	 					.scale(yScale)
	 					.orient("left");

var line = d3.svg.line()
	 			.x(function(d) {
	 					return xScale(dateFormat.parse(d.year));
	 			}) 
	 			.y(function(d){
	 					return yScale(d.womenseats);        
	 			});

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

d3.csv("USAdata.csv", function(usaData) {

d3.csv("CUBAdata.csv", function(cubaData) {

var mergeData = usaData.concat(cubaData);

xScale.domain([ 
	 			d3.min(mergeData, function(d) {
	 					return dateFormat.parse(d.year);
	 			}),
				d3.max(mergeData, function(d) {
	 					return dateFormat.parse(d.year);
	 			})

]);

yScale.domain([
	 		d3.max(mergeData, function(d) {
	 				return +d.womenseats;
	 			}),
	 			0
	 			]);

svg.data([ usaData ])
						.append("path")
						.attr("class", "usa")
						.attr("d", line)
						.attr("fill", "none")
						.attr("stroke", "palevioletred")
						.attr("stroke-width", 5);

svg.data([ cubaData ])
						.append("path")
						.attr("class", "cuba")
						.attr("d", line)
						.attr("fill", "none")
						.attr("stroke", "mediumvioletred")
						.attr("stroke-width", 5);

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

</script>

</body>
</html>

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

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