Old school D3 from simpler times

All examples By author By category About

gigiaa

Full window Github gist

Scatterplot of the gender balance in parliaments and of the expected years of school attended by girls.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Gender scatterplot</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;
			}
			p {
				font-size: 13px;
				margin: 10px 0 0 0;
				font-family: verdana;
			}
			svg {
				background-color: ivory;
			}
			circle:hover {
				fill: cadetblue;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
		</style>
	</head>
	<body>

<h1>Gender balance in parliaments and expectancy of years of school by girls in 2013</h1>

<p>Gender balance: Score of women seats in parliaments vs. expected years of school attended by girls. Source: <a href="https://https://hdr.undp.org/en">UNDP human development index</a>, 2014</p>

<script type="text/javascript">		
			var w = 1000;
			var h = 800;
			var padding = [ 20, 10, 50, 110 ];  //Top, right, bottom, left
			var xScale = d3.scale.linear()
								.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(18);

var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.tickFormat(function(d) {
								return d ;
							});
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);
			d3.csv("completedatabase.csv", function(data) {
				xScale.domain([ 
					d3.min(data, function(d) {
						return +d.femaleYear;
					}), 
					d3.max(data, function(d) {
						return +d.femaleYear;
					})
				]);
				yScale.domain([
					d3.max(data, function(d) {
						return +d.womenSeats;
					}),
					d3.min(data, function(d) {
						return +d.womenSeats;
					})
				]);
				var circles = svg.selectAll("circle")
								.data(data)
								.enter()
								.append("circle");
				circles.attr("cx", function(d) {
						return xScale(d.femaleYear);
					})
					.attr("cy", function(d) {
						return yScale(d.womenSeats);
					})
					.attr("r", 1)
					.attr("fill", "mediumvioletred")
					.append("title")
					.text(function(d) {
						return d.Country + "'s expected school years for girls is " + d.femaleYear + ", and " + d.womenSeats + " is the score of women seats in the parliament";
					});
				circles.sort(function(a, b) {
						return d3.ascending(+a.femaleYear, +b.femaleYear);
					})
					.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(1000)
					.attr("r", 9);
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
					.call(xAxis);
				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 8) + ",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