xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>KnightD3 MOOC - Final page</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: #EBF5FA;
font-family: Georgia, serif, Impact, Charcoal, sans-serif;
width: 960px;
margin: 10px, 10px, 200px, 10px;
}
h1 {
color: dimgray;
font-size:40px;
font-weight: bold;
font-family: Impact, Charcoal, sans-serif;
margin: 0;
}
h2 {
color: dimgray;
font-size:30px;
font-family: Impact, Charcoal, sans-serif;
margin: 0;
text-align: left;
}
h3 {
color: dimgray;
font-size:24px;
font-family: Impact, Charcoal, sans-serif;
margin: 0;
}
p {
color:dimgray;
font: Georgia, serif;
font-size:16px;
}
a {
font-size:12px;
font-family: Georgia, serif;
color:gray;
font-style: italic;
}
svg {
margin: 0 0 0 0;
float:right;
}
svg2 {
left: 500px;
margin: 80px 0 0 50px;
}
svg9 {
background-color: green;
position: absolute;
top: 1200px;
float:left;
}
svg66 {
background-color: green;
position: absolute;
top: 1200px;
float:left;
}
path {
stroke: dimgray;
stroke-width: 1;
opacity: 0.8;
}
rect:hover {
fill: LightGray;
}
g.highlightHOL path {
stroke: #F46B20;
stroke-width: 3;
opacity:0.8;
z-index: 10;
}
g.highlightUSA path {
stroke: steelblue;
stroke-width:3;
opacity: 0.8;
z-index: 5;
}
path:hover {
stroke: red;
stroke-width: 8;
opacity: 0.7;
}
.axis path,
.axis line {
fill: none;
stroke: dimgray;
shape-rendering: crispEdges;
}
.axis text {
font-family: Georgia, serif;
font-size: 12px;
text-align: left;
}
.y.axis path {
opacity: 0
}
.y.axis line {
opacity: 100;
}
.yy.axis path {
opacity: 0
}
.yy.axis line {
opacity: 100;
}
#header {
width: 100%;
}
#intro {
width: 380px;
float:left;
border-right: 1px;
}
#graph1 {
width:540px;
float:right;
}
#graph2 {
width: 540px;
float:right;
margin: 10px 0 0 0;
}
#source {
position: fixed;
bottom: 0;
right: 0;
text-align: center;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
background-color: #EBF5FA;
opacity: 0.8;
}
#graph3 {
width: 100%;
float:right;
margin: 50px 0 0 0;
}
#graph4 {
width: 100%;
float:right;
margin: 50px 0 0 0;
}
#filler {
width: 100%;
float:right;
height:100px;
}
</style>
</head>
<body>
<div ID="header">
<h1>Immigrants to Canada per country of origin</h1><br>
<h3>#KnightD3 MOOC - Final page, by RJ Weise</h3>
<hr>
</div ID="header">
<div ID="intro">
<h2>Introduction</h2>
<p ID="intro">During the first months of 2015 I participated in the #knightD3 MOOC on Data Visualization. This page is a summary of the exercizes I did for the 6 modules of the course. I selected Canada Immigration data as in May 2006 I emigrated to Canada from The Netherlands and found it interesting to see some of the data that includes myself.
<br><br>
Modules one and two were about selecting, downloading, cleaning up and loading the data. The <strong>graph to the right</strong> shows Modules 3 and 4's horizontal bar graph with the top 20 ranked countries by number of immigrants, as well as The Neterlands and the three countries above and below it in ranking. The <strong>second graph (below)</strong> shows a scatter plot with transitions created for module 5. The <strong>last graph (bottom)</strong> shows the result of module 6: the line chart.
<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 the course is taught from.
<br><br>
Note that after a short delay, holding the mouse over a bar of a specific country, a tooltip will show additional information.<br><br>
Lastly it is also very obvious that I still have a lot to learn about general HTML and CSS, in addition to Javascript and D3.
</p>
</div ID="intro">
<div ID="graph1">
<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 = 540;
var h = 400;
var padding = [50, 10, 15, 170] //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")
.attr("colour", "green")
;
//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>
</div ID="graph1">
<div ID="graph2">
<!--<h2>Where do The Netherlands fit in?</h2>-->
<p ID="graph2"><i>(The Netherlands do not show up in the top 20 ranked countries. The following list shows The Netherlands and the three countries above and below it in the rankings.)</i></p>
<script type="text/javascript">
//1a. Setting up width, height and padding
var w2 = 540;
var h2 = 200;
var padding2 = [20, 10, 20, 170] //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. The Netherlands are ranked " + th2;
});
//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><br><br></p>
</div>
<div ID="graph3">
<h2>Comparing the number of immigrants to Canada in 2006 and 2013</h2>
<p>This section is for the Module five assignment, in which I compare two quantitative values in a scatter-plot<br>
The Netherlands (orange outline) and the USA (blue outline) are highlighted in larger sizes than all other countries and the outline colours are orange and blue respectively. All countries have a purple fill colour if they increased from 2006 to 2013, and yellow if they stayed the same or decreased.
</p>
<script type="text/javascript">
//1a. Setting up width, height and padding
var w9 = 940;
var h9 = 600;
var padding9 = [200, 10, 20, 150] //for top, right, bottom, left
var th9 = 52; // 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 AND PIXEL RANGES
var widthScale9 = d3.scale.linear()
.range([0, w9 - padding9[1] - padding9[3]]); // from 0 to total width of SVG minus padding right and left
var heightScale9 = d3.scale.linear()
.range([0, h9 - padding9[2] - padding[0]]); //from 0 to total height of svg minus padding on bottom
//ORG.range([padding9[0], h - padding9[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 xAxis9 = d3.svg.axis()
.scale(widthScale9) //length is width of the horizontal scale
.orient("bottom"); //positioned at the bottom
var yAxis9 = d3.svg.axis()
.scale(heightScale9) // length is height of the vertical scale
.orient("left"); // postioned on the left
//1d. SETTING UP THE 'CANVAS' TO DRAW ON, WITH SVG
var svg9 = d3.select("body")
.append("svg")
.attr("width", w9) // these values are no longer hard coded
.attr("height", h9);
//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(dataload9) {
var datasorter9 = dataload9.sort(function(a,b) { //This is to load the data ranked from highest immigrant number to lowest, based on column 206
return d3.descending(+a["2006"], +b["2006"])
})
var datafilter9 = datasorter9.filter(function(d,i) { //This filters out any records that are ranked lower than the threshold variable th9
if (i < th9) {
return d;
}
})
var data9 = datafilter9; //This just puts the result of the above sort and filter in a variable called data9
//2b. Setting the domains for width and height, related to the data we just loaded
widthScale9.domain([0, d3.max(data9, function(d) {
return +d["2006"];
})+5000]);
heightScale9.domain([d3.max(data9, function(d) {
return +d["2013"];
})+5000, 0]);
//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 circles9 = svg9.selectAll("circle")
.data(data9) // 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("circle");
circles9
.attr("cx", function(d) {
return widthScale9(d["2006"])+padding9[3];
})
.attr("cy", function(d) {
return heightScale9(d["2013"]);
})
.attr("r", 2)
//.attr("r", function(d) {
// if (d.SourceCountry == "The Netherlands") {return 8}
// else if (d.SourceCountry == "United States of America") {return 5}
// else {return 3}
//})
.style("fill", "grey")
.append("title")
.text(function(d) {
return d.SourceCountry + " > " + +d["2006"] + " (in '06), " +d["2013"] + " (in '13)";
})
;
circles9.
transition()
//.delay(500)
.duration(2000)
//.attr("r", 12)
.attr("r", function(d) {
if (d.SourceCountry == "The Netherlands") {return 35}
else if (d.SourceCountry == "United States of America") {return 35}
else {return 2}
})
.style("stroke", function(d) {
if (d.SourceCountry == "The Netherlands") {return "#F46B20"}
else if (d.SourceCountry == "United States of America") {return "steelblue"}
else {return "black"}
})
.style("stroke-width", function(d) {
if (d.SourceCountry == "The Netherlands") {return 3}
else if (d.SourceCountry == "United States of America") {return 3}
else {return 1}
})
;
circles9.
transition()
.delay(3000)
.duration(2000)
//.attr("r", 12)
.attr("r", function(d) {
if (d.SourceCountry == "The Netherlands") {return 10}
else if (d.SourceCountry == "United States of America") {return 7}
else {return 4}
})
;
circles9.
transition()
.delay(6000)
.duration(2000)
//Adding highlight colour for The Netherlands
.style("fill", function(d) {
if (d["2013"] > d["2006"]) {return "yellow"}
else if (d["2013"] <= d["2006"]) {return "purple"}
})
.style("fill-opacity", function(d) {
if (d.SourceCountry == "The Netherlands") {return 0.3}
else if (d.SourceCountry == "United States of America") {return 0.5}
else {return 0.6}
})
;
//ADDING HERE FOR LABELS
var datalabel9 = svg9.selectAll("text")
.data(data9)
.enter()
.append("text");
//datalabel9.text(function(d, i) {
//return "'06: " + data9[i]["2006"] + ", '13: " + data9[i]["2013"]}) //I turned this off for the scatter-plot as it clutters the graph
datalabel9.text(function(d) {
if (d.SourceCountry == "The Netherlands" || d.SourceCountry == "United States of America")
{return(d.SourceCountry)}
})
.attr("x", function(d) {
return (widthScale9(d["2006"])+padding9[3]+5)
})
//.attr("x", 155)
.attr("y", function(d) {
return heightScale9(d["2013"]);
})
.attr("fill", "dimgray")
.attr("font-size", "10px")
.attr("font-family", "Georgia")
.attr("font-style", "italic")
;
//Now adding the actual axis (lines and ticks) to the SVG
svg9.append("g")
.attr("class", "x axis")
//.attr("transform", "translate(" + padding9[3] + "," + (h9 - padding9[2]) + ")")
.attr("transform", "translate(" + padding[3] + "," + (h9-70)+ ")")
.call(xAxis9)
.append("text")
.attr("class", "label")
//.attr("transform", "rotate(-90)")
.attr("x", w9-padding[1]-padding9[3]-20)
.attr("y", -10)
.style("text-anchor", "end")
//.style("Font-family", "Impact, Charcoal, sans-serif")
.style("font-size", "20")
.text("Immigrants in 2006");
svg9.append("g")
.attr("class", "yy axis")
.attr("transform", "translate(" + padding9[3] + ",0)")
.call(yAxis9)
.append("text")
.attr("class", "label")
//.attr("transform", "rotate(-45)")
.attr("x", padding[1]+60)
.attr("y", padding[2]+10)
.style("text-anchor", "end")
//.style("Font-family", "Impact, Charcoal, sans-serif")
.style("font-size", "20")
.text("Immigrants in 2013");
//***********
//svg.append("g")
// .attr("class", "y axis")
// .attr("transform", "translate(" + padding[3] + ",0)")
// .call(yAxis)
// .append("text")
// .attr("class", "label")
// .attr("transform", "rotate(-90)")
// .attr("x", -20)
// .attr("y", 5)
// .attr("dy", ".91em")
// .style("text-anchor", "end")
// .text("Taux de participation");
//***************
});
</script>
</div>
<div ID="graph4">
<h2>Immigrants to Canada by Country (data from 2004 to 2013)</h1>
<script type="text/javascript">
//Dimensions and padding
var w66 = 960;
var h66 = 600;
var padding66 = [ 20, 40, 50, 100 ]; //Top, right, bottom, left
//Set up date formatting and years
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale66 = d3.time.scale()
.range([ padding66[3], w66 - padding66[1] - padding66[3] ]);
var yScale66 = d3.scale.linear()
.range([ padding66[0], h66 - padding66[2] ]);
//Configure axis generators
var xAxis66 = d3.svg.axis()
.scale(xScale66)
.orient("bottom")
.ticks(15)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis66 = d3.svg.axis()
.scale(yScale66)
.orient("left");
//Create the empty SVG image
var svg66 = d3.select("body")
.append("svg")
.attr("width", w66)
.attr("height", h66);
//Configure line generator
var line = d3.svg.line()
.x(function(d) {
return xScale66(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale66(+d.amount);
});
//Load data
d3.csv("CanPermRes2004-2013byCountry.csv", function(data66) {
//New array with all the years, for referencing later
var years66 = ["2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"];
//Create a new, empty array to hold our restructured dataset
var dataset66 = [];
//Loop once for each row in data
for (var i = 0; i < data66.length; i++) {
//Create new object with this country's name and empty array
dataset66[i] = {
country: data66[i].SourceCountry,
immigrants: []
};
//Loop through all the years
for (var j = 0; j < years66.length; j++) {
// If value is not empty
if (data66[i][years66[j]]) {
//Add a new object to the emissions data array
//for this country
dataset66[i].immigrants.push({
year: years66[j],
amount: data66[i][years66[j]]
});
}
}
}
//Uncomment to log the original data to the console
//console.log(data);
//Uncomment to log the newly restructured dataset to the console
//console.log(dataset);
//Set scale domains
xScale66.domain([
d3.min(years66, function(d) {
return dateFormat.parse(d);
}),
d3.max(years66, function(d) {
return dateFormat.parse(d);
})
]);
yScale66.domain([
d3.max(dataset66, function(d) {
return d3.max(d.immigrants, function(d) {
return +d.amount;
});
}),
0
]);
//Make a group for each country
var groups = svg66.selectAll("g")
.data(dataset66)
.enter()
.append("g")
.classed("highlightHOL", function(d) {
if (d.country == "The Netherlands") {
return true;
} else {
return false;
}
})
.classed("highlightUSA", function(d) {
if (d.country == "United States of America") {
return true;
} else {
return false;
}
})
;
//Append a title with the country name (so we get easy tooltips)
groups.append("title")
.text(function(d) {
return d.country;
});
//Within each group, create a new line/path,
//binding just the emissions data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.immigrants ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "blue")
.attr("stroke-width", 22)
//Code from Scott M
var datalabel66 = svg66.selectAll("text")
.data(dataset66.filter(function(d) {
return (d.country == "The Netherlands" || d.country == "United States of America");
}))
.enter()
.append("text");
datalabel66.attr("x", [w66 - padding66[1] - padding66[3]])
.attr("y", (function(d) {
return yScale66( d.immigrants[9].amount );
}))
.attr("fill", "black")
.attr("font-size", "12px")
.attr("font-family", "Georgia")
.attr("font-style", "italic")
.text(function(d) {
return d.country;
});
//End Code SM
//Axes
svg66.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h66 - padding66[2]) + ")")
.call(xAxis66);
svg66.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding66[3]) + ",0)")
.call(yAxis66);
});
//End data load function
</script>
</div ID="graph4">
<div ID="filler">
<p></p>
</div>
<div ID="source">
<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>
</div>
</body>
</html>
Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js