Skip to content

Instantly share code, notes, and snippets.

@lee00678

lee00678/index.html

Created April 10, 2015 22:55
Show Gist options
  • Save lee00678/23f79aebb62e050cf9e0 to your computer and use it in GitHub Desktop.
Save lee00678/23f79aebb62e050cf9e0 to your computer and use it in GitHub Desktop.
Download ZIP
Bar Chart D3
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bar Chart</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
}
h1 {
font-family: sans-serif;
font-size: 30px;
padding-left: 30px;
padding-top: 10px;
}
h2 {
font-family: sans-serif;
font-size: 12px;
padding-left: 30px;
font-weight: normal;
padding-top: 10px;
}
svg {
background-color: white;
}
rect:hover {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text{
font-family: sans-serif;
font-size: 10px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<h1>Unite States Health Record</h1>
<h2>This chart reflects health status in different states in US. The value repersents the ration of people
involved in the healthy lunch program. As the population in each status varies, this chart uses the ratio instead of the original number.</h2>
<script type="text/javascript">
var padding = [20, 20, 40, 100]; //Top, right, bottom, left
var w = 800;
var h = 800;
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.2);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom")
.tickFormat(d3.format(",.2%"));
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("statehealth.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.ChildAdultCare2012/+a.Population2012, +b.ChildAdultCare2012/+b.Population2012);
});
widthScale.domain([0, d3.max(data, function(d){
return +d.ChildAdultCare2012/d.Population2012;
})]);
heightScale.domain(data.map(function(d) { return d.State; } ));
// heightScale.domain(d3.range(data.length));
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.State);
})
.attr("width", function(d) {
return widthScale(d.ChildAdultCare2012/d.Population2012);
})
.attr("height", heightScale.rangeBand())
.append("title")
.text(function(d) {
var x = d.ChildAdultCare2012/d.Population2012;
return d.State + "'s child and adult care participants ratio (over state population) " + d3.format(",.2%")(x);
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2] - 5) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3]) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
statehealth.csv
State WIC2009 WIC2011 WIC2012 NationalSchoolLunch2009 NationalSchoolLunch2011 NationalSchoolLunch2012 Breakfast2009 Breakfast2011 Breakfast2012 ChildAdultCare2009 ChildAdultCare2011 ChildAdultCare2012 Summer2009 Summer2011 Summer2012 Population2008 Population2009 Population2010 Population2011 Population2012 Population2013
Alabama 140810 143768 141900 579880 571291 562959 212316 216714 224496 43136 42774 42933 26599 24724 26423 4677464 4708708 4785401 4802740 4817528 4833722
Alaska 25816 26295 24969 53554 54410 53920 16943 19974 20759 9874 9616 10541 2345 6564 4661 688125 698473 714146 722718 730307 735132
Arizona 208873 199343 193214 655498 661437 662564 231674 261119 274857 45772 42161 41671 12403 23732 27554 6499377 6595778 6413158 6482505 6551149 6626624
Arkansas 94107 93461 94293 351950 352818 348909 155258 158053 162018 43974 51644 55787 17494 21841 26217 2867764 2889450 2921588 2937979 2949828 2959373
California 1439006 1466564 1472468 3175063 3281699 3333410 1172714 1288211 1396437 327838 327358 363002 95080 115689 104428 36580371 36961664 37338198 37691912 37999878 38332521
Colorado 107930 104129 103769 390868 399393 389955 107139 126776 142956 34480 33486 32550 12804 15569 16646 4935213 5024748 5047692 5116796 5189458 5268367
Connecticut 60148 56083 56584 302997 301545 296699 68912 81660 86529 18678 19656 20326 12285 10834 10185 3502932 3518288 3575498 3580709 3591765 3596080
Delaware 24028 22553 22214 90073 94722 96040 33202 36699 38624 15773 18991 18367 10727 9129 14366 876211 885122 899792 907135 917053 925749
District of Columbia 17473 16537 16474 44579 46699 47735 20431 29830 33281 5975 5189 7828 35298 36690 36158 590074 599657 604912 617996 633427 646449
Florida 505671 492071 495405 1560392 1648792 1653935 610818 684462 711081 180614 203266 210497 127826 129450 137796 18423878 18537969 18838613 19057542 19320749 19552860
Georgia 499213 469456 303875 1290996 1301069 1287033 564627 600642 620655 140053 138093 135300 68454 75890 84202 9697838 9829211 9712157 9815210 9915646 9992167
Hawaii 36320 36753 37169 103807 115694 113618 35946 35847 38943 9460 9757 10069 5836 3169 5134 1287481 1295178 1363359 1374810 1390090 1404054
Idaho 46175 44020 43751 170003 170852 170127 70830 74902 77706 9677 8879 8546 22625 21744 21114 1527506 1545801 1571102 1584985 1595590 1612136
Illinois 309870 295409 288939 1148891 1162998 1142443 293385 357551 395045 124146 130757 127321 50389 52556 55586 12842954 12910409 12841980 12869257 12868192 12882135
Indiana 170137 167875 164281 788167 807689 801376 210886 240077 256202 61253 66495 71209 55113 55785 54466 6388309 6423113 6490622 6516922 6537782 6570902
Iowa 75645 70931 69159 394391 396894 395600 84554 88514 93108 37532 38946 38916 10346 11122 11109 2993987 3007856 3050202 3062309 3075039 3090416
Kansas 76989 75212 74761 356495 362152 361686 96299 102502 107459 47310 48656 49973 17632 20262 20026 2797375 2818747 2859143 2871238 2885398 2893957
Kentucky 141768 141648 132698 570755 553819 549534 238782 252111 269771 45763 46954 47689 55312 39769 33091 4287931 4314113 4347223 4369356 4379730 4395295
Louisiana 148747 150051 145346 586936 595046 588506 243815 261009 267443 59010 63075 63843 26640 32134 32216 4451513 4492076 4545343 4574836 4602134 4625470
Maine 26663 26267 25690 107734 109302 107213 37150 41319 44366 12288 11916 11089 6926 8651 9169 1319691 1318301 1327379 1328188 1328501 1328302
Maryland 146411 147421 146272 432643 435111 434140 154317 169116 191429 47099 45126 57085 50239 54981 57720 5658655 5699478 5785681 5828289 5884868 5928814
Massachusetts 127944 119099 122568 547582 542347 534456 134914 143363 149885 56230 59673 63771 50586 53239 48764 6543595 6593587 6555466 6587536 6645303 6692824
Michigan 243275 252705 255954 911466 910341 907684 282037 351514 379452 83781 84935 82241 59690 61539 73133 10002486 9969727 9877143 9876187 9882519 9895622
Minnesota 141598 131255 128436 615043 631230 627280 142628 169939 179640 93422 95482 94086 54569 39269 45834 5230567 5266214 5310658 5344861 5379646 5420380
Mississippi 111478 97277 94773 405716 400490 398654 199880 203825 207859 38121 41350 41387 22745 27456 28027 2940212 2951996 2970072 2978512 2986450 2991207
Missouri 150145 145767 145900 645262 646161 638943 235682 242192 257271 62896 67779 68446 34698 33520 27147 5956335 5987580 5995715 6010688 6024522 6044171
Montana 20673 20164 20457 86652 87622 86705 25594 27569 28134 13741 15056 13511 6711 7034 6663 968035 974989 990958 998199 1005494 1015165
Nebraska 45585 43563 42727 243466 250190 251186 58000 63594 66641 41074 43892 44633 8333 10565 9836 1781949 1796619 1830141 1842641 1855350 1868516
Nevada 67829 75676 76108 183808 212555 218552 55873 63732 87213 10253 12302 13842 5630 7094 6865 2615772 2643085 2704283 2723322 2754354 2790136
New Hampshire 18362 17048 16299 110811 107790 104546 22006 24511 24251 7092 9148 7979 4418 5321 4948 1321872 1324575 1316807 1318194 1321617 1323459
New Jersey 169078 168467 172333 705558 727544 729099 172440 189692 218062 73884 74034 75688 50078 51279 52652 8663398 8707739 8799593 8821155 8867749 8899339
New Mexico 70159 64304 63844 221822 230861 227863 129912 138835 150554 40352 37587 36630 43343 35014 38463 1986763 2009671 2065913 2082224 2083540 2085287
New York 518961 512603 524148 1812488 1823476 1796235 573011 614752 644136 281586 294207 297400 436620 378655 369027 19467789 19541453 19395206 19465197 19576125 19651127
North Carolina 275039 266478 269335 961612 948653 942745 367089 382095 405295 127404 120105 116996 53067 74559 92476 9247134 9380884 9560234 9656401 9748364 9848060
North Dakota 14573 14068 13661 80924 83484 85078 20233 21954 23292 16511 16612 16240 2122 2659 2184 641421 646844 674629 683932 701345 723393
Ohio 303679 281306 275627 1120056 1133772 1114371 363399 396715 418371 123817 124776 124905 65014 61001 64450 11528072 11542645 11537968 11544951 11553031 11570808
Oklahoma 130064 126944 123070 437660 452426 446144 208249 224431 227417 57028 56667 54327 12826 10628 11390 3644025 3687050 3760184 3791508 3815780 3850568
Oregon 113248 111534 111648 310817 312828 307110 138831 139962 142435 40901 45795 46211 36567 42278 40815 3782991 3825657 3838332 3871859 3899801 3930065
Pennsylvania 260879 257911 253011 1150819 1153645 1127444 291249 329570 343390 123430 135534 138874 100190 97422 103651 12566368 12604767 12717722 12742886 12764475 12773801
Rhode Island 25676 24501 24261 79017 79006 79747 23418 27664 32981 9366 9453 9372 6785 6820 8221 1053502 1053209 1052528 1051302 1050304 1051511
South Carolina 134753 130647 130525 500742 497669 493488 249443 261877 272470 33541 33507 33470 55205 45229 56178 4503280 4561242 4637106 4679230 4723417 4774839
South Dakota 22962 22583 22153 106266 108289 107367 25475 27253 27503 13428 14807 14751 4459 4550 5518 804532 812383 816598 824082 834047 844877
Tennessee 174832 161578 162775 692008 697665 687452 280464 310063 333403 60067 65110 68258 28843 28574 32493 6240456 6296254 6357436 6403353 6454914 6495978
Texas 992454 993498 969893 3254249 3401746 3374154 1528878 1744587 1786414 303520 307976 351922 183501 173243 176587 24304290 24782302 25253466 25674681 26060796 26448193
Utah 72535 73049 69641 337710 350494 348886 66483 73494 74580 28063 31285 31560 16822 14777 13670 2727343 2784572 2775479 2817222 2854871 2900872
Vermont 17496 15913 15471 54859 54919 54209 21409 22633 23523 7134 7630 7914 2964 4131 6556 621049 621760 625909 626431 625953 626630
Virginia 160150 156085 159137 752709 756503 749115 234396 253730 271107 58915 67736 70997 51798 58006 54339 7795424 7882590 8023953 8096604 8186628 8260405
Washington 193387 192565 194706 532526 545986 539859 168120 179861 185961 70430 69038 75387 41455 39587 41012 6566073 6664195 6742950 6830038 6895318 6971406
West Virginia 53060 49117 47891 207758 205872 201333 93143 95849 114120 22614 21945 24123 15111 16917 13251 1814873 1819777 1854368 1855364 1856680 1854304
Wisconsin 127891 121516 118585 594850 606117 596269 135728 166478 172918 64369 63650 60128 44856 82427 87538 5627610 5654774 5691659 5711767 5724554 5742713
Wyoming 13338 12997 12602 56424 57420 56578 14276 15747 15703 9533 9338 9428 2572 4196 3079 532981 544270 564554 568158 576626 582658
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment