quizzicol · December 8, 2015 11:41
diff --git a/README.md b/README.md
diff --git a/countries_population_GDP.csv b/countries_population_GDP.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>SVG intro</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 
  <style>
    circle {
      fill-opacity:0.5;
      stroke-opacity:0.5;
    }
   
  </style>
 	
 </head>

 <body>
  
  
  <script>
   
    var outerWidth = 300;
    var outerHeight = 250;
    var margin = { left: 30, right:30, top:30, bottom:30};
    
    var innerWidth = outerWidth - margin.left - margin.right;
    var innerHeight = outerHeight - margin.top - margin.bottom;
    var circleRadius = 5;
    var xColumn = "population";
    var yColumn = "gdp";
    var rColumn = "population";
    var rMin = 0; rMax = 20;
    var r = 2;
    
    var svg = d3. select("body").append("svg")
    	.attr("width", outerWidth)
    	.attr("height", outerHeight);
    
    var g = svg.append('g')
    	.attr('transform',"translate(" + margin.left + ", " + margin.top + ")");
    
    var xScale = d3.scale.log().range([0,innerWidth]);
    var yScale = d3.scale.log().range([innerHeight,0]);
    var rScale = d3.scale.sqrt().range([rMin,rMax]);  // make the area of the circle proportional to the size of the circle.

    
    function render(data) {
      xScale.domain(d3.extent(data, function(d) { return d[xColumn]; }));
      yScale.domain(d3.extent(data, function(d) { return d[yColumn]; }));
      rScale.domain([0, d3.max(data, function(d) { return d[rColumn]; })]);  // go from 0 to the max value
      
      var circles = g.selectAll("circle").data(data);
      circles.enter().append("circle").attr("r", circleRadius);
      
      circles
      	.attr("cx", 		function (d) { return 	  xScale(d[xColumn]); })
      	.attr("cy", 		function (d) { return 	  yScale(d[yColumn]); })
      	.attr("r",  		function (d) { return 	  rScale(d[rColumn]); })
      
      circles.exit().remove();
    }
    
    
  	function type(d) {
 			// country_code,population,gdp
      d.population = +d.population;
      d.gdp = +d.gdp;
      return d;
    }
  
    d3.csv("countries_population_GDP.csv", type, function (data) {
     
       render(data)
       
      // the population of the biggest circle
      var people = rScale.domain()[1]
      console.log(people)
      // the number of pixels in the biggest circle
      var pixels = Math.PI * rMax * rMax;
      
      console.log((people/pixels) + " people per pixel")
      
     
    });
    
    
  </script>
 </body>
 ,
country_code	population	gdp
BDI	9232753	2026864414.46871
COM	683081	543376206.062274
ERI	5741159	2117039510.70194
ETH	87095281	26311310604.9888
KEN	40909194	32198151217.2214
MDG	21079532	8837041787.49382
MWI	15013694	5398616984.59149
MUS	1230659	9718331362.63822
MOZ	23967265	9274448731.91612
RWA	10836732	5624506157.41067
SYC	91208	969973774.818177
SSD	9940929	15178973598.0733
UGA	33987213	16030996179.1077
TZA	44973330	22915004297.2183
ZMB	13216985	16190196832.0872
ZWE	13076978	7433314459.73933
AGO	19549124	82470894868.3337
CMR	20624343	22493301699.3672
CAF	4349921	1986014759.19785
TCD	11720781	10657705072.3284
COG	4111715	12007880067.3847
COD	62191161	13138775753.2026
GNQ	696167	12261420852.3549
GAB	1556222	14507032805.9824
STP	178228	201037916.583708
DZA	37062820	161207304960.455
EGY	78075705	218887812549.851
MAR	31642360	90770671431.6696
SDN	35652002	64849930757.6995
TUN	10631830	44377742070.7
BWA	1969341	13746712705.5936
LSO	2008921	2203835214.2935
NAM	2178967	11065912279.3816
ZAF	51452352	363240728680.384
SWZ	1193148	3691050502.68749
BEN	9509798	6558416322.12
BFA	15540284	9209288383.08711
CPV	487601	1664310632.03162
CIV	18976588	22920779597.555
GMB	1680640	951805801.354012
GHA	24262901	32174210792.9631
GIN	10876033	4735956475.83803
GNB	1586624	835390892.988319
LBR	3957990	1292696475.95873
MLI	13985961	9422267259.9894
MRT	3609420	3671380305.41277
NER	15893746	5718589550.16349
NGA	159707780	229507890739.083
SEN	12950564	12932427724.3508
SLE	5751976	2575466372.26831
TGO	6306014	3172945282.32304
CHN	1359821465	5930529470799.17
HKG	7049514	228695747309.89
MAC	534626	28359706123.0951
JPN	127352833	5495379357484.62
MNG	2712738	6200357070.1148
KOR	48453931	1014890141871.14
KAZ	15921127	148052371903.631
KGZ	5334223	4794361821.20611
TJK	7627326	5642221528.67114
TKM	5041995	22148070175.4386
UZB	27769270	39332771014.013
AFG	28397812	15936784436.1811
BGD	151125475	100357022443.833
BTN	716939	1585319109.1083
IND	1205624648	1708450861364.17
IRN	74462314	422567967404.512
MDV	325694	2134104883.7014
NPL	26846016	16010389261.745
PAK	173149306	177406854514.885
LKA	20758779	49567521669.9098
BRN	400569	12369708858.9029
KHM	14364931	11242266333.9246
IDN	240676485	709190822690.739
LAO	6395713	7181441151.89789
MYS	28275835	247533525517.698
PHL	93444322	199589447424.074
SGP	5078969	217200123752.449
THA	66402316.00000001	318907930075.712
TLS	1079450	934300000
VNM	89047397	115931749904.86
ARM	2963496	9260297329.12273
AZE	9094718	52905998878.7143
BHR	1251513	25713547868.8354
CYP	1103685	23132450331.1258
GEO	4388674	11638236642.8476
IRQ	30962380	142814704615.385
ISR	7420368	231674400561.648
JOR	6454554	26425379366.6132
KWT	2991580	119934674734.616
LBN	4341092	37124378109.4527
OMN	2802768	58813004375.2601
QAT	1749713	127332413912.719
SAU	27258387	526811466666.667
TUR	72137546	731144392556.339
ARE	8441537	287421818965.758
YEM	22763008	31883409718.7382
BLR	9491070	55220932613.958
BGR	7389175	47727325908.633
CZE	10553701	198475392670.157
HUN	10014633	127503279792.248
POL	38198754	469736810690.719
MDA	3573024	5811622393.98689
ROU	21861476	164792252745.524
RUS	143617913	1524916698233.31
SVK	5433437	87077443708.6093
UKR	46050220	136418622767.355
DNK	5550959	313176334519.573
EST	1298533	18909381436.8421
FIN	5367693	235163157894.737
ISL	318042	12564891657.7225
IRL	4467561	208022028244.737
LVA	2090518.9999999998	24009680459.9868
LTU	3068457	36306384146.1075
NOR	4891251	421236092715.232
SWE	9382297	462903051317.614
GBR	62066350	2285561538461.54
ALB	3150143	11858166294.8409
BIH	3845929	16775469777.6516
HRV	4338027	58873839434.9834
GRC	11109999	292304602315.789
ITA	60508978	2041954747600
MLT	424738	8163841059.60265
MNE	620078	4114780573.5
PRT	10589792	227446710526.316
SRB	9647109	36990001283.5323
SVN	2054232	46908328071.2701
ESP	46182038	1375815789473.68
MKD	2102216	9338665630.76177
AUT	8401924	375217439473.684
BEL	10941288	468078947368.421
FRA	63230866	2548315789473.68
DEU	83017404	3282894736842.11
LUX	507885	51713947368.4211
MCO	36845	5350993377.48344
NLD	16615242.999999998	772090789473.684
CHE	7830534	550638974461.538
ATG	87233	1161528615.92593
ABW	101597	2467703910.61453
BHS	360498	7888087000
BRB	280396	4433700000
CUB	11281768	64328220000
DMA	71167	471851098.518519
DOM	10016797	51748279416.0089
GRD	104677	783602099.124051
HTI	9896400	6634579143.36112
JAM	2741485	13202998397.8027
PRI	3709671	97147300000
KNA	52352	675553707.777778
LCA	177397	1208853571.11111
VCT	109316	674762008.518518
TTO	1328095	20667611846.2508
BLZ	308595	1397900000
CRI	4669685	36298327620.413
SLV	6218195	21418300000
GTM	14341576	41338161799.1082
HND	7621204	15729644901.1459
MEX	117886404	1047368841686.06
NIC	5822209	8586295846.08302
PAN	3678128	26589600000
ARG	40374224	368736062143.669
BOL	10156601	19649724655.5819
BRA	195210154	2143035333258.24
CHL	17150760	217556229881.153
COL	46444798	287000940839.272
ECU	15001072	67513698000
GUY	786126	2259288026.41972
PRY	6459721	20028375553.9077
PER	29262830	157609814184.397
SUR	524960	4368007284.81569
URY	3371982	38846222984.5698
VEN	29043283	393807511437.279
BMU	64950.99999999999	5744414000
CAN	34126240	1577040082217.76
USA	312247116	14958300000000
AUS	22404488	1141793593834.25
NZL	4368136	143246762589.928
FJI	860559	3225095136.31862
PNG	6858945	9480047958.80839
SLB	526447	678625481.686751
VUT	236299	700804045.16412
KIR	97743	150431113.557145
MHL	52428	163200000
FSM	103619	294117230.497109
PLW	20470	196543326.079735
WSM	186029	572160378.287853
TON	104098	369212477.46289
TUV	9827	31824701.2783331
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>SVG intro</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

	<style>
	circle {
	fill-opacity:0.5;
	stroke-opacity:0.5;
	}

	</style>

	</head>

	<body>


	<script>

	var outerWidth = 300;
	var outerHeight = 250;
	var margin = { left: 30, right:30, top:30, bottom:30};

	var innerWidth = outerWidth - margin.left - margin.right;
	var innerHeight = outerHeight - margin.top - margin.bottom;
	var circleRadius = 5;
	var xColumn = "population";
	var yColumn = "gdp";
	var rColumn = "population";
	var rMin = 0; rMax = 20;
	var r = 2;

	var svg = d3. select("body").append("svg")
	.attr("width", outerWidth)
	.attr("height", outerHeight);

	var g = svg.append('g')
	.attr('transform',"translate(" + margin.left + ", " + margin.top + ")");

	var xScale = d3.scale.log().range([0,innerWidth]);
	var yScale = d3.scale.log().range([innerHeight,0]);
	var rScale = d3.scale.sqrt().range([rMin,rMax]); // make the area of the circle proportional to the size of the circle.


	function render(data) {
	xScale.domain(d3.extent(data, function(d) { return d[xColumn]; }));
	yScale.domain(d3.extent(data, function(d) { return d[yColumn]; }));
	rScale.domain([0, d3.max(data, function(d) { return d[rColumn]; })]); // go from 0 to the max value

	var circles = g.selectAll("circle").data(data);
	circles.enter().append("circle").attr("r", circleRadius);

	circles
	.attr("cx", function (d) { return xScale(d[xColumn]); })
	.attr("cy", function (d) { return yScale(d[yColumn]); })
	.attr("r", function (d) { return rScale(d[rColumn]); })

	circles.exit().remove();
	}


	function type(d) {
	// country_code,population,gdp
	d.population = +d.population;
	d.gdp = +d.gdp;
	return d;
	}

	d3.csv("countries_population_GDP.csv", type, function (data) {

	render(data)

	// the population of the biggest circle
	var people = rScale.domain()[1]
	console.log(people)
	// the number of pixels in the biggest circle
	var pixels = Math.PI * rMax * rMax;

	console.log((people/pixels) + " people per pixel")


	});


	</script>
	</body>
	,