block by mgold e21dbf08e838796dcf60

Knight D3 Module 6

Full Screen

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Knight D3 Module 6</title>
        <style>
            body {
                margin: 0;
            }

            .axis path, .axis line {
              fill: none;
              stroke: #000;
              shape-rendering: crispEdges;
            }

            .line {
                stroke: black;
                stroke-width: 1px;
                opacity: 0.5;
                fill: none;
            }

            .line:hover {
                stroke: red;
                stroke-width: 2px;
                opacity: 1;
            }

            .axis text, text.axis {
                font-size: 12px;
            }

            text.centered {
                text-anchor: middle;
            }

            h1, p, text {
                font-family: avenir, sans-serif;
            }

            h1 {
                font-weight: initial;
                margin: 4px 50px;
            }

            p {
                margin: 4px 50px;
            }

            text.label {
                fill: red;
                opacity: 0.7;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <h1>Women Living with HIV</h1>
        <p>Shows total infant mortality rate in about 100 countries. <a href=//noceilings.org/data>NoCeilings</a> series HIVNFEIN.</p>
        <svg></svg>
        <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>
            var html_height = 125,
                margin = {top: 20, right: 100, bottom: 35, left: 50},
                width = 1000 - margin.left - margin.right,
                height = 800 - margin.top - margin.bottom - html_height;

            var dateFormat = d3.time.format("%Y");
            var years = d3.range(1995, 2012+1)

            var x = d3.time.scale()
                .domain([years[0], years[years.length-1]].map(function(d){return dateFormat.parse(""+d)}))
                .range([0, width]);

            var y = d3.scale.linear()
                .range([height, 0]);

            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .tickFormat(dateFormat)

            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")
                .tickFormat(function(d){ return d/1e6 });

            var line = d3.svg.line()
                .x(function(d){return x(d.year)})
                .y(function(d){return y(d.value)})

            d3.csv("countries.csv", function(err, countries_raw){
                if (err) return console.error(err);
                var countries = d3.map(countries_raw, function(d){return d.iso;})
            d3.csv("HIVNFEIN.csv", function(row){
                row.years = years.map(function(year){
                    return {year: dateFormat.parse(""+year),
                            value: +row[year]};
                })
                return row
            }, function(err, data){
                if (err) return console.error(err);

                y.domain([0, d3.max(data, function(d){ return d3.max(d.years, function(d2){return d2.value}) })])

                var svg = d3.select("svg")
                    .attr("width", margin.left + width + margin.right)
                    .attr("height", margin.top + height + margin.bottom)
                  .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);
                svg.append("g")
                    .attr("transform", "rotate(270)")
                  .append("text")
                    .attr("x", -height/2)
                    .attr("y", -30)
                    .attr("class", "centered axis")
                    .text("Millions of women living with HIV")

                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
                svg.append("text")
                    .attr("x", width/2)
                    .attr("y", height+30)
                    .attr("class", "centered axis")
                    .text("Year")

                var text = svg.append("text")
                    .attr("class", "label")
                    .attr("x", width)

                svg.selectAll(".line")
                   .data(data)
                   .enter()
                   .append("path")
                   .attr("d", function(d){return line(d.years)})
                   .attr("class", "line")
                   .on("mouseover", function(d){
                       text.text(countries.get(d.ISO).name);
                       text.attr("y", y(d["2012"]))
                   })
                   .on("mouseout", function(d){ text.text(""); })
                 .append("title")
                 .text(function(d){
                     return d.ISO
                 })
            })
            })

        </script>
    </body>
</html>

HIVNFEIN.csv

ISO,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012
AFG,288,327,359,393,435,479,529,585,648,717,790,866,958,1046,1146,1235,1319,1409
AGO,37927,42940,47857,52770,57610,62449,67163,72024,76600,81136,85612,90133,95204,100958,107242,114162,121466,128413
ARG,14180,15969,17586,19121,20594,21997,23291,24364,25330,26265,27218,27837,28525,29161,29817,30515,31119,31554
ARM,28,46,79,106,128,153,176,201,232,266,301,340,379,425,470,518,570,626
AZE,68,114,177,252,334,419,503,582,657,726,789,849,903,954,1004,1048,1094,1139
BHS,2029,2165,2294,2410,2517,2610,2691,2760,2822,2910,3004,3099,3210,3297,3401,3463,3486,3502
BGD,159,229,314,413,528,658,768,888,1017,1154,1301,1456,1619,1790,1970,2159,2361,2653
BRB,112,136,161,186,210,233,252,267,283,299,312,324,336,347,357,368,380,392
BLR,465,664,913,1213,1560,1979,2463,2990,3554,4110,4644,5112,5565,5966,6309,6581,6870,7139
BLZ,282,385,503,632,766,891,1002,1089,1154,1200,1220,1228,1237,1261,1273,1281,1301,1326
BEN,17320,20917,24264,27266,29666,31591,32988,33723,34040,34086,34022,34086,34253,34613,34994,35486,36128,36622
BTN,23,28,33,40,48,57,68,79,92,106,122,139,159,176,201,221,244,269
BOL,2277,2707,3182,3707,4260,4732,5109,5363,5514,5532,5454,5308,5162,5006,4876,4785,4714,4649
BWA,96255,114718,130875,143722,152933,158696,161472,161967,161211,160609,161540,163631,166380,169108,172257,175630,179316,182969
BFA,119534,117962,113828,107660,100224,92177,84294,76967,70248,64574,60203,57276,55269,54141,53771,54212,54795,55302
BDI,81329,84056,82921,78582,73282,67542,61900,56898,52649,49117,46587,44947,43942,43540,43138,43047,43320,43456
KHM,26037,34160,40522,45426,48730,50627,51242,51015,50074,48614,46901,45225,43898,42836,41858,40974,40069,39290
CMR,113987,144189,174133,201674,225257,244301,258968,269881,276909,281928,285894,289844,292779,296575,300746,305236,310290,314314
CPV,634,656,663,658,641,614,578,538,497,459,422,399,386,378,375,375,375,374
TCD,63352,70663,77446,83708,88958,93368,96934,99661,101737,102900,102777,102563,101995,101375,101910,104037,105286,104992
CHL,5355,5347,5203,4966,4663,4400,4113,3852,3699,3628,3620,3711,3894,4142,4420,4736,5076,5371
COL,19092,26238,31828,35455,37556,38756,39440,39820,40120,40254,40386,40503,40862,40962,40919,41086,41665,42272
COG,41896,43406,44513,44866,45053,44890,44264,43194,42017,40882,39698,38744,37897,37123,36704,36351,35930,35764
CRI,1227,1401,1587,1781,1980,2179,2416,2655,2886,3089,3272,3441,3593,3739,3850,3913,3960,3983
CIV,201328,235299,266661,290589,307130,315455,315517,309058,297010,281962,266035,252196,239546,228616,221562,218600,221095,220714
CUB,209,222,236,250,265,280,302,332,365,400,438,478,521,568,618,677,737,793
COD,160342,170151,179723,188870,197641,205644,213033,219391,224540,228341,230823,232750,233768,232878,232651,232549,232302,233092
DJI,1092,1589,2192,2900,3660,4352,4993,5456,5754,5863,5798,5617,5354,5050,4724,4375,4037,3745
DOM,22766,25062,26976,28572,29749,30533,30908,30820,30370,29519,28442,27299,26175,25201,24365,23593,23028,22408
ECU,6055,6503,6819,7131,7387,7620,7810,7942,8063,8182,8402,8663,9010,9423,9918,10504,11098,11630
EGY,279,325,376,430,487,548,611,678,745,813,886,955,1026,1098,1165,1234,1297,1367
SLV,5877,6478,7067,7600,8067,8461,8766,9015,9168,9246,9295,9328,9395,9331,9250,9152,9093,9024
GNQ,2344,2795,3324,3913,4555,5285,6072,6914,7764,8698,9682,10632,11600,12476,13334,14258,15045,15591
ERI,13996,14917,15604,16004,16069,15914,15623,15162,14411,13519,12482,11505,10689,10117,9701,9344,9088,8809
ETH,500764,559967,611245,650570,677936,693052,695033,681747,654313,617356,576596,533774,493000,457999,428716,405627,388048,375995
FJI,47,50,52,54,56,59,61,63,66,68,73,78,83,98,127,167,216,269
GAB,11427,14138,17007,19986,22871,25581,27780,29427,30525,31006,31127,31025,30445,29554,28509,27265,25960,24916
GMB,982,1299,1695,2167,2706,3300,3923,4551,5148,5693,6176,6610,6952,7198,7369,7441,7492,7602
GEO,61,91,133,190,264,352,456,573,696,758,857,950,1036,1113,1183,1249,1311,1389
GHA,90536,103801,115324,124240,131171,136028,138808,139962,139608,138265,135830,133314,130618,127974,125748,123372,121411,120651
GTM,6802,8879,11154,13514,15720,17708,19235,20274,20893,21206,21237,20923,20622,20441,20362,20213,19908,19944
GIN,12445,15940,19701,23638,27634,31564,35232,38592,41668,44459,46716,49014,51296,53423,55431,58005,60615,62885
GNB,2576,3570,4774,6143,7662,9183,10728,12300,13679,14895,15988,16830,17581,18242,18930,19530,20080,20539
GUY,696,798,909,1037,1178,1339,1534,1742,1956,2191,2424,2651,2869,3066,3230,3383,3520,3646
HTI,87210,86103,85406,83795,82407,81009,79593,78264,77038,75973,75017,74385,74301,74843,75665,76771,77646,78197
HND,17474,18346,18859,18955,18654,18016,17145,16062,14944,13976,13051,12277,11570,10969,10431,9986,9651,9364
IND,289703,394116,499791,598994,684055,751130,799110,829163,840712,838972,827287,810086,790248,772276,757369,748371,746222,749555
IDN,1676,2840,4617,7315,11310,17134,25175,35950,49913,66488,85189,105550,126891,148627,170146,191669,212555,232455
IRN,121,182,274,400,581,821,1162,1595,2159,2930,3925,5176,6451,7948,9796,12100,15093,18892
JAM,11795,12340,12681,12864,12899,12807,12594,12292,11890,11414,10913,10584,10247,9953,9718,9592,9444,9294
KEN,683682,748818,786102,802275,803574,802552,794302,780933,764199,745853,731345,723797,727747,739359,754079,773614,795601,819730
KGZ,124,168,216,266,317,362,409,449,486,520,560,717,790,884,1007,1165,1358,1587
LAO,95,153,254,430,702,1058,1432,1797,2162,2544,2924,3301,3653,3957,4235,4475,4684,4868
LSO,59952,81013,101231,118686,132236,142257,148893,152624,154613,155512,156225,157961,160981,166172,171548,177239,183015,187912
LBR,7206,9059,11196,13421,15439,16946,18009,18497,18549,18297,17476,16617,15762,14663,13513,12399,11552,10749
MDG,19733,20963,21686,22102,22399,22693,23088,23707,24473,25371,26198,26822,27058,26886,26355,25378,24282,23047
MWI,446886,470380,491023,499876,512599,521396,526116,527539,525866,521844,517608,514877,515040,513152,520181,529601,541119,556776
MYS,3136,3378,3663,3951,4252,4542,4842,5165,5671,6261,6918,7590,8295,9019,9746,10449,11133,11762
MDV,7,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8
MLI,38507,43973,48370,51838,54018,55308,55795,55869,55298,54304,53334,52304,51517,51144,51062,50609,50318,50178
MRT,1547,1979,2485,3015,3591,4216,4774,5307,5699,5977,6132,6128,6072,5942,5712,5544,5350,5041
MUS,796,1028,1271,1506,1707,1884,2032,2159,2268,2362,2448,2520,2582,2656,2735,2796,2814,2799
MEX,40922,41671,42257,41436,40572,39702,38682,37758,36914,36544,36282,36291,36560,37003,37304,37596,37789,38343
MAR,1772,2144,2543,2970,3408,3866,4350,4850,5354,5948,6536,7142,7751,8377,9026,9692,10340,11002
MOZ,121365,160679,207842,262930,324466,389153,453094,513807,566607,611853,648714,678183,704407,729321,752488,774001,793280,813059
MMR,16889,21194,25930,31272,36956,42482,47527,52012,55867,58905,61056,62477,63181,63431,63203,62864,63060,63158
NAM,34271,44848,56110,67224,77440,86168,93088,97906,100861,102188,102491,102899,104271,106216,108548,111046,114030,117828
NPL,1683,2911,4785,7165,9733,12170,14435,16446,18016,18941,19286,19148,18701,17973,17102,16153,15190,14342
NIC,109,148,187,224,266,308,359,422,496,601,732,899,1113,1374,1698,2076,2492,2915
NER,11195,13803,16541,19330,22038,24481,26481,27993,28860,29078,28707,27871,26744,25293,23795,22414,21109,19957
NGA,617479,734812,858675,986372,1117380,1239180,1354820,1453790,1537120,1603980,1652180,1683190,1705930,1716280,1725250,1732920,1734970,1727310
PAK,656,819,1021,1266,1574,1950,2413,2990,3712,4618,5712,7035,8679,10671,13096,15948,19390,23595
PAN,5897,6079,6143,6117,6019,5966,5842,5656,5456,5264,5103,4976,4890,4833,4812,4867,4917,4985
PNG,4558,5679,6831,7992,9189,10327,11408,12330,13025,13474,13591,13496,13366,13253,13051,12814,12607,12380
PRY,478,574,681,800,929,1071,1234,1421,1630,1876,2150,2482,2866,3302,3795,4339,4929,5499
PER,31628,31858,31631,30889,29625,28401,27008,25644,24556,23626,22817,22247,21815,21867,22007,22364,22688,22884
PHL,1244,1503,1749,1968,2122,2220,2263,2259,2223,2169,2102,2038,1987,1945,1916,2047,2105,2182
MDA,590,927,1601,2322,2865,3310,3652,3955,4236,4490,4744,4992,5253,5513,5767,6017,6263,6516
RWA,106688,110114,114348,117673,118731,117630,114167,109529,104513,99613,95542,94570,95689,97492,99241,100801,102791,104966
STP,54,86,131,191,266,353,443,531,608,666,700,717,715,699,678,656,633,610
SEN,6048,7295,8709,10271,11978,13800,15630,17488,19179,20630,21956,23201,23992,24449,24592,24472,24291,23747
SLE,3464,4520,5840,7545,9531,11904,14641,17682,20951,23977,26594,28763,30352,31121,31345,31426,31123,30864
SOM,7490,8812,10012,10882,11575,12061,12361,12612,12712,12783,12799,12813,12772,12804,12854,12886,13025,13222
ZAF,616609,902663,1222070,1547010,1853570,2126200,2357450,2540440,2681070,2787460,2871450,2944000,3016690,3091490,3156280,3210270,3277780,3353250
SSD,26240,35262,42698,49877,55838,61153,65284,68519,70941,73165,74311,74758,75427,75986,76354,76922,77350,78003
LKA,132,159,194,242,308,398,491,597,702,787,856,912,939,951,954,951,940,931
SUR,1398,1491,1540,1576,1605,1620,1636,1640,1645,1659,1678,1704,1734,1776,1824,1873,1924,1978
SWZ,34932,45070,54289,62078,68312,73105,76642,79470,81812,84051,86285,88844,92061,95998,100001,103979,108273,111890
TJK,102,128,160,203,253,322,468,806,993,1171,1375,1598,1863,2177,2561,2980,3460,4063
TZA,665410,702839,728413,742295,749724,749273,743909,734647,723872,711552,699063,689366,687125,695626,701978,707606,720840,730837
THA,154486,171791,185386,195521,202391,206095,206815,205493,203014,200001,198962,199890,200542,200537,199992,199002,197697,195500
TGO,31845,38805,45967,53016,59471,65013,69455,72547,74416,75247,75084,74442,73046,71107,69102,67508,66101,64909
TTO,2768,3200,3645,4081,4489,4873,5221,5522,5806,6084,6339,6570,6768,6923,7046,7186,7301,7341
TUN,221,234,248,261,273,287,304,328,357,389,425,462,500,536,575,616,660,714
UGA,600434,569636,539412,512494,489492,474029,463748,460553,465849,477307,500410,533902,569520,607639,651285,695677,739389,780826
UKR,9123,14239,23757,38074,52817,65490,76062,84786,92585,98365,102494,103734,103904,103187,101812,99806,97802,95389
URY,800,941,1091,1257,1419,1575,1715,1842,1966,2095,2227,2340,2428,2492,2551,2594,2641,2731
UZB,1978,2866,3942,5115,6228,7218,8001,8452,8645,8626,8420,8137,7842,7576,7336,7186,7127,7188
VEN,25355,25822,26004,26036,25951,25702,25720,26166,26988,28041,29119,30420,31846,33256,34615,35846,37143,38401
VNM,7417,11909,18121,25898,34326,42839,50531,56982,61831,65067,67046,67965,68688,69271,69809,70999,71333,71410
YEM,514,607,703,813,954,1106,1291,1508,1762,2073,2440,2862,3387,3969,4683,5530,6512,7671
ZMB,334475,354266,370312,382533,391261,396856,400767,402221,402629,404646,407207,412330,420249,434438,449257,464452,478949,491223
ZWE,870228,940479,984552,1003050,997741,973509,934455,886241,834370,782775,735293,695125,666350,649166,645603,655288,674853,700302

countries.csv

iso,name,short_name
AFG,Afghanistan,
ALB,Albania,
DZA,Algeria,
AND,Andorra,
AGO,Angola,
ATG,Antigua & Barbuda,
ARG,Argentina,
ARM,Armenia,
AUS,Australia,
AUT,Austria,
AZE,Azerbaijan,
BHS,Bahamas,
BHR,Bahrain,
BGD,Bangladesh,
BRB,Barbados,
BLR,Belarus,
BEL,Belgium,
BLZ,Belize,
BEN,Benin,
BTN,Bhutan,
BOL,Bolivia,
BIH,Bosnia & Herzegovina,
BWA,Botswana,
BRA,Brazil,
BRN,Brunei Darussalam,
BGR,Bulgaria,
BFA,Burkina Faso,
MMR,Burma,
BDI,Burundi,
KHM,Cambodia,
CMR,Cameroon,
CAN,Canada,
CPV,Cape Verde,
CAF,Central African Republic,CAR
TCD,Chad,
CHL,Chile,
CHN,China,
COL,Colombia,
COM,Comoros,
COG,Congo,
COK,Cook Islands,
CRI,Costa Rica,
HRV,Croatia,
CUB,Cuba,
CYP,Cyprus,
CZE,Czech Republic,
COD,Democratic Republic of the Congo,DR Congo
DNK,Denmark,
DJI,Djibouti,
DMA,Dominica,
DOM,Dominican Republic,
ECU,Ecuador,
EGY,Egypt,
SLV,El Salvador,
GNQ,Equatorial Guinea,
ERI,Eritrea,
EST,Estonia,
ETH,Ethiopia,
FJI,Fiji,
FIN,Finland,
FRA,France,
GAB,Gabon,
GMB,Gambia,
GEO,Georgia,
DEU,Germany,
GHA,Ghana,
WLD,Global,
GRC,Greece,
GRD,Grenada,
GTM,Guatemala,
GIN,Guinea,
GNB,Guinea-Bissau,
GUY,Guyana,
HTI,Haiti,
VAT,Holy See,
HND,Honduras,
HUN,Hungary,
ISL,Iceland,
IND,India,
IDN,Indonesia,
IRN,Iran,
IRQ,Iraq,
IRL,Ireland,
ISR,Israel,
ITA,Italy,
CIV,Ivory Coast,
JAM,Jamaica,
JPN,Japan,
JOR,Jordan,
KAZ,Kazakhstan,
KEN,Kenya,
KIR,Kiribati,
KSV,Kosovo,
KWT,Kuwait,
KGZ,Kyrgyzstan,
LAO,Laos,
LVA,Latvia,
LBN,Lebanon,
LSO,Lesotho,
LBR,Liberia,
LBY,Libya,
LIE,Liechtenstein,
LTU,Lithuania,
LUX,Luxembourg,
MKD,Macedonia,
MDG,Madagascar,
MWI,Malawi,
MYS,Malaysia,
MDV,Maldives,
MLI,Mali,
MLT,Malta,
MHL,Marshall Islands,
MRT,Mauritania,
MUS,Mauritius,
MEX,Mexico,
FSM,Micronesia,
MDA,Moldova,
MCO,Monaco,
MNG,Mongolia,
MNE,Montenegro,
MAR,Morocco,
MOZ,Mozambique,
NAM,Namibia,
NRU,Nauru,
NPL,Nepal,
NLD,Netherlands,
NZL,New Zealand,
NIC,Nicaragua,
NER,Niger,
NGA,Nigeria,
NIU,Niue,
PRK,North Korea,
NOR,Norway,
OMN,Oman,
PAK,Pakistan,
PLW,Palau,
PAN,Panama,
PNG,Papua New Guinea,
PRY,Paraguay,
PER,Peru,
PHL,Philippines,
POL,Poland,
PRT,Portugal,
QAT,Qatar,
ROU,Romania,
RUS,Russia,
RWA,Rwanda,
WSM,Samoa,
SMR,San Marino,
STP,Sao Tome & Principe,
SAU,Saudi Arabia,
SEN,Senegal,
SRB,Serbia,
SYC,Seychelles,
SLE,Sierra Leone,
SGP,Singapore,
SVK,Slovakia,
SVN,Slovenia,
SLB,Solomon Islands,
SOM,Somalia,
ZAF,South Africa,
KOR,South Korea,
SSD,South Sudan,
ESP,Spain,
LKA,Sri Lanka,
KNA,St. Kitts & Nevis,
LCA,St. Lucia,
VCT,St. Vincent & the Grenadines,
SDN,Sudan,
SUR,Suriname,
SWZ,Swaziland,
SWE,Sweden,
CHE,Switzerland,
SYR,Syria,
TJK,Tajikistan,
TZA,Tanzania,
THA,Thailand,
TLS,Timor-Leste,
TGO,Togo,
TON,Tonga,
TTO,Trinidad & Tobago,
TUN,Tunisia,
TUR,Turkey,
TKM,Turkmenistan,
TUV,Tuvalu,
UGA,Uganda,
UKR,Ukraine,
ARE,United Arab Emirates,
GBR,United Kingdom,
USA,United States of America,USA
URY,Uruguay,
UZB,Uzbekistan,
VUT,Vanuatu,
VEN,Venezuela,
VNM,Vietnam,
YEM,Yemen,
ZMB,Zambia,
ZWE,Zimbabwe,