Last active
August 29, 2015 14:18
-
-
Save rjweise/f4155f62b3e77786a6db to your computer and use it in GitHub Desktop.
#knightD3 Exercise rjweise
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The dataset has to be placed in the same location as the index file. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>KnightD3 MOOC - rj workfile Mod3</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; | |
} | |
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; | |
} | |
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><strong>rj's workfile for the module 4 exercise (#knightD3 MOOC)</strong></h1> | |
<p>The graph below represents the number of immigrants to Canada by country of origin for the year 2006.<br> | |
When placing and holding the mouse over a country, a tooltip will show up with the exact number. <br> | |
The Netherlands are highlighted in Orange, as it is my personal country of origin, and the USA are highlighted in red. As there are quite a number of countries in the dataset I applied a threshold to only show countries with more than 600 immigrants. | |
</p> | |
<p></p> | |
<script type="text/javascript"> | |
//1a. Setting up width, height and padding | |
var w = 1000; | |
var h = 800; | |
var padding = [50, 10, 20, 150] //for top, right, bottom, left | |
var th = 600; // this sets the threshold for what data is shown (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 datafilter = dataload.filter(function(d,i) { | |
if (d["2006"]>th) { | |
return d; | |
} | |
}) | |
var data = datafilter.sort(function(a,b) { | |
return d3.descending(+a["2006"], +b["2006"]) | |
}) | |
; | |
//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 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 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"); | |
//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 | |
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."; | |
}); | |
//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></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