Created
April 1, 2015 10:56
-
-
Save dstinchcomb/6ec2b7585c8ac400510d to your computer and use it in GitHub Desktop.
DataVis with D3 - Module 3 Exercise
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
CoFIPS | StName | CoName | TotPop | AgeLT18_pct | Age65plus_pct | Black_pct | AIAN_pct | Asian_pct | NHOPI_pct | Hisp_pct | NHWhite_pct | NoEngl_n | NoEngl_pct | NoEngl_cil | NoEngl_cih | Female_pct | Rural_pct | Diabetic_pct | Diabetic_cil | Diabetic_cih | HIV_n | HIV_rate | PreMatDeaths_n | Mort_rate | Mort_cil | Mort_cih | InfantMort_rate | InfantMort_cil | InfantMort_cih | ChildDeaths_n | ChildMort_rate | ChildMort_cil | ChildMort_cih | FoodInsecure_pct | LimitedFood_n | LimitedFood_pct | MVDeaths_n | MVMort_rate | MVMort_cil | MVMort_cih | DrugDeaths_n | DrugMort_rate | NoInsAdult_n | NoInsAdult_pct | NoInsAdult_cil | NoInsAdult_cih | NoInsChild_n | NoInsChild_pct | NoInsChild_cil | NoInsChild_cih | HealthCare_dol | HealthCare_cil | HealthCare_cih | Access2Dr_n | Access2Dr_pct | Access2Dr_cil | Access2Dr_cih | OtherPCP_rate | PCP_percap | HHInc_dol | HHInc_cil | HHInc_cih | SchLunch_pct | Homicide_rate | Homicide_cil | Homicide_cih | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
24001 | Maryland | Allegany | 74012 | 17.6 | 18.5 | 8.1 | 0.2 | 0.8 | 0 | 1.5 | 88 | 257 | 0.4 | 0.1 | 0.6 | 48.1 | 27.3 | 12 | 10 | 14 | 118 | 180 | 985 | 381 | 356.6 | 405.5 | 7.9 | 5.4 | 10.4 | 33 | 60.1 | 41.4 | 84.4 | 12 | 11732 | 16 | 74 | 14 | 11 | 18 | 72 | 14 | 6038 | 14 | 13 | 16 | 590 | 4 | 3 | 6 | 9323 | 9320 | 9326 | 1908 | 11 | 9 | 14 | 77 | 1298 | 38670 | 36252 | 41088 | 40 | 2 | 1 | 4 | |
24003 | Maryland | Anne Arundel | 550488 | 22.8 | 12.7 | 15.5 | 0.4 | 3.6 | 0.1 | 6.4 | 72 | 8686 | 1.7 | 1.5 | 1.9 | 50.6 | 5.3 | 9 | 8 | 10 | 1403 | 312 | 5325 | 320.4 | 311.7 | 329.1 | 7 | 6.2 | 7.7 | 264 | 53.2 | 46.8 | 59.7 | 8 | 18063 | 3 | 370 | 10 | 9 | 11 | 505 | 14 | 37302 | 11 | 10 | 12 | 4706 | 4 | 3 | 5 | 9298 | 9297 | 9299 | 4441 | 9 | 7 | 10 | 60 | 1673 | 87083 | 83162 | 91004 | 22 | 4 | 4 | 5 | |
24005 | Maryland | Baltimore | 817455 | 21.7 | 15.1 | 26.1 | 0.4 | 5.3 | 0.1 | 4.4 | 62 | 16207 | 2.1 | 2 | 2.3 | 52.7 | 6.5 | 10 | 9 | 11 | 3062 | 450 | 8766 | 351.5 | 344.1 | 359 | 7.9 | 7.2 | 8.6 | 420 | 59.2 | 53.5 | 64.9 | 12 | 24574 | 3 | 529 | 9 | 9 | 10 | 878 | 16 | 66261 | 13 | 12 | 14 | 9337 | 5 | 4 | 6 | 9552 | 9551 | 9553 | 7478 | 11 | 10 | 12 | 64 | 1569 | 62413 | 60596 | 64230 | 34 | 6 | 6 | 7 | |
24009 | Maryland | Calvert | 89628 | 24.8 | 12 | 13.3 | 0.4 | 1.5 | 0.1 | 2.9 | 79.6 | 244 | 0.3 | 0.1 | 0.5 | 50.8 | 38.7 | 10 | 8 | 11 | 91 | 124 | 803 | 301.2 | 279.8 | 322.5 | 5.4 | 3.7 | 7.1 | 41 | 43.2 | 31 | 58.6 | 7 | 4119 | 5 | 113 | 19 | 15 | 22 | 69 | 11 | 5291 | 10 | 8 | 11 | 898 | 4 | 3 | 5 | 8641 | 8639 | 8643 | 1751 | 8 | 7 | 11 | 35 | 2891 | 87215 | 80762 | 93668 | 18 | 3 | 2 | 5 | |
24011 | Maryland | Caroline | 32718 | 24.2 | 14.4 | 14 | 0.8 | 0.7 | 0.3 | 5.4 | 77.9 | 781 | 2.5 | 1.9 | 3.2 | 51.4 | 76 | 12 | 10 | 14 | 64 | 236 | 427 | 415.8 | 375.9 | 455.7 | 29 | 86.4 | 57.9 | 124.1 | 11 | 746 | 2 | 80 | 35 | 28 | 44 | 21 | 9 | 3680 | 18 | 16 | 20 | 555 | 6 | 5 | 8 | 9624 | 9621 | 9627 | 1349 | 16 | 13 | 19 | 24 | 4090 | 48772 | 45774 | 51770 | 43 | |||||||
24013 | Maryland | Carroll | 167217 | 23.3 | 14.3 | 3.2 | 0.2 | 1.5 | 0 | 2.7 | 91 | 1073 | 0.7 | 0.5 | 0.9 | 50.6 | 39.5 | 9 | 7 | 11 | 149 | 107 | 1614 | 305.1 | 289.9 | 320.3 | 4.4 | 3.3 | 5.5 | 63 | 37.1 | 28.5 | 47.5 | 6 | 6254 | 4 | 170 | 15 | 12 | 17 | 140 | 12 | 9905 | 10 | 9 | 11 | 1635 | 4 | 3 | 5 | 9374 | 9373 | 9375 | 1574 | 9 | 7 | 12 | 54 | 1858 | 79304 | 74951 | 83657 | 12 | 1 | 1 | 2 | |
24015 | Maryland | Cecil | 101696 | 24 | 12.9 | 6.1 | 0.4 | 1.1 | 0.1 | 3.6 | 87.1 | 750 | 0.8 | 0.5 | 1.1 | 50.3 | 42.1 | 10 | 9 | 12 | 118 | 142 | 1285 | 407.6 | 385 | 430.2 | 5.1 | 3.6 | 6.6 | 52 | 50.4 | 37.7 | 66.2 | 10 | 4723 | 5 | 123 | 18 | 15 | 21 | 155 | 22 | 8025 | 13 | 11 | 14 | 1292 | 5 | 4 | 6 | 10471 | 10469 | 10473 | 1893 | 12 | 10 | 14 | 26 | 3911 | 62443 | 57196 | 67690 | 32 | 5 | 3 | 7 | |
24017 | Maryland | Charles | 150592 | 25.2 | 10.3 | 41 | 0.7 | 3.1 | 0.1 | 4.5 | 47.6 | 1062 | 0.8 | 0.5 | 1 | 51.7 | 29.5 | 10 | 9 | 12 | 353 | 293 | 1418 | 342.8 | 324.8 | 360.9 | 8.6 | 7 | 10.2 | 86 | 55.2 | 44.1 | 68.1 | 10 | 5466 | 4 | 169 | 17 | 14 | 20 | 80 | 8 | 10281 | 11 | 10 | 12 | 1718 | 4 | 3 | 6 | 9397 | 9396 | 9399 | 2440 | 9 | 8 | 11 | 41 | 2469 | 89203 | 85665 | 92741 | 23 | 5 | 4 | 6 | |
24019 | Maryland | Dorchester | 32551 | 21.3 | 18.8 | 27.6 | 0.4 | 1 | 0 | 3.8 | 65.8 | 456 | 1.5 | 0.8 | 2.1 | 52 | 56.2 | 14 | 12 | 16 | 110 | 399 | 459 | 388.9 | 352.1 | 425.6 | 12.4 | 8.1 | 16.7 | 38 | 133.3 | 94.3 | 183 | 15 | 948 | 3 | 37 | 17 | 12 | 23 | 31 | 14 | 3396 | 17 | 15 | 19 | 404 | 5 | 4 | 7 | 9592 | 9589 | 9594 | 1453 | 14 | 12 | 18 | 49 | 2034 | 41931 | 38771 | 45091 | 53 | ||||
24021 | Maryland | Frederick | 239582 | 24.4 | 12 | 8.5 | 0.4 | 4.1 | 0.1 | 7.6 | 77.4 | 3934 | 1.8 | 1.4 | 2.2 | 50.8 | 25.2 | 9 | 8 | 10 | 288 | 150 | 1835 | 270 | 257.5 | 282.5 | 5.8 | 4.7 | 6.8 | 95 | 40 | 32.4 | 48.9 | 7 | 4211 | 2 | 168 | 11 | 9 | 12 | 125 | 8 | 17873 | 12 | 11 | 13 | 2711 | 4 | 3 | 6 | 9374 | 9372 | 9375 | 4070 | 9 | 8 | 11 | 55 | 1829 | 80427 | 76806 | 84048 | 18 | 2 | 2 | 3 | |
24023 | Maryland | Garrett | 29854 | 21.1 | 18.6 | 1 | 0.1 | 0.3 | 0 | 0.8 | 97.1 | 49 | 0.2 | 0 | 0.5 | 50.4 | 83.9 | 11 | 10 | 13 | 6 | 23 | 372 | 345 | 308.7 | 381.4 | 16 | 58.7 | 33.6 | 95.3 | 9 | 577 | 2 | 45 | 21 | 16 | 29 | 16 | 8 | 3118 | 17 | 15 | 19 | 397 | 6 | 4 | 8 | 9002 | 8999 | 9004 | 1655 | 13 | 11 | 17 | 60 | 1659 | 41515 | 37469 | 45561 | 36 | |||||||
24025 | Maryland | Harford | 248622 | 23.5 | 13.5 | 12.5 | 0.3 | 2.6 | 0.1 | 3.7 | 78.9 | 2125 | 0.9 | 0.7 | 1.1 | 51.1 | 17.8 | 10 | 9 | 12 | 354 | 174 | 2367 | 305.5 | 293.1 | 318 | 5.7 | 4.7 | 6.8 | 104 | 42.4 | 34.3 | 50.6 | 8 | 8409 | 3 | 191 | 11 | 10 | 13 | 241 | 14 | 16333 | 11 | 9 | 12 | 2469 | 4 | 3 | 5 | 9635 | 9634 | 9636 | 2201 | 9 | 7 | 11 | 42 | 2368 | 76220 | 71816 | 80624 | 22 | 3 | 2 | 4 | |
24027 | Maryland | Howard | 299430 | 24.9 | 11.2 | 17.4 | 0.4 | 15.1 | 0.1 | 6 | 58.4 | 8701 | 3.2 | 2.8 | 3.6 | 51 | 9.3 | 8 | 7 | 9 | 400 | 169 | 1735 | 207.8 | 197.9 | 217.8 | 5.8 | 4.8 | 6.7 | 110 | 37.2 | 30.2 | 44.1 | 7 | 4932 | 2 | 135 | 7 | 6 | 8 | 112 | 6 | 17819 | 10 | 8 | 11 | 3250 | 4 | 3 | 6 | 8560 | 8559 | 8561 | 2510 | 8 | 6 | 10 | 44 | 2286 | 108234 | 105078 | 111390 | 13 | 3 | 2 | 3 | |
24029 | Maryland | Kent | 20191 | 17.1 | 23.3 | 14.8 | 0.2 | 1 | 0 | 4.6 | 78.2 | 280 | 1.5 | 0.5 | 2.4 | 52.3 | 72.6 | 11 | 9 | 13 | 36 | 206 | 275 | 359.8 | 314.5 | 405 | 11 | 6 | 0 | 26 | 19 | 12 | 27 | 15 | 11 | 1831 | 17 | 14 | 19 | 250 | 7 | 5 | 9 | 8885 | 8882 | 8887 | 1126 | 9 | 7 | 13 | 45 | 2243 | 49969 | 45071 | 54867 | 44 | |||||||||||
24031 | Maryland | Montgomery | 1004709 | 23.5 | 12.9 | 16.9 | 0.7 | 14.5 | 0.1 | 17.5 | 48.6 | 62945 | 6.9 | 6.6 | 7.2 | 51.9 | 2.4 | 7 | 6 | 8 | 3369 | 417 | 5437 | 188 | 183 | 193.1 | 6 | 5.5 | 6.5 | 399 | 43.4 | 39.1 | 47.6 | 8 | 11863 | 1 | 409 | 6 | 6 | 7 | 306 | 5 | 97298 | 16 | 15 | 17 | 12969 | 5 | 4 | 7 | 8014 | 8013 | 8014 | 8046 | 10 | 9 | 11 | 55 | 1823 | 94365 | 91714 | 97016 | 24 | 3 | 2 | 3 | |
24033 | Maryland | Prince George's | 881138 | 23.1 | 10.3 | 63.4 | 1 | 4.4 | 0.2 | 15.3 | 14.8 | 38134 | 4.7 | 4.5 | 5 | 52 | 2 | 11 | 10 | 12 | 5965 | 830 | 9381 | 380.7 | 372.9 | 388.5 | 10.8 | 10.1 | 11.4 | 718 | 85.9 | 79.6 | 92.2 | 16 | 33544 | 4 | 794 | 13 | 12 | 14 | 349 | 6 | 111245 | 20 | 18 | 21 | 13671 | 6 | 5 | 8 | 8592 | 8592 | 8593 | 5416 | 15 | 13 | 16 | 32 | 3170 | 69258 | 67074 | 71442 | 46 | 16 | 15 | 17 | |
24035 | Maryland | Queen Anne's | 48595 | 22.9 | 16.1 | 6.8 | 0.4 | 1.1 | 0 | 3.2 | 87.2 | 410 | 0.9 | 0.5 | 1.4 | 50.3 | 54.5 | 9 | 8 | 11 | 45 | 112 | 459 | 274.8 | 249.1 | 300.6 | 24 | 52 | 33.3 | 77.4 | 7 | 1487 | 3 | 46 | 14 | 10 | 19 | 38 | 12 | 3559 | 12 | 11 | 14 | 579 | 5 | 4 | 6 | 9177 | 9174 | 9179 | 1999 | 8 | 6 | 10 | 25 | 4050 | 79012 | 72110 | 85914 | 19 | |||||||
24037 | Maryland | St. Mary's | 108987 | 25.4 | 11 | 14 | 0.4 | 2.6 | 0.1 | 4 | 76.3 | 854 | 0.9 | 0.5 | 1.2 | 50.1 | 50.4 | 9 | 8 | 11 | 95 | 111 | 1011 | 337.8 | 316.7 | 358.8 | 7.4 | 5.8 | 9.1 | 72 | 66.3 | 51.8 | 83.4 | 9 | 2320 | 2 | 100 | 14 | 11 | 17 | 63 | 9 | 7440 | 11 | 10 | 13 | 1222 | 4 | 3 | 6 | 9255 | 9253 | 9257 | 2030 | 8 | 7 | 10 | 32 | 3114 | 85478 | 82877 | 88079 | 24 | 2 | 1 | 4 | |
24039 | Maryland | Somerset | 26253 | 16.7 | 14.4 | 41.9 | 0.4 | 0.8 | 0 | 3.4 | 52 | 296 | 1.2 | 0.4 | 1.9 | 46.2 | 45.8 | 10 | 9 | 13 | 153 | 657 | 350 | 418.8 | 374.1 | 463.5 | 11.7 | 6.7 | 16.8 | 15 | 81.8 | 45.8 | 135 | 18 | 2930 | 11 | 15 | 8 | 5 | 13 | 25 | 14 | 2250 | 17 | 15 | 20 | 270 | 6 | 4 | 8 | 9264 | 9261 | 9267 | 862 | 15 | 11 | 19 | 65 | 1544 | 34454 | 30899 | 38009 | 60 | ||||
24041 | Maryland | Talbot | 38098 | 19 | 25.5 | 12.8 | 0.3 | 1.3 | 0.1 | 5.7 | 78.8 | 344 | 1 | 0.2 | 1.7 | 52.4 | 54.7 | 10 | 8 | 12 | 59 | 180 | 449 | 295.5 | 265.9 | 325.1 | 12 | 40.9 | 21.1 | 71.5 | 9 | 603 | 2 | 39 | 15 | 11 | 21 | 21 | 8 | 3418 | 16 | 14 | 18 | 478 | 6 | 5 | 8 | 9218 | 9216 | 9220 | 1934 | 9 | 7 | 11 | 79 | 1270 | 61529 | 56696 | 66362 | 29 | |||||||
24043 | Maryland | Washington | 149180 | 22.4 | 14.9 | 9.9 | 0.3 | 1.5 | 0.1 | 3.6 | 82.6 | 1536 | 1.1 | 0.8 | 1.4 | 49 | 29.5 | 11 | 10 | 13 | 566 | 458 | 1684 | 356.9 | 339.7 | 374.1 | 5.7 | 4.4 | 7 | 72 | 53.2 | 41.6 | 66.9 | 12 | 9186 | 6 | 137 | 14 | 11 | 16 | 118 | 12 | 12805 | 15 | 13 | 16 | 1681 | 5 | 3 | 6 | 8848 | 8846 | 8849 | 2963 | 10 | 9 | 12 | 47 | 2131 | 52604 | 49463 | 55745 | 36 | 2 | 2 | 4 | |
24045 | Maryland | Wicomico | 100647 | 22 | 13.6 | 24.2 | 0.3 | 2.8 | 0.1 | 4.6 | 66.2 | 2168 | 2.3 | 1.7 | 3 | 52.2 | 25.8 | 11 | 9 | 13 | 224 | 270 | 1211 | 408.5 | 385.2 | 431.8 | 7.7 | 5.9 | 9.5 | 58 | 65.8 | 50 | 85.1 | 14 | 7023 | 7 | 108 | 16 | 13 | 19 | 81 | 12 | 10587 | 17 | 15 | 19 | 1336 | 6 | 4 | 7 | 9461 | 9460 | 9463 | 1869 | 13 | 11 | 16 | 133 | 751 | 50204 | 47872 | 52536 | 46 | 7 | 5 | 10 | |
24047 | Maryland | Worcester | 51578 | 17.8 | 24.3 | 13.6 | 0.3 | 1.2 | 0 | 3.1 | 80.3 | 554 | 1.1 | 0.5 | 1.8 | 51.3 | 35.5 | 12 | 10 | 14 | 75 | 167 | 675 | 318.1 | 291.9 | 344.3 | 6.3 | 3.6 | 9.1 | 22 | 58.1 | 36.4 | 87.9 | 13 | 1965 | 4 | 55 | 15 | 12 | 20 | 55 | 15 | 4962 | 17 | 15 | 19 | 658 | 7 | 5 | 9 | 9436 | 9434 | 9438 | 1262 | 13 | 10 | 17 | 74 | 1357 | 55875 | 52843 | 58907 | 35 | ||||
24510 | Maryland | Baltimore City | 621342 | 21.5 | 11.9 | 63.2 | 0.4 | 2.5 | 0.1 | 4.3 | 28.1 | 10701 | 1.8 | 1.7 | 2 | 52.9 | 0 | 12 | 11 | 14 | 12834 | 2451 | 11209 | 619.2 | 607.6 | 630.8 | 11.8 | 11 | 12.6 | 695 | 126.6 | 117.2 | 136 | 23 | 7607 | 1 | 397 | 9 | 8 | 10 | 1433 | 33 | 73441 | 18 | 17 | 20 | 6496 | 5 | 3 | 6 | 9918 | 9918 | 9919 | 3948 | 14 | 13 | 16 | 174 | 573 | 39077 | 37718 | 40436 | 76 | 38 | 36 | 40 |
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>Module 3 Exercise</title> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
<style type="text/css"> | |
body { | |
font-family: Helvetica, Arial, sans-serif; | |
color: #000099; | |
background-color: #80FFCC; | |
padding: 5px; | |
} | |
h1 { | |
border-bottom: solid 5px #000099; | |
font-size: 18pt; | |
} | |
svg {background-color: white;} | |
</style> | |
</head> | |
<body> | |
<h1>DataVis with D3 - Module 3 Exercise</h1> | |
<select id="measureSelect"> | |
<option value="NoInsAdult_pct">Percent of adults without health insurance</option> | |
<option value="NoInsChild_pct">Percent of children without health insurance</option> | |
<option value="Access2Dr_pct">Percent who were unable to see a doctor due to costs</option> | |
<option value="LimitedFood_pct">Percent with limited access to healthy food</option> | |
<option value="Black_pct">Percent African American</option> | |
<option value="Hisp_pct">Percent Hispanic</option> | |
<option value="NHWhite_pct">Percent Non-Hispanic White</option> | |
</select> | |
<p> | |
<script type="text/javascript"> | |
// Selected county measure | |
var selMmeasure = "NoInsAdult_pct"; // Hard-code the measure for now | |
// Tunable variables: | |
var svgw = 1120; | |
var svgh = 600; | |
var barStart = 50; // Down from the top - leave room for title | |
var barOffset = 100; // Shift right - leave room for county names | |
var barHeight = 17 | |
var barPad = 5; | |
//Global variables: | |
var svg = d3.select("body") // An empty SVG | |
.append("svg") | |
.attr("width", svgw).attr("height", svgh); | |
var dataset; | |
//Load in contents of CSV file, check for errors, and call generateVis() | |
d3.csv("2014 County Health Rankings Maryland - additional_measures.csv", | |
function(error, data) { | |
if (error) { console.log(error); //Log the error. | |
} else { | |
console.log(data); //Log the data. | |
dataset = data; | |
generateVis(); | |
} | |
}); | |
// generateVis: function to generate the bar chart | |
var generateVis = function() { | |
// Sort in descending order | |
dataset.sort(function(a, b) { | |
return d3.descending(a.NoInsAdult_pct, b.NoInsAdult_pct); | |
}); | |
// Create the bar chart | |
svg.selectAll("rect") | |
.data(dataset) | |
.enter() | |
.append("rect") | |
.attr("x", barOffset) | |
.attr("y", function(d, i) { | |
return i * (barHeight + barPad) + barStart; | |
}) | |
.attr("width", function(d) { | |
return d.NoInsAdult_pct * 10; | |
}) | |
.attr("height", barHeight) | |
.attr("fill", "#4A82BD") | |
.append("title") | |
.text(function(d) { | |
return d.CoName + " County's value is " + d.NoInsAdult_pct + " percent"; | |
}); | |
// Add text labels for each bar | |
var d_text = svg.selectAll("text") | |
.data(dataset); | |
// Add the county name to the left of the bar | |
d_text.enter() | |
.append("text") | |
.text(function(d) { | |
return d.CoName; | |
}) | |
.attr("x", 2) | |
.attr("y", function(d, i) { | |
return i * (barHeight + barPad) + barStart + 12; // Add 12 for font size | |
}) | |
.attr("font-size", "12px") | |
.attr("fill", "#000099"); | |
// Add the data value at the end of the bar | |
// d_text.enter() | |
// .append("text") | |
// .text(function(d) { | |
// return d.NoInsAdult_pct; | |
// }) | |
// // .attr("x", 2) | |
// .attr("x", function(d) { | |
// return d.NoInsAdult_pct * 30; | |
// .attr("y", function(d, i) { | |
// return i * (barHeight + barPad) + barStart + 12; // Add 12 for font size | |
// }) | |
// .attr("font-size", "12px") | |
// .attr("fill", "#000099"); | |
// Add a title | |
svg.append("rect") // Title rectangle | |
.attr({ // Using D3's "multivalue maps" | |
x: svgw / 2 - 200, y: 5, width: 400, height: 30, fill: "#FFE0D1"}); | |
svg.append("text") // Title text | |
.attr({ // Using D3's "multivalue maps" | |
x: svgw / 2, y: 25, fill: "#000099", | |
"font-size": 18, "font-weight": "bold", "text-anchor": "middle"}) | |
.text("Maryland County Health Rankings - 2014"); | |
svg.append("line") // X-axis line | |
.attr({ // Using D3's "multivalue maps" | |
x1: barOffset, y1: svgh - 20, | |
x2: barOffset + 1000, y2: svgh - 20, stroke: "#000099"}); | |
svg.append("text") // X-axis 0 | |
.attr({ // Using D3's "multivalue maps" | |
x: barOffset, y: svgh - 6, fill: "#000099", | |
"font-size": 12, "text-anchor": "middle"}) | |
.text("0"); | |
svg.append("text") // X-axis 25 | |
.attr({ // Using D3's "multivalue maps" | |
x: barOffset + 250, y: svgh - 6, fill: "#000099", | |
"font-size": 12, "text-anchor": "middle"}) | |
.text("25"); | |
svg.append("text") // X-axis 50 | |
.attr({ // Using D3's "multivalue maps" | |
x: barOffset + 500, y: svgh - 6, fill: "#000099", | |
"font-size": 12, "text-anchor": "middle"}) | |
.text("50"); | |
svg.append("text") // X-axis 75 | |
.attr({ // Using D3's "multivalue maps" | |
x: barOffset + 750, y: svgh - 6, fill: "#000099", | |
"font-size": 12, "text-anchor": "middle"}) | |
.text("75"); | |
svg.append("text") // X-axis 100 | |
.attr({ // Using D3's "multivalue maps" | |
x: barOffset + 1000, y: svgh - 6, fill: "#000099", | |
"font-size": 12, "text-anchor": "middle"}) | |
.text("100"); | |
}; | |
</script> | |
<p style="font-size:12px">Source: County Health Rankings web site ( | |
<a href="http://http://www.countyhealthrankings.org/"> | |
http://http://www.countyhealthrankings.org/</a> | |
) additional measures data.</p> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment