Module 1 - Census 1901

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Female Employment</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">
			
			body {
				margin: 0;
				background-color: lightGray;
				font-family: Helvetica, Arial, sans-serif;
			}

#container {
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
				box-shadow: 3px 3px 5px 6px #ccc;
			}

h1 {
				font-size: 24px;
				margin: 0;
			}

p {
				font-size: 14px;
				margin: 15px 0 10px 0;
			}

a:link {
				text-decoration: none;
				color: gray;
			}

a:hover {
				text-decoration: underline;
			}

a:visited {
				color: gray;
			}

a:active {
				color: steelBlue;
			}

svg {
				background-color: white;
			}

g.bar text {
				font-size: 11px;
				font-weight: bold;
				text-anchor: start;
				opacity: 0;

}

g.bar:hover rect {
				fill: orange;
			}

g.bar:hover text {
				opacity: 1;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

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

</style>
	</head>
	<body>

<h1>Occupations of females aged 45 - 55 as reported in the 1901 Census of Ireland</h1>

<p>This is a subset of the available data from the 1901 Census of Ireland. The visualization uses a sample of 3,000 records (out of a possible 20,907) of the census returns for females aged 45 to 55 years old who were living in Cork county in 1901. Returns where the occupation was blank or where the total count is less than 3 have been excluded, leaving 1,400 total records displayed in this bar chart. <strong>Source:</strong> <a href="https://www.census.nationalarchives.ie/search/">National Archives of Ireland</a></p>

</div>

var w = 700;
			var h = 600;
			var padding = [ 20, 25, 30, 120 ];  //Top, right, bottom, left

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 xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom");

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

//Now SVG goes into #container instead of body
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

d3.csv("CensusDetail.csv", function(data) {
var myData  = d3.nest()
  .key(function(d) { return d.Occupation; })
  .rollup(function(v) { return v.length; })
  .entries(data);

// console.log(JSON.stringify(myData));

/*myData.sort(function (a, b){
    if (a.values > b.values) {return -1;} 
    else if (a.values < b.values) { return 1;} 
    else  return 0;
}); */

myData.sort(function(a, b) {
					return d3.descending(+a.values, +b.values);
				});
var myNewData = myData.filter(function(d) { 
					 return d.key !== "" && d.values > 2 ;
					//  return d.values > 2 ;
				});
console.log(JSON.stringify(myNewData));

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

heightScale.domain(myNewData.map(function(d) { return d.key; } ));
				//Bind data to groups (not bars directly)
				var groups = svg.selectAll("g")
//								.data(myData.filter(function(d) { 
//					 return d.key !== "" && d.values > 2 ; 	})) 
                                .data(myNewData)
								.enter()
								.append("g")
								.attr("class", "bar");

//Add a rect to each group
				var rects = groups.append("rect")
					.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.key);
					})
					.attr("width", 0)
					.attr("height", heightScale.rangeBand())
					.attr("fill", "steelblue");

//Add a text element to each group
				groups.append("text")
					.attr("x", function(d) {
						return padding[3] + widthScale(d.values) + 2;
					})
					.attr("y", function(d) {
						return heightScale(d.key) + 14;
					})
					.text(function(d) {
						return d.values;
					});

rects.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(1000)
					.attr("width", function(d) {
						return widthScale(d.values);
					});

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] + ",0)")
					.call(yAxis);

});

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js