Skip to content

Instantly share code, notes, and snippets.

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 enjalot/0ed295d3f941dcedfc23 to your computer and use it in GitHub Desktop.
Save enjalot/0ed295d3f941dcedfc23 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Attribute Values from Data</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
}
svg {
background-color: white;
font-family: sans-serif;
}
h1 {font-size: 24px;
margin: 0;
}
p {font-size: 14px;
margin: 10px 0 0 0;
}
svg{
background-color: white;
}
circle:hover { fill:orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering; crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 10px;
}
</style>
</head>
<body>
<h1> WIC Participants by State </h>
<p> The Special Supplemental Nutrition Program for Women, Infants, and Children (WIC) provides Federal grants to States for supplemental foods, health care referrals, and nutrition education for low-income pregnant, breastfeeding, and non-breastfeeding postpartum women, and to infants and children up to age five who are found to be at nutritional risk.
</p>
<script type="text/javascript">
var w = 700; //this creates a dymanic chart to re-size if you need to quickly. This is referenced below
var h = 900;
var padding = [20, 20, 30, 100] ;//top, right, bottom, left
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] - padding[3]]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ] );
var xAxis = d3.svg.axis()
.scale(xScale)
.orient ("bottom")
.ticks(10);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(20);
var svg = d3.select("body")
.append("svg")
.attr("width", w)//added the variable from above "w" and "h" to keep chart dynamic
.attr("height", h);
d3.csv("School Lunch Programs By State_2009-2012 CSV1.csv", function(data) {
function getYValue(d) {
//remove comma
var value = d.NationalSchoolLunchProgramparticipantsFY2009
value = value.replace(/,/g, '')
return parseInt(value)
}
xScale.domain([
d3.min(data, function(d) {
return +d.WICParticipants;
}),
d3.max(data, function(d) {
return +d.WICParticipants;
})
]);
yScale.domain([
d3.max(data, function(d) {
return getYValue(d);
}),
d3.min(data, function(d) {
return getYValue(d);
})
]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function(d){
return xScale(d.WICParticipants);
})
.attr("cy", function(d) {
var v = +d.NationalSchoolLunchProgramparticipantsFY2009
//this shows the problem
console.log(v, yScale(v), getYValue(d), yScale(getYValue(d)))
return yScale(getYValue(d));
})
.attr("r", .1)
.attr("fill","lightseagreen")
.append("title")
.text(function(d) {
return d.State + " has " + d.WICParticipants + " WIC Participants and " + d.NationalSchoolLunchProgramparticipantsFY2009 + " School Lunch Participants "
});
circles.sort(function(a, b) {
return d3.ascending(+a.WICParticipants, +b.WICParticipants);
})
.transition()
.delay(function(d, i) {
return i;
})
.duration(2000)
.attr("r", 4);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
State WICparticipantsFY2009 WICparticipantsFY2011 WICparticipants,FY2012 WICParticipants NationalSchoolLunchProgramparticipantsFY2009 NationalSchoolLunchProgramparticipantsFY2011 NationalSchoolLunchProgramparticipants,FY2012 SchoolBreakfastProgramparticipantsFY2009 SchoolBreakfastProgramparticipantsFY2011 SchoolBreakfastProgramparticipants,FY2012 ChildandAdultCareparticpantsFY2009 ChildandAdultCareparticpantsFY2011 ChildandAdultCareparticipants,FY2012 SummerFoodparticpantsFY2009 SummerFoodparticipantsFY2011 SummerFoodparticipants,FY2012 StatePopulation,2008 StatePopulation,2009 StatePopulation,2010 StatePopulation,2011 StatePopulation,2012 StatePopulation,2013
Alabama 140,810 143,768 141,900 142 571 571,291 562,959 212,316 216,714 224,496 43,136 42,774 42,933 26,599 24,724 26,423 4,677,464 4,708,708 4,785,401 4,802,740 4817528 4833722
Alaska 25,816 26,295 24,969 25 54 54,410 53,920 16,943 19,974 20,759 9,874 9,616 10,541 2,345 6,564 4,661 688,125 698,473 714,146 722,718 730307 735132
Arizona 208,873 199,343 193,214 193 661 661,437 662,564 231,674 261,119 274,857 45,772 42,161 41,671 12,403 23,732 27,554 6,499,377 6,595,778 6,413,158 6,482,505 6551149 6626624
Arkansas 94,107 93,461 94,293 94 353 352,818 348,909 155,258 158,053 162,018 43,974 51,644 55,787 17,494 21,841 26,217 2,867,764 2,889,450 2,921,588 2,937,979 2949828 2959373
California 1,439,006 1,466,564 1472 468 3,175 3,175,063 3,281,699 3,333,410 1,172,714 1,288,211 1,396,437 327,838 327,358 363,002 95,080 115,689 104,428 36,580,371 36,961,664 37,338,198 37,691,912 37999878 38332521
Colorado 107,930 104,129 103,769 104 399 399,393 389,955 107,139 126,776 142,956 34,480 33,486 32,550 12,804 15,569 16,646 4,935,213 5,024,748 5,047,692 5,116,796 5189458 5268367
Connecticut 60,148 56,083 56,584 57 302 301,545 296,699 68,912 81,660 86,529 18,678 19,656 20,326 12,285 10,834 10,185 3,502,932 3,518,288 3,575,498 3,580,709 3591765 3596080
Delaware 24,028 22,553 22,214 22 95 94,722 96,040 33,202 36,699 38,624 15,773 18,991 18,367 10,727 9,129 14,366 876,211 885,122 899,792 907,135 917053 925749
DistrictofColumbia 17,473 16,537 16,474 16 47 46,699 47,735 20,431 29,830 33,281 5,975 5,189 7,828 35,298 36,690 36,158 590,074 599,657 604,912 617,996 633427 646449
Florida 505,671 492,071 495,405 495 1,649 1,648,792 1,653,935 610,818 684,462 711,081 180,614 203,266 210,497 127,826 129,450 137,796 18,423,878 18,537,969 18,838,613 19,057,542 19320749 19552860
Georgia 499,213 469,456 303,875 304 1,301 1,301,069 1,287,033 564,627 600,642 620,655 140,053 138,093 135,300 68,454 75,890 84,202 9,697,838 9,829,211 9,712,157 9,815,210 9915646 9992167
Hawaii 36,320 36,753 37,169 37 116 115,694 113,618 35,946 35,847 38,943 9,460 9,757 10,069 5,836 3,169 5,134 1,287,481 1,295,178 1,363,359 1,374,810 1390090 1404054
Idaho 46,175 44,020 43,751 44 171 170,852 170,127 70,830 74,902 77,706 9,677 8,879 8,546 22,625 21,744 21,114 1,527,506 1,545,801 1,571,102 1,584,985 1595590 1612136
Illinois 309,870 295,409 288,939 289 1,163 1,162,998 1,142,443 293,385 357,551 395,045 124,146 130,757 127,321 50,389 52,556 55,586 12,842,954 12,910,409 12,841,980 12,869,257 12868192 12882135
Indiana 170,137 167,875 164,281 164 808 807,689 801,376 210,886 240,077 256,202 61,253 66,495 71,209 55,113 55,785 54,466 6,388,309 6,423,113 6,490,622 6,516,922 6537782 6570902
Iowa 75,645 70,931 69,159 69 397 396,894 395,600 84,554 88,514 93,108 37,532 38,946 38,916 10,346 11,122 11,109 2,993,987 3,007,856 3,050,202 3,062,309 3075039 3090416
Kansas 76,989 75,212 74,761 75 362 362,152 361,686 96,299 102,502 107,459 47,310 48,656 49,973 17,632 20,262 20,026 2,797,375 2,818,747 2,859,143 2,871,238 2885398 2893957
Kentucky 141,768 141,648 132,698 133 554 553,819 549,534 238,782 252,111 269,771 45,763 46,954 47,689 55,312 39,769 33,091 4,287,931 4,314,113 4,347,223 4,369,356 4379730 4395295
Louisiana 148,747 150,051 145,346 145 595 595,046 588,506 243,815 261,009 267,443 59,010 63,075 63,843 26,640 32,134 32,216 4,451,513 4,492,076 4,545,343 4,574,836 4602134 4625470
Maine 26,663 26,267 25,690 26 109 109,302 107,213 37,150 41,319 44,366 12,288 11,916 11,089 6,926 8,651 9,169 1,319,691 1,318,301 1,327,379 1,328,188 1328501 1328302
Maryland 146,411 147,421 146,272 146 435 435,111 434,140 154,317 169,116 191,429 47,099 45,126 57,085 50,239 54,981 57,720 5,658,655 5,699,478 5,785,681 5,828,289 5884868 5928814
Massachusetts 127,944 119,099 122,568 123 542 542,347 534,456 134,914 143,363 149,885 56,230 59,673 63,771 50,586 53,239 48,764 6,543,595 6,593,587 6,555,466 6,587,536 6645303 6692824
Michigan 243,275 252,705 255,954 256 910 910,341 907,684 282,037 351,514 379,452 83,781 84,935 82,241 59,690 61,539 73,133 10,002,486 9,969,727 9,877,143 9,876,187 9882519 9895622
Minnesota 141,598 131,255 128,436 128 631 631,230 627,280 142,628 169,939 179,640 93,422 95,482 94,086 54,569 39,269 45,834 5,230,567 5,266,214 5,310,658 5,344,861 5379646 5420380
Mississippi 111,478 97,277 94,773 95 400 400,490 398,654 199,880 203,825 207,859 38,121 41,350 41,387 22,745 27,456 28,027 2,940,212 2,951,996 2,970,072 2,978,512 2986450 2991207
Missouri 150,145 145,767 145,900 146 646 646,161 638,943 235,682 242,192 257,271 62,896 67,779 68,446 34,698 33,520 27,147 5,956,335 5,987,580 5,995,715 6,010,688 6024522 6044171
Montana 20,673 20,164 20,457 20 88 87,622 86,705 25,594 27,569 28,134 13,741 15,056 13,511 6,711 7,034 6,663 968,035 974,989 990,958 998,199 1005494 1015165
Nebraska 45,585 43,563 42,727 43 250 250,190 251,186 58,000 63,594 66,641 41,074 43,892 44,633 8,333 10,565 9,836 1,781,949 1,796,619 1,830,141 1,842,641 1855350 1868516
Nevada 67,829 75,676 76,108 76 213 212,555 218,552 55,873 63,732 87,213 10,253 12,302 13,842 5,630 7,094 6,865 2,615,772 2,643,085 2,704,283 2,723,322 2754354 2790136
NewHampshire 18,362 17,048 16,299 16 108 107,790 104,546 22,006 24,511 24,251 7,092 9,148 7,979 4,418 5,321 4,948 1,321,872 1,324,575 1,316,807 1,318,194 1321617 1323459
NewJersey 169,078 168,467 172,333 172 728 727,544 729,099 172,440 189,692 218,062 73,884 74,034 75,688 50,078 51,279 52,652 8,663,398 8,707,739 8,799,593 8,821,155 8867749 8899339
NewMexico 70,159 64,304 63,844 64 231 230,861 227,863 129,912 138,835 150,554 40,352 37,587 36,630 43,343 35,014 38,463 1,986,763 2,009,671 2,065,913 2,082,224 2083540 2085287
NewYork 518,961 512,603 524,148 524 1,823 1,823,476 1,796,235 573,011 614,752 644,136 281,586 294,207 297,400 436,620 378,655 369,027 19,467,789 19,541,453 19,395,206 19,465,197 19576125 19651127
NorthCarolina 275,039 266,478 269,335 269 949 948,653 942,745 367,089 382,095 405,295 127,404 120,105 116,996 53,067 74,559 92,476 9,247,134 9,380,884 9,560,234 9,656,401 9748364 9848060
NorthDakota 14,573 14,068 13,661 14 83 83,484 85,078 20,233 21,954 23,292 16,511 16,612 16,240 2,122 2,659 2,184 641,421 646,844 674,629 683,932 701345 723393
Ohio 303,679 281,306 275,627 276 1,134 1,133,772 1,114,371 363,399 396,715 418,371 123,817 124,776 124,905 65,014 61,001 64,450 11,528,072 11,542,645 11,537,968 11,544,951 11553031 11570808
Oklahoma 130,064 126,944 123,070 123 452 452,426 446,144 208,249 224,431 227,417 57,028 56,667 54,327 12,826 10,628 11,390 3,644,025 3,687,050 3,760,184 3,791,508 3815780 3850568
Oregon 113,248 111,534 111,648 112 313 312,828 307,110 138,831 139,962 142,435 40,901 45,795 46,211 36,567 42,278 40,815 3,782,991 3,825,657 3,838,332 3,871,859 3899801 3930065
Pennsylvania 260,879 257,911 253,011 253 1,154 1,153,645 1,127,444 291,249 329,570 343,390 123,430 135,534 138,874 100,190 97,422 103,651 12,566,368 12,604,767 12,717,722 12,742,886 12764475 12773801
RhodeIsland 25,676 24,501 24,261 24 79 79,006 79,747 23,418 27,664 32,981 9,366 9,453 9,372 6,785 6,820 8,221 1,053,502 1,053,209 1,052,528 1,051,302 1050304 1051511
SouthCarolina 134,753 130,647 130,525 131 498 497,669 493,488 249,443 261,877 272,470 33,541 33,507 33,470 55,205 45,229 56,178 4,503,280 4,561,242 4,637,106 4,679,230 4723417 4774839
SouthDakota 22,962 22,583 22,153 22 108 108,289 107,367 25,475 27,253 27,503 13,428 14,807 14,751 4,459 4,550 5,518 804,532 812,383 816,598 824,082 834047 844877
Tennessee 174,832 161,578 162,775 163 698 697,665 687,452 280,464 310,063 333,403 60,067 65,110 68,258 28,843 28,574 32,493 6,240,456 6,296,254 6,357,436 6,403,353 6454914 6495978
Texas 992,454 993,498 969,893 975 3,402 3,401,746 3,374,154 1,528,878 1,744,587 1,786,414 303,520 307,976 351,922 183,501 173,243 176,587 24,304,290 24,782,302 25,253,466 25,674,681 26060796 26448193
Utah 72,535 73,049 69,641 70 350 350,494 348,886 66,483 73,494 74,580 28,063 31,285 31,560 16,822 14,777 13,670 2,727,343 2,784,572 2,775,479 2,817,222 2854871 2900872
Vermont 17,496 15,913 15,471 15 55 54,919 54,209 21,409 22,633 23,523 7,134 7,630 7,914 2,964 4,131 6,556 621,049 621,760 625,909 626,431 625953 626630
Virginia 160,150 156,085 159,137 159 757 756,503 749,115 234,396 253,730 271,107 58,915 67,736 70,997 51,798 58,006 54,339 7,795,424 7,882,590 8,023,953 8,096,604 8186628 8260405
Washington 193,387 192,565 194,706 195 546 545,986 539,859 168,120 179,861 185,961 70,430 69,038 75,387 41,455 39,587 41,012 6,566,073 6,664,195 6,742,950 6,830,038 6895318 6971406
WestVirginia 53,060 49,117 47,891 48 206 205,872 201,333 93,143 95,849 114,120 22,614 21,945 24,123 15,111 16,917 13,251 1,814,873 1,819,777 1,854,368 1,855,364 1856680 1854304
Wisconsin 127,891 121,516 118,585 119 606 606,117 596,269 135,728 166,478 172,918 64,369 63,650 60,128 44,856 82,427 87,538 5,627,610 5,654,774 5,691,659 5,711,767 5724554 5742713
Wyoming 13,338 12,997 12,602 13 57 57,420 56,578 14,276 15,747 15,703 9,533 9,338 9,428 2,572 4,196 3,079 532,981 544,270 564,554 568,158 576626 582658
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment