seyna/data.csv

## data.csv

          
            country
            continent
            population
            GDPcap
            GERD
            growth

            
              Australia
              Oceania
              22319.07
              40718.78167
              2.21367
              2.48590317

            
              Austria
              Europe
              8427.318
              42118.46375
              2.74826
              3.10741128

            
              Belgium
              Europe
              10590.44
              38809.66436
              1.96158
              1.89308521

            
              Canada
              America
              33909.7
              39069.91407
              1.80213
              3.21494841

            
              Chile
              America
              17248.45
              15106.73205
              0.39451
              5.19813626

            
              Czech Republic
              Europe
              10286.3
              25956.76492
              1.52652
              1.65489834

            
              Denmark
              Europe
              5495.246
              40169.83173
              3.01937
              1.04974368

            
              Estonia
              Europe
              1335.347
              22403.02459
              1.44122
              7.63563272

            
              Finland
              Europe
              5366.482
              37577.71225
              3.84137
              2.85477157

            
              France
              Europe
              62747.78
              34147.98907
              2.20646
              1.47996142

            
              Germany
              Europe
              82852.47
              39389.25874
              2.78056
              2.99558644

            
              Greece
              Europe
              11312.16
              26878.00015
              0.5921
              -6.90796403

            
              Hungary
              Europe
              9993.116
              21731.55484
              1.14821
              1.69192342

            
              Iceland
              Europe
              308.038
              35641.55402
              2.64107
              -3.99988322

            
              Ireland
              Europe
              4394.382
              40457.94273
              1.78988
              -0.42935239

            
              Israel
              Asia
              7623.6
              28595.68799
              4.2504
              4.84602001

            
              Italy
              Europe
              59059.66
              32580.06572
              1.26841
              0.43108032

            
              Japan
              Asia
              126912.8
              33751.23348
              3.33499
              3.96559062

            
              Korea
              Asia
              48988.83
              29101.34563
              3.3609
              6.16184325

            
              Luxembourg
              Europe
              483.701
              86226.3276
              1.67862
              2.67806902

            
              Mexico
              America
              109219.9
              15200.22119
              0.41322
              5.56185685

            
              Netherlands
              Europe
              16480.79
              43455.30129
              1.81965
              1.18517739

            
              New Zealand
              Oceania
              4291.9
              29870.67748
              1.13693
              2.33052515

            
              Norway
              Europe
              4789.628
              57230.89
              1.75922
              1.59773989

            
              Poland
              Europe
              37725.21
              19882.99226
              0.67502
              4.34962928

            
              Portugal
              Europe
              10684.97
              25425.59561
              1.65519
              -1.60958484

            
              Russian Federation
              Europe
              142822.5
              19833
              1.24252
              4.03428262

            
              Slovak Republic
              Europe
              5404.493
              24429.61828
              0.48056
              3.34920254

            
              Slovenia
              Europe
              2029.418
              27559.75186
              1.85642
              -0.17459255

            
              South Africa
              Africa
              50384.55
              10497.583
              0.92523
              2.784

            
              Spain
              Europe
              44835.48
              32779.3288
              1.38357
              -0.06947685

            
              Sweden
              Europe
              9276.365
              41526.2995
              3.61562
              3.93555895

            
              Switzerland
              Europe
              7889.345
              46621.77334
              2.99525
              2.71404473

            
              Turkey
              Europe
              73497
              15666.18783
              0.84902
              9.00558548

            
              United Kingdom
              Europe
              62761.35
              35715.4691
              1.82434
              2.09209263

            
              United States
              America
              313232
              46587.61843
              2.78518
              3.02171711

## scatter_plot.html
<!DOCTYPE html>
<meta charset="utf-8">
<head><style>
body{margin:0px;}
.h,.v{stroke:black;stroke-dasharray:4 4;stroke-width:1;stroke-opacity:.5;}
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style></head>
<body>
<script src="http://mbostock.github.com/d3/d3.v2.min.js"></script>

<script>
var width = 500,
    height = 500,
    margin = 50;

var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);
var x=d3.scale.linear().domain([0,5]).range([margin,width-margin]);
var y=d3.scale.linear().domain([-10,10]).range([height-margin,margin]);
var r=d3.scale.linear().domain([0,500]).range([0,20]);
var o=d3.scale.linear().domain([10000,100000]).range([.5,1]);
var c=d3.scale.category10().domain(["Africa","America","Asia","Europe","Oceania"]);

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

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + (height - margin) + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + margin + ",0)")
  .call(yAxis);

svg.selectAll(".h").data(d3.range(-8,10,2)).enter()
  .append("line").classed("h",1)
  .attr("x1",margin).attr("x2",width-margin)
  .attr("y1",y).attr("y2",y)

svg.selectAll(".v").data(d3.range(1,5)).enter()
  .append("line").classed("v",1)
  .attr("y1",margin).attr("y2",height-margin)
  .attr("x1",x).attr("x2",x)


d3.csv("data.csv",function(csv) {
  // we first sort the data
  csv.sort(function(a,b) {return b.population-a.population;});

  // then we create the marks, which we put in an initial position

  svg.selectAll("circle").data(csv).enter()
    .append("circle")
    .attr("cx",function(d) {return x(0);})
    .attr("cy",function(d) {return y(0);})
    .attr("r",function(d) {return r(0);})

    .style("fill",function(d) {return c(d.continent);})
    .style("opacity",function(d) {return o(+d.GDPcap);})

      .append("title")
      .text(function(d) {return d.country;})

  // now we initiate - moving the marks to their position

  svg.selectAll("circle").transition().duration(1000)
    .attr("cx",function(d) {return x(+d.GERD);})
    .attr("cy",function(d) {return y(+d.growth);})
    .attr("r",function(d) {return r(Math.sqrt(+d.population));})
})

</script>


</body>
</html>
country	continent	population	GDPcap	GERD	growth
Australia	Oceania	22319.07	40718.78167	2.21367	2.48590317
Austria	Europe	8427.318	42118.46375	2.74826	3.10741128
Belgium	Europe	10590.44	38809.66436	1.96158	1.89308521
Canada	America	33909.7	39069.91407	1.80213	3.21494841
Chile	America	17248.45	15106.73205	0.39451	5.19813626
Czech Republic	Europe	10286.3	25956.76492	1.52652	1.65489834
Denmark	Europe	5495.246	40169.83173	3.01937	1.04974368
Estonia	Europe	1335.347	22403.02459	1.44122	7.63563272
Finland	Europe	5366.482	37577.71225	3.84137	2.85477157
France	Europe	62747.78	34147.98907	2.20646	1.47996142
Germany	Europe	82852.47	39389.25874	2.78056	2.99558644
Greece	Europe	11312.16	26878.00015	0.5921	-6.90796403
Hungary	Europe	9993.116	21731.55484	1.14821	1.69192342
Iceland	Europe	308.038	35641.55402	2.64107	-3.99988322
Ireland	Europe	4394.382	40457.94273	1.78988	-0.42935239
Israel	Asia	7623.6	28595.68799	4.2504	4.84602001
Italy	Europe	59059.66	32580.06572	1.26841	0.43108032
Japan	Asia	126912.8	33751.23348	3.33499	3.96559062
Korea	Asia	48988.83	29101.34563	3.3609	6.16184325
Luxembourg	Europe	483.701	86226.3276	1.67862	2.67806902
Mexico	America	109219.9	15200.22119	0.41322	5.56185685
Netherlands	Europe	16480.79	43455.30129	1.81965	1.18517739
New Zealand	Oceania	4291.9	29870.67748	1.13693	2.33052515
Norway	Europe	4789.628	57230.89	1.75922	1.59773989
Poland	Europe	37725.21	19882.99226	0.67502	4.34962928
Portugal	Europe	10684.97	25425.59561	1.65519	-1.60958484
Russian Federation	Europe	142822.5	19833	1.24252	4.03428262
Slovak Republic	Europe	5404.493	24429.61828	0.48056	3.34920254
Slovenia	Europe	2029.418	27559.75186	1.85642	-0.17459255
South Africa	Africa	50384.55	10497.583	0.92523	2.784
Spain	Europe	44835.48	32779.3288	1.38357	-0.06947685
Sweden	Europe	9276.365	41526.2995	3.61562	3.93555895
Switzerland	Europe	7889.345	46621.77334	2.99525	2.71404473
Turkey	Europe	73497	15666.18783	0.84902	9.00558548
United Kingdom	Europe	62761.35	35715.4691	1.82434	2.09209263
United States	America	313232	46587.61843	2.78518	3.02171711
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head><style>
	body{margin:0px;}
	.h,.v{stroke:black;stroke-dasharray:4 4;stroke-width:1;stroke-opacity:.5;}
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	</style></head>
	<body>
	<script src="http://mbostock.github.com/d3/d3.v2.min.js"></script>

	<script>
	var width = 500,
	height = 500,
	margin = 50;

	var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);
	var x=d3.scale.linear().domain([0,5]).range([margin,width-margin]);
	var y=d3.scale.linear().domain([-10,10]).range([height-margin,margin]);
	var r=d3.scale.linear().domain([0,500]).range([0,20]);
	var o=d3.scale.linear().domain([10000,100000]).range([.5,1]);
	var c=d3.scale.category10().domain(["Africa","America","Asia","Europe","Oceania"]);

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

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + (height - margin) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + margin + ",0)")
	.call(yAxis);

	svg.selectAll(".h").data(d3.range(-8,10,2)).enter()
	.append("line").classed("h",1)
	.attr("x1",margin).attr("x2",width-margin)
	.attr("y1",y).attr("y2",y)

	svg.selectAll(".v").data(d3.range(1,5)).enter()
	.append("line").classed("v",1)
	.attr("y1",margin).attr("y2",height-margin)
	.attr("x1",x).attr("x2",x)



	d3.csv("data.csv",function(csv) {
	// we first sort the data
	csv.sort(function(a,b) {return b.population-a.population;});

	// then we create the marks, which we put in an initial position

	svg.selectAll("circle").data(csv).enter()
	.append("circle")
	.attr("cx",function(d) {return x(0);})
	.attr("cy",function(d) {return y(0);})
	.attr("r",function(d) {return r(0);})

	.style("fill",function(d) {return c(d.continent);})
	.style("opacity",function(d) {return o(+d.GDPcap);})

	.append("title")
	.text(function(d) {return d.country;})

	// now we initiate - moving the marks to their position

	svg.selectAll("circle").transition().duration(1000)
	.attr("cx",function(d) {return x(+d.GERD);})
	.attr("cy",function(d) {return y(+d.growth);})
	.attr("r",function(d) {return r(Math.sqrt(+d.population));})
	})

	</script>


	</body>
	</html>