marijer · November 2, 2015 19:37
diff --git a/data_worldbank.csv b/data_worldbank.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Assignment Module 1</title>

 	 <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 	<link rel="stylesheet" type="text/css" href="main.css">
 </head>
 <body>

 	<div class="content-wrapper">
 		<div class="intro">
 			<h1>Refugee population by country</h1>
 			<p>The countries with the largest refugee population based on the 2014 numbers.</p>
 		</div>

 		<div id='button-wrapper'></div>
 		<div id='chart-container'></div>

 		<div class='meta source'>Source:  
 		<a href="http://data.worldbank.org/indicator/SM.POP.REFG/countries/1W?order=wbapi_data_value_2011%20wbapi_data_value%20wbapi_data_value-first&sort=desc&display=default" target="_blank">Worldbank, 2015</a>
 		</div>

 		<div id="tooltip" class="none"></div>
 	</div>

 	<script src="main.js"></script>
 </body>
 </html>
diff --git a/main.css b/main.css
 * { outline: none; }

 html, body {
 	margin: 0;
 	padding: 0;
 }

 body { font-family: Helvetiva, Arial; }

 h1 {
 	margin: 0 0 .5em;
 	padding: 0;
 }

 .btn {
 	padding: .7em 1.2em;
    border: 1px solid #CCC;
    background: #FFF;
    margin-right: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .2s;
 }

 .btn:hover { background: #FFD974 }

 .btn.active {
    background: #ffc11d;
    border-color: #F5B200;
 }

 .none { display: none; }

 .content-wrapper {
 	max-width: 960px;
 	min-width: 360px;
 	margin: 0 auto;
 	border: 1px solid #CCC;
 	padding: 20px;
 }

 .intro {
 	margin-bottom: 20px;
 }

 .source {
 	font-size: .8em;
 }

 #button-wrapper {
 	margin: 10px 0 5px;
 }

 /* TOOLTIP */

 #tooltip {
    position: absolute;
    padding: 8px 20px;
    background: #FFF;
    border-radius: 4px;
    box-shadow: 1px 1px 1px #CCC;
    border: 1px solid #CCC;
    pointer-events: none;
 }

 .tooltip-country-label {
    font-size: 1.1em;
    padding-bottom: .4em;
 }

 .tooltip-years-list {
 	margin: 0;
    padding: 0;
 }

 .tooltip-years-list li {
 	list-style: none;
 	border-bottom: 1px solid #CCC;
 	padding: 4px;
 }

 .tooltip-years-list li.active {
    background: #FFF7D7;
 }

 .tooltip-years-list .year-label {
    display: inline-block;
    padding-right: 25px;
    font-size: .8em;
 	color: #675C5C;
 }

 .tooltip-years-list .year-value {
 	font-size: .9em;
 }

 /* SVG */

 .axis path,
 .axis line {
 	fill: none;
 	stroke: #D0CBC4;
 	shape-rendering: crispEdges;
 	pointer-events: none;
 }

 .axis text {
 	font-family: sans-serif;
 	font-size: 11px;
 }

 rect {
 	fill: #FFD974;
 	transition: fill 0.3s;
 }

 rect:hover {
 	fill: #FFC11D;
 }

 .y.axis path,
 .y.axis line {
 	opacity: 0;
 }
diff --git a/main.js b/main.js
 var w = getClientWidth();
 var h = 450;

 var padding = { top:10, 
 				right: 10, 
 				bottom: 30, 
 				left: 120 };

 var heightScale = d3.scale.ordinal()
 					.rangeRoundBands([ padding.top, h - padding.bottom ], 0.1);

 var widthScale = d3.scale.linear()
 					.range([ 0, w - padding.right - padding.left ]);

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

 var xAxis = d3.svg.axis()
 			.scale(widthScale)
 			.orient("bottom")
 			.tickFormat(d3.format("s"))
 			.ticks(Math.round(w / 60))
 			.tickSize(-h + (padding.bottom + padding.top + 5)); /* weird magic number here */

 //Now SVG goes into #container instead of body
 var svg = d3.select("#chart-container")
 			.append("svg")
 			.attr("width", w)
 			.attr("height", h);

 var years = [2010, 2011, 2012, 2013, 2014],
 	currentYear = years[4],
 	totalShown = 20,
 	transitionDuration = 1200,
 	dataset;

 function initChart() {
 	d3.csv("data_worldbank.csv", function(data) {
 		dataset = data;

 	    var filtered_data = filterData(data);

 		updateWidthScale(filtered_data);

 		heightScale.domain(filtered_data.map(function(d) { return d.Country; } ));

 		var rects = svg.selectAll("rect")
 						.data(filtered_data)
 						.enter()
 						.append("rect");

 		rects.attr("x", padding.left)
 			.attr("y", function(d) {
 				return heightScale(d.Country);
 			})
 			//Initially, set bar width to zero
 			.attr("width", 0)
 			.attr("height", heightScale.rangeBand())
 			.on("mouseover", function(d) {

 				//Get this bar's x/y values, then augment for the tooltip
 				var xPosition = (d3.event.pageX);
 				var yPosition = (d3.event.pageY - 28);

 				var content = getTooltipContent(d);

 				//Update the tooltip position and value
 				d3.select("#tooltip")
 				  .style("left", xPosition + "px")
 				  .style("top", yPosition + "px")
 				  .html(content);

 				//Show the tooltip
 				d3.select("#tooltip").classed("none", false);
 			})
 			.on("mouseout", function() {
 				d3.select("#tooltip").classed("none", true);
 			});


 		updateBarChart(currentYear);

 		svg.append("g")
 			.attr("class", "x axis")
 			.attr("transform", "translate(" + padding.left + "," + (h - padding.bottom) + ")")
 			.call(xAxis);

 		svg.append("g")
 			.attr("class", "y axis")
 			.attr("transform", "translate(" + padding.left + ",0)")
 			.call(yAxis);
 	});
 }

 function filterData(data) {
 	data.sort(function(a, b) {
 		return d3.descending(+a[currentYear], +b[currentYear]);
 	});

 	data = data.filter(function(d, i) {
 	    if( i < totalShown) { return true; }
 	});

 	return data;
 }

 function updateWidthScale(data) {
 	widthScale.domain([ 0, d3.max(data, function(d) {
 		return +d['2014'];
 	}) ]);
 }

 function getClientWidth() {
 	return document.getElementById("chart-container").clientWidth;
 }

 function updateWidth() {
 	w = getClientWidth();
 	widthScale.range([ 0, w - padding.right - padding.left ]);
 	
 	updateWidthScale(dataset)

 	svg.attr("width", w);		
 }

 function updateXAxis() {
 	xAxis.scale(widthScale)
 		.ticks(Math.round(w / 60));

 	svg.selectAll(".x.axis")
 		.call(xAxis);
 }

 function resize() {
 	updateWidth();
 	updateXAxis();
 	updateBarChart(currentYear);		
 }

 function initButtons() {
 	var btn = d3.select('#button-wrapper')
 			.append('div');
 	
 	btn.selectAll('div')
 		.data(years)
 		.enter()
 		.append('button')
 		.attr('type', 'button')
 		.attr('class', function(d){
 			var className='btn';

 			if (d === currentYear) {
 				className += ' active';
 			}
 			return className;
 		})
 		.text(function(d){ return d; })
 		.on('click', function(d) {
 			d3.select(".btn.active").classed("active", false);
 			d3.select(this).classed("active", true);
 			updateBarChart(d);
 		})
 }

 function getTooltipContent(data) {
 	var format = d3.format('s');
 	var content = '';
 	content += '<div class="tooltip-country-label">' + data.Country + '</div>'; 
 	content += '<ul class="tooltip-years-list">';

 	for (var i = years.length -1; i >= 0; i-- ){
 		var className = '';
 		if(years[i] === currentYear){
 			className += 'active';
 		}
 		content += '<li class='+ className +'>';
 		content += '<span class="year-label">' + years[i] + "</span>";
 		content += '<span class="year-value">' + format(data[years[i]]) + "</span>";
 		content += '</li>';
 	}

 	content += '</ul>';

 	return content;
 }

 function updateBarChart(year) {
 	currentYear = year;

 	svg.selectAll("rect")
 		.transition()
 		.duration(transitionDuration)
 		.attr("width", function(d) {
 			return widthScale(d[currentYear]);
 		});
 }

 initChart();

 initButtons();
 d3.select(window).on('resize', resize);
Country	Code	1990	1991	1992	1993	1994	1995	1996	1997	1998	1999	2000	2001	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012	2013	2014	2015
Jordan	JOR	929737	1001357	1073007	1145025	1216957	1288895	1359580	1438104	1488226	1542417	1610638	1663294	1699470	1741366	1777769	1828842	2358591	2403771	2452016	2434489	2450381	2430589	2337348	2712888	2771502
South Asia	SAS	3486713	3379092	2288041	2078511	1572419	1625466	1612369	1576598	1536385	1532217	2323287	2521487	1550780	1432566	1599141	1371649	1357511	2355038	2119005	2263369	2411160	2193338	2127370	2099360	2057202
Turkey	TUR	28000	30462	28477	23267	24927	12841	8166	2446	2528	2815	3103	3472	3301	2490	3033	2399	2633	6956	11103	10350	10032	14465	267063	609938	1587374
Pakistan	PAK	3255975	3099891	1629218	1479266	1055435	1202493	1202703	1202734	1202462	1202015	2001466	2198797	1227433	1124298	1290984	1084694	1044462	2035023	1780935	1740711	1900621	1702700	1638456	1616507	1505525
Iran, Islamic Rep.	IRN	4174401	4404995	4150723	2495038	2236350	2071988	2030359	1982553	1931332	1835688	1868000	1868000	1306599	984896	1045976	974302	968370	963546	980109	1070488	1073366	886468	868242	857354	982027
Ethiopia	ETH	773764	529620	431824	272631	348074	393479	390528	323067	262160	257689	197959	152554	132940	130274	115980	100817	96980	85183	83583	121886	154295	288844	376393	433936	659524
Kenya	KEN	14249	120163	402194	301595	252423	234665	223640	232097	238187	223696	206106	239221	233671	237512	239835	251271	272531	265729	320605	358928	402905	566487	564933	534938	551352
Syrian Arab Republic	SYR	284856	296256	309672	353392	366283	373530	375150	383906	391009	384856	390989	399599	408519	417508	437341	458137	1144572	1955236	1567595	1526575	1501442	1242391	975695	517255	528616
Chad	TCD			70	70	109	100	100	302	8810	23478	17692	12950	33455	146400	259880	275412	286743	294017	330510	338495	347939	366494	373695	434479	452897
Lebanon	LBN	304599	316095	325707	329705	338700	348031	355076	365160	371294	377612	382744	387733	392053	397054	400905	405248	428602	464299	472607	476053	463436	445144	575483	447328	452669
Uganda	UGA	145718	162521	196290	286500	286500	229350	264294	188513	204545	218191	236622	199736	217302	230903	250482	257256	272007	228959	162132	127345	135801	139448	197877	220555	385513
China	CHN	287276	289061	288123	287423	287066	288309	290100	291507	292345	293299	294110	295325	297277	299354	299375	301041	301027	301078	300967	300989	300986	301018	301037	301047	301052
Afghanistan	AFG	50	38	60025	32132	19131	19605	18775	5				6	3	22	30	32	35	42	37	37	6434	3009	16187	16863	280267
Iraq	IRQ	900	87990	115000	109066	119581	116722	112957	104032	104022	128913	127787	128142	134190	46721	46053	50177	44406	42354	39503	35218	34655	35189	98822	246298	271143
United States	USA	464887	513882	579952	623069	631051	623294	607024	563837	533969	521143	508222	515853	485171	452548	420854	379340	843498	281219	279548	275461	264574	264763	262023	263662	267222
Yemen, Rep.	YEM	2938	29977	59680	54450	48306	53453	53546	40964	61382	60477	60545	69468	82803	61881	66384	81937	95794	117363	140169	170854	190092	214740	237182	241288	257645
France	FRA	193000	174756	156512	166269	195288	155245	151329	146558	140215	129722	132508	131601	132182	130838	139852	137316	145996	151789	171206	196364	200687	210207	217865	232487	252264
South Sudan	SSD																						105023	202581	229587	248152
Sudan	SDN	1031050	729200	725900	745200	727174	674071	393874	374415	391496	390995	414928	349209	328176	138163	141588	147256	196200	222722	181605	186292	178308	139415	152194	159857	244430
Egypt, Arab Rep.	EGY	1991	2245	5509	6712	7223	5407	6035	6493	6276	6553	6840	7230	80494	88749	90343	88946	88022	97556	97861	94406	95056	95087	109933	230086	236090
Russian Federation	RUS							246691	237720	128574	80060	26265	17970	14969	9899	1852	1523	1425	1655	3479	4880	4922	3914	3178	3458	235750
Cameroon	CMR	49876	45237	42233	44013	44036	45781	46407	47057	47826	49227	43680	41186	58288	58583	58861	52042	35083	60137	81037	99957	104275	100373	98969	114753	226489
Germany	DEU	816000	821500	1236000	1418000	1354600	1267900	1266000	1049000	949200	975500	906000	903000	980000	960395	876622	700016	605406	578879	582735	593799	594269	571684	589737	187567	216973
India	IND	212743	210569	258372	262798	258341	227480	233370	223073	185516	180031	170941	169549	168855	164757	162687	139283	158366	161537	184543	185323	184821	185118	185656	188395	199937
Canada	CAN	154761	170916	183723	183241	186563	152125	138435	125184	119371	123316	126991	129224	129950	133094	141398	147171	151827	175741	173651	169434	165549	164883	163756	160349	149163
Sweden	SWE	109663	124470	131073	162402	200791	199212	191171	186725	178795	159513	157220	146491	142193	112167	73408	74915	79913	75078	77038	81356	82629	86615	92872	114175	142207
Congo, Dem. Rep.	COD	416435	482959	391127	572070	1724365	1433760	675973	297538	240214	285270	332509	362012	332978	234033	199323	204341	208371	177390	155162	185809	166336	152749	65109	113362	119754
United Kingdom	GBR	43632	43371	64726	80230	85160	90909	98577	107933	121716	148922	186248	233389	260687	276522	298844	303181	301556	299718	292097	269363	238150	193510	149799	126055	117161
South Africa	ZAF				250000	91894	101408	22645	6819	8388	14538	15063	18605	23344	26558	27683	29714	35086	36736	43546	47974	57899	57899	65233	65881	112192
Malaysia	MYS	14862	13947	11399	154	5308	5278	5309	5285	50614	50517	50487	50466	50612	7424	24905	33693	37170	32658	36671	66137	81516	86680	90185	97513	99086
Algeria	DZA	169110	169124	219314	219067	219073	192489	190267	170746	165226	165249	169656	169422	169233	169033	169048	94101	94180	94137	94093	94137	94144	94148	94133	94150	94128
Italy	ITA	10840	9813	9258	50276	73060	74302	64711	66620	5473	6024	6849	8571	10060	12841	15674	20675	26875	38068	47061	54965	56397	58060	64779	78061	93715
Tanzania	TZA	265184	288103	292148	564520	883250	829671	498732	570367	543881	622203	680862	646900	689373	649770	602088	548824	485295	435630	321909	118731	109286	131243	101021	102099	88492
Netherlands	NLD	17337	19020	29739	43538	62163	79960	102588	118071	131490	138646	146180	151928	148362	140886	126805	118189	100574	86587	77600	76008	74961	74598	71909	74707	82494
Niger	NER	792	1385	3699	16692	15070	27622	25845	7376	3691	350	58	83	296	328	344	301	317	319	320	325	314	302	50510	57661	77830
Thailand	THA	99821	88164	63625	119232	100817	106565	107962	169154	138332	100133	104965	110711	112614	119053	121139	117053	133117	125643	112932	105297	96675	89253	84479	136499	75137
Rwanda	RWA	23601	34004	25162	277000	6000	7792	25257	34227	33403	34365	28398	34786	30863	36608	50221	45206	49192	53577	55062	54016	55398	55325	58212	73349	73820
Switzerland	CHE	40943	45622	51930	56586	75295	82943	84413	83203	81903	82298	57653	58494	54113	50144	47678	48030	48523	45653	46132	46203	48813	50416	50747	52464	62620
Austria	AUT	34938	34508	62355	57687	40703	34385	89116	84394	80300	82081	15492	14390	14130	16109	17795	21230	25486	30773	37557	38906	42630	47073	51730	55598	55598
Congo, Rep.	COG	2990	3395	3385	13646	15522	19404	20451	20697	27174	39870	123190	119147	109201	91362	68536	66075	55788	38472	24779	111411	133112	141232	98455	51037	54842
Ecuador	ECU	510	280	204	238	244	202	211	227	248	314	1602	1715	3240	6381	8450	10063	11789	264907	101398	116557	121249	123436	123824	123133	53817
Burundi	BDI	268403	270136	271745	271883	300302	173017	20733	22028	25093	22109	27136	27896	40533	40971	48808	20681	13176	24483	21093	24967	29365	35659	41813	45490	52936
Mauritania	MRT	60000	35200	37500	51548	82229	34394	15880	7511	26	223	350	365	405	475	473	632	770	30471	27041	26795	26717	26535	80496	92767	49635
Norway	NOR	19581	29054	29846	38375	44617	47607	48409	47381	45334	43440	47693	50128	50432	46109	44046	43034	43336	34522	36101	37826	40260	40691	42822	46106	47043
Serbia	SRB																	98997	97995	96739	86351	73608	70707	66370	57083	43751
Liberia	LBR			100048	150153	120163	120080	120061	126886	96317	96317	69315	54760	64956	33997	15172	10168	16185	10466	10224	6952	24743	128293	65909	53253	38587
Nepal	NPL	17800	28319	95251	105342	123271	124754	126815	129157	126101	127940	129237	130945	132436	123667	124928	126436	128175	130681	124832	108461	89808	72654	56264	46305	38490
Australia	AUS	97915	53117	52604	53505	57575	62145	67313	66074	69745	64918	60246	57895	59436	56258	63476	64964	68948	22164	20919	22548	21805	23434	30083	34503	35582
Bangladesh	BGD	145	40260	245154	198954	116228	51118	30692	21603	22277	22210	21627	22173	22025	19792	20449	21098	26311	27573	28389	228586	229253	229669	230697	231145	32472
Burkina Faso	BFA	350	320	5670	6604	49990	29777	28381	1801	564	675	696	457	457	466	492	511	511	535	557	543	531	546	39306	29234	31894
Belgium	BEL	25911	24071	24292	24908	19497	31691	36060	36060	15509	16760	18832	12265	12578	12595	13529	15282	16820	17575	17026	15545	17892	22402	22024	25633	29179
Libya	LBY				1185	1999	3973	7747	8481	10558	10535	11543	11664	11666	11897	12166	12166	2760	4098	6713	9005	7923	10130	7065	25561	27964
Zambia	ZMB	138049	140676	142104	141126	141126	129965	131139	165072	168564	206386	250940	284173	246765	226697	173907	155718	120253	112931	83485	56785	47857	45632	25653	23594	25578
Togo	TGO	3477	3406	3353	3280	12370	10876	12589	12682	11816	12113	12223	12257	12294	12395	11285	9287	6328	1328	9377	8531	14051	19270	23540	20613	21778
Djibouti	DJI	77606	96144	28000	34065	33406	27310	25076	23590	23582	23271	23243	23176	21702	27034	18035	10456	9259	6651	9228	12111	15104	20340	19139	20015	20530
Ghana	GHA	8123	8128	12114	150100	113666	83200	35617	22858	14557	13261	12720	11792	33515	43947	42053	53537	44938	34958	18206	13658	13828	13588	16016	18681	18450
Denmark	DNK	32906	36110	39118	44564	49558	64844	66373	68122	69015	69006	71035	73284	73597	69858	65310	44374	36659	26788	23401	20355	17922	13399	11814	13170	17785
Poland	POL		550	2719	810	393	600	600	835	898	942	1020	1311	1591	1836	2507	4604	6790	10053	12774	15320	15555	15847	15911	16438	15741
Angola	AGO	11557	11022	11002	10878	10686	10884	9381	9364	10605	13071	12086	12250	12250	13382	13970	13984	13090	12069	12710	14734	15155	16223	23413	23783	15474
Mali	MLI	13411	13120	13109	15224	15800	17916	18234	12552	13598	8302	8412	8439	9095	10009	11256	11233	10585	9203	9578	13538	13558	15624	13928	14316	15195
Senegal	SEN	58113	71908	71620	73002	72994	66769	65044	57229	60823	21539	20766	20707	20711	20726	20804	20712	20591	20421	33193	22151	20672	20644	14237	14247	14274
Costa Rica	CRI	276210	117492	114392	24834	24630	24226	23176	23114	22986	22903	5519	8104	12433	13508	10413	11253	11515	17190	18136	19116	19505	20057	20449	20569	12924
Finland	FIN	2348	4561	5950	8511	9511	10191	11382	12017	12290	12869	13276	12728	12490	10843	11325	11809	11827	6204	6617	7447	8724	9175	9919	11252	11798
Gambia, The	GMB	78	241	3632	2190	2206	6599	6924	7279	10320	17219	12016	8133	12120	7465	7343	7330	13761	14895	14836	10118	8378	9528	9853	9563	11608
Bulgaria	BGR			218	450	1060	1320	1430	390	240	547	1474	3004	3658	4068	4684	4413	4504	4836	5129	5393	5530	5688	2288	4320	11046
Guinea	GIN	325000	547960	478491	577158	553244	672298	663854	435300	482467	501544	427206	178444	182163	184341	139252	63525	31468	25226	21488	15325	14113	16609	10371	8560	8766
Guinea-Bissau	GNB	3004	4631	12163	20735	23909	15350	15401	15982	6604	7120	7587	7332	7639	7551	7536	7616	7804	7860	7884	7898	7679	7800	7784	8535	8684
Central African Republic	CAF	4284	12223	19040	44129	47791	33856	36564	38499	43013	49314	55661	49239	50725	44753	25020	24569	12357	7535	7429	27047	21574	16730	14014	14322	7694
Brazil	BRA	5335	5389	5439	6198	2223	2050	2212	2260	2347	2378	2722	2884	3182	3193	3345	3458	3492	20783	3852	4232	4357	4477	4689	5196	7490
Greece	GRC	8488	8989	8456	7873	7784	4428	5780	5520	6145	6283	6653	6948	2788	2771	2489	2390	2289	2228	2164	1695	1444	1573	2100	3485	7304
Bosnia and Herzegovina	BIH								40000	40000	65645	38152	32745	28022	22517	22215	10568	10318	7367	7257	7132	7016	6933	6903	6926	6890
Montenegro	MNE																	6926	8528	24741	24019	16364	12874	11198	8476	6462
Malta	MLT				505	429	416	367	343	296	271	190	176	307	895	1558	1939	2404	3000	4332	5955	6136	6952	8248	9906	6095
Zimbabwe	ZWE	190950	197627	237713	100482	2199	514	595	806	1655	2071	4127	8706	9432	12721	6884	13850	3519	3981	3468	3995	4435	4561	4356	6389	6079
Malawi	MWI	926725	981812	1058498	713607	90242	1018	1268	280	1245	1700	3900	6200	2166	3202	3682	4240	3943	2929	4175	5443	5740	6308	6544	5796	5874
Ireland	IRL	360	300	500	119	400	400	69	430	600	2835	2543	3598	5380	5971	6542	7113	7917	9333	9730	9571	9107	8248	6327	6001	5853
Spain	ESP	8303	4003	4036	4997	5361	5852	5688	5532	5939	6714	6987	6806	6780	5900	5686	5374	5275	5147	4661	3970	3820	4228	4510	4637	5798
Cyprus	CYP	33	60	80	82	66	55	49	43	84	117	76	83	173	349	531	701	924	1194	1465	2888	3394	3503	3631	3883	5126
Venezuela, RB	VEN	1750	1720	1990	2221	2177	1613	1596	301	158	188	132	59	58	58	244	408	720	200907	201161	201313	201547	202022	203644	204340	5052
Papua New Guinea	PNG	7099	6098	6686	7670	8461	9601	10176	8198	8198	6666	5863	4941	4941	7491	7627	9999	10183	10003	10006	9703	9698	9377	9383	9378	4929
Mozambique	MOZ	420	420	299	202	322	128	198	72	52	220	207	207	207	311	623	1954	2558	2767	3163	3547	4077	4079	4398	4445	4536
Indonesia	IDN	3278	3156	3530	2402	97	19	61	34	47	162506	122618	73551	28596	233	169	89	301	315	369	798	811	1006	1819	3206	4270
Argentina	ARG	11735	11529	11515	11636	11901	10314	10430	10522	2270	2345	2396	2396	2439	2642	2916	3074	3158	3263	2845	3230	3276	3361	3488	3362	3498
Ukraine	UKR					5193	5193	3591	4564	6101	2697	2951	2983	2966	2877	2459	2346	2275	7277	7201	7334	3022	3176	2807	2968	3219
Armenia	ARM			300000	334000	304039	218950	218950	219000	310012	296216	280591	264337	247550	239289	235235	219550	113714	4566	3953	3607	3296	2918	2854	13732	3190
Czech Republic	CZE		691	9399	188	1186	2655	2266	1731	1805	1232	1186	1216	1297	1516	1144	1802	1887	2037	2110	2323	2449	2449	2805	3184	3137
Eritrea	ERI				3	706	1083	2106	2606	2501	2972	1984	2272	3619	3889	4240	4418	4621	5042	4862	4751	4809	4719	3600	3166	2898
Hungary	HUN	45123	73838	32412	3023	2906	11394	7537	5890	3504	4990	5064	4710	6088	7023	7708	8046	8075	8131	7750	6044	5414	5106	4054	2440	2867
Somalia	SOM	460000		480	399	388	626	700	622	337	130	558	589	199	368	357	493	669	901	1842	1815	1937	2099	2309	2425	2729
Botswana	BWA	1179	1054	497	514	503	266	214	281	2137	1296	3551	3581	2805	2838	2839	3109	3160	2465	3019	3022	2986	3312	2785	2773	2645
Japan	JPN	6819	6397	6669	6495	5942	5435	5278	4851	4492	4235	3752	3200	2657	2266	1967	1941	1844	1794	2019	2332	2586	2649	2581	2584	2560
Panama	PAN	1350	914	1007	964	972	867	867	622	1188	1321	1313	1470	1573	1445	1608	1730	1848	16890	16913	16923	17073	17262	17429	17665	2271
Romania	ROU		651	520	1170	1170	194	269	640	989	1242	1685	1805	1857	2011	1627	2056	1658	1757	1596	1069	1021	1005	1262	1770	2182
Tajikistan	TJK			3000	300	695	620	1166	2174	3634	4541	15364	15346	3437	3306	1834	1018	929	1133	1799	2679	3131	3323	2248	2048	2026
Cote d'Ivoire	CIV	272281	230290	174076	251588	360112	297908	327696	208502	151182	138429	120691	126239	44749	75971	72088	41627	27288	24647	24811	24604	26218	24221	3980	2980	1925
Mexico	MEX	356400	360170	360991	52477	47363	38717	34569	31908	28251	24511	18451	15455	12962	6075	4343	3229	3319	1616	1055	1235	1395	1677	1520	1831	1837
Chile	CHL	58	72	142	239	217	283	313	276	305	323	364	389	413	466	569	806	1134	1376	1613	1539	1621	1674	1695	1743	1773
Namibia	NAM		136	171	585	1144	1682	2204	2511	3820	7612	27263	30885	21651	19800	14773	5307	5462	6525	6799	7163	7254	6049	1806	2332	1767
Sierra Leone	SLE	125830	28036	5866	16279	15874	4675	13532	13011	9866	6570	6546	10501	63494	61194	65437	59965	27365	8795	7826	9051	8363	8092	4204	2817	1372
New Zealand	NZL	4666	16760	17310	3942	3668	3758	3788	3646	4097	4800	4923	5264	5757	5807	5350	5307	4906	2740	2716	3289	2307	1934	1517	1403	1349
Peru	PER	724	683	640	738	659	610	663	750	433	702	687	683	688	718	766	848	911	995	1075	1108	1146	1144	1122	1162	1303
Azerbaijan	AZE			246000	228840	231635	233682	233692	233715	221635	221643	287	367	458	326	8606	3004	2618	2352	2061	1642	1891	1730	1468	1380	1299
Nigeria	NGA	3571	3573	4782	4829	6026	8118	8486	9071	6780	6941	7270	7200	7355	9171	8395	9019	8768	8460	10124	9127	8747	8806	3154	1694	1239
Morocco	MAR	311	322	319	336	336	55	51	57	901	901	2105	2091	2127	2121	2121	219	503	786	766	773	792	736	744	1470	1216
Korea, Rep.	KOR	230	162	149			5	6	3	1	7	6	7	17	25	44	69	96	118	172	268	358	401	487	547	1173
Luxembourg	LUX	687	692	2208	225	300	700	700	700	700	700	759	1201	1201	1201	1590	1822	2206	2737	3109	3230	3254	2855	2910	2873	1108
Gabon	GAB	417	220	272		597	791	798	862	1124	15070	17982	15581	13473	14005	13787	8545	8429	8826	9001	8845	9015	1773	1663	1594	1013
Lithuania	LTU								6	34	44	55	287	368	403	470	531	531	688	751	793	803	821	871	916	1007
Belarus	BLR					1822	28988	30525	50	75	260	458	584	618	638	725	725	690	649	609	580	589	595	576	604	925
Tunisia	TUN	30	130	111	99	19	199	176	506	528	454	436	97	102	99	90	87	93	101	94	92	89	4097	1435	730	901
Slovak Republic	SVK				1521	159	2339	1387	746	424	443	457	472	444	414	409	368	248	279	317	401	461	546	662	701	799
Bolivia	BOL	200	341	491	669	734	681	698	333	349	350	351	347	350	527	524	535	567	632	664	679	695	716	733	748	763
Portugal	PRT	867	998	1778	600	248	248	308	319	339	379	433	449	462	418	377	363	333	353	403	389	384	408	483	598	699
Croatia	HRV			403000	287000	183600	198647	165395	68863	29027	28374	22437	21875	8392	4387	3663	2927	2443	1642	1597	1238	936	824	724	684	679
Kazakhstan	KAZ				5000	5030	15561	15577	15577	8338	14795	20574	19531	20610	15831	15844	7265	4412	4285	4352	4340	4406	616	564	584	633
Kuwait	KWT		45590	44879	30000	30020	3306	3831	3787	4182	4334	2776	1255	1521	1518	1519	1523	50	38159	38238	221	184	335	674	635	614
Macedonia, FYR	MKD			32000	31452	14891	9048	5089	3500	1700	21200	9050	4363	2816	193	1004	1274	1240	1235	1672	1542	1398	1130	1077	982	614
Dominican Republic	DOM	1966	1571	510	1331	1252	985	640	638	614	625	510										599	595	758	721	608
Saudi Arabia	SAU		33261	28660	24025	17965	13169	9852	5833	5531	5562	5309	245268	245290	240835	240552	240701	240772	240742	240572	575	582	599	577	559	534
Swaziland	SWZ	42074	49569	55580	48889	643	712	575	592	592	616	690	690	653	686	704	760	752	789	775	759	759	759	505	507	515
Sri Lanka	LKA		15	21	19	13	16	14	26	29	21	16	17	28	30	63	106	162	182	269	251	223	188	110	145	511
Kyrgyz Republic	KGZ				21242	21239	13407	16707	15276	14560	10849	10609	9296	7708	5591	3753	2598	366	723	375	423	2458	6095	4941	466	482
Georgia	GEO						100	95	162	20	5180	7620	7901	4192	3864	2559	2497	1373	1047	996	870	639	462	469	847	442
United Arab Emirates	ARE				433	381	407	464	519	529	501	562	556	163	160	105	104	174	159	209	279	538	677	631	603	417
Benin	BEN	456	456	293	156241	70406	23843	5960	2918	2903	3657	4296	4799	5021	5034	4802	30294	10797	7621	6933	7205	7139	7217	4966	194	415
Moldova	MDA										8	68	159	173	102	57	84	161	151	148	141	148	146	185	250	335
Israel	ISR									27	128	4075	4168	4179	4179	574	609	837	1156	9137	17736	25471	41235	48505	48325	330
Bahrain	BHR	1780									1	1	1					1		48	139	165	199	289	294	311
Cuba	CUB	3988		5092	3606	2002	1829	1694	1280	1067	967	954	1036	1005	836	795	706	667	615	525	454	411	384	371	384	280
Nicaragua	NIC	16000	14933	14450	5643	314	577	557	465	474	471	332	325	325	300	292	227	199	184	147	120	64	86	129	189	280
Uruguay	URY	87	81	90	138	113	132	138	133	163	87	79	90	99	91	97	121	125	140	145	168	189	174	181	203	272
Slovenia	SVN			74100	45000	29156	22314	10014	5135	3465	4382	2816	2411	390	2069	304	251	254	263	268	289	314	142	176	213	257
Philippines	PHL	19860	8972	6722	2477	669	783	691	311	307	170	176	136	114	108	107	96	100	106	104	95	243	125	141	182	222
Colombia	COL	460	450	478	298	316	218	220	223	226	230	239	210	205	186	141	155	143	168	170	196	212	219	219	224	213
Latvia	LVA									2	6	7	8	7	17	11	11	21	29	32	43	68	95	125	160	183
Hong Kong SAR, China	HKG	8161	4414	2605	1848	1700	1481	1348	1229	1039	974	983	1390	1496	1902	1868	1934	1940	97	103	86	154	152	117	126	170
Guatemala	GTM	223377	223236	222929	4689	4672	1496	1564	1508	815	732	720	729	733	715	656	391	382	379	130	131	138	147	159	160	164
Paraguay	PRY	66	66	45	52	60	60	53	47	30	19	21	21	21	28	41	50	59	62	75	89	107	124	133	136	153
Oman	OMN															7	7	7	7	7	26	78	83	138	138	151
Caribbean small states	CSS	30657	29973	20867	9084	8937	8781	8607	8495	3600	3028	1388	1129	1049	861	732	624	488	381	311	294	220	160	112	94	144
Qatar	QAT										6	31	67	46	46	46	46	46	46	13	29	51	80	80	130	133
Uzbekistan	UZB				8000	8001	2627	2900	3159	1071	1014	38350	39579	44936	44682	44455	43950	1415	1054	821	555	311	214	176	141	125
Albania	ALB			3000	3000	3000	4720	4925	30	22332	3930	523	292	17	26	51	56	56	77	65	70	76	82	86	93	104
Liechtenstein	LIE											70	141	128	149	149	150	277	283	89	91	92	94	102	97	103
Iceland	ISL	85	141	154	160	160	197	232	260	294	254	244	213	207	239	239	293	267	49	49	62	83	58	60	79	99
Estonia	EST											4	11	10	12	11	7	5	18	22	24	39	50	63	70	90
Trinidad and Tobago	TTO																		22	33	37	29	22	18	20	83
Cambodia	KHM				5	10	15	16	14	21	21	34	50	200	76	382	127	99	179	164	135	129	64	77	68	63
Lesotho	LSO	214	220	117	60	58					1		39										34	34	30	44
Curacao	CUW																					7	6	14	15	37
El Salvador	SLV	20300	20099	19903	163	156	154	150	109	33	24	59	69	74	246	235	49	39	39	32	30	38	38	45	44	35
Turkmenistan	TKM				15400	15400	23323	15580	15787	14625	18464	14188	14005	13693	13511	13253	11963	750	125	79	60	62	59	46	45	35
Monaco	MCO																						37	37	34	33
Honduras	HND	237100	101961	100348	65	104	63	63	9	9	9	12	20	29	23	23	22	22	22	24	19	14	17	16	16	26
Jamaica	JAM		4	90	63	41	23	25	33	37	37	38									26	21	20	20	21	22
Pacific island small states	PSS						2009	2009	800	210								2	3	4	18	5	10	12	11	17
Bahamas, The	BHS			374	59		8	48	60	80	100	100										28	28	37	15	13
Fiji	FJI						9	9													2	1	7	6	5	13
Guyana	GUY								1													7	7	7	11	11
Madagascar	MDG					73					28	50	34										9	9	12	11
Belize	BLZ	30657	29969	20351	8912	8857	8750	8534	8387	3483	2891	1250	1129	1049	861	732	624	488	358	277	230	134	78	28	21	10
Cayman Islands	CYM																				1	1	3	3	6	6
Mongolia	MNG																	5	5	11	11	12	1	4	9	6
Turks and Caicos Islands	TCA																								4	4
Haiti	HTI																		1	3	3					3
St. Lucia	LCA								3														2	2	5	3
Singapore	SGP	146	166	115	11	12	112	10	5	5	1		2	2	1	1	3	1	10	10	7	7	3	3	3	3
Solomon Islands	SLB						2000	2000	800	210																3
Sint Maarten (Dutch part)	SXM																					1	3	3	3	3
Barbados	BRB																								1	1
St. Kitts and Nevis	KNA																									1
Palau	PLW																				11		1	1	1	1
Aruba	ABW																								1	0
Antigua and Barbuda	ATG																									0
Brunei Darussalam	BRN																									0
Comoros	COM										9	11	13				1	1								0
Cabo Verde	CPV		3	2																						0
Dominica	DMA																									0
Micronesia, Fed. Sts.	FSM																	2	2	1	1					0
Equatorial Guinea	GNQ																									0
Grenada	GRD																						3			0
Lao PDR	LAO									2																0
Macao SAR, China	MAC	205	116	15	10	9	8														6		1			0
Myanmar	MMR																									0
Mauritius	MUS										43		14													0
Sao Tome and Principe	STP																									0
Suriname	SUR			52	50	39			11										1	1	1	1				0
Timor-Leste	TLS													1	3	3	3	3	1	1	1	1				0
Tonga	TON																						2	3	3	0
St. Vincent and the Grenadines	VCT																									0
Vietnam	VNM	21150	20148	16263	5084	5000	34400	34400	15000	15000	15000	15945	15945	15945	15360	2360	2357	2357	2357	2357	2357	1928	990			0
Vanuatu	VUT																		1	3	4	4		2	2	0
Andorra	AND
American Samoa	ASM
Bermuda	BMU
Bhutan	BTN
Channel Islands	CHI
Faeroe Islands	FRO
Greenland	GRL
Guam	GUM
Isle of Man	IMN
Not classified	INX
Kiribati	KIR
Kosovo	KSV
St. Martin (French part)	MAF
Maldives	MDV
Marshall Islands	MHL
Northern Mariana Islands	MNP
New Caledonia	NCL
Puerto Rico	PRI
Korea, Dem. Rep.	PRK
French Polynesia	PYF
San Marino	SMR
Seychelles	SYC
Tuvalu	TUV
Taiwan, China	TWN
Virgin Islands (U.S.)	VIR
Samoa	WSM
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Assignment Module 1</title>

	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="main.css">
	</head>
	<body>

	<div class="content-wrapper">
	<div class="intro">
	<h1>Refugee population by country</h1>
	<p>The countries with the largest refugee population based on the 2014 numbers.</p>
	</div>

	<div id='button-wrapper'></div>
	<div id='chart-container'></div>

	<div class='meta source'>Source:
	<a href="http://data.worldbank.org/indicator/SM.POP.REFG/countries/1W?order=wbapi_data_value_2011%20wbapi_data_value%20wbapi_data_value-first&sort=desc&display=default" target="_blank">Worldbank, 2015</a>
	</div>

	<div id="tooltip" class="none"></div>
	</div>

	<script src="main.js"></script>
	</body>
	</html>
	* { outline: none; }

	html, body {
	margin: 0;
	padding: 0;
	}

	body { font-family: Helvetiva, Arial; }

	h1 {
	margin: 0 0 .5em;
	padding: 0;
	}

	.btn {
	padding: .7em 1.2em;
	border: 1px solid #CCC;
	background: #FFF;
	margin-right: 10px;
	border-radius: 4px;
	cursor: pointer;
	transition: background .2s;
	}

	.btn:hover { background: #FFD974 }

	.btn.active {
	background: #ffc11d;
	border-color: #F5B200;
	}

	.none { display: none; }

	.content-wrapper {
	max-width: 960px;
	min-width: 360px;
	margin: 0 auto;
	border: 1px solid #CCC;
	padding: 20px;
	}

	.intro {
	margin-bottom: 20px;
	}

	.source {
	font-size: .8em;
	}

	#button-wrapper {
	margin: 10px 0 5px;
	}

	/* TOOLTIP */

	#tooltip {
	position: absolute;
	padding: 8px 20px;
	background: #FFF;
	border-radius: 4px;
	box-shadow: 1px 1px 1px #CCC;
	border: 1px solid #CCC;
	pointer-events: none;
	}

	.tooltip-country-label {
	font-size: 1.1em;
	padding-bottom: .4em;
	}

	.tooltip-years-list {
	margin: 0;
	padding: 0;
	}

	.tooltip-years-list li {
	list-style: none;
	border-bottom: 1px solid #CCC;
	padding: 4px;
	}

	.tooltip-years-list li.active {
	background: #FFF7D7;
	}

	.tooltip-years-list .year-label {
	display: inline-block;
	padding-right: 25px;
	font-size: .8em;
	color: #675C5C;
	}

	.tooltip-years-list .year-value {
	font-size: .9em;
	}

	/* SVG */

	.axis path,
	.axis line {
	fill: none;
	stroke: #D0CBC4;
	shape-rendering: crispEdges;
	pointer-events: none;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	rect {
	fill: #FFD974;
	transition: fill 0.3s;
	}

	rect:hover {
	fill: #FFC11D;
	}

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}
	var w = getClientWidth();
	var h = 450;

	var padding = { top:10,
	right: 10,
	bottom: 30,
	left: 120 };

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ padding.top, h - padding.bottom ], 0.1);

	var widthScale = d3.scale.linear()
	.range([ 0, w - padding.right - padding.left ]);

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

	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom")
	.tickFormat(d3.format("s"))
	.ticks(Math.round(w / 60))
	.tickSize(-h + (padding.bottom + padding.top + 5)); /* weird magic number here */

	//Now SVG goes into #container instead of body
	var svg = d3.select("#chart-container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	var years = [2010, 2011, 2012, 2013, 2014],
	currentYear = years[4],
	totalShown = 20,
	transitionDuration = 1200,
	dataset;

	function initChart() {
	d3.csv("data_worldbank.csv", function(data) {
	dataset = data;

	var filtered_data = filterData(data);

	updateWidthScale(filtered_data);

	heightScale.domain(filtered_data.map(function(d) { return d.Country; } ));

	var rects = svg.selectAll("rect")
	.data(filtered_data)
	.enter()
	.append("rect");

	rects.attr("x", padding.left)
	.attr("y", function(d) {
	return heightScale(d.Country);
	})
	//Initially, set bar width to zero
	.attr("width", 0)
	.attr("height", heightScale.rangeBand())
	.on("mouseover", function(d) {

	//Get this bar's x/y values, then augment for the tooltip
	var xPosition = (d3.event.pageX);
	var yPosition = (d3.event.pageY - 28);

	var content = getTooltipContent(d);

	//Update the tooltip position and value
	d3.select("#tooltip")
	.style("left", xPosition + "px")
	.style("top", yPosition + "px")
	.html(content);

	//Show the tooltip
	d3.select("#tooltip").classed("none", false);
	})
	.on("mouseout", function() {
	d3.select("#tooltip").classed("none", true);
	});


	updateBarChart(currentYear);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + padding.left + "," + (h - padding.bottom) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding.left + ",0)")
	.call(yAxis);
	});
	}

	function filterData(data) {
	data.sort(function(a, b) {
	return d3.descending(+a[currentYear], +b[currentYear]);
	});

	data = data.filter(function(d, i) {
	if( i < totalShown) { return true; }
	});

	return data;
	}

	function updateWidthScale(data) {
	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d['2014'];
	}) ]);
	}

	function getClientWidth() {
	return document.getElementById("chart-container").clientWidth;
	}

	function updateWidth() {
	w = getClientWidth();
	widthScale.range([ 0, w - padding.right - padding.left ]);

	updateWidthScale(dataset)

	svg.attr("width", w);
	}

	function updateXAxis() {
	xAxis.scale(widthScale)
	.ticks(Math.round(w / 60));

	svg.selectAll(".x.axis")
	.call(xAxis);
	}

	function resize() {
	updateWidth();
	updateXAxis();
	updateBarChart(currentYear);
	}

	function initButtons() {
	var btn = d3.select('#button-wrapper')
	.append('div');

	btn.selectAll('div')
	.data(years)
	.enter()
	.append('button')
	.attr('type', 'button')
	.attr('class', function(d){
	var className='btn';

	if (d === currentYear) {
	className += ' active';
	}
	return className;
	})
	.text(function(d){ return d; })
	.on('click', function(d) {
	d3.select(".btn.active").classed("active", false);
	d3.select(this).classed("active", true);
	updateBarChart(d);
	})
	}

	function getTooltipContent(data) {
	var format = d3.format('s');
	var content = '';
	content += '<div class="tooltip-country-label">' + data.Country + '</div>';
	content += '<ul class="tooltip-years-list">';

	for (var i = years.length -1; i >= 0; i-- ){
	var className = '';
	if(years[i] === currentYear){
	className += 'active';
	}
	content += '<li class='+ className +'>';
	content += '<span class="year-label">' + years[i] + "</span>";
	content += '<span class="year-value">' + format(data[years[i]]) + "</span>";
	content += '</li>';
	}

	content += '</ul>';

	return content;
	}

	function updateBarChart(year) {
	currentYear = year;

	svg.selectAll("rect")
	.transition()
	.duration(transitionDuration)
	.attr("width", function(d) {
	return widthScale(d[currentYear]);
	});
	}

	initChart();

	initButtons();
	d3.select(window).on('resize', resize);