Skip to content

Instantly share code, notes, and snippets.

@daniel0128
Created March 7, 2016 07:40
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 daniel0128/ee491d588237e7725ff8 to your computer and use it in GitHub Desktop.
Save daniel0128/ee491d588237e7725ff8 to your computer and use it in GitHub Desktop.
Bubble chart for word gdp.
<!DOCTYPE html>
<!--This code is modified from: http://bl.ocks.org/mbostock/4063269-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bubble Chart</title>
<style>
text {
font: 10px sans-serif;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
</head>
<body>
<script>
var diameter = 960,
format = d3.format(",d"),
color = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);
var tooltip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Country:</strong> <span style='color:red'>" + d.country + "</span></br>" +
"<strong>Population:</strong> <span style='color:red'>" + d.value + "</span>";
});
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
svg.call(tooltip);
d3.csv("UN.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.country = d.country;
d.gdp = +d.gdp;
});
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(data))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("mouseover", tooltip.show)
.on('mouseout', tooltip.hide);
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.country); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.country; });
});
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(data) {
var classes = [];
data.forEach(function(d){
classes.push({value: d.gdp, country: d.country})
});
return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
</script>
</body>
</html>
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