daniel0128 · March 7, 2016 07:40
diff --git a/index.html b/index.html
 <!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>
diff --git a/UN.csv b/UN.csv
	<!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