Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@KristinHenry
Last active December 17, 2015 04:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KristinHenry/7667183f1f18ea0af546 to your computer and use it in GitHub Desktop.
Save KristinHenry/7667183f1f18ea0af546 to your computer and use it in GitHub Desktop.
WHO 2000 Data on Global Child Mortality (0-27 days)

Note: This was done for a class assignment, and had to stay within certain restrictions. If time permits, I plan to redo this project without the restrictions.

User Guide

To interact with this visualization, slowly mouse over the countries. The country will change color, and a tooltip will pop up with the name of the country and totals for that country. Additional information (in a bar chart) will also pop up, beneath the tool tip. The bar charts are normalized, so the number at the end of the “prematurity” bar indicates the number of prematurity cases for that country. The tool tip and bars change as the mouse moves over different countries.

Please note: the mouse must be moved slowly. If the interaction fails, move your mouse to another area of the map. There is a glitch with the text being selectable, even when not visible, and this can interfere with mousing over the countries.

Dataset

To obtain this dataset, I downloaded csv files from the World Health Organization (WHO) website. It contains global child mortality counts, per country and for various causes.

To get the original dataset ready for the visualization code, I needed to do a fair amount of preprocessing in R. Initially, I simplified the dataset, and dropped columns for various codes used by WHO. Records with missing data were filtered out and the country codes in the WHO dataset had to be translated to the codes used by TopoJSON. Additionally, I reshaped the data format so that it was more compact and easier to use in the visualization code.

Some of the columns are descriptive of the country, such as country name, codes and region. These have string values. There are also columns for the age group and year of the data sample. In this version, I selected a single age group and year from the full data set, and these columns have repetitive values. The rest of the columns are named by causes, and contain numerical data on the number of children who perished in that country from each cause. These values range from zero to over a million.

Why did this dataset? While this dataset is uncomfortable to view and work with, I thought I might find patterns that can be changed. If we see how these children perished, perhaps we as a global community can work together to prevent these conditions from continuing.

Data/Code Sources and References:

WHO data:

http://apps.who.int/gho/data/node.main.GBDC-by-age-group

TopoJSON:

https://github.com/mbostock/topojson

Technique(s)

The main visualization is a choropleth, of the values for “All Causes” of each country. The values were encoded on a color scale, with darker colors indicating larger values. Rather than a continuous scale, values were assigned to levels based on which range they fell into.

The mouse over detail shows bar charts, for that country’s data, with the width of the bars indicating the normalized values of each cause. Since the bar charts are normalized, the value of the “premature” cause is labeled with that country’s count. To avoid cluttering the visualization, only that bar has the number label.

Together, these techniques give overview + detail. The map gives the global overview, and the bar charts give details.

A note about design and color choices: I intentially designed a simple visualization and kept the color scheme calm. The content of the data set can be emotionally difficult to think about, so I wanted to make the visualization as unchallenging and relaxing as I could while also maitaining a simple and appealing elagant design. I had many ideas of how to make a dramatic statement, like using piles of toys to encode the statistics. However, I decided that putting the viewer at ease would result in more time spent really looking at the data, and possibly to possitive action.

What I Learned:

I was surprised to see that the leading cause was prematurity, and that this held true across almost all countries. Another leading cause involved birth complications and traumas. Together, these causes indicate that if we improve prenatal care and access to high quality midwifery, we could have a huge impact on child survival in infancy worldwide.

Other patterns from the data are also visible. Certain causes tend to cluster together in different countries. Group 1 (communicable disease and parasitic infection) tends to be present along with Sepsis and congenital anomalies.

How we can change the world from here:

This data visualization shows common dangers to infants around the world. If it can be used to emphasize the need for better prenatal care and birth support, here and around the world, we can save many children from perishing.

Profile:

Kristin Henry khenry1@dons.usfca.edu

Before studying as a Graduate student in Computer Science at USF, Kristin Henry consulted in web development, specializing in Science and Data visualizations. She also founded a non-profit dedicated to science literacy, and is an active generative artist.

GROUP COUNTRY_CODE COUNTRY COUNTRY_NUM YEAR ALL CAUSES REGION HIV_AIDS Diarrhoeal_diseases Pertussis Measles Meningitis_encephalitis Malaria Acute_lower_respiratory_infections Prematurity Birth_asphyxia_and_birth_trauma Sepsis_and_other_infectious_conditions_of_the_newborn Other_Group_1 Congenital_anomalies Other_noncommunicable_diseases Injuries
DAYS0-27 AFG Afghanistan 004 2000 52913 Eastern Mediterranean 0 1294 186 0 0 0 7966 21937 12099 6675 614 2037 90 16
DAYS0-27 ALB Albania 008 2000 671 Europe 0 0 0 0 0 0 23 217 136 85 25 148 34 3
DAYS0-27 DZA Algeria 012 2000 14506 Africa 0 98 12 0 0 0 1674 6004 3214 940 548 1848 112 54
DAYS0-27 AND Andorra 020 2000 1 Europe 0 0 0 0 0 0 0 0 0 0 0 0 0 0
DAYS0-27 AGO Angola 024 2000 32923 Africa 33 865 124 0 0 0 2856 11774 7754 6699 708 2002 67 40
DAYS0-27 ATG Antigua and Barbuda 028 2000 12 Americas 0 0 0 0 0 0 0 0 7 0 2 3 0 0
DAYS0-27 ARG Argentina 032 2000 7444 Americas 1 28 0 0 24 0 129 3262 743 741 736 1679 9 93
DAYS0-27 ARM Armenia 051 2000 729 Europe 0 0 0 0 0 0 40 282 113 91 64 121 16 1
DAYS0-27 AUS Australia 036 2000 855 Western Pacific 0 0 0 0 3 0 5 180 136 35 227 260 3 6
DAYS0-27 AUT Austria 040 2000 248 Europe 0 0 0 0 0 0 2 95 24 6 23 92 1 6
DAYS0-27 AZE Azerbaijan 031 2000 3605 Europe 0 31 0 0 0 0 283 1568 705 317 309 308 80 5
DAYS0-27 BHS Bahamas 044 2000 39 Americas 1 0 0 0 0 0 4 9 12 4 3 7 0 0
DAYS0-27 BHR Bahrain 048 2000 63 Eastern Mediterranean 0 0 0 0 0 0 0 19 9 2 6 26 0 0
DAYS0-27 BGD Bangladesh 050 2000 143884 South-East Asia 0 2546 107 0 0 0 10544 52298 36611 29952 4033 7312 345 135
DAYS0-27 BRB Barbados 052 2000 28 Americas 0 0 0 0 0 0 0 14 9 1 2 2 0 0
DAYS0-27 BLR Belarus 112 2000 543 Europe 0 0 0 0 0 0 34 182 86 49 33 152 4 4
DAYS0-27 BEL Belgium 056 2000 343 Europe 0 0 0 0 0 0 2 103 55 15 53 109 1 4
DAYS0-27 BLZ Belize 084 2000 90 Americas 1 1 0 0 1 0 1 42 19 5 2 19 0 0
DAYS0-27 BEN Benin 204 2000 10160 Africa 9 167 8 0 0 0 1896 3458 2792 900 317 528 58 26
DAYS0-27 BTN Bhutan 064 2000 540 South-East Asia 0 5 0 0 0 0 42 197 143 97 16 27 2 10
DAYS0-27 BOL Bolivia (Plurinational State of) 068 2000 8062 Americas 1 110 21 0 0 0 526 2830 2211 1495 245 540 42 42
DAYS0-27 BIH Bosnia and Herzegovina 070 2000 247 Europe 0 0 0 0 0 0 13 80 41 24 14 69 6 0
DAYS0-27 BWA Botswana 072 2000 1451 Africa 35 10 0 0 0 0 142 535 360 185 60 110 11 2
DAYS0-27 BRA Brazil 076 2000 70657 Americas 10 315 2 0 166 2 2139 28642 10863 9305 9905 8881 103 292
DAYS0-27 BRN Brunei Darussalam 096 2000 38 Western Pacific 0 0 0 0 0 0 1 16 3 4 4 10 0 0
DAYS0-27 BGR Bulgaria 100 2000 702 Europe 0 4 0 0 7 0 39 180 111 44 101 208 3 5
DAYS0-27 BFA Burkina Faso 854 2000 22065 Africa 33 546 68 0 0 0 3930 7429 5831 2361 450 1315 51 51
DAYS0-27 BDI Burundi 108 2000 11226 Africa 46 255 7 0 0 0 994 3564 2978 2582 254 508 25 14
DAYS0-27 KHM Cambodia 116 2000 11648 Western Pacific 16 237 2 0 0 0 750 4400 3087 2314 271 535 28 9
DAYS0-27 CMR Cameroon 120 2000 20872 Africa 85 429 67 0 0 0 2429 6926 5788 3278 647 1071 102 49
DAYS0-27 CAN Canada 124 2000 1272 Americas 0 0 0 0 0 0 12 395 162 73 273 322 29 7
DAYS0-27 CPV Cape Verde 132 2000 221 Africa 0 0 0 0 0 0 8 96 37 46 3 31 1 0
DAYS0-27 CAF Central African Republic 140 2000 6492 Africa 37 184 26 0 0 0 1187 2029 1696 804 156 343 21 10
DAYS0-27 TCD Chad 148 2000 16846 Africa 30 365 80 0 0 0 2307 5945 4260 2522 321 969 29 19
DAYS0-27 CHL Chile 152 2000 1474 Americas 1 1 1 0 5 0 37 576 118 91 70 554 6 13
DAYS0-27 CHN China 156 2000 328213 Western Pacific 7 6564 48 0 0 0 18878 86730 121619 10787 40358 23459 6634 13129
DAYS0-27 COL Colombia 170 2000 14544 Americas 11 51 4 0 75 1 614 5976 2211 1341 1743 2380 23 100
DAYS0-27 COM Comoros 174 2000 805 Africa 0 16 2 0 0 0 113 268 224 112 21 45 3 2
DAYS0-27 COG Congo 180 2000 3596 Africa 11 57 21 0 0 0 733 1197 998 165 125 258 19 13
DAYS0-27 COK Cook Islands 184 2000 3 Western Pacific 0 0 0 0 0 0 0 1 1 0 0 1 0 0
DAYS0-27 CRI Costa Rica 188 2000 600 Americas 0 0 0 0 1 0 19 207 70 36 61 203 2 2
DAYS0-27 HRV Croatia 191 2000 241 Europe 0 1 0 0 0 0 10 74 22 17 46 70 1 0
DAYS0-27 CUB Cuba 192 2000 611 Americas 0 1 0 0 4 0 74 129 128 75 33 156 3 7
DAYS0-27 CYP Cyprus 196 2000 39 Europe 0 0 0 0 0 0 0 17 4 1 1 12 4 0
DAYS0-27 CZE Czech Republic 203 2000 317 Europe 0 0 0 0 0 0 4 73 61 17 95 63 3 1
DAYS0-27 CIV Côte d'Ivoire 384 2000 27660 Africa 122 761 65 0 0 0 4592 8693 7264 4006 739 1291 94 34
DAYS0-27 PRK Democratic People's Republic of Korea 000 2000 10923 South-East Asia 0 133 53 0 0 0 603 4498 2250 1370 611 1208 168 28
DAYS0-27 COD Democratic Republic of the Congo 000 2000 117741 Africa 81 3555 423 0 0 0 16920 42186 27233 17535 2954 6294 395 164
DAYS0-27 DNK Denmark 208 2000 225 Europe 0 0 0 0 0 0 2 95 31 5 20 69 1 1
DAYS0-27 DJI Djibouti 262 2000 871 Eastern Mediterranean 2 20 4 0 0 0 153 302 238 91 14 41 5 1
DAYS0-27 DMA Dominica 212 2000 14 Americas 0 0 0 0 0 0 0 9 2 0 1 2 0 0
DAYS0-27 DOM Dominican Republic 214 2000 4491 Americas 7 36 0 0 0 0 441 1628 1040 376 165 753 43 1
DAYS0-27 ECU Ecuador 218 2000 4357 Americas 2 0 9 0 0 0 191 1856 728 557 167 811 31 5
DAYS0-27 EGY Egypt 818 2000 30104 Eastern Mediterranean 0 0 19 0 0 0 738 14892 5736 2317 960 5124 298 21
DAYS0-27 SLV El Salvador 222 2000 1689 Americas 1 0 0 0 0 0 85 700 254 254 70 311 11 3
DAYS0-27 GNQ Equatorial Guinea 226 2000 837 Africa 1 19 4 0 0 0 74 270 225 169 26 45 2 2
DAYS0-27 ERI Eritrea 232 2000 3409 Africa 5 27 3 0 0 0 237 1231 1029 577 94 189 9 7
DAYS0-27 EST Estonia 233 2000 65 Europe 0 0 0 0 1 0 5 9 5 14 16 12 0 5
DAYS0-27 ETH Ethiopia 231 2000 112993 Africa 203 3061 357 0 0 0 11324 37604 30476 22531 2056 5076 167 138
DAYS0-27 FJI Fiji 242 2000 200 Western Pacific 0 0 0 0 0 0 3 90 36 16 3 42 9 0
DAYS0-27 FIN Finland 246 2000 143 Europe 0 0 0 0 0 0 0 32 18 4 29 59 1 0
DAYS0-27 FRA France 250 2000 2088 Europe 0 2 0 0 13 1 3 376 428 122 432 683 10 17
DAYS0-27 GAB Gabon 266 2000 1139 Africa 5 19 6 0 0 0 154 389 305 119 37 93 8 4
DAYS0-27 GMB Gambia 270 2000 2083 Africa 1 26 1 0 0 0 342 711 584 244 64 100 7 4
DAYS0-27 GEO Georgia 268 2000 1191 Europe 0 0 0 0 0 0 60 466 198 157 103 183 24 0
DAYS0-27 DEU Germany 276 2000 2125 Europe 0 1 0 0 4 0 5 923 152 64 236 706 11 22
DAYS0-27 GHA Ghana 288 2000 22152 Africa 45 259 15 0 0 0 1990 7650 6259 3956 715 1139 92 33
DAYS0-27 GRC Greece 300 2000 513 Europe 0 0 0 0 1 0 4 295 49 12 12 140 0 0
DAYS0-27 GRD Grenada 308 2000 14 Americas 0 0 0 0 0 0 0 9 0 2 4 0 0 0
DAYS0-27 GTM Guatemala 320 2000 8323 Americas 3 67 11 0 0 0 456 2905 2421 1353 244 817 33 12
DAYS0-27 GIN Guinea 324 2000 15852 Africa 16 475 53 0 0 0 2538 5111 4107 2301 400 795 44 14
DAYS0-27 GNB Guinea-Bissau 624 2000 2283 Africa 3 68 8 0 0 0 396 732 603 304 44 117 6 3
DAYS0-27 GUY Guyana 328 2000 409 Americas 1 408 0 0 0 0 0 0 0 0 0 0 0 0
DAYS0-27 HTI Haiti 332 2000 8405 Americas 23 161 42 0 0 0 849 3065 2357 1339 155 396 16 1
DAYS0-27 HND Honduras 340 2000 3289 Americas 4 0 0 0 0 0 408 1304 627 461 15 468 2 1
DAYS0-27 HUN Hungary 348 2000 633 Europe 0 0 0 0 2 0 17 306 32 3 129 125 0 19
DAYS0-27 ISL Iceland 352 2000 8 Europe 0 0 0 0 0 0 0 5 0 0 2 1 0 0
DAYS0-27 IND India 356 2000 1079680 South-East Asia 154 24391 3349 0 0 0 155263 371336 220269 187962 34083 81621 474 779
DAYS0-27 IDN Indonesia 360 2000 105319 South-East Asia 0 1032 8 0 0 0 3826 45081 24309 15924 5863 8448 738 90
DAYS0-27 IRN Iran (Islamic Republic of) 364 2000 26278 Eastern Mediterranean 1 104 0 0 0 0 2125 11489 5746 2355 634 3395 252 175
DAYS0-27 IRQ Iraq 368 2000 19579 Eastern Mediterranean 0 184 27 0 0 0 1907 6470 5399 2297 501 2583 129 81
DAYS0-27 IRL Ireland 372 2000 225 Europe 0 0 0 0 1 0 4 70 18 5 12 115 0 0
DAYS0-27 ISR Israel 376 2000 449 Europe 0 0 0 0 2 0 0 187 24 21 79 132 0 4
DAYS0-27 ITA Italy 380 2000 1821 Europe 0 0 0 0 2 0 12 855 241 54 122 523 6 4
DAYS0-27 JAM Jamaica 388 2000 640 Americas 2 0 0 0 0 0 31 266 85 86 37 121 11 1
DAYS0-27 JPN Japan 392 2000 1997 Western Pacific 0 2 0 0 3 0 21 329 237 111 362 891 9 31
DAYS0-27 JOR Jordan 400 2000 2408 Eastern Mediterranean 0 0 0 0 0 0 15 1270 444 193 17 459 10 0
DAYS0-27 KAZ Kazakhstan 398 2000 5106 Europe 0 18 0 0 0 0 340 2184 936 384 571 653 6 15
DAYS0-27 KEN Kenya 404 2000 39652 Africa 326 536 30 0 0 0 1956 13460 11242 8627 1330 1897 180 69
DAYS0-27 KIR Kiribati 296 2000 52 Western Pacific 0 0 0 0 0 0 9 19 14 2 2 5 0 0
DAYS0-27 KWT Kuwait 414 2000 268 Eastern Mediterranean 0 0 0 0 0 0 1 83 18 4 37 125 0 0
DAYS0-27 KGZ Kyrgyzstan 417 2000 2548 Europe 0 10 0 0 0 0 196 942 534 224 252 315 65 10
DAYS0-27 LAO Lao People's Democratic Republic 418 2000 4726 Western Pacific 0 84 1 0 0 0 222 1726 1342 974 93 263 11 9
DAYS0-27 LVA Latvia 428 2000 189 Europe 0 0 0 0 0 0 9 22 45 7 44 56 0 6
DAYS0-27 LBN Lebanon 422 2000 1130 Eastern Mediterranean 0 0 0 0 0 0 4 490 195 88 74 239 28 10
DAYS0-27 LSO Lesotho 426 2000 2832 Africa 49 56 1 0 0 0 157 926 721 696 80 127 12 6
DAYS0-27 LBR Liberia 430 2000 5349 Africa 12 164 19 0 0 0 861 1677 1392 793 141 270 12 8
DAYS0-27 LBY Libya 434 2000 1837 Eastern Mediterranean 0 0 0 0 0 0 11 834 320 147 101 377 43 4
DAYS0-27 LTU Lithuania 440 2000 193 Europe 0 0 0 0 0 0 7 44 29 9 14 86 1 2
DAYS0-27 LUX Luxembourg 442 2000 13 Europe 0 0 0 0 0 0 0 4 6 0 1 2 0 0
DAYS0-27 MDG Madagascar 450 2000 19366 Africa 2 355 83 0 0 0 1553 6707 5526 3478 539 1023 64 36
DAYS0-27 MWI Malawi 454 2000 18745 Africa 201 346 15 0 0 0 1968 6348 4995 3231 512 988 79 63
DAYS0-27 MYS Malaysia 458 2000 3137 Western Pacific 0 0 0 0 0 0 136 1281 422 324 148 777 45 4
DAYS0-27 MDV Maldives 462 2000 132 South-East Asia 0 0 0 0 0 0 10 41 41 12 5 22 1 0
DAYS0-27 MLI Mali 466 2000 29192 Africa 20 1060 72 0 0 0 6208 9505 6616 2898 593 2116 56 49
DAYS0-27 MLT Malta 470 2000 21 Europe 0 0 0 0 0 0 1 11 1 2 1 5 0 0
DAYS0-27 MHL Marshall Islands 584 2000 21 Western Pacific 0 0 0 0 0 0 3 7 5 0 1 4 0 0
DAYS0-27 MRT Mauritania 478 2000 3965 Africa 1 102 14 0 0 0 653 1288 1074 503 112 194 16 9
DAYS0-27 MUS Mauritius 480 2000 247 Africa 0 1 0 0 0 0 0 146 37 16 8 35 1 2
DAYS0-27 MEX Mexico 484 2000 26801 Americas 7 149 0 0 67 0 1485 9663 4177 3179 2441 5197 73 357
DAYS0-27 FSM Micronesia (Federated States of) 000 2000 64 Western Pacific 0 0 0 0 0 0 11 22 17 1 2 9 0 0
DAYS0-27 MCO Monaco 492 2000 1 Europe 0 0 0 0 0 0 0 0 0 0 0 0 0 0
DAYS0-27 MNG Mongolia 496 2000 915 Western Pacific 0 4 0 0 0 0 70 406 207 86 28 102 9 2
DAYS0-27 MAR Morocco 504 2000 16802 Eastern Mediterranean 1 106 8 0 0 0 1530 7347 4063 1963 390 1272 98 24
DAYS0-27 MOZ Mozambique 508 2000 36145 Africa 142 962 72 0 0 0 5693 11376 9389 5527 922 1873 119 69
DAYS0-27 MMR Myanmar 104 2000 34816 South-East Asia 9 480 24 0 0 0 1656 14912 7680 6551 1472 1672 297 63
DAYS0-27 NAM Namibia 516 2000 1505 Africa 22 16 2 0 0 0 114 534 405 222 51 124 11 5
DAYS0-27 NRU Nauru 520 2000 6 Western Pacific 0 0 0 0 0 0 1 2 1 0 0 1 0 0
DAYS0-27 NPL Nepal 524 2000 32254 South-East Asia 5 479 25 0 0 0 2167 16088 6255 5029 837 1265 75 29
DAYS0-27 NLD Netherlands 528 2000 751 Europe 0 0 0 0 1 0 5 186 123 38 115 276 4 4
DAYS0-27 NZL New Zealand 000 2000 185 Western Pacific 0 0 0 0 0 0 3 68 24 6 28 54 1 2
DAYS0-27 NIC Nicaragua 558 2000 2506 Americas 0 0 4 0 0 0 222 1087 404 397 40 341 10 1
DAYS0-27 NER Niger 562 2000 23212 Africa 11 499 105 0 0 0 2918 9013 5328 3051 386 1834 36 30
DAYS0-27 NGA Nigeria 566 2000 239818 Africa 576 6326 1034 0 0 0 27428 75540 61825 46742 5831 13507 721 288
DAYS0-27 NIU Niue 570 2000 1 Western Pacific 0 0 0 0 0 0 0 0 0 0 0 0 0 0
DAYS0-27 NOR Norway 578 2000 157 Europe 0 0 0 0 0 0 3 27 27 3 34 63 1 0
DAYS0-27 OMN Oman 512 2000 633 Eastern Mediterranean 0 0 0 0 0 0 3 309 103 48 11 149 9 1
DAYS0-27 PAK Pakistan 586 2000 203371 Eastern Mediterranean 2 5983 582 0 0 0 23940 67049 53414 39609 2873 9256 505 158
DAYS0-27 PLW Palau 585 2000 6 Western Pacific 0 0 0 0 0 0 0 2 1 1 0 1 0 0
DAYS0-27 PAN Panama 591 2000 783 Americas 0 0 0 0 8 0 52 251 107 79 68 214 0 2
DAYS0-27 PNG Papua New Guinea 598 2000 5036 Western Pacific 2 79 1 0 0 0 633 1782 1448 601 119 345 21 4
DAYS0-27 PRY Paraguay 600 2000 2745 Americas 1 0 0 0 0 0 256 1233 436 384 37 391 5 2
DAYS0-27 PER Peru 604 2000 10717 Americas 3 0 6 0 0 0 760 4536 1595 1641 411 1564 82 119
DAYS0-27 PHL Philippines 608 2000 39898 Western Pacific 0 313 3 0 0 0 1761 14873 10964 6138 1018 4680 141 7
DAYS0-27 POL Poland 616 2000 2233 Europe 0 0 0 0 1 0 30 739 297 216 154 764 3 28
DAYS0-27 PRT Portugal 620 2000 386 Europe 0 0 0 0 0 0 6 149 95 33 15 73 11 4
DAYS0-27 QAT Qatar 634 2000 74 Eastern Mediterranean 0 0 0 0 0 0 0 37 9 3 1 20 2 1
DAYS0-27 KOR Republic of Korea 000 2000 1406 Western Pacific 0 0 0 0 0 0 18 586 163 202 97 323 8 8
DAYS0-27 MDA Republic of Moldova 498 2000 557 Europe 0 3 0 0 0 0 125 49 115 62 17 169 3 16
DAYS0-27 ROU Romania 642 2000 2849 Europe 0 16 0 0 64 0 379 568 314 33 795 638 3 38
DAYS0-27 RUS Russian Federation 643 2000 14528 Europe 5 0 1 0 0 0 711 5799 2094 1294 1152 3337 28 107
DAYS0-27 RWA Rwanda 646 2000 13868 Africa 35 210 6 0 0 0 737 4502 3759 3466 385 711 39 18
DAYS0-27 KNA Saint Kitts and Nevis 659 2000 10 Americas 0 0 0 0 0 0 0 6 2 1 0 1 0 0
DAYS0-27 LCA Saint Lucia 662 2000 33 Americas 0 0 0 0 0 0 0 17 6 4 0 7 0 0
DAYS0-27 VCT Saint Vincent and the Grenadines 670 2000 29 Americas 0 0 0 0 0 0 0 8 3 1 14 4 0 0
DAYS0-27 WSM Samoa 882 2000 51 Western Pacific 0 0 0 0 0 0 3 23 9 5 0 11 0 0
DAYS0-27 SMR San Marino 674 2000 1 Europe 0 0 0 0 0 0 0 0 0 0 1 0 0 0
DAYS0-27 STP Sao Tome and Principe 678 2000 133 Africa 0 1 0 0 0 0 19 46 38 13 4 10 1 0
DAYS0-27 SAU Saudi Arabia 682 2000 7412 Eastern Mediterranean 0 0 0 0 0 0 73 3073 1664 683 35 1798 26 60
DAYS0-27 SEN Senegal 686 2000 13902 Africa 6 316 56 0 0 0 2522 4652 3865 1367 360 683 49 26
DAYS0-27 SRB Serbia 688 2000 952 Europe 0 2 0 0 4 0 7 420 226 71 60 162 0 0
DAYS0-27 SYC Seychelles 690 2000 12 Africa 0 0 0 0 0 0 0 5 1 1 1 3 0 0
DAYS0-27 SLE Sierra Leone 694 2000 9889 Africa 3 372 29 0 0 0 2087 2777 2283 1072 179 1058 16 12
DAYS0-27 SGP Singapore 702 2000 75 Western Pacific 0 1 0 0 1 0 2 28 6 1 2 33 0 0
DAYS0-27 SVK Slovakia 703 2000 353 Europe 0 0 0 0 1 0 15 159 26 6 41 103 1 1
DAYS0-27 SVN Slovenia 705 2000 56 Europe 0 0 0 0 0 0 0 21 5 5 7 18 0 0
DAYS0-27 SLB Solomon Islands 090 2000 219 Western Pacific 0 1 0 0 0 0 18 71 58 22 8 39 2 0
DAYS0-27 SOM Somalia 706 2000 17559 Eastern Mediterranean 1 598 64 0 0 0 3353 5500 4360 2470 269 870 47 26
DAYS0-27 ZAF South Africa 710 2000 24126 Africa 496 229 39 0 0 0 1982 9677 5893 2683 830 2035 195 68
DAYS0-27 ESP Spain 724 2000 1463 Europe 0 3 0 0 7 0 7 346 162 114 363 454 3 5
DAYS0-27 LKA Sri Lanka 144 2000 4606 South-East Asia 0 0 0 0 0 0 154 1298 1288 383 303 1071 86 24
DAYS0-27 SDN Sudan 729 2000 47791 Eastern Mediterranean 11 1046 152 0 0 0 8918 15375 12844 4305 1346 3313 302 180
DAYS0-27 SUR Suriname 740 2000 183 Americas 0 8 0 0 0 0 11 68 23 40 5 26 0 0
DAYS0-27 SWZ Swaziland 748 2000 932 Africa 21 8 1 0 0 0 62 328 259 156 35 53 6 3
DAYS0-27 SWE Sweden 752 2000 206 Europe 0 0 0 0 3 0 2 34 25 17 36 86 2 1
DAYS0-27 CHE Switzerland 756 2000 263 Europe 0 0 0 0 0 0 2 79 30 10 44 94 1 3
DAYS0-27 SYR Syrian Arab Republic 760 2000 5525 Eastern Mediterranean 0 0 1 0 0 0 135 2497 1143 404 40 1216 83 7
DAYS0-27 TJK Tajikistan 762 2000 6195 Europe 0 71 0 0 0 0 521 2042 1567 938 531 387 126 13
DAYS0-27 THA Thailand 764 2000 9699 South-East Asia 7 0 0 0 0 0 483 3523 1396 1110 844 2088 192 56
DAYS0-27 MKD The former Yugoslav Republic of Macedonia 807 2000 243 Europe 0 0 0 0 0 0 6 154 27 14 0 41 0 1
DAYS0-27 TLS Timor-Leste 626 2000 1380 South-East Asia 0 29 1 0 0 0 125 529 342 226 61 59 7 1
DAYS0-27 TGO Togo 768 2000 6389 Africa 16 134 22 0 0 0 992 2139 1782 795 170 306 23 9
DAYS0-27 TON Tonga 776 2000 26 Western Pacific 0 0 0 0 0 0 1 9 7 3 0 7 0 0
DAYS0-27 TTO Trinidad and Tobago 780 2000 392 Americas 0 0 0 0 0 0 9 160 143 17 24 37 0 2
DAYS0-27 TUN Tunisia 788 2000 2419 Eastern Mediterranean 0 0 0 0 0 0 31 988 434 189 184 472 96 26
DAYS0-27 TUR Turkey 792 2000 26880 Europe 0 0 2 0 0 0 1799 11123 4000 3881 1994 3461 542 80
DAYS0-27 TKM Turkmenistan 795 2000 2918 Europe 0 15 0 0 0 0 250 1071 639 291 302 269 74 7
DAYS0-27 TUV Tuvalu 798 2000 4 Western Pacific 0 0 0 0 0 0 0 2 1 1 0 1 0 0
DAYS0-27 UGA Uganda 800 2000 37833 Africa 231 709 162 0 0 0 2520 14780 9878 6871 883 1619 111 70
DAYS0-27 UKR Ukraine 804 2000 3111 Europe 5 0 0 0 0 0 232 1084 478 294 183 789 25 20
DAYS0-27 ARE United Arab Emirates 784 2000 369 Eastern Mediterranean 0 0 0 0 0 0 1 185 35 19 15 105 9 1
DAYS0-27 GBR United Kingdom 826 2000 2606 Europe 0 1 0 0 16 0 36 1399 256 119 150 598 12 18
DAYS0-27 TZA United Republic of Tanzania 834 2000 51417 Africa 287 843 39 0 0 0 3207 17478 14337 11173 1476 2271 194 112
DAYS0-27 USA United States of America 840 2000 18542 Americas 1 0 4 0 15 0 111 7798 1452 909 3425 4619 63 144
DAYS0-27 URY Uruguay 858 2000 464 Americas 0 0 0 0 0 0 11 159 60 58 60 111 0 4
DAYS0-27 UZB Uzbekistan 860 2000 15050 Europe 0 69 0 0 0 0 1288 5507 3281 1419 1515 1563 365 42
DAYS0-27 VUT Vanuatu 000 2000 67 Western Pacific 0 0 0 0 0 0 8 27 11 9 0 11 0 0
DAYS0-27 VEN Venezuela (Bolivarian Republic of) 862 2000 7500 Americas 3 64 0 0 34 0 220 3203 1196 1214 469 1036 11 47
DAYS0-27 VNM Viet Nam 704 2000 23518 Western Pacific 4 0 1 0 0 0 2465 8952 3376 2712 2127 3324 418 139
DAYS0-27 YEM Yemen 887 2000 27259 Eastern Mediterranean 0 626 90 0 0 0 3923 9431 7526 3872 367 1320 73 32
DAYS0-27 ZMB Zambia 894 2000 16815 Africa 180 240 10 0 0 0 1189 5811 4554 3457 497 786 64 26
DAYS0-27 ZWE Zimbabwe 716 2000 12747 Africa 309 181 10 0 0 0 870 4419 3348 2368 460 691 79 12
DAYS0-27 MNE Montenegro 499 2000 70 Europe 0 0 0 0 0 0 0 23 29 1 15 1 0 0
<!DOCTYPE html>
<meta charset="utf-8">
<!-- based on http://bl.ocks.org/mbostock/4180634 -->
<style>
body {
background: #fcfcfa;
}
div.txt{
font: 14px sans-serif;
background: red;
}
div.tooltip {
position: absolute;
text-align: center;
width: 390px; //100px;
height: 30px; //60px;
padding: 4px;
font: 14px sans-serif;
background: #eeeeee;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: #fff;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
.land {
fill: #222;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
// quatize from example here
// http://synthesis.sbecker.net/articles/2012/07/18/learning-d3-part-7-choropleth-maps
var source = "data_new.csv";
console.log(source);
//declare div for tooltips
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// idea for loading/handling data this way came from
// Interactive Data Visualization for the Web
// An Introduction to Designing with D3
// By Scott Murray
//
var one;
d3.csv(source, function(data) {
// planning to add multiple years, staring with one for now
one = data;
});
var getNum = function(d){
var m = one.filter(function(n){
var obj = n["COUNTRY_NUM"] == d.id;
return obj;
});
if(m[0]){
return m[0]["ALL CAUSES"]
}
};
var getRawCounts = function(d){
var maxWidth = 190;
var m = one.filter(function(n){
var obj = n["COUNTRY_NUM"] == d.id;
return obj;
});
if(m[0]){
// make sure we're getting integers, instead of strings
var g = parseInt(m[0]["Acute_lower_respiratory_infections"]);
var h = parseInt(m[0]["Prematurity"]);
var ii = parseInt(m[0]["Birth_asphyxia_and_birth_trauma"]);
var c = parseInt(m[0]["Pertussis"]);
var d = parseInt(m[0]["Measles"]);
var e = parseInt(m[0]["Meningitis_encephalitis"]);
var f = parseInt(m[0]["Malaria"]);
var j = parseInt(m[0]["Sepsis_and_other_infectious_conditions_of_the_newborn"]);
var k = parseInt(m[0]["Other_Group_1"]);
var l = parseInt(m[0]["Congenital_anomalies"]);
var mm = parseInt(m[0]["Other_noncommunicable_diseases"]);
var a = parseInt(m[0]["HIV_AIDS"]);
var b = parseInt(m[0]["Diarrhoeal_diseases"]);
var n = parseInt(m[0]["Injuries"]);
var counts = [g, h, ii, c, d, e, f, j, k, l, mm, a, b, n];
return counts;
}
};
var getNormalizedCounts = function(d){
var maxWidth = 190;
var m = one.filter(function(n){
var obj = n["COUNTRY_NUM"] == d.id;
return obj;
});
if(m[0]){
// make sure we're getting integers, instead of strings
var g = parseInt(m[0]["Acute_lower_respiratory_infections"]);
var h = parseInt(m[0]["Prematurity"]);
var ii = parseInt(m[0]["Birth_asphyxia_and_birth_trauma"]);
var c = parseInt(m[0]["Pertussis"]);
var d = parseInt(m[0]["Measles"]);
var e = parseInt(m[0]["Meningitis_encephalitis"]);
var f = parseInt(m[0]["Malaria"]);
var j = parseInt(m[0]["Sepsis_and_other_infectious_conditions_of_the_newborn"]);
var k = parseInt(m[0]["Other_Group_1"]);
var l = parseInt(m[0]["Congenital_anomalies"]);
var mm = parseInt(m[0]["Other_noncommunicable_diseases"]);
var a = parseInt(m[0]["HIV_AIDS"]);
var b = parseInt(m[0]["Diarrhoeal_diseases"]);
var n = parseInt(m[0]["Injuries"]);
var counts = [g, h, ii, c, d, e, f, j, k, l, mm, a, b, n];
// normalize the data, so it all fits on bar chart
var mx = d3.max(counts);
var scale = d3.scale.linear()
.domain([0, mx])
.range([0, maxWidth]);
for(var i = 0; i <counts.length; i++){
counts[i] = scale(counts[i]);
}
return counts;
}
};
var getLabels = function(){
var g = "Lower respiratory infection";
var h = "Prematurity";
var i = "Birth asphyxia and trauma";
var c = "Pertussis";
var d = "Measles";
var e = "Meningitis, encephalitis";
var f = "Malaria";
var j = "Sepsis, and infections";
var k = "Other, Group 1";
var l = "Congenital anomalies";
var mm = "Others, noncommunicable";
var a = "HIV/AIDS";
var b = "Diarrhoeal diseases";
var n = "Injuries";
return [g, h, i, c, d, e, f, j, k, l, mm, a, b, n];
};
var getCountryName = function(d){
var m = one.filter(function(n){
var obj = n["COUNTRY_NUM"] == d.id;
return obj;
});
if(m[0]){
return m[0]["COUNTRY"];
}
};
var getColor = function(d){
var num = getNum(d);
if(num > 1000000){
return color(6);
} else if(num > 100000){
return color(5);
} else if(num > 50000){
return color(4);
} else if(num > 10000){
return color(3);
} else if(num > 1000){
return color(2);
} else if(num > 100){
return color(1);
} else if(num >= 0){
return color(0);
} else {
// We don't have data on this country
return "#CCCCCC";
}
};
var getY = function(d){
var maxY = 280;
if(d > maxY){
return maxY
}
return d;
}
</script>
<script>
var width = 960,
height = 580;
var color = d3.scale.ordinal()
.domain([0, 1, 2, 3, 4, 5, 6, 7])
.range(["#cce5ff","#99ccff","#66b2ff","#3399ff","#0080ff","#0066cc","#003366","#004c99"]);
var projection = d3.geo.kavrayskiy7()
.scale(170)
.translate([width / 2, height / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var chart = d3.select("body").append("svg")
.attr("width", width + 200)
.attr("height", height);
var svg = chart.append("svg")
.attr("width", width)
.attr("height", height);
svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
//------------------------
var widthBarchart = 1360;
var heightBarchart = 300;
//------------------------
d3.json("world-50m.json", function(error, world) {
var countries = topojson.object(world, world.objects.countries).geometries,
neighbors = topojson.neighbors(world.objects.countries.geometries);
var labels = getLabels();
// initialize bar chart "off stage"
var barchart = chart.append("svg")
.attr("width", widthBarchart)
.attr("height", heightBarchart)
.attr("x", -500)
.attr("y", -500);
var xBar = 180;
var yBar = 8; //30;
var dyBar = 20;
var dyTxt = 14;
var bkgrd = barchart.append("rect")
//.attr("width", 170)
.attr("width", 380)
.attr("height", heightBarchart)
.style("fill", "#eeeeee");
var chart0 = barchart.append("g");
var bar0 = chart0.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 0))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#6E9686")
.style("opacity", 0.85);
var txt0 = chart0.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 0) + dyTxt)
.attr("text-anchor", "end")
.style("opacity", 0)
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.text(labels[0]);
var chart1 = barchart.append("g");
var bar1 = chart1.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 1))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#666666")
.style("opacity", 0.85);
var txt1 = chart1.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 1) + dyTxt)
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("opacity", 0)
.text(labels[1]);
var txt_a_1 = chart1.append("text")
.attr("x", xBar + 100)
.attr("y", yBar + (dyBar * 1) + dyTxt)
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("fill", "#cccccc")
.style("opacity", 0)
.text("test");
var chart2 = barchart.append("g");
var bar2 = chart2.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 2))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#6E9686")
.style("opacity", 0.85);
var txt2 = chart2.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 2) + dyTxt)
.attr("class", "txt")
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("opacity", 0)
.text(labels[2]);
var chart3 = barchart.append("g");
var bar3 = chart3.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 3))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#666666")
.style("opacity", 0.85);
var txt3 = chart3.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 3) + dyTxt)
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("opacity", 0)
.text(labels[3]);
var chart4 = barchart.append("g");
var bar4 = chart4.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 4))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#6E9686")
.style("opacity", 0.85);
var txt4 = chart4.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 4) + dyTxt)
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("opacity", 0)
.text(labels[4]);
var chart5 = barchart.append("g");
var bar5 = chart5.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 5))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#666666")
.style("opacity", 0.85);
var txt5 = chart5.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 5) + dyTxt)
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("opacity", 0)
.text(labels[5]);
var chart6 = barchart.append("g");
var bar6 = chart6.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 6))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#6E9686")
.style("opacity", 0.85);
var txt6 = chart6.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 6) + dyTxt)
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("opacity", 0)
.text(labels[6]);
var chart7 = barchart.append("g");
var bar7 = chart7.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 7))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#666666")
.style("opacity", 0.85);
var txt7 = chart7.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 7) + dyTxt)
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("opacity", 0)
.text(labels[7]);
var chart8 = barchart.append("g");
var bar8 = chart8.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 8))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#6E9686")
.style("opacity", 0.85);
var txt8 = chart8.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 8) + dyTxt)
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("opacity", 0)
.text(labels[8]);
var chart9 = barchart.append("g");
var bar9 = chart9.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 9))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#666666")
.style("opacity", 0.85);
var txt9 = chart9.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 9) + dyTxt)
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("opacity", 0)
.text(labels[9]);
var chart10 = barchart.append("g");
var bar10 = chart10.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 10))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#6E9686")
.style("opacity", 0.85);
var txt10 = chart10.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 10) + dyTxt)
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("opacity", 0)
.text(labels[10]);
var chart11 = barchart.append("g");
var bar11 = chart11.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 11))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#666666")
.style("opacity", 0.85);
var txt11 = chart11.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 11) + dyTxt)
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("opacity", 0)
.text(labels[11]);
var chart12 = barchart.append("g");
var bar12 = chart12.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 12))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#6E9686")
.style("opacity", 0.85);
var txt12 = chart12.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 12) + dyTxt)
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("opacity", 0)
.text(labels[12]);
var chart13 = barchart.append("g");
var bar13 = chart13.append("svg").append("rect")
.attr("x", xBar)
.attr("y", yBar + (dyBar * 13))
.attr("width", 0)
.attr("height", dyBar)
.style("fill", "#666666")
.style("opacity", 0.85);
var txt13 = chart13.append("text")
.attr("x", xBar - 4)
.attr("y", yBar + (dyBar * 13) + dyTxt)
.attr("text-anchor", "end")
.style("font-family", 'sans-serif')
.style("font-size", "14px")
.style("opacity", 0)
.text(labels[13]);
svg.selectAll(".country")
.data(countries)
.enter().insert("path", ".graticule")
.attr("class", "country")
.attr("d", path)
.style("fill", function(d, i){
//we don't have data for all countries in our map
if(getNum(d) != undefined){
console.log(d.id, getCountryName(d) ,getNum(d));
//var counts = getCounts(d);
var num = getNum(d);
if(num > 1000000){
return color(6);
} else if(num > 100000){
return color(5);
} else if(num > 50000){
return color(4);
} else if(num > 10000){
return color(3);
} else if(num > 1000){
return color(2);
} else if(num > 100){
return color(1)
} else if(num >= 0){
return color(0)
}
} else {
// we don't have data for this country
return "#cccccc";
}
})
// for user interaction
.on("mouseover", function(d){
// make sure we have data for this country, then add interaction
if(getNum(d) != undefined){
var counts = getNormalizedCounts(d);
var rawcounts = getRawCounts(d);
d3.select(this)
//highlight the map region
.style("fill", "#6E9686");
bkgrd.transition()
.duration(200)
.attr("opacity", .6);
div.transition()
.duration(200)
.style("opacity", .9);
div.html("<b>" + getCountryName(d) + "</b><br>" +
" Total: " + getNum(d)
)
// correcting the placement here...don't go "off stage"
.style("left", (d3.event.pageX + 20) + "px")
.style("top", (getY(d3.event.pageY) - 40) + "px");
chart0.transition()
.duration(200)
.attr("opacity", .8);
bar0.transition()
.duration(200)
.attr("width", counts[0])
.style("opacity", .8);
txt0.transition()
.duration(200)
.style("opacity", .9);
chart1.transition()
.duration(500)
.attr("opacity", .8);
bar1.transition()
.duration(200)
.attr("width", counts[1])
.style("opacity", .8);
txt1.transition()
.duration(200)
.style("opacity", .9);
// label for number of premature, to give context for barchart
txt_a_1.transition()
.duration(200)
.attr("x", counts[1] + xBar - 4)
.text(rawcounts[1])
.style("opacity", .9);
chart2.transition()
.duration(500)
.attr("opacity", .8);
bar2.transition()
.duration(200)
.attr("width", counts[2])
.style("opacity", .8);
txt2.transition()
.duration(200)
.style("opacity", .9);
chart3.transition()
.duration(500)
.attr("opacity", .8);
bar3.transition()
.duration(200)
.attr("width", counts[3])
.style("opacity", .8);
txt3.transition()
.duration(200)
.style("opacity", .9);
chart4.transition()
.duration(500)
.attr("opacity", .8);
bar4.transition()
.duration(200)
.attr("width", counts[4])
.style("opacity", .8);
txt4.transition()
.duration(200)
.style("opacity", .9);
chart5.transition()
.duration(500)
.attr("opacity", .8);
bar5.transition()
.duration(200)
.attr("width", counts[5])
.style("opacity", .8);
txt5.transition()
.duration(200)
.style("opacity", .9);
chart6.transition()
.duration(500)
.attr("opacity", .8);
bar6.transition()
.duration(200)
.attr("width", counts[6])
.style("opacity", .8);
txt6.transition()
.duration(200)
.style("opacity", .9);
chart7.transition()
.duration(500)
.attr("opacity", .8);
bar7.transition()
.duration(200)
.attr("width", counts[7])
.style("opacity", .8);
txt7.transition()
.duration(200)
.style("opacity", .9);
chart8.transition()
.duration(500)
.attr("opacity", .8);
bar8.transition()
.duration(200)
.attr("width", counts[8])
.style("opacity", .8);
txt8.transition()
.duration(200)
.style("opacity", .9);
chart9.transition()
.duration(500)
.attr("opacity", .8);
bar9.transition()
.duration(200)
.attr("width", counts[9])
.style("opacity", .8);
txt9.transition()
.duration(200)
.style("opacity", .9);
chart10.transition()
.duration(500)
.attr("opacity", .8);
bar10.transition()
.duration(200)
.attr("width", counts[10])
.style("opacity", .8);
txt10.transition()
.duration(200)
.style("opacity", .9);
chart11.transition()
.duration(500)
.attr("opacity", .8);
bar11.transition()
.duration(200)
.attr("width", counts[11])
.style("opacity", .8);
txt11.transition()
.duration(200)
.style("opacity", .9);
chart12.transition()
.duration(500)
.attr("opacity", .8);
bar12.transition()
.duration(200)
.attr("width", counts[12])
.style("opacity", .8);
txt12.transition()
.duration(200)
.style("opacity", .9);
chart13.transition()
.duration(500)
.attr("opacity", .8);
bar13.transition()
.duration(200)
.attr("width", counts[13])
.style("opacity", .8);
txt13.transition()
.duration(200)
.style("opacity", .9);
barchart.transition()
.duration(200)
.attr("x", (d3.event.pageX + 20) + "px")
.attr("y", getY(d3.event.pageY));
}
})
.on("mouseout", function(d){
d3.select(this)
.style("fill", getColor(d))
// get chart out of mouses way, when done
chart.transition()
.duration(500)
.attr("x", -500)
.attr("y", -500);
bkgrd.transition()
.duration(500)
.attr("opacity", 0);
chart0.transition()
.duration(500)
.attr("opacity", 0);
bar0.transition()
.duration(500)
.attr("width", 0);
chart1.transition()
.duration(500)
.attr("opacity", 0);
bar1.transition()
.duration(500)
.attr("width", 0);
chart2.transition()
.duration(500)
.attr("opacity", 0);
bar2.transition()
.duration(500)
.attr("width", 0);
chart3.transition()
.duration(500)
.attr("opacity", 0);
bar3.transition()
.duration(500)
.attr("width", 0);
chart4.transition()
.duration(500)
.attr("opacity", 0);
bar4.transition()
.duration(500)
.attr("width", 0);
chart5.transition()
.duration(500)
.attr("opacity", 0);
bar5.transition()
.duration(500)
.attr("width", 0);
chart6.transition()
.duration(500)
.attr("opacity", 0);
bar6.transition()
.duration(500)
.attr("width", 0);
chart7.transition()
.duration(500)
.attr("opacity", 0);
bar7.transition()
.duration(500)
.attr("width", 0);
chart8.transition()
.duration(500)
.attr("opacity", 0);
bar8.transition()
.duration(500)
.attr("width", 0);
chart9.transition()
.duration(500)
.attr("opacity", 0);
bar9.transition()
.duration(500)
.attr("width", 0);
chart10.transition()
.duration(500)
.attr("opacity", 0);
bar10.transition()
.duration(500)
.attr("width", 0);
chart11.transition()
.duration(500)
.attr("opacity", 0);
bar11.transition()
.duration(500)
.attr("width", 0);
chart12.transition()
.duration(500)
.attr("opacity", 0);
bar12.transition()
.duration(500)
.attr("width", 0);
chart13.transition()
.duration(500)
.attr("opacity", 0);
bar13.transition()
.duration(500)
.attr("width", 0);
div.transition()
.duration(500)
.style("opacity", 0);
})
;
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
});
d3.select(self.frameElement).style("height", height + "px");
</script>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment