All examples By author By category About

rjweise

Full window Github gist

KnightD3 MOOC - Module 4 with labels

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>KnightD3 MOOC - rj workfile Mod4</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
				
		<style type="text/css">
			body {
				background-color: #EBEBEB;
				font-family: Helvetica, Georgia;
			}
			
			h1 	{
				color: #333333;
				font-size:30px;
				font-weight: bold;
				font-family: Helvetica;
				margin: 0;
			}

h2 {
				color: dimgray;
				font-size:24px;
				font-weight: bold;
				font-family: Helvetica;
				margin: 0;
			}

h3 {
				color: dimgray;
				font-size:20px;
				font-family: Helvetica;
				margin: 0;

}
			
			p  	{
				color:black;
				font-family: Georgia;
				font-size:14px;
				margin: 10px 0 10px 0;
			}

a  	{
				font-size:8px;
				font-family: Georgia;
				color:gray;
				font-style: italic;
			}
    
			svg {
				background-color: #EBEBEB;
			}

svg2 {
				background-color: green;
			}

rect:hover {
				fill: white;
			}

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

.axis text {
				font-family: Georgia;
				font-size: 10px;
				text-align: left;
			}

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

</style>
	</head>
	
	<body>
    	<h1>Immigrants to Canada per country of origin</h1)<br>
		<h3>#KnightD3 MOOC - Module 4 exercise Alternate, by RJ Weise</h3>
		<p>In May 2006 I emigrated to Canada from The Netherlands. To get a better idea of how many people from The Netherlands and from all over the world, the two graphs below represent two subsets of the total  number of immigrants to Canada by country of origin for the year 2006.
		<br><br>
		The <strong>first graph</strong> shows the top 20 ranked countries by number of immigrants. The <strong>second graph</strong> shows The Neterlands and the three countries above and below it in ranking.
		<br>
		<br>
		Where applicable The Netherlands are highlighted in Orange (as it is my personal country of origin), and The United States of America are highlighted in blue as that is the country where I am taking the course. 
		<br><br>
		Note that after a short delay, holding the mouse over a bar of a specific country, a tooltip will show up with the exact number of immigrants.<br>
		</p>
		
		<p><br><br></p>

<h2>Top 20 ranked countries by number of immigrants to Canada in 2006</h2>
		<script type="text/javascript">

//1a. Setting up width, height and padding
			var w = 800;
			var h = 400;
			var padding = [50, 10, 20, 150] //for top, right, bottom, left

var th = 20; // this sets the threshold for what data is shown based on ranking of countries descending from highest number of immigrants (countries with this value or lower will not be included in the graph)

//1b. Setting up horizontal and vertical scales
			var widthScale = d3.scale.linear()
								.range([0, w - padding[1] - padding[3]]); // from 0 to total width of SVG minus padding right and left
			var heightScale = d3.scale.ordinal()
								//.rangeRoundBands([padding[0], h - padding[2]], 0,5); //When using rangeRoundBands here there will be a significatn area above and below the rows 
								.rangeBands([padding[0], h - padding[2]], 0.1); //from below top padding to height of SVG minus padding at bottom, with 10% spacing

//1c. Setting up horizontal (x) and vertical (y) axis
			var xAxis = d3.svg.axis()
							.scale(widthScale) //length is width of the horizontal scale
							.orient("bottom"); //positioned at the bottom
			var yAxis = d3.svg.axis()
							.scale(heightScale) // length is height of the vertical scale
							.orient("left");	// postioned on the left
			//add another xAxis at the top as the table is long
			var xAxis2 = d3.svg.axis()
							.scale(widthScale)
							.orient("top");

//1d. SETTING UP THE 'CANVAS' TO DRAW ON, WITH SVG
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w) // these values are no longer hard coded
						.attr("height", h);

//2a. LOAD THE CONTENT OF THE CSV FILE, in this case the Canada immigration data, into dataload; filter it and store the result in datafilter; sort it and store it in data

d3.csv("CanPermRes2004-2013byCountry.csv", function(dataload) {

var datasorter = dataload.sort(function(a,b) {
					return d3.descending(+a["2006"], +b["2006"])
				})

var datafilter = datasorter.filter(function(d,i) {
					if (i < th) {
						return d;
					}

})
			
				var data = datafilter;

//2b. Setting the domains for width and height, related to the data we just loaded
				widthScale.domain([0, d3.max(data, function(d) {
					return +d["2006"];
				})]);

heightScale.domain(data.map(function(d) {
					return d.SourceCountry;
				}));

//3a. CREATE A RECTANGLE CONTAINER ELEMENT 
			//3b. ... then  GENERATE THE ATTIRBUTES FOR THE RECTANGLES based on the data from the csv, column with header 2006
			
				var rects = svg.selectAll("rect")
						.data(data) // this is to show all data
						//.data(data.filter(function(d) {
						//	return d["2006"]>500;})) // now it only shows data with 2006-values of over 500
						.enter()
						.append("rect");

//console.log(data);

rects.attr("x", padding[3])
						.attr("y", function(d) {
							return heightScale(d.SourceCountry)+1;
						})
						.attr("width", function(d) {
							return widthScale(d["2006"]);
						})
						.attr("height", heightScale.rangeBand()-2)
						//.attr("fill", "grey")

//Adding highlight colour for The Netherlands
						.attr("fill", function(d) {
                    					if (d.SourceCountry == "The Netherlands") {return "#F46B20"}
                    					else if (d.SourceCountry == "United States of America") {return "steelblue"} 
                    					else {return "grey"}
						})

.append("title")
						.text(function(d) {
							return "In 2006, " + +d["2006"] + " people from " + d.SourceCountry + " emigrated to Canada.";
						});

//ADDING HERE FOR LABELS
				var datalabel = svg.selectAll("text")
					.data(data)
					.enter()
					.append("text");

datalabel.text(function(d, i) {
						return data[i]["2006"];
					})
					.attr("x",  function(d) {
							return (padding[3]-30) + widthScale(d["2006"])
						})
					//.attr("x", 155)
					.attr("y", function(d) {
							return heightScale(d.SourceCountry)+10;
						})
					.attr("fill", "lightgray")
					.attr("font-size", "9px")
					.attr("font-family", "Georgia")
					.attr("font-style", "italic")
					;

//console.log(data[i].SourceCountry)

//Now adding the actual axis (lines and ticks) to the SVG
					svg.append("g")
						.attr("class", "x axis")
						.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
						//.attr("transform", "translate(" + padding[3] + "," + (h-150) + ")")
						.call(xAxis);

svg.append("g")
						.attr("class", "y axis")
						.attr("transform", "translate(" + padding[3] + ",0)")
						.call(yAxis);
					
					svg.append("g") // adding another x axis at the top
						.attr("class", "x axis")
						.attr("transform", "translate(" + padding[3] + "," + padding[0]*0.9 + ")")
						.call(xAxis2);

});

</script>
		<p><br><br><br></p>

<h2>Where do The Netherlands fit in?</h2>
    <p>Hover over the bar to see the actual value.</p>
		<script type="text/javascript">

//1a. Setting up width, height and padding
			var w2 = 1000;
			var h2 = 200;
			var padding2 = [25, 10, 20, 150] //for top, right, bottom, left

var th2 = 99; // this sets the threshold for what data is shown (countries with this value or lower will not be included in the graph)
			var th2up = 999;
			var th2dn = 999;
			//1b. Setting up horizontal and vertical scales
			var widthScale2 = d3.scale.linear()
								.range([0, w2 - padding2[1] - padding2[3]]); // from 0 to total width of SVG minus padding right and left
			var heightScale2 = d3.scale.ordinal()
								//.rangeRoundBands([padding[0], h - padding[2]], 0,5); //When using rangeRoundBands here there will be a significatn area above and below the rows 
								.rangeBands([padding2[0], h2 - padding2[2]], 0.1); //from below top padding to height of SVG minus padding at bottom, with 10% spacing

//1c. Setting up horizontal (x) and vertical (y) axis
			var xAxis4 = d3.svg.axis()
							.scale(widthScale) //length is width of the horizontal scale
							.orient("bottom"); //positioned at the bottom
			var yAxis4 = d3.svg.axis()
							.scale(heightScale2) // length is height of the vertical scale
							.orient("left");	// postioned on the left
			//add another xAxis at the top as the table is long
/*			var xAxis5 = d3.svg.axis()
							.scale(widthScale)
							.orient("top");

*/
			//1d. SETTING UP THE 'CANVAS' TO DRAW ON, WITH SVG
			var svg2 = d3.select("body")
						.append("svg")
						.attr("width", w2) // these values are no longer hard coded
						.attr("height", h2);

//2a. LOAD THE CONTENT OF THE CSV FILE, in this case the Canada immigration data, into dataload; filter it and store the result in datafilter; sort it and store it in data
			
			d3.csv("CanPermRes2004-2013byCountry.csv", function(dataload2) { //this loads the CSV again, but into dataload2
				
				var datasorter2 = dataload2.sort(function(a,b) { //this uses the filtered dataset datafilter2 and sorts it descendingly
					return d3.descending(+a["2006"], +b["2006"])
				})

var datafilter2 = dataload2.filter(function(d,i) { //filter the dataload2 dataset for all records with a value smaller or equal to the threshold (which is set in var)

//The following filters all countries with a ranking lower than the set threshold th2 based on its rank after sorting decendingly
					if  (d.SourceCountry == "The Netherlands") {th2 = i, th2up = i-4, th2dn = i+4;
					} //This defines the rank where The Netherlands sits

})

var datafilter3 = dataload2.filter(function(d,i) {

if (i > th2up && i <= th2) {
						return d;
					}

if (i > th2 && i < th2dn) {
						return d;
					}

})

var data2 = datafilter3 //this is the element we are using later on
/*					if (d["2006"]<=th2) {
						return d;
					}
				})
*/
				;

//2b. Setting the domains for width and height, related to the data we just loaded
				widthScale2.domain([0, d3.max(data2, function(d) {
					return +d["2006"];
				})]);

heightScale2.domain(data2.map(function(d) {
					return d.SourceCountry;
				}));

//3a. CREATE A RECTANGLE CONTAINER ELEMENT called rects in the svg canvas
			//basically selecting all not-yet-existing rectangles in the svg, binding data to it from data (CSV), let the rectangles enter the stage and append the data from the csv to the rectangles that are now created, and...

//3b. ... then  GENERATE THE ATTIRBUTES FOR THE RECTANGLES based on the data from the csv, column with header 2006

var rects2 = svg2.selectAll("rect")
						.data(data2) // this is to show all data
						//.data(data.filter(function(d) {
						//	return d["2006"]>500;})) // now it only shows data with 2006-values of over 500
						.enter()
						.append("rect");

//All bars start on padding left, and we use heightScale for their top left corner. The width of the horizontal bar (so really its length in horizontal direction) is pulled from widthScale.

//The Width (which in a way is the length of the bar) is read from the csv file, column header 2006
			//The tooltip or title is then created and also appended to the individual bars

rects2.attr("x", padding2[3])
						.attr("y", function(d) {
							return heightScale2(d.SourceCountry)+1;
						})
						.attr("width", function(d) {
							return widthScale(d["2006"]);
						})
						.attr("height", heightScale2.rangeBand()-2)
						//.attr("fill", "grey")

//Adding highlight colour for The Netherlands
						.attr("fill", function(d) {
                    					if (d.SourceCountry == "The Netherlands") {return "#F46B20"}
                    					//else if (d.SourceCountry == "United States of America") {return "steelblue"} 
                    					else {return "grey"}
						})

.append("title")
						.text(function(d) {
							return "In 2006, " + +d["2006"] + " people from " + d.SourceCountry + " emigrated to Canada. Rank of The Netherlands: " + th2 + " up: " + th2up + " down: " + th2dn;
						});

//ADDING HERE FOR LABELS
				var datalabel2 = svg2.selectAll("text")
					.data(data2)
					.enter()
					.append("text");

datalabel2.text(function(d, i) {
						return data2[i]["2006"];
					})
					.attr("x",  function(d) {
							return (padding[3]+5) + widthScale(d["2006"])
						})
					//.attr("x", 200)
					.attr("y", function(d) {
							return +heightScale2(d.SourceCountry)+10;
						})
					
					//.attr("y", 150)
					.attr("fill", "black")
					.attr("font-size", "9px")
					.attr("font-family", "Georgia")
					.attr("font-style", "italic")
					;

//Now adding the actual axis (lines and ticks) to the SVG
					svg2.append("g")
						.attr("class", "x axis")
						.attr("transform", "translate(" + padding2[3] + "," + (h2 - padding2[2]) + ")")
						//.attr("transform", "translate(" + padding[3] + "," + (h-150) + ")")
						.call(xAxis4);

svg2.append("g")
						.attr("class", "y axis")
						.attr("transform", "translate(" + padding2[3] + ",0)")
						.call(yAxis4);
					
/*					svg2.append("g") // adding another x axis at the top
						.attr("class", "x axis")
						.attr("transform", "translate(" + padding2[3] + "," + padding2[0]*0.9 + ")")
						.call(xAxis5);
*/			});

</script>

<p></p>
		<a href="https://www.cic.gc.ca/">Source: https://www.cic.gc.ca</a>
		<br>
		<a href="https://www.cic.gc.ca/english/resources/statistics/facts2013/permanent/10.asp">Specific source url</a>

</body>
</html>

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

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