Skip to content

Instantly share code, notes, and snippets.

@rjweise

rjweise/CanPermRes2004-2013byCountry.csv

Last active August 29, 2015 14:19
Show Gist options
  • Save rjweise/b6371d276077667bd563 to your computer and use it in GitHub Desktop.
Save rjweise/b6371d276077667bd563 to your computer and use it in GitHub Desktop.
Download ZIP
KnightD3 MOOC - Module 4 with labels
Raw
CanPermRes2004-2013byCountry.csv
SourceCountry 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013
People's Republic of China 36620 42584 33518 27642 30037 29622 30391 28503 33024 34126
India 28235 36210 33847 28742 28261 29457 34235 27509 30932 33085
Philippines 14004 18139 18400 19837 24888 28573 38617 36765 34314 29539
Pakistan 13399 14314 13127 10124 8994 7217 6811 7468 11227 12602
Iran 6348 5837 7480 6974 6475 6580 7477 7479 7533 11291
United States of America 6990 8394 9613 9463 10190 8995 8142 7675 7891 8495
United Kingdom and Colonies 7533 7258 7140 8216 8979 8876 8724 6204 6195 5826
France 4391 4429 4002 4290 4532 5051 4646 4080 6280 5624
Iraq 1796 2226 1788 2406 3543 5450 5941 6196 4041 4918
Republic of Korea 5352 5832 6215 5920 7294 5874 5537 4589 5315 4509
Algeria 3616 3626 4807 3623 4005 5393 4752 4325 3774 4331
Nigeria 1518 2236 2594 2375 2109 3156 3906 3103 3443 4173
Egypt 2393 2496 2190 2356 3347 3496 5982 4663 5555 4164
Haiti 1652 1682 1619 1598 2491 2080 4744 6504 5868 4143
Mexico 2259 2837 2844 3239 2856 3092 3865 3948 4227 3996
Bangladesh 2660 4171 4014 2897 2939 2104 4721 2694 2640 3789
Colombia 4566 6424 6535 5357 5452 4652 5218 4366 3739 3632
Morocco 3686 2939 3322 4021 4226 5532 6242 4399 3876 3259
Ukraine 2431 2270 1973 2218 1937 2367 3159 2516 2265 2487
Jamaica 2237 1945 1722 2141 2334 2456 2321 2059 2182 2477
Russia 3989 3972 3117 2983 2690 2931 2288 1963 2079 2466
Federal Republic of Cameroon 436 604 697 1025 1279 1344 1800 1638 2507 2439
Sri Lanka 4495 4930 4714 4123 4756 4547 4422 3309 3338 2395
Lebanon 3293 3709 3802 3467 3566 3077 3432 3072 1614 2172
Socialist Republic of Vietnam 1816 1852 3153 2574 1784 2171 1942 1723 1731 2112
Democratic Republic of Congo 1465 1521 1623 1466 1397 1581 1239 1224 1714 2050
Democratic Republic of Somalia 1364 1198 1061 1166 1015 1214 1528 1535 1582 2028
Afghanistan 2978 3436 3009 2652 2111 1746 1758 2203 2635 2004
Israel 2788 2446 2625 2401 2562 2316 2755 1970 2134 1945
Eritrea 414 528 700 699 799 904 931 1182 1335 1718
Brazil 917 969 1181 1746 2138 2509 2598 1508 1642 1712
Tunisia 764 756 1065 869 950 1195 1299 1442 1503 1627
Ethiopia 1535 1506 1801 1512 1613 1289 1865 2163 1864 1605
Romania 5755 5048 4468 3834 2837 2076 1922 1776 1588 1512
Cuba 866 999 1064 1350 1300 1433 961 962 1304 1402
Nepal 404 607 540 511 581 561 1392 1129 1185 1308
Jordan 1733 1940 1827 1421 1581 1235 1831 1635 1206 1255
Republic of South Africa 1175 988 1111 1200 1123 1188 1238 959 1243 1240
Moldova 628 655 803 1099 1127 1535 1988 1367 1416 1231
Federal Republic of Germany 2020 2226 2767 2449 3833 3887 2956 2053 1702 1217
Mauritius 702 696 512 507 714 872 1455 1146 799 1203
Republic of Ivory Coast 256 294 431 619 646 668 1066 636 1024 1170
Australia 930 909 875 1033 1018 1018 933 851 982 1121
Venezuela 1224 1211 1192 1335 1239 1353 998 1452 1373 1022
Republic of Ireland 244 224 283 300 412 395 548 525 725 1015
Syria 1116 1458 1145 1056 919 917 1039 1004 650 1009
Japan 973 1067 1212 1250 1284 1194 1168 1265 1214 982
Poland 1533 1405 1263 1235 1267 1013 795 720 779 851
Senegal 210 278 416 433 555 668 765 740 949 818
Hong Kong 536 729 712 674 897 657 623 591 728 774
Taiwan 2012 3097 2818 2766 2993 2472 2629 1704 985 773
Turkey 1736 2065 1638 1463 1122 1238 1492 1257 1068 729
Peru 1460 1653 1473 1490 1094 1884 1283 886 787 682
Kenya 685 693 622 449 453 489 507 585 725 664
Guyana 1341 1215 1286 1277 1137 1181 953 804 676 656
El Salvador 442 436 430 929 1115 845 787 690 641 639
Portugal 336 338 424 405 665 623 629 528 560 629
Albania 1450 1223 856 702 560 716 561 539 620 603
Dominican Republic 270 303 294 311 438 391 479 739 604 589
Italy 334 344 325 320 370 429 434 374 440 545
St. Vincent and the Grenadines 294 343 383 579 434 511 434 451 523 538
Ghana 738 851 710 688 629 659 802 528 531 517
Bulgaria 2022 1738 1419 1172 994 784 556 365 451 512
Bhutan 0 5 10 0 36 865 1464 1879 1075 487
Burundi 559 626 468 614 448 566 529 604 684 477
Republic of Guinea 281 256 342 415 327 347 395 352 407 463
Palestinian Authority (Gaza/West Bank) 376 453 627 441 481 400 654 555 533 462
Stateless 921 842 845 656 622 542 701 563 487 458
Republic of Trinidad & Tobago 730 857 794 975 1002 1134 915 588 586 427
Hungary 671 516 520 425 383 312 354 287 300 424
Ecuador 417 491 525 419 437 373 353 348 282 418
New Zealand 350 370 318 350 480 520 490 375 417 414
Rwanda 299 378 360 420 358 415 396 492 562 409
Zimbabwe 1450 615 454 663 611 508 494 434 437 407
Thailand 392 575 500 487 519 512 499 396 296 400
Peoples Republic of Benin 112 95 116 183 205 238 290 284 391 397
The Netherlands 749 813 837 615 818 786 759 586 504 395
St. Lucia 110 185 190 255 298 257 249 261 382 390
Republic of Indonesia 552 632 613 657 661 504 712 390 395 386
Belgium 411 400 302 363 335 358 363 332 402 379
Honduras 133 166 164 165 187 169 386 538 436 350
Kazakhstan 545 506 408 436 394 431 377 381 462 348
Guatemala 217 190 230 258 263 264 266 288 358 345
Democratic Republic of Sudan 1823 1310 1039 683 622 422 612 531 444 340
Spain 133 126 124 137 169 195 174 179 262 331
Burkina Faso 97 91 147 136 139 162 186 144 269 322
Republic of Togo 163 157 149 235 351 400 354 261 299 315
Greece 120 100 74 110 107 119 101 102 146 298
Republic of Serbia 0 0 0 50 259 365 267 299 395 297
Cambodia 348 370 529 460 354 203 200 196 233 288
Argentina 1591 1153 847 620 540 467 459 278 263 282
Chile 383 384 427 530 350 375 340 174 291 273
Saudi Arabia 128 198 252 188 249 246 330 278 286 267
Myanmar (Burma) 191 210 953 1887 975 1153 556 368 193 262
Libya 196 196 281 198 306 282 384 352 299 255
Belarus 543 558 439 568 524 454 438 357 277 247
Madagascar 79 88 96 115 118 169 178 148 165 229
Fiji 495 298 277 304 321 311 398 316 270 228
Republic of Yemen 124 161 140 122 133 128 211 160 174 217
Latvia 94 77 69 88 67 85 70 103 202 213
Armenia 147 224 218 198 205 267 252 236 258 207
Uganda 160 239 201 170 204 185 216 213 222 206
Malaysia 401 593 580 600 658 640 802 409 358 204
Switzerland 337 270 258 308 357 328 285 266 243 201
Republic of Djibouti 67 93 68 50 47 70 123 127 164 194
Republic of Mali 87 87 114 143 154 164 170 155 191 190
United Republic of Tanzania 310 274 291 195 230 136 200 215 224 182
Czech Republic 191 193 146 137 104 159 168 128 173 173
Republic of Kosovo 0 0 0 0 6 113 233 215 152 171
Grenada 296 283 363 360 284 325 208 173 142 170
Central Africa Republic 13 49 18 30 28 19 26 18 45 169
Uzbekistan 175 330 262 284 215 288 289 162 235 167
Lithuania 220 167 113 108 109 63 57 52 77 145
Singapore 311 392 298 690 734 366 805 219 146 141
Sweden 129 205 139 193 165 167 159 134 140 140
Croatia 151 128 102 102 131 92 91 135 112 125
Georgia 106 114 125 132 112 128 126 139 147 125
Kyrgyzstan 245 173 161 135 168 173 157 159 278 123
Costa Rica 165 188 279 281 246 217 190 149 183 122
Bosnia-Herzegovina 188 211 217 209 182 156 168 140 121 119
People's Republic of the Congo 142 136 143 87 72 70 75 81 91 114
Macedonia 443 285 256 211 191 198 188 130 126 112
Bolivia 85 134 139 107 143 214 180 86 83 107
Republic of the Niger 38 59 57 75 75 82 80 90 95 105
Slovak Republic 597 369 241 215 125 128 135 134 136 105
People's Republic of Mongolia 34 59 64 82 59 118 169 103 68 99
Barbados 90 111 97 130 134 125 121 97 132 97
Nicaragua 67 79 96 76 124 116 94 123 106 96
Austria 118 122 102 98 91 109 124 84 102 90
Gabon Republic 33 67 68 101 86 86 64 63 74 90
Republic of Chad 92 126 96 131 95 87 98 79 97 86
Namibia 9 6 19 13 26 14 16 23 24 82
Denmark 89 62 101 97 108 81 92 93 94 81
Republic of Botswana 9 7 11 8 28 15 42 53 64 76
Finland 54 67 51 62 89 63 63 72 62 76
Iceland 23 10 0 15 13 15 30 38 42 72
Paraguay 74 75 88 98 95 88 89 83 55 66
Sierra Leone 347 191 138 92 103 70 63 96 72 61
Norway 73 57 53 73 66 75 46 49 53 59
Zambia 56 91 77 71 64 60 102 69 46 59
Uruguay 130 217 175 147 160 99 93 81 47 58
Azerbaijan 230 359 236 203 125 165 209 138 161 57
Mauritania 60 86 124 96 112 83 74 54 77 57
The Bahama Islands 13 14 18 23 30 27 25 40 60 55
Belize 25 37 24 28 48 38 39 36 34 53
Dominica 50 59 72 79 60 59 43 36 43 48
Kuwait 74 66 35 62 53 68 67 58 73 48
United Arab Emirates 41 31 42 37 33 37 86 60 54 46
Angola 268 295 184 106 76 62 61 39 70 45
Estonia 27 26 18 34 34 26 28 15 26 45
Republic of Panama 38 57 73 63 52 73 65 49 34 43
Liberia 409 581 356 153 74 94 162 106 58 39
Tajikistan 14 85 46 44 15 50 52 47 34 39
Serbia and Montenegro 29 441 693 792 456 204 109 39 32 34
Gambia 10 29 38 32 25 10 37 24 18 33
Bahrain 12 12 12 22 9 35 28 21 39 32
Macao 21 21 32 16 12 21 21 13 33 29
Antigua and Barbuda 14 24 32 15 32 38 27 37 51 25
Comoros 0 5 7 11 0 19 22 14 18 22
Slovenia 17 23 11 29 18 27 12 13 36 20
St. Kitts-Nevis 8 11 0 10 25 11 22 12 21 18
People's Democratic Republic of Korea 15 14 10 7 19 11 45 96 66 17
Cyprus 11 7 9 0 7 6 18 6 12 16
Laos 38 42 74 53 32 39 54 22 25 15
Turkmenistan 16 40 26 37 13 20 30 20 20 14
Oman 12 14 18 16 10 7 14 10 13 11
Malawi 17 23 15 13 5 10 28 16 9 10
Republic of Montenegro 0 0 0 7 18 10 14 19 26 9
Luxembourg 9 10 9 9 0 0 8 11 6 7
Yugoslavia 733 329 138 99 95 48 46 17 12 7
Seychelles 15 25 8 9 18 0 10 10 6 5
Country not stated 36 65 80 24 5 0 7 6 13 32
Other countries 104 112 104 92 107 120 120 77 94 112
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>KnightD3 MOOC - rj workfile Mod4</title>
<script type="text/javascript" src="http://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="http://www.cic.gc.ca/">Source: http://www.cic.gc.ca</a>
<br>
<a href="http://www.cic.gc.ca/english/resources/statistics/facts2013/permanent/10.asp">Specific source url</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment