Created
March 7, 2016 08:29
-
-
Save daniel0128/a16260ed9e4b4320da35 to your computer and use it in GitHub Desktop.
Double side bar chart of world gdp and mortality.
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>Two Side Bar Chart</title> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style type="text/css"> | |
.chart { | |
background: white; | |
margin: 10px; | |
padding-top: 10px; | |
} | |
.chart .right { | |
stroke: black; | |
fill: indianred; | |
} | |
.chart .left { | |
stroke: black; | |
fill: steelblue; | |
} | |
.chart rect:hover { | |
fill: #64707d; | |
} | |
.chart text { | |
fill: black; | |
} | |
.chart text.name { | |
fill: black; | |
} | |
</style> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
var labelArea = 160; | |
var chart, | |
width = 400, | |
bar_height = 20, | |
height = bar_height * 200; | |
var rightOffset = width + labelArea; | |
var leftBar = "gdp"; | |
var rightBar = "infant.mortality"; | |
var xLeft = d3.scale.linear() | |
.range([0,width]); | |
var xRight = d3.scale.linear() | |
.range([0,width]); | |
var y = d3.scale.ordinal() | |
.rangeBands([20,height]); | |
function render(error,data){ | |
if (error) throw error; | |
chart = d3.select("body") | |
.append("svg") | |
.attr('class', 'chart') | |
.attr('width', labelArea + width + width) | |
.attr('height', height); | |
xLeft.domain(d3.extent(data, function (d) { | |
return d[leftBar]; | |
})); | |
xRight.domain(d3.extent(data, function (d) { | |
return d[rightBar]; | |
})); | |
y.domain(data.map(function (d) { | |
return d.country; | |
})); | |
var yPosByIndex = function (d) { | |
return y(d.country); | |
}; | |
chart.selectAll("rect.left") | |
.data(data) | |
.enter().append("rect") | |
.attr("x", function (d) { | |
return width - xLeft(d[leftBar]); | |
}) | |
.attr("y", yPosByIndex) | |
.attr("class", "left") | |
.attr("width", function (d) { | |
return xLeft(d[leftBar]); | |
}) | |
.attr("height", y.rangeBand()); | |
chart.selectAll("text.leftscore") | |
.data(data) | |
.enter().append("text") | |
.attr("x", function (d) { | |
return width - xLeft(d[leftBar])-40; | |
}) | |
.attr("y", function (d) { | |
return y(d.country) + y.rangeBand() / 2; | |
}) | |
.attr("dx", "20") | |
.attr("dy", ".36em") | |
.attr("text-anchor", "end") | |
.attr('class', 'leftscore') | |
.text(function(d){return d[leftBar];}); | |
chart.selectAll("text.name") | |
.data(data) | |
.enter().append("text") | |
.attr("x", (labelArea / 2) + width) | |
.attr("y", function (d) { | |
return y(d.country) + y.rangeBand() / 2; | |
}) | |
.attr("dy", ".20em") | |
.attr("text-anchor", "middle") | |
.attr('class', 'name') | |
.text(function(d){return d.country;}); | |
chart.selectAll("rect.right") | |
.data(data) | |
.enter().append("rect") | |
.attr("x", rightOffset) | |
.attr("y", yPosByIndex) | |
.attr("class", "right") | |
.attr("width", function (d) { | |
return xRight(d[rightBar]); | |
}) | |
.attr("height", y.rangeBand()); | |
chart.selectAll("text.score") | |
.data(data) | |
.enter().append("text") | |
.attr("x", function (d) { | |
return xRight(d[rightBar]) + rightOffset+40; | |
}) | |
.attr("y", function (d) { | |
return y(d.country) + y.rangeBand() / 2; | |
}) | |
.attr("dx", -5) | |
.attr("dy", ".36em") | |
.attr("text-anchor", "end") | |
.attr('class', 'score') | |
.text(function(d){return d[rightBar];}); | |
chart.append("text").attr("x",width/3).attr("y", 10).attr("class","title").text("Infant Mortality"); | |
chart.append("text").attr("x",width/3+rightOffset).attr("y", 10).attr("class","title").text("GDP"); | |
chart.append("text").attr("x",width+labelArea/3).attr("y", 10).attr("class","title").text("Country"); | |
} | |
function type(d) { | |
d["gdp"] = +d["gdp"]; | |
d["infant.mortality"] = +d["infant.mortality"]; | |
return d; | |
} | |
d3.csv("UN.csv", type, render); | |
</script> | |
</body> | |
</html> |
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
country | infant.mortality | gdp | |
---|---|---|---|
Afghanistan | 154 | 2848 | |
Albania | 32 | 863 | |
Algeria | 44 | 1531 | |
American Samoa | 11 | NA | |
Andorra | NA | NA | |
Angola | 124 | 355 | |
Antigua | 24 | 6966 | |
Argentina | 22 | 8055 | |
Armenia | 25 | 354 | |
Australia | 6 | 20046 | |
Austria | 6 | 29006 | |
Azerbaijan | 33 | 321 | |
Bahamas | 14 | 12545 | |
Bahrain | 18 | 9073 | |
Bangladesh | 78 | 280 | |
Barbados | 9 | 7173 | |
Belarus | 15 | 994 | |
Belgium | 7 | 26582 | |
Belize | 30 | 2569 | |
Benin | 84 | 391 | |
Bhutan | 104 | 166 | |
Bolivia | 66 | 909 | |
Bosnia | 13 | 271 | |
Botswana | 56 | 3640 | |
Brazil | 42 | 4510 | |
Brunei | 9 | 16683 | |
Bulgaria | 16 | 1518 | |
Burkina Faso | 97 | 165 | |
Burundi | 114 | 205 | |
Cambodia | 102 | 130 | |
Cameroon | 58 | 627 | |
Canada | 6 | 18943 | |
Cape Verde | 41 | 994 | |
Central African Rep | 96 | 379 | |
Chad | 115 | 187 | |
Chile | 13 | 4736 | |
China | 38 | 582 | |
Colombia | 24 | 2215 | |
Comoros | 82 | 367 | |
Congo | 90 | 1008 | |
Cook Islands | 26 | 5432 | |
Costa Rica | 12 | 2696 | |
Croatia | 10 | 4014 | |
Cuba | 9 | 1983 | |
Cyprus | 7 | 11459 | |
Czech Republic | 9 | 4450 | |
Dem Rep of the Congo | 89 | 117 | |
Denmark | 7 | 33191 | |
Djibouti | 106 | 893 | |
Dominica | NA | 2831 | |
Dominican Republic | 34 | 1508 | |
East Timor | 135 | NA | |
Ecuador | 46 | 1565 | |
Egypt | 54 | 973 | |
El Salvador | 39 | 1660 | |
Equatorial Guinea | 107 | 388 | |
Eritrea | 98 | 96 | |
Estonia | 12 | 2433 | |
Ethiopia | 107 | 96 | |
Fiji | 20 | 2593 | |
Finland | 5 | 24453 | |
France | 7 | 26444 | |
French Guyana | 22 | 23530 | |
French Polynesia | 10 | 19766 | |
Gabon | 85 | 5007 | |
Gambia | 122 | 321 | |
Gaza Strip | 37 | NA | |
Georgia | 23 | 343 | |
Germany | 6 | 29632 | |
Ghana | 73 | 397 | |
Greece | 8 | 8684 | |
Grenada | 14 | 2485 | |
Guadeloupe | 8 | 9145 | |
Guam | 10 | NA | |
Guatemala | 40 | 1392 | |
Guinea | 124 | 442 | |
Guinea Bissau | 132 | 131 | |
Guyana | 58 | 726 | |
Haiti | 82 | 386 | |
Honduras | 35 | 697 | |
Hong Kong | 5 | 22898 | |
Hungary | 14 | 4325 | |
Iceland | 5 | 26217 | |
India | 72 | 365 | |
Indonesia | 48 | 1019 | |
Iran | 39 | 1544 | |
Iraq | 95 | 11308 | |
Ireland | 6 | 17419 | |
Israel | 7 | 16738 | |
Italy | 7 | 19121 | |
Ivory Coast | 86 | 736 | |
Jamaica | 12 | 1779 | |
Japan | 4 | 41718 | |
Jordan | 30 | 1228 | |
Kazakhstan | 34 | 995 | |
Kenya | 65 | 330 | |
Kiribati | 65 | 654 | |
North Korea | 22 | 271 | |
South Korea | 9 | 9736 | |
Kuwait | 14 | 15757 | |
Kyrgyzstan | 39 | 331 | |
Laos | 86 | 359 | |
Latvia | 16 | 1764 | |
Lebanon | 29 | 3114 | |
Lesotho | 72 | 486 | |
Liberia | 153 | 1124 | |
Libya | 56 | 5498 | |
Liechtenstein | NA | 42416 | |
Lithuania | 13 | 1595 | |
Luxembourg | 6 | 35109 | |
Macau | 8 | NA | |
Macedonia | 23 | 1660 | |
Madagascar | 77 | 215 | |
Malawi | 142 | 142 | |
Malaysia | 11 | 4313 | |
Maldives | 49 | 1079 | |
Mali | 149 | 223 | |
Malta | 8 | 8793 | |
Marshall Islands | 26 | 1649 | |
Martinique | 7 | 12717 | |
Mauritania | 92 | 401 | |
Mauritius | 15 | 3508 | |
Mexico | 31 | 2700 | |
Micronesia | 20 | 2104 | |
Moldova | 26 | 383 | |
Monaco | NA | 26470 | |
Mongolia | 52 | 388 | |
Morocco | 51 | 1265 | |
Mozambique | 110 | 77 | |
Myanmar | 78 | 2399 | |
Namibia | 60 | 2059 | |
Nepal | 82 | 203 | |
Netherlands | 6 | 25635 | |
Netherlands Antilles | 10 | 9039 | |
New Caledonia | 18 | 19450 | |
New Zealand | 7 | 16866 | |
Nicaragua | 44 | 464 | |
Niger | 114 | 207 | |
Nigeria | 77 | 587 | |
Northern Mariana Islands | 2 | NA | |
Norway | 5 | 33734 | |
Oman | 25 | 6232 | |
Pakistan | 74 | 504 | |
Palau | 25 | 6417 | |
Panama | 21 | 2934 | |
Papua New Guinea | 61 | 1083 | |
Paraguay | 39 | 1860 | |
Peru | 45 | 2497 | |
Philippines | 35 | 1093 | |
Poland | 13 | 3058 | |
Portugal | 8 | 10428 | |
Puerto Rico | 9 | 12213 | |
Qatar | 17 | 14013 | |
Reunion | 7 | 11854 | |
Romania | 24 | 1570 | |
Russian Federation | 19 | 2451 | |
Rwanda | 125 | 238 | |
Saint Kitts | 25 | 4819 | |
Saint Lucia | 18 | 3183 | |
Samoa | 58 | 1106 | |
San Marino | NA | 19121 | |
Sao Tome | 51 | 49 | |
Saudi Arabia | 23 | 6583 | |
Senegal | 62 | 572 | |
Seychelles | 12 | 7272 | |
Sierra Leone | 169 | 293 | |
Singapore | 5 | 25581 | |
Slovakia | 12 | 3266 | |
Slovenia | 7 | 9652 | |
Solomon Islands | 23 | 686 | |
Somalia | 112 | 119 | |
South Africa | 48 | 3230 | |
Spain | 7 | 14111 | |
Sri Lanka | 15 | 716 | |
St Vincent | 19 | 2305 | |
Sudan | 71 | 36 | |
Suriname | 24 | 967 | |
Swaziland | 65 | 1389 | |
Sweden | 5 | 26253 | |
Switzerland | 5 | 42416 | |
Syria | 33 | 3573 | |
Tajikistan | 56 | 122 | |
Tanzania | 80 | 139 | |
Thailand | 30 | 2896 | |
Togo | 86 | 322 | |
Tonga | 3 | 1787 | |
Trinidad and Tobago | 14 | 4083 | |
Tunisia | 37 | 2030 | |
Turkey | 44 | 2814 | |
Turkmenistan | 57 | 321 | |
Tuvalu | NA | NA | |
Uganda | 113 | 305 | |
Ukraine | 18 | 694 | |
United Arab Emirates | 15 | 17690 | |
United Kingdom | 6 | 18913 | |
United States | 7 | 26037 | |
Uruguay | 17 | 5602 | |
Uzbekistan | 43 | 435 | |
Vanuatu | 38 | 1289 | |
Venezuela | 21 | 3496 | |
Viet Nam | 37 | 270 | |
Virgin Islands | 12 | NA | |
Western Sahara | 64 | NA | |
Yemen | 80 | 732 | |
Yugoslavia | 19 | 1487 | |
Zambia | 103 | 382 | |
Zimbabwe | 68 | 786 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment