gcmsrc · January 22, 2017 17:47
diff --git a/convert.js b/convert.js
 // UDACITY DAND - Data Visualisation - Giacomo Sarchioni

 /*This JavaScript modules contains all the code for converting objects
 for the Data Analyst Nanodegree - Data Visualisation project.*/

 // Convert countryData into an object format
 function convert_CountryData(countryData) {

 	return Object.keys(countryData)
 				 .map(function(key) {
 				 	return {
 				 		'year': key,
 				 		'value': countryData[key]
 				 	};
 				 });

 };

 function convert_NestedToObject(nested) {

 	nested.forEach(function(obj) {

 		newObj = {};

 		obj.values.forEach(function(d) {

 			newObj[d.year] = d.value;

 		});

 		// Replace array with object
 		obj.values = newObj;

 	});

 	return nested;

 }

 // Convert Purpose Name ad-hoc
 function convert_PurposeName(purpose, datum) {

 	if(purpose == 'VFR') {
 		return 'Visiting friends and relatives'
 	} else {
 		return datum.purpose;
 	};

 };
diff --git a/create.js b/create.js
 // UDACITY DAND - Data Visualisation - Giacomo Sarchioni

 /*This JavaScript modules contains all the code for creating objects
 for the Data Analyst Nanodegree - Data Visualisation project.*/

 // Create nested data, i.e. visits by country
 function create_Nested(data) {

 	return d3.nest()
 			 .key(function(d) {
 			 	return d.market;
 			 })
 			 .entries(data);

 };

 // Create Purpose Data, i.e. for each purpose, I create an array of objects.
 function create_PurposesData(data) {

 	var dataPurposes = Object.keys(data[0]).slice(1,6).map(function(purpose) {
 		return {
 			purpose: purpose,
 			values: data.map(function(d) {
 				return {
 					year: d.year,
 					value: d[purpose]
 				};
 			})
 		}
 	});;

 	return dataPurposes;
 };
diff --git a/dataset.csv b/dataset.csv
diff --git a/dataset_geo.csv b/dataset_geo.csv
diff --git a/extract.js b/extract.js
 // UDACITY DAND - Data Visualisation - Giacomo Sarchioni

 /*This JavaScript modules contains all the code for extracting
 data on the Data Analyst Nanodegree - Data Visualisation project.*/

 // Extract max value of the max values in an object
 function extract_MaxMax(data) {
 	return d3.max(data, function(d) {
 		return d3.max(d.values, function(d) {
 			return d.value;
 		});
 	});
 };

 // Extract purpose percentage
 function extract_PurposePerc(datum, index) {
 	return format_Perc(datum.values[index].value);
 };

 // Extract years from geo dataset
 function extract_Years(data) {

 	// Use a for loop and an empty set
 	years = d3.set();

 	data.forEach(function(d) {
 		years.add(d.year);
 	})

 	return years.values();
 };

 // Extract data of a specific country
 function extract_CountryData(countries, country) {

 	// Return visitors array for a given country
 	var filterData = countries.filter(function(d) {
 						return d.properties.name == country;
 					 });
 	
 	// Return data only if there are visitors values.
 	if(filterData.data()[0].properties.visitors) {
 		return filterData.data()[0].properties.visitors;
 	};
 };
diff --git a/format.js b/format.js
 // UDACITY DAND - Data Visualisation - Giacomo Sarchioni

 /*This JavaScript modules contains all the code for formatting data
 for the Data Analyst Nanodegree - Data Visualisation project.*/

 // Two decimal numbers
 var format_Dec = d3.format('.2f');

 // Integer with thousand-separing comma
 var format_Int = d3.format(',.0f');

 // Percentage
 var format_Perc = d3.format(',%');

 // Format millions (formatting different if for tooltip)
 function format_Mill(value, tooltip = false) {
 	if(tooltip) {
 		return format_Dec(parseFloat(value) / 1e3) + ' M';
 	} else {
 		return format_Int(parseFloat(value) / 1e3) + ' M';
 	};
 };

 // Format thousands into units
 function format_Units(value) {

 	return format_Int(parseFloat(value) * 1e3);

 };

 /*http://bl.ocks.org/eesur/4e0a69d57d3bfc8a82c2*/
 // Move selected object to front
 d3.selection.prototype.format_MoveToFront = function() { 

 	return this.each(function() {
        this.parentNode.appendChild(this);
    });

 };

 // Format purposeBox Y ad-hoc
 function format_PurposeBoxY(purpose, datum, index) {

 	if (purpose == 'Business') {

 		return yScale(datum.values[index].value) + 25;

 	} else if (purpose == 'VFR') {

 		return yScale(datum.values[index].value) - 25;

 	} else {

 		return yScale(datum.values[index].value) - 15;

 	};
 };

 /*Round up to the next hundredth thousand for a value expressed 
 in thousands*/
 function format_RoundUpThousand(value) {

 	return Math.ceil(value / 1e2) * 1e2;

 };
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<title>DAND - Data Viz</title>
 	<script src="https://d3js.org/d3.v3.min.js"></script>
 	<script src="https://d3js.org/colorbrewer.v1.min.js"></script>
 	<!-- https://github.com/d3/d3-scale-chromatic -->
 	<script src="https://d3js.org/d3-color.v1.min.js"></script>
 	<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
 	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

 	<script type="text/javascript" src='setup.js'></script>
 	<script type="text/javascript" src='format.js'></script>
 	<script type="text/javascript" src='utility.js'></script>
 	<script type="text/javascript" src='parse.js'></script>
 	<script type="text/javascript" src='ttip.js'></script>
 	<script type="text/javascript" src='create.js'></script>
 	<script type="text/javascript" src='extract.js'></script>
 	<script type="text/javascript" src='convert.js'></script>
 	<script type="text/javascript" src='legend.js'></script>

 	<script type="text/javascript" src='trends.js'></script>
 	<script type="text/javascript" src='map.js'></script>
 	
 	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700" rel="stylesheet">
 	<link rel="stylesheet" type="text/css" href="newstyle.css">
 </head>
 <body>
 	
 	<!--Tooltip as per Scott Murray-->
 	<div id="tooltip" class='hidden trend map'>
 		<p><span id='tooltip-title'></span></p>
 		<p><span id='tooltip-value'></span></p>
 	</div>

 	<script type="text/javascript">

    	//----------------------------------------------------------//

 		// *** CHART AND DRAWING AREA ***
 		// Add chart
 		var chart = d3.select("body")
 					  .append("svg")
 					  .attr("width", outerWidth)
 					  .attr("height", outerHeight)
 					  .append('g');


 		// TEST: Append chart buttons
 		var buttons = ['visits', 'purpose', 'origin'];
 		chart.selectAll('text')
 			 .data(buttons)
 			 .enter()
 			 .append('text')
 			 .attr('class', 'button')
 			 .attr('x', function(d, i) {
 			 	return 0.7 * innerWidth + i * 60;
 			 })
 			 .attr('y', 1.2 * padding.top)
 			 .attr('id', function(d) {return d;})
 			 .text(function(d) {
 			 	return d;
 			 });

 		// Add drawing area
 	    var area = chart.append('g')
 	    		        .attr('class', 'area');
 		// Append title
 		chart.append('g')
 		     .attr('id', 'title')
 		     .attr('transform', 'translate(' + (3 * padding.left) + ',' + (1.3 * padding.top) + ')')
 		     .append('text')
 		     .style("text-anchor", "start");

 		// Start with first visulisation
 		trends(1);

 		// Add click behaviour to buttons
 		d3.select('#visits')
 		  .on('click', function() {
 		  	trends(1)
 		  });
 		d3.select('#purpose')
 		  .on('click', function() {
 		  	trends(2)
 		  });

 		d3.select('#origin')
 		  .on('click', function() {
 		  	map();
 		  })

 		
 	</script>
 </body>
 </html>
diff --git a/legend.js b/legend.js
 // UDACITY DAND - Data Visualisation - Giacomo Sarchioni

 /*This JavaScript modules contains all the code for adding a legend to
 the map of the Data Analyst Nanodegree - Data Visualisation project.*/

 // Add legend
 function legend_Add() {

 	// Append legend to area
 	var legend = area.append('g')
 					 .attr('class', 'map legend')
 					 .attr('transform', 'translate(' + (5.2 * padding.right) + ',' + (0.88 * outerHeight + 25) + ')');

 	// Define legendData
 	var legendData = [];
 	for (var i = 0; i < 150; i += 1) {
 		legendData.push(i);
 	};

 	// Update legend scale
 	legendColor.domain([0, legendData.length - 1]);
 	
 	// Add legend sections
 	legend.append('g')
 		  .attr('class', 'legend-bar')
 		  .selectAll('rect')
 		  .data(legendData)
 		  .enter()
 		  .append('rect')
 		  .attr('x', function(d) {return d})
 		  .attr('y', '5')
 		  .attr('height', '10')
 		  .attr('width', '1')
 		  .attr('fill', function(d, i) {
 		  	return utility_ColorMapInterpolate(i, true);
 		  });
 	
 	// Append title
 	legend.append('text')
 		  .attr('class', 'legend-title')
 		  .text('International Visitors to London');

 	// Append min
 	legend.append('text')
 		  .attr('class', 'legend-range min')
 		  .text(0)
 		  .attr("transform","translate(0" +',' + 30 + ')');
 	
 	// Append max
 	legend.append('text')
 		  .attr('class', 'legend-range')
 		  .text(format_Units(mapColor.domain()[1]))
 		  .attr("transform","translate(" + 150 +',' + 30 + ')');

 };
diff --git a/map.js b/map.js
 /// UDACITY DAND - Data Visualisation - Giacomo Sarchioni

 /*This JavaScript modules contains the code for rendering the
 visualisation of the final chart in the project (i.e. map)*/
 function map() {

 	// Remove all elements in area
 	utility_RemoveObjs('*');

 	// Change tooltip classes
 	utility_ChangeClass('#tooltip', 'trend', false);
 	utility_ChangeClass('#tooltip', 'map', true);
 	utility_ChangeClass('#tooltip', 'hidden', false);

 	// Change tooltipWidth to 200 px
 	ttip_ChangeWidth(200);

 	// Change tooltip position
 	ttip_ChangePosition(5.2 * padding.right, 0.65 * outerHeight);

 	// Make tooltip title and value empty
 	ttip_ChangeTitle('');
 	ttip_ChangeValue('');

 	// Change title
 	utility_ChangeChartTitle('International Visitors to London by Country of Origin');

 	// Append yearBox
 	var yearBox = area.append('text')
 	   				  .attr('x', 5.2 * padding.right)
 	   				  .attr('y', 0.88 * outerHeight)
 	   				  .attr('class', 'map year')

 	// Append focus
 	var focus = area.append('g')
 	  				.attr('id', 'focus')
 	  				.attr('class', 'map')
 	  				.attr('transform', 'translate(' + (5.2 * padding.right) + ',' + (0.6 * outerHeight) + ')');

 	// File downloaded from natural earth data as per Scott Murray
 	// File was simplified with mapshaper
 	// coropleth chapter from Scott Murray
 	d3.csv('dataset_geo.csv', parse_Map, function(data) {

 		// Extract years
 		var years = extract_Years(data);

 		// Add first year to text of yearBox
 		yearBox.text(years[0]);

 		// Get BBox of yearBox
 		var box = yearBox.node().getBBox();

 		// Define domain and range of yearBoxScale
 		yearBoxScale.domain([years[0], years[years.length - 1]])
 			 	    .range([box.x + 5, box.x + box.width - 20]);

 		// Update xScale
 		xScale.rangeRoundBands([5, box.width], 0.05);

 		// Append xAxis
 		focus.append('g').attr('class', 'axis focus-x');

 		// Call xScale on xAxis
 		xFocusAxis.tickValues([years[0], years[years.length - 1]])
 		          .scale(xScale);
 		focus.select('.focus-x').call(xFocusAxis);

 		// Update yScale
 		yScale.range([-30, 0]);

 		// Append yAxis
 		focus.append('g').attr('class', 'axis focus-y');

 		// Nesting by market, i.e. by country of origin
 		// https://github.com/d3/d3-collection#nests
 		var nested = d3.nest()
 			 		  .key(function(d) {
 			 		  	return d.market;
 			 		  })
 			 		  .entries(data);
 		
 		/*Update mapColor domain (max is the maximum number of 
 		international visitors from a country throughout history)*/
 		mapColor.domain([0, format_RoundUpThousand(extract_MaxMax(nested))]);

 		//http://bl.ocks.org/lucguillemot/37cc6eccbdd365556feb
 		// Format legend
 		legend_Add();
 		
 		/*Convert nested values from array of objects to a single
 		object, where keys are represented by the years*/
 		var nested = convert_NestedToObject(nested);
 		
 		// Load geoJSON data
 		d3.json('world_simple.json', function(json) {

 			// Add data to map as per Scott Murray choropleth
 			for (var i = 0; i < nested.length; i++) {

 				var dataCountry = nested[i].key;
 				var dataValues = nested[i].values;
 				
 				for (var j = 0; j < json.features.length; j++) {
 									
 					var mapCountry = json.features[j].properties.name;

 					if (dataCountry == mapCountry) {

 						json.features[j].properties.visitors = dataValues;
 						break;
 					}
 				}
 			};
 			
 			// Bind data
 			var countries = area.selectAll('path')
 							    .data(json.features)
 							    .enter()
 							    .append('path')
 							    .attr('d', mapPath)
 							    .attr('class', 'map country');

 			// Change tooltip value based on countryData
 			function newTtipValue(countryData, year) {

 				if(countryData[year]) {

 					return format_Units(countryData[year]);

 				} else {

 					return 'N/A';

 				}
 			};

 			// Create focus mini chart, i.e. a line chart with a circle for a given year
 			function appendFocusChart(country, year) {
 				
 				// Remove any existing focus line
 				utility_RemoveObjs('.focus-line');

 				// Remove any existing focus circle
 				utility_RemoveObjs('.focus-circle');

 				// Extract countryData
 				var countryData = extract_CountryData(countries, country);

 				// Change tooltip value
 				ttip_ChangeValue(newTtipValue(countryData, year));

 				// Convert to focusData
 				var focusData = convert_CountryData(countryData);

 				// Update yScale
 				yScale.domain([
 						d3.max(focusData, function(d) {
 							return d.value;
 						}),
 						d3.min(focusData, function(d) {
 							return d.value;
 						})]);
 				
 				// Update yAxis scale
 				yFocusAxis.scale(yScale)

 				// Call yAxis
 				focus.select('.focus-y').call(yFocusAxis);

 				// Append focus line
 				focus.append('path')
 					 .attr('d', line(focusData))
 					 .attr('class', 'focus-line');

 				// Append circle
 				focus.append('circle')
 					 .attr('r', 4)
 					 .attr('class', 'focus-circle')
 					 .attr('cx', function() {
 					 	
 					 	return xScale(year) + xScale.rangeBand() / 2;

 					 })
 					 .attr('cy', function() {
 					 	
 					 	return yScale(countryData[year])

 					 });
 			};

 			// Start with the US
 			ttip_ChangeTitle('United States of America');

 			// Append focusChart
 			appendFocusChart(d3.select('#tooltip-title').node().textContent, years[0]);

 			// Initialise chart
 			updateMap(years[0]);

 			function updateMap(year) {

 				// Transition country fills
 				countries.transition()
 						 .duration(50)
 						 .style('fill', function(d) {

 						 	if(d.properties.visitors) {

 						 		if(d.properties.visitors[year]) {

 						 			return utility_ColorMapInterpolate(d.properties.visitors[year]);
 			 					};
 			 				};
 			 			 });

 				// Transition yearBox value
 				yearBox.transition()
 					   .duration(50)
 					   .text(year);
 	
 				// Extract name of country in tooltip
 				var country = d3.select('#tooltip-title').node().textContent;

 				// Extract country data
 				var countryData = extract_CountryData(countries, country);

 				
 				// Update tooltip-value
 				d3.select('#tooltip-value')
 				  .transition()
 				  .duration(500)
 				  .text(newTtipValue(countryData, year));
 			
 				// Update circle
 				focus.select('circle')
 					     .transition()
 					     .duration(50)
 					     .attr('cx', xScale(year) + xScale.rangeBand()/2)
 					     .call(function() {
 					     	
 					     	// Extract countryData
 					     	var state = d3.select('#tooltip-title').node().textContent;
 					     	var countryData = extract_CountryData(countries, state)

 					     	if(countryData[year]) {
 					     		
 					     		// Change circle position
 					     		this.attr('cy', yScale(countryData[year]));

 					     		// Change circle fill
 					     		this.style('fill', 'red');

 					     	} else {
 					     		
 					     		// Change circle fill
 					     		this.style('fill', 'white');

 					     	}
 					     });

 				// Add countries mouseover and click effect
 				countries.on('mouseover', function(d) {

 							if(d.properties.visitors) {
 									
 								// Change the cursor
 								d3.select(this).style('cursor', 'pointer');

 							};

 						  })
 						  .on('click', function(d) {

 						  	// Define previous country value
 						  	var previousCountry = d3.select('#tooltip-title')[0][0].textContent;

 							// Extract clicked state
 							var clickedCountry= d.properties.name;

 							// Change tooltip title
 							ttip_ChangeTitle(clickedCountry);

 							// Change focus and tooltip based on country value
 							if(clickedCountry != previousCountry) {

 								if(d.properties.visitors) {

 									// Append focusChart
 									appendFocusChart(clickedCountry, year);
 									
 								};
 							};
 				  		  });
 			};

 			// Add yearBox mousemove effect
 			yearBox.on('mousemove', function() {

 				// Cancel current transition if any
 				area.transition().duration(0);

 				// Extract year using yearBoxScale
 				var yearValue = Math.round(yearBoxScale.invert(d3.mouse(this)[0]));

 				// Trim yearValue
 				if(yearValue < years[0]) {

 					yearValue = years[0];

 				} else if (yearValue > years[years.length - 1]) {

 					yearValue = years[years.length -1];

 				} else {

 					// Conver number to string
 					yearValue = yearValue.toString();

 				};

 				// Change text of yearBox
 				yearBox.transition()
 				       .duration(150)
 				       .text(yearValue);

 				// Update map
 				updateMap(yearValue);
 			});
 		});
 	});
 };
diff --git a/newstyle.css b/newstyle.css
 /*/// UDACITY DAND - Data Visualisation - Giacomo Sarchioni*/
 /*This is the main CSS stylesheet for the project*/
 .axis {
 	font-family: 'Roboto Condensed', sans-serif;
 	font-weight: 300i;
 	font-size: 14px;
 }

 .axis line {
 	fill: none;
 	stroke: #000;
 	shape-rendering: crispEdges;
 }

 .axis path {
  display: none;
 }

 .bar {
 	fill: #428bca;
 }

 .bar.highlight {
 	fill: #ffbf00;
 }

 .country {
 	stroke: #beb7b7;
 	stroke-width: 0.75;
 	fill: white;
 }

 .focus-circle {
 	fill: red;
 	stroke: white;
 	stroke-width: 2;
 }

 .focus-line {
 	fill: none;
 	stroke: rgb(8,52,112);
 	stroke-width: 2;
 }

 .focus-x {
 	font-family: 'Roboto Condensed', sans-serif;
 	font-weight: 300i;
 	font-size: 10px;
 }

 .focus-y line{
  shape-rendering: crispEdges;
  stroke: #000;
 }

 .hidden {
 	display: none;
 }

 .legend-range {
 	font-family: 'Roboto Condensed', sans-serif;
 	font-weight: 300i;
 	font-size: 12px;
 	text-anchor: end;
 	fill: #beb7b7;
 }

 .legend-title {
 	font-family: 'Roboto Condensed', sans-serif;
 	font-weight: 400;
 	font-size: 12px;
 	text-anchor: start;
 	fill: grey;
 }

 .legend-range.min{
 	text-anchor: start;
 }

 .line {
 	fill: none;
 }

 .purpose path {
 	stroke-width: 2;
 }

 .purpose text {
 	font-family: 'Roboto Condensed', sans-serif;
 	font-weight: 300;
 	font-size: 16px;
 }

 .purpose.focused path {
 	stroke-width: 3;
 }

 .purpose.focused text {
 	font-weight: 400;
 }

 .purpose.unfocused path {
 	stroke: #d8d8d8;
 }

 .purpose.unfocused text {
 	fill: #d8d8d8;
 }

 .purpose .percentage-box {
 	text-align: left;
 	alignment-baseline: middle;
 }

 .purpose .purpose-box {
 	cursor: default;
 	text-anchor: start;
 }

 .tick line {
 	stroke-width: 0.5;
 	opacity: 0.3;
 }

 #title {
 	font-family: 'Roboto Condensed', sans-serif;
 	font-weight: 700;
 	font-size: 18px;
 }

 #tooltip {
 	position: absolute;
 	pointer-events: none;
 	height: auto;
 }

 #tooltip.map{
 	position: absolute;
 	text-align: left;
 	height: auto;
 	padding: 10px;
 	background-color: none;
 	pointer-events: none;
 }

 #tooltip.trend {
 	text-align: center;
 	padding: 10px;
 	background-color: white;
 	border-style: solid;
 	border-color: black;
 	border-width: 1px;
 	opacity: 0.9;
 	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
 	border-radius: 10px;
 }

 #tooltip p {
 		margin: 0;
 		font-family: 'Roboto Condensed', sans-serif;
 		font-size: 16px;
 		line-height: 20px;
 	}

 #tooltip-title {
 	font-weight: 700;
 }

 .year {
 	font-family: 'Roboto Condensed', sans-serif;
 	font-weight: 300;
 	font-size: 80px;
 	fill: grey;
 	cursor: ew-resize;
 }






diff --git a/parse.js b/parse.js
 // UDACITY DAND - Data Visualisation - Giacomo Sarchioni

 /*This JavaScript modules contains all the code for parsing the data
 for the Data Analyst Nanodegree - Data Visualisation project.*/

 // Parse trend data
 function parse_Trend(data) {

 	for (var key in data) {
 		if (key != 'year') {
 			data[key] = +data[key];
 		};
 	};
 	return data;

 };

 // Parse map data
 function parse_Map(data) {

 	for (var key in data) {
 		if (key == 'value') {
 			data[key] = +data[key];
 		};
 	};
 	return data;

 };
diff --git a/setup.js b/setup.js
 // UDACITY DAND - Data Visualisation - Giacomo Sarchioni

 /*This JavaScript modules contains all the code for setting up  the
 page for the Data Analyst Nanodegree - Data Visualisation project.*/

 // ### MARGINS ###
 //Margins as per convention from bl.ocks.org
 var margin = {top: 20, right: 10, bottom: 20, left: 10};
 var padding = {top: 20, right: 20, bottom: 20, left:20};
 var outerWidth = 960,
    outerHeight = 500,
    width = outerWidth - margin.left - margin.right,
    height = outerHeight - margin.top - margin.bottom,
    innerWidth = width - padding.left - padding.right,
    innerHeight = height - padding.top - padding.bottom;

 // ### AXIS SCALES ###
 // xScale
 var xScale = d3.scale.ordinal();
 // yScale
 var yScale = d3.scale.linear();
 // Scale for yearBox
 var yearBoxScale = d3.scale.linear();

 // ### COLOR SCALES ###
 // Color scale for trend chart
 var purposeColor = d3.scale.ordinal().range(colorbrewer.Set1[5]);
 // Scale for legend
 var legendColor = d3.scale.linear().range([0,1]);
 // Color scale for map
 var mapColor = d3.scale.linear().range([0,1]);

 // ### AXIS ###
 var xAxis = d3.svg.axis().orient('bottom');
 var yAxis = d3.svg.axis().orient('left').ticks(4);
 var xFocusAxis = d3.svg.axis().orient('bottom').innerTickSize(0).tickPadding(5);
 var yFocusAxis = d3.svg.axis().orient('left').ticks(0);

 // ### LINE ###
 var line = d3.svg.line()
 			 .x(function(d) { return xScale(d.year) + xScale.rangeBand() / 2; })
 			 .y(function(d) { return yScale(d.value); });

 // ### PROJECTIONS ###
 var mapProjection = d3.geo.mercator()
 					  .scale(105)
 					  .translate([outerWidth/1.65, outerHeight/1.4]);
 var mapPath = d3.geo.path().projection(mapProjection);
diff --git a/trends.js b/trends.js
 /// UDACITY DAND - Data Visualisation - Giacomo Sarchioni

 /*This JavaScript modules contains the code for rendering the
 visualisation of the first two charts in the project (i.e. Trends)*/

 function trends(story) {

 	// Remove any map
 	utility_RemoveObjs('.map');

 	// Change tooltip classes
 	utility_ChangeClass('#tooltip', 'trend', true);
 	utility_ChangeClass('#tooltip', 'map', false);
 	utility_ChangeClass('#tooltip', 'hidden', true);

 	// Define tooltip width
 	var tooltipWidth = 80;

 	// Define range for xScale
 	xScale.rangeRoundBands([
 		5 * padding.left,
 		outerWidth - 3 * padding.right],
 		0.05);

 	// Define range for yScale
 	yScale.range([innerHeight, 5 * padding.top]);

 	// Upload data
 	var data = d3.csv('dataset.csv', parse_Trend, function(data) {

 		// Append xAxis
 		area.append('g')
 		    .attr('class', 'x axis')
 		    .attr('transform', 'translate(0,' + (innerHeight + padding.bottom) + ')')

 		// Append yAxis
 		area.append('g')
 		    .attr('class', 'y axis')
 		    .attr('transform', 'translate(' + 4.5 * padding.left + ',0)')

 		// Update xScale domain and call axis
 		xScale.domain(data.map(function(d) {return d.year; }));
 		xAxis.scale(xScale);
 		area.select('.x').call(xAxis)

 		// Choose story to render based on input
 		if(story==1) {

 			drawTrendOne(data);

 		} else {

 			drawTrendTwo(data);

 		};

 		// Define function to render first trend story
 		function drawTrendOne(data) {

 			// Remove object from second trend, i.e. purpose (if any)
 			utility_RemoveObjs('.purpose');

 			// Hide tooltip
 			utility_ChangeClass('#tooltip', 'hidden', true);

 			// Change tooltip width
 			ttip_ChangeWidth(tooltipWidth);

 			// Change title
 		    utility_ChangeChartTitle('International Visitors to London (in Millions)');

 		    // Update yScale domain and format, and call axis
 		    yScale.domain([0, d3.max(data, function(d) {
 		    	return d.visits;
 		    })]);
 		    yAxis.tickFormat(function(d) {return format_Mill(d);})
 		    	 .innerTickSize(0)
 		         .scale(yScale);
 		    area.select('.y').call(yAxis);

 		    // Bind data
 		    var bars = area.selectAll('rect')
 		    			   .data(data)

 		    bars.enter()
 		        .append('rect')
 		        .attr('class', 'bar')
 		        .attr('width', xScale.rangeBand())
 		        .attr('height', 0)
 		        .attr('x', function(d) {
 		        	return xScale(d.year);
 		        })
 		        .attr('y', innerHeight)
 		        // add transition
 		        .transition()
 		        .delay(function(d, i) {
 		        	return i / (data.length - 1) * 500;
 		        })
 		        .duration(500)
 		        .attr('y', function(d) {
 		        	return yScale(d.visits)
 		        })
 		        .attr('height', function(d) {
 		        	return innerHeight - yScale(d.visits);
 		        });
 		    
 		    // Add mouseover and mouseout effects
 		    bars.on('mouseover', function(d) {
 		    	
 		    	// Extract x position
 				var xPos = this.getAttribute('x');
 				
 				// Calculate left and top for tooltip
 				var left = xPos - (tooltipWidth - xScale.rangeBand()) / 2
 				var top = innerHeight - 3.5 * padding.bottom;

 				// Change tooltip position
 				ttip_ChangePosition(left, top);

 				// Change tooltip's title and value
 				ttip_ChangeTitle(d.year);
 				ttip_ChangeValue(format_Mill(d.visits, tooltip = true));

 				// Make tooltip visible and change style
 				utility_ChangeClass('#tooltip', 'hidden', false);
 				utility_ChangeClass('#trend', 'hidden', false);
 				
 				// Change class of bar to highlight
 				utility_ChangeClass(this, 'highlight', true);

 		    })
 		    .on('mouseout', function() {

 		    	// Change tooltip class to hidden
 		    	utility_ChangeClass('#tooltip', 'hidden', true);

 		    	// Reset bar, i.e. remove highlight class
 		    	utility_ChangeClass(this, 'highlight', false);

 		    })
 		};

 		// Define function to render the second story
 		function drawTrendTwo(data) {

 			// Hide tooltip
 			utility_ChangeClass('#tooltip', 'hidden', true);

 			// Remove bars with transition
 			area.selectAll('.bar')
 				.transition()
 				.duration(750)
 				.attr('y', innerHeight)
 				.attr('height', 0)
 				.remove();

 			// Change chart title
 			utility_ChangeChartTitle('Purpose of International Visits to London (% of visitors)')

 			// Create dataPurposes object
 			// https://bl.ocks.org/mbostock/3884955
 			var dataPurposes = create_PurposesData(data);

 			// Update trendColor scale domain
 			purposeColor.domain(dataPurposes.map(function(d) {return d.purpose; }))

 			// Update yScale domain
 			yScale.domain([0, extract_MaxMax(dataPurposes)])

 			// Update yAxis formatting and call it
 			yAxis.ticks(3)
 				 .tickFormat(function(d) {return format_Perc(d); })
 				 .innerTickSize(-innerWidth + 3 * padding.right)
 				 .scale(yScale);
 			area.select('.y').call(yAxis);

 			// Bind data
 			var purposes = area.selectAll('.purpose')
 						       .data(dataPurposes)
 						       .enter()
 						       .append('g')
 						       .attr('class', function(d) {

 						       		return d.purpose + ' purpose'

 						       });

 			// Add line with animation
 			//https://css-tricks.com/svg-line-animation-works/
 			purposes.append("path")
 				    .attr("class", 'line')
 				    .attr("d", function(d) {

 				    	return line(d.values); 

 				    })
 				    .attr("stroke", function(d) {

 				    	return purposeColor(d.purpose);

 				    })
 				    .style("stroke-dasharray", innerWidth)
 				    .style('stroke-dashoffset', innerWidth)
 				    .transition()
 				    .duration(1500)
 				    .style('stroke-dashoffset', 0);

 			// http://bl.ocks.org/d3noob/8603837
 			// Add text at the beginning of the line
 			purposes.append('text')
 					.attr('class', 'purpose-box')
 					.attr('x', function(d) {

 						return xScale(d.values[0].year) + xScale.rangeBand() / 2;

 					})
 					.attr('y', function(d) {

 						var purpose = this.parentElement.classList[0];
 						return format_PurposeBoxY(purpose, d, 0);

 					})
 					.text(function(d) {

 						var purpose = this.parentElement.classList[0];
 						return convert_PurposeName(purpose, d);

 					})
 					.attr('fill', function(d) {

 						return purposeColor(d.purpose);

 					})
 					.style('opacity', 0)
 					.transition()
 					.duration(1500)
 					.style('opacity', 1);

 			// Add text at the end of the line
 			purposes.append('text')
 					.attr('class', 'percentage-box')
 					.attr('x', function(d) {

 						return xScale(d.values[d.values.length - 1].year) + 35;

 					})
 					.attr('y', function(d) {

 						var purpose = this.parentElement.classList[0];
 						return yScale(d.values[d.values.length - 1].value);

 					})
 					.text(function(d) {

 						// Extarct precentage of last value
 						return extract_PurposePerc(d, d.values.length - 1);

 					})
 					.attr('fill', function(d) {return purposeColor(d.purpose); })
 					.style('opacity', 0)
 					.transition()
 					.duration(1500)
 					.style('opacity', 1);

 			// Add mouseover and mouseout effects when selecting purpose-box
 			// Problem of JS taking precedence over CSS
 			// http://stackoverflow.com/questions/15709304/d3-color-change-on-mouseover-using-classedactive-true
 			area.selectAll('.purpose-box')
 				.on('mouseover', function() {

 					// Move selection to front
 					d3.select(this.parentElement).format_MoveToFront();

 					// Extract purpose
 					var selectedPurpose = this.parentElement.classList[0];

 					// Change class based on selection
 					area.selectAll('.purpose')
 					    .classed('unfocused', function() {

 							if(this.classList[0] != selectedPurpose) {
 								return true;
 							};
 						})
 						.classed('focused', function() {

 							if(this.classList[0] == selectedPurpose) {
 								return true;
 							};

 						});

 				})
 				.on('mouseout', function() {

 					utility_ChangeClassAll('.purpose', 'unfocused', false);
 					utility_ChangeClassAll('.purpose', 'focused', false);

 				});
 		}
 	});
 };
diff --git a/ttip.js b/ttip.js
 // UDACITY DAND - Data Visualisation - Giacomo Sarchioni

 /*This JavaScript modules contains all the code for manaing the
 tooltips on the Data Analyst Nanodegree - Data Visualisation project.*/

 function ttip_ChangeTitle(newTitle) {
 	d3.select('#tooltip-title')
 	  .text(newTitle);
 };

 // Change tooltip value
 function ttip_ChangeValue(newValue) {
 	d3.select('#tooltip-value')
 	  .text(newValue);
 };

 // Change tooltip width
 function ttip_ChangeWidth(newValue) {
 	d3.select('#tooltip')
 	  .style('width', newValue + 'px');
 };

 // Change tooltip position
 function ttip_ChangePosition(left, top) {
 	d3.select('#tooltip')
 	  .style('left', left + 'px')
 	  .style('top', top + 'px');
 };
diff --git a/utility.js b/utility.js
 // UDACITY DAND - Data Visualisation - Giacomo Sarchioni

 /*This JavaScript modules contains all the code for performing
 administartive action on the Data Analyst Nanodegree - Data Visualisation project.*/

 // Change class of a specific object
 function utility_ChangeClass(object, className, boolean) {

 	d3.select(object).classed(className, boolean);

 };

 // Change class of all objects specified
 function utility_ChangeClassAll(objects, className, boolean) {

 	d3.selectAll(objects).classed(className, boolean);
 	
 };

 // Change chart title
 function utility_ChangeChartTitle(newTitle) {
 	
 	chart.select('#title')
 		 .select('text')
 		 .text(newTitle);

 }

 // InterpolateBlues
 function utility_ColorMapInterpolate(value, legend = false) {

 	if(legend) {
 		return d3.interpolateBlues(legendColor(value));
 	} else {
 		return d3.interpolateBlues(mapColor(value));
 	};

 };

 // Remove specific ojects from area
 function utility_RemoveObjs(objects) {
 	area.selectAll(objects).remove();
 };
diff --git a/world_simple.json b/world_simple.json
	// UDACITY DAND - Data Visualisation - Giacomo Sarchioni

	/*This JavaScript modules contains all the code for converting objects
	for the Data Analyst Nanodegree - Data Visualisation project.*/

	// Convert countryData into an object format
	function convert_CountryData(countryData) {

	return Object.keys(countryData)
	.map(function(key) {
	return {
	'year': key,
	'value': countryData[key]
	};
	});

	};

	function convert_NestedToObject(nested) {

	nested.forEach(function(obj) {

	newObj = {};

	obj.values.forEach(function(d) {

	newObj[d.year] = d.value;

	});

	// Replace array with object
	obj.values = newObj;

	});

	return nested;

	}

	// Convert Purpose Name ad-hoc
	function convert_PurposeName(purpose, datum) {

	if(purpose == 'VFR') {
	return 'Visiting friends and relatives'
	} else {
	return datum.purpose;
	};

	};
year	Business	Holiday	Miscellaneous	Study	VFR	visits
2002	0.240537416822	0.419084373331	0.0919486883813	0.016049084009	0.232380437456	11603.3820794
2003	0.233770307173	0.422897682993	0.085784628018	0.0181440926277	0.239403289189	11695.7504415
2004	0.215826107241	0.437541332975	0.0890771265708	0.0154869013269	0.242068531886	13389.3304112
2005	0.228533909167	0.42173304222	0.087183370819	0.0133643225538	0.249185355241	13892.5689795
2006	0.234664484002	0.419806489788	0.093073567256	0.013739721358	0.238715737597	15592.6461415
2007	0.233333961796	0.42387871279	0.0849470608291	0.0165324393778	0.241307825207	15339.7714895
2008	0.210064603451	0.443573192493	0.0827974900599	0.0132584581988	0.250306255797	14752.993692
2009	0.179890520023	0.4964035094	0.0830677885476	0.011952853439	0.228685328591	14211.2979861
2010	0.18873697009	0.498114965082	0.0805382743866	0.0137382315809	0.218871558861	14705.5413382
2011	0.196025160757	0.498118487455	0.0712648770799	0.011640846875	0.222950627834	15289.4929047
2012	0.198437950809	0.494743422747	0.0669662869851	0.0115857100563	0.228266629403	15460.8642467
2013	0.193008040602	0.506139968784	0.0652531982258	0.0105825027692	0.225016289619	16810.7582222
2014	0.188156322911	0.512160505986	0.058654456489	0.0141020379591	0.226926676655	17404.2156497
2015	0.199749941472	0.495645761132	0.0610388286996	0.00971210251104	0.233853366185	18581.145357
market	year	value
Argentina	2002	14.595359056
Argentina	2003	21.530759141
Argentina	2004	23.171488881
Argentina	2005	20.924879968
Argentina	2006	28.379647088999995
Argentina	2007	30.49079013
Argentina	2008	20.118808958
Argentina	2009	55.37418897699999
Argentina	2010	52.414780794
Argentina	2011	61.069963991000016
Argentina	2012	93.74335129200003
Argentina	2013	93.48125041100002
Argentina	2014	92.49973935000003
Argentina	2015	113.33215731700001
Australia	2002	436.89172697699996
Australia	2003	450.7136469439999
Australia	2004	477.734498041
Australia	2005	552.6481023080001
Australia	2006	578.8438092760001
Australia	2007	595.2522444740002
Australia	2008	583.7169744429999
Australia	2009	571.190791364
Australia	2010	624.2764789800002
Australia	2011	681.266423449
Australia	2012	596.9382011990001
Australia	2013	687.3322455110003
Australia	2014	614.8706871279999
Australia	2015	628.9603035599997
Austria	2002	109.51329462
Austria	2003	128.980634988
Austria	2004	128.65854089299995
Austria	2005	122.257793143
Austria	2006	140.786416167
Austria	2007	163.69116187
Austria	2008	141.65906441600004
Austria	2009	168.772010803
Austria	2010	165.92553487299998
Austria	2011	164.87809062
Austria	2012	153.01341540599998
Austria	2013	142.83758166599998
Austria	2014	145.39774116800007
Austria	2015	152.69029878100005
Bahrain	2011	12.069186924
Bahrain	2012	21.520883024999996
Bahrain	2013	23.936109067000004
Bahrain	2014	19.202672242
Bahrain	2015	11.562628361
Belgium	2002	288.6138012900001
Belgium	2003	306.21036789999994
Belgium	2004	359.22573455699995
Belgium	2005	300.53348135099986
Belgium	2006	342.79421469599987
Belgium	2007	351.08822833499994
Belgium	2008	307.7372220229999
Belgium	2009	349.9166236289999
Belgium	2010	488.81148054200014
Belgium	2011	406.373370059
Belgium	2012	470.31799221199987
Belgium	2013	530.6930997000001
Belgium	2014	490.205149656
Belgium	2015	529.8111867639997
Brazil	2002	64.70641233000002
Brazil	2003	46.13551995200002
Brazil	2004	58.59348563699999
Brazil	2005	65.44075825599998
Brazil	2006	91.48631691800004
Brazil	2007	108.88517896699996
Brazil	2008	150.89464420500005
Brazil	2009	108.44268606799997
Brazil	2010	149.18974625
Brazil	2011	211.282784145
Brazil	2012	215.20779751499992
Brazil	2013	219.95547194800002
Brazil	2014	255.997815108
Brazil	2015	259.638746712
Bulgaria	2008	44.320264249
Bulgaria	2009	55.70139277
Bulgaria	2010	49.265095859
Bulgaria	2011	52.61544012599999
Bulgaria	2012	53.871897102
Bulgaria	2013	55.159902929000005
Bulgaria	2014	71.739023285
Bulgaria	2015	70.26984971799999
Canada	2002	358.33433616800005
Canada	2003	317.24028409499994
Canada	2004	368.86533402800006
Canada	2005	399.2036534009998
Canada	2006	439.5411430050002
Canada	2007	478.147525676
Canada	2008	499.69143672800004
Canada	2009	371.213649843
Canada	2010	389.4524776110001
Canada	2011	428.7708054889999
Canada	2012	402.8562592230001
Canada	2013	434.47924126500004
Canada	2014	359.187932734
Canada	2015	407.53204172400007
Chile	2011	18.697606742999998
Chile	2012	16.651711196999997
Chile	2013	28.986941899999998
Chile	2014	38.009156614
Chile	2015	31.626925320000005
China	2002	39.520290702000004
China	2003	42.630867945000006
China	2004	61.00658490999998
China	2005	58.081053897000025
China	2006	64.77106988300001
China	2007	79.168682084
China	2008	60.107489675000004
China	2009	46.699951595000016
China	2010	55.352449081
China	2011	80.62607251200001
China	2012	104.125517014
China	2013	96.42514362899999
China	2014	98.879508137
China	2015	167.07382965400004
Czech Republic	2002	63.630266074000005
Czech Republic	2003	79.656266543
Czech Republic	2004	126.10342004500002
Czech Republic	2005	106.91572417200003
Czech Republic	2006	112.03087833599996
Czech Republic	2007	134.118388508
Czech Republic	2008	169.69502594899996
Czech Republic	2009	144.812957886
Czech Republic	2010	109.73616490999999
Czech Republic	2011	108.74955594099998
Czech Republic	2012	144.62534684199994
Czech Republic	2013	136.47425049699999
Czech Republic	2014	134.691170811
Czech Republic	2015	166.2559162739999
Denmark	2002	191.42862081899997
Denmark	2003	209.83347041199994
Denmark	2004	238.12045698800006
Denmark	2005	286.6856983179999
Denmark	2006	291.33200356399993
Denmark	2007	312.299082285
Denmark	2008	298.39092804400013
Denmark	2009	332.161131937
Denmark	2010	273.7646143329999
Denmark	2011	340.2379000419999
Denmark	2012	325.727032146
Denmark	2013	378.45346414600004
Denmark	2014	339.44392232800004
Denmark	2015	422.7334180980001
Egypt	2002	19.676177787000007
Egypt	2003	25.033167229
Egypt	2004	21.556451096999997
Egypt	2005	19.483566181000004
Egypt	2006	33.632623029
Egypt	2007	21.840031042000003
Egypt	2008	31.642433169000004
Egypt	2009	30.472555996
Egypt	2010	31.046822862000006
Egypt	2011	29.872413916
Egypt	2012	35.044817822000006
Egypt	2013	39.11707574
Egypt	2014	39.88489869200001
Egypt	2015	38.13918298699999
Finland	2002	66.27873899199999
Finland	2003	59.29279686399999
Finland	2004	78.12335582399999
Finland	2005	97.46617019500002
Finland	2006	102.584148766
Finland	2007	99.40250362600003
Finland	2008	94.937135783
Finland	2009	94.38610871700003
Finland	2010	103.60001514699997
Finland	2011	124.47414685200003
Finland	2012	130.73427016499997
Finland	2013	134.2075737149999
Finland	2014	159.43935228700005
Finland	2015	160.692837382
France	2002	1102.8633108580004
France	2003	1190.87091954
France	2004	1258.1196182840001
France	2005	1367.347915872999
France	2006	1447.549875937
France	2007	1342.3534987340004
France	2008	1409.8554764379999
France	2009	1528.2479291619995
France	2010	1624.253066575001
France	2011	1600.4690838269996
France	2012	1681.2708605259995
France	2013	1903.9821559480004
France	2014	2009.9768748670008
France	2015	2071.3970698949993
Germany	2002	889.4346487779998
Germany	2003	891.7289075200005
Germany	2004	1172.9192244300004
Germany	2005	1280.9184800990004
Germany	2006	1274.7184991340002
Germany	2007	1196.5759770230002
Germany	2008	1052.3987693000001
Germany	2009	1068.9323414700004
Germany	2010	1257.3681874509998
Germany	2011	1214.4722536309994
Germany	2012	1199.0605367759997
Germany	2013	1295.2619027330002
Germany	2014	1341.073394546
Germany	2015	1401.2194024319995
Greece	2002	97.846777886
Greece	2003	96.63115020000002
Greece	2004	109.76634034599995
Greece	2005	111.77623444800003
Greece	2006	102.48796759100001
Greece	2007	99.55207789100001
Greece	2008	124.44705915300003
Greece	2009	116.93206042600002
Greece	2010	104.54719407699997
Greece	2011	134.37727784400002
Greece	2012	92.300163656
Greece	2013	110.83236959300002
Greece	2014	155.35499172800002
Greece	2015	147.76058228000002
Hong Kong S.A.R.	2002	96.09616112900001
Hong Kong S.A.R.	2003	78.75378606199999
Hong Kong S.A.R.	2004	82.86582170999996
Hong Kong S.A.R.	2005	88.94374181400003
Hong Kong S.A.R.	2006	96.55038294600003
Hong Kong S.A.R.	2007	85.092973074
Hong Kong S.A.R.	2008	84.47433289799997
Hong Kong S.A.R.	2009	86.69165674899997
Hong Kong S.A.R.	2010	84.37004225
Hong Kong S.A.R.	2011	97.925671338
Hong Kong S.A.R.	2012	92.73019874499998
Hong Kong S.A.R.	2013	99.48366519899999
Hong Kong S.A.R.	2014	107.488126599
Hong Kong S.A.R.	2015	134.414885638
Hungary	2002	43.683604775999996
Hungary	2003	45.148987085999984
Hungary	2004	83.478904787
Hungary	2005	120.89838106400003
Hungary	2006	119.511893779
Hungary	2007	149.11481496300001
Hungary	2008	108.247728972
Hungary	2009	102.422103076
Hungary	2010	75.62250823000002
Hungary	2011	80.74965408899999
Hungary	2012	104.92136956400003
Hungary	2013	88.179874986
Hungary	2014	115.56501291399998
Hungary	2015	95.239152401
Iceland	2002	20.138197987999998
Iceland	2003	23.700039997
Iceland	2004	49.79567146300001
Iceland	2005	42.968266815
Iceland	2006	46.66595318899999
Iceland	2007	46.103127715
Iceland	2008	32.328583897
Iceland	2009	23.710144104000005
Iceland	2010	19.937233922
Iceland	2011	24.46911308
Iceland	2012	25.399086513
Iceland	2013	28.956171185
Iceland	2014	28.497370123
Iceland	2015	26.062992604000005
India	2002	135.24556920000003
India	2003	130.36824330800002
India	2004	160.28338171499993
India	2005	166.02863210299995
India	2006	229.56392790099994
India	2007	219.69035085699997
India	2008	241.64290944900003
India	2009	177.912951888
India	2010	235.92660682199997
India	2011	235.27043844200008
India	2012	231.53000343799994
India	2013	243.57792019299998
India	2014	252.31917277899998
India	2015	275.7453048030001
Indonesia	2011	19.232790185
Indonesia	2012	18.511527147999995
Indonesia	2013	17.862094968999997
Indonesia	2014	22.100618511999997
Indonesia	2015	24.770477862
Ireland	2002	628.8731627799998
Ireland	2003	623.5519496440003
Ireland	2004	682.7932528919999
Ireland	2005	726.5361173530001
Ireland	2006	718.4119690699995
Ireland	2007	732.273407233
Ireland	2008	736.1492586729998
Ireland	2009	690.420430604
Ireland	2010	656.638842603
Ireland	2011	620.3188509109999
Ireland	2012	595.9400475330004
Ireland	2013	610.624598379
Ireland	2014	620.2920184010002
Ireland	2015	793.2304510920001
Israel	2002	152.70756545900002
Israel	2003	122.67384915400001
Israel	2004	127.445260059
Israel	2005	106.940677091
Israel	2006	138.398791702
Israel	2007	102.69934831400002
Israel	2008	125.66391813899999
Israel	2009	124.930476672
Israel	2010	122.84391088999998
Israel	2011	120.50557012799997
Israel	2012	108.20603365000001
Israel	2013	140.96326714900002
Israel	2014	147.57870230499998
Israel	2015	164.65256870400006
Italy	2002	541.5962966260001
Italy	2003	601.4144014649999
Italy	2004	765.3620940920001
Italy	2005	643.726423381
Italy	2006	851.1752784069996
Italy	2007	837.7434506400003
Italy	2008	981.0446883459999
Italy	2009	747.6399869050002
Italy	2010	932.2429438089999
Italy	2011	1009.290218019
Italy	2012	962.8072050670002
Italy	2013	1072.1807178389997
Italy	2014	1185.7482357719996
Italy	2015	1165.0836310529996
Japan	2002	294.47076965300005
Japan	2003	232.52912602099997
Japan	2004	264.9933933579999
Japan	2005	242.9283887919998
Japan	2006	245.20231034200017
Japan	2007	220.05665104399998
Japan	2008	167.83790707299997
Japan	2009	180.45148927600002
Japan	2010	168.20516651100002
Japan	2011	166.35645556000003
Japan	2012	177.854013144
Japan	2013	155.34927841699994
Japan	2014	157.478226994
Japan	2015	151.39913751499998
Kenya	2002	31.580496979999992
Kenya	2003	19.836604095
Kenya	2004	22.092889157999995
Kenya	2005	16.468625933000002
Kenya	2006	15.9477102
Kenya	2007	12.670248942
Kenya	2008	24.644500955999998
Kenya	2009	14.897177068000001
Kenya	2010	18.549059943000003
Kenya	2011	17.843812079000003
Kenya	2012	20.771585136999995
Kenya	2013	22.347663999000005
Kenya	2014	12.465435056999999
Kenya	2015	22.400750873
Kuwait	2002	31.059023976000006
Kuwait	2003	36.17274383100001
Kuwait	2004	32.452613876
Kuwait	2005	33.815372246999985
Kuwait	2006	43.64871711600002
Kuwait	2007	46.689408015000005
Kuwait	2008	35.422521858
Kuwait	2009	48.981363492
Kuwait	2010	41.93610004699998
Kuwait	2011	52.781241206999994
Kuwait	2012	50.478253753999994
Kuwait	2013	105.68905795200001
Kuwait	2014	84.27489629299997
Kuwait	2015	83.36739936700002
Luxembourg	2002	23.933049037
Luxembourg	2003	16.853040887000002
Luxembourg	2004	38.373454112000005
Luxembourg	2005	25.894775986000003
Luxembourg	2006	28.203738065
Luxembourg	2007	31.687745869
Luxembourg	2008	34.968839024000005
Luxembourg	2009	27.883183557
Luxembourg	2010	26.796334176
Luxembourg	2011	39.95505609799999
Luxembourg	2012	40.060612677
Luxembourg	2013	51.21206161300001
Luxembourg	2014	56.09707565600001
Luxembourg	2015	78.103773057
Malaysia	2002	60.489580400999984
Malaysia	2003	46.671644109
Malaysia	2004	65.029698134
Malaysia	2005	52.811654209
Malaysia	2006	52.73174015900001
Malaysia	2007	46.97762699499998
Malaysia	2008	45.606669153999995
Malaysia	2009	77.88868209800002
Malaysia	2010	89.84081590100001
Malaysia	2011	82.47354252700002
Malaysia	2012	72.02053042899996
Malaysia	2013	113.36988623799999
Malaysia	2014	109.536848217
Malaysia	2015	126.01923207600004
Mexico	2002	53.038406775
Mexico	2003	57.868399021999984
Mexico	2004	52.16182879600002
Mexico	2005	54.978638791
Mexico	2006	69.46794288000004
Mexico	2007	38.147950918999996
Mexico	2008	50.40036481400002
Mexico	2009	60.741047926000014
Mexico	2010	51.855554385000005
Mexico	2011	62.158638969
Mexico	2012	69.80439256
Mexico	2013	91.442435235
Mexico	2014	72.79023395099998
Mexico	2015	82.20943600200002
Netherlands	2002	492.361354336
Netherlands	2003	619.2048370560002
Netherlands	2004	578.316150527
Netherlands	2005	606.7170003150001
Netherlands	2006	659.7670236399999
Netherlands	2007	665.328416209
Netherlands	2008	654.148838244
Netherlands	2009	683.8694758600005
Netherlands	2010	621.1703229250002
Netherlands	2011	631.2341157400002
Netherlands	2012	637.930629298
Netherlands	2013	686.7109881319999
Netherlands	2014	705.1862861199999
Netherlands	2015	690.48509869
New Zealand	2002	82.67217579499996
New Zealand	2003	100.54281580199999
New Zealand	2004	101.89609722799999
New Zealand	2005	121.74206997600001
New Zealand	2006	124.546996139
New Zealand	2007	119.74246621700001
New Zealand	2008	103.12724301299998
New Zealand	2009	108.81879197000005
New Zealand	2010	111.30152317800001
New Zealand	2011	95.538711549
New Zealand	2012	104.54087000899997
New Zealand	2013	93.70729327999999
New Zealand	2014	106.60637670799997
New Zealand	2015	118.41910725
Nigeria	2002	93.006873726
Nigeria	2003	85.612025783
Nigeria	2004	120.64473516
Nigeria	2005	119.830542859
Nigeria	2006	118.35013170399995
Nigeria	2007	125.048341018
Nigeria	2008	113.607711358
Nigeria	2009	116.506480483
Nigeria	2010	124.566580578
Nigeria	2011	106.09020167599996
Nigeria	2012	109.89716079400004
Nigeria	2013	120.67499908800002
Nigeria	2014	95.80541807200001
Nigeria	2015	89.781191708
Norway	2002	178.391173858
Norway	2003	182.01539769700003
Norway	2004	218.04298469699995
Norway	2005	265.90286889
Norway	2006	302.1912594200001
Norway	2007	306.60037301599993
Norway	2008	337.61603778299997
Norway	2009	324.07993614399993
Norway	2010	372.106886018
Norway	2011	382.14464229300006
Norway	2012	396.79784211099997
Norway	2013	480.109934232
Norway	2014	471.9369396520001
Norway	2015	434.6297132019999
Oman	2011	8.083898005999998
Oman	2012	8.475467951
Oman	2013	12.137767048999999
Oman	2014	9.607254713
Oman	2015	14.259101365000003
Pakistan	2002	43.01746578399999
Pakistan	2003	35.563234237
Pakistan	2004	49.235691172
Pakistan	2005	58.26557506600001
Pakistan	2006	66.121777165
Pakistan	2007	55.53223288000001
Pakistan	2008	47.742180077
Pakistan	2009	38.37639894800001
Pakistan	2010	32.486232877999996
Pakistan	2011	31.407247062
Pakistan	2012	40.592528316
Pakistan	2013	39.72704714399999
Pakistan	2014	49.00551920800001
Pakistan	2015	35.145472198
Poland	2002	115.33006335799999
Poland	2003	167.22525453000003
Poland	2004	277.79681419700006
Poland	2005	425.19047109099995
Poland	2006	528.204189355
Poland	2007	432.71474399999994
Poland	2008	451.259513744
Poland	2009	359.55149619
Poland	2010	355.72928833799995
Poland	2011	353.732700054
Poland	2012	396.2196193720001
Poland	2013	419.2277231170002
Poland	2014	446.49400552000003
Poland	2015	531.353701889
Portugal	2002	97.80148359899998
Portugal	2003	97.46053817999999
Portugal	2004	96.98215337900001
Portugal	2005	113.63602124
Portugal	2006	120.75442385400002
Portugal	2007	144.05546588199996
Portugal	2008	133.780615654
Portugal	2009	136.70651247599997
Portugal	2010	172.387961782
Portugal	2011	165.59096936900005
Portugal	2012	152.95365451200004
Portugal	2013	137.99903750100003
Portugal	2014	191.27908957499997
Portugal	2015	222.978525757
Qatar	2011	24.602314903000003
Qatar	2012	31.665262997
Qatar	2013	43.60443186399999
Qatar	2014	32.847070363
Qatar	2015	41.836869585
Republic of Serbia	2011	18.796171903999998
Republic of Serbia	2012	17.821087
Republic of Serbia	2013	16.262249113000003
Republic of Serbia	2014	12.519155801999997
Republic of Serbia	2015	16.909916253
Romania	2008	101.05905654700003
Romania	2009	107.84048572199998
Romania	2010	121.93434050699999
Romania	2011	127.93483901000002
Romania	2012	109.833407299
Romania	2013	158.621421161
Romania	2014	170.45366854499994
Romania	2015	237.738125816
Russia	2002	143.199269516
Russia	2003	160.12249570900005
Russia	2004	193.37077346800007
Russia	2005	133.19067581
Russia	2006	159.58775847299998
Russia	2007	165.12277963799994
Russia	2008	125.00690186500007
Russia	2009	85.735525481
Russia	2010	119.07894284800003
Russia	2011	154.36411086199996
Russia	2012	155.282329175
Russia	2013	147.24373388799995
Russia	2014	164.825299916
Russia	2015	99.00938686899997
Saudi Arabia	2002	42.841656881000006
Saudi Arabia	2003	34.14979388100001
Saudi Arabia	2004	37.725659101000005
Saudi Arabia	2005	36.982993765
Saudi Arabia	2006	39.512731388000006
Saudi Arabia	2007	56.48027217199998
Saudi Arabia	2008	63.827496203
Saudi Arabia	2009	58.58815504599998
Saudi Arabia	2010	54.21153989400001
Saudi Arabia	2011	66.835191606
Saudi Arabia	2012	74.44187283300002
Saudi Arabia	2013	90.946555524
Saudi Arabia	2014	99.14712965699998
Saudi Arabia	2015	103.90909166899999
Singapore	2002	57.456061361999986
Singapore	2003	52.554538756
Singapore	2004	57.15577941100001
Singapore	2005	49.90519098800001
Singapore	2006	70.865267975
Singapore	2007	63.444957898000006
Singapore	2008	76.959014416
Singapore	2009	64.700659195
Singapore	2010	89.24954079000003
Singapore	2011	88.866435722
Singapore	2012	106.65452638099998
Singapore	2013	91.50625695099998
Singapore	2014	120.61848810400002
Singapore	2015	148.586448654
South Africa	2002	162.53059424699998
South Africa	2003	156.75393201699998
South Africa	2004	167.64389037899997
South Africa	2005	180.13048152399995
South Africa	2006	216.82457813600004
South Africa	2007	174.82944750699994
South Africa	2008	164.23228400899995
South Africa	2009	131.536326752
South Africa	2010	123.43992708600001
South Africa	2011	108.73481208199998
South Africa	2012	118.816167048
South Africa	2013	142.34256589199995
South Africa	2014	124.489544614
South Africa	2015	134.48145320599997
South Korea	2002	66.99341514799998
South Korea	2003	88.62836422599996
South Korea	2004	114.55906924099997
South Korea	2005	119.13064748699998
South Korea	2006	119.403595416
South Korea	2007	127.95651462700002
South Korea	2008	109.46713204
South Korea	2009	58.031894744999995
South Korea	2010	84.789878621
South Korea	2011	108.10505147100001
South Korea	2012	130.74695834
South Korea	2013	154.82306945099998
South Korea	2014	164.58170167000003
South Korea	2015	181.91495477000004
Spain	2002	444.35032662699984
Spain	2003	526.5628755910001
Spain	2004	691.6298150980002
Spain	2005	709.6882412069999
Spain	2006	933.5185725249999
Spain	2007	967.5133240500003
Spain	2008	895.2936935569998
Spain	2009	1011.262230911
Spain	2010	875.2385267690003
Spain	2011	894.8486538060002
Spain	2012	795.8884000999999
Spain	2013	865.731672618
Spain	2014	984.288076086
Spain	2015	1153.2126313230003
Sweden	2002	291.889962082
Sweden	2003	307.88287822399985
Sweden	2004	327.23262297599996
Sweden	2005	333.75659607099993
Sweden	2006	383.0678488109999
Sweden	2007	401.86255744399995
Sweden	2008	417.5198874970002
Sweden	2009	335.08804212900003
Sweden	2010	442.61978441799994
Sweden	2011	457.67308495300017
Sweden	2012	503.056276106
Sweden	2013	516.1356765140001
Sweden	2014	547.4053099270001
Sweden	2015	553.649813626
Switzerland	2002	310.6436904900001
Switzerland	2003	297.14938551000006
Switzerland	2004	292.6073416160002
Switzerland	2005	331.37878951899995
Switzerland	2006	389.227227379
Switzerland	2007	372.4189723909998
Switzerland	2008	348.246871795
Switzerland	2009	354.31432338900004
Switzerland	2010	314.5090652509999
Switzerland	2011	391.20889158700015
Switzerland	2012	425.0321077760002
Switzerland	2013	453.77063772599996
Switzerland	2014	503.073927285
Switzerland	2015	504.37247451300016
Taiwan	2002	18.857968017
Taiwan	2003	20.369664952999994
Taiwan	2004	23.325825051000002
Taiwan	2005	22.123662174
Taiwan	2006	18.944392949999997
Taiwan	2007	23.110429958000005
Taiwan	2008	17.792403013
Taiwan	2009	23.055323988000005
Taiwan	2010	23.329388187
Taiwan	2011	23.635838922
Taiwan	2012	27.022714092999994
Taiwan	2013	28.75108879800001
Taiwan	2014	37.919176399000015
Taiwan	2015	33.658773453
Thailand	2002	21.438677997
Thailand	2003	26.333806054000007
Thailand	2004	29.555614788999996
Thailand	2005	27.289642807999996
Thailand	2006	29.681224137000005
Thailand	2007	36.54388094
Thailand	2008	22.049665063000003
Thailand	2009	39.387633326999996
Thailand	2010	30.076497867000004
Thailand	2011	35.89586111799999
Thailand	2012	38.022603778
Thailand	2013	41.94417494799999
Thailand	2014	35.467313957
Thailand	2015	43.326052338
Turkey	2002	41.18685379499999
Turkey	2003	61.043753971000015
Turkey	2004	55.925491034999986
Turkey	2005	51.86198698
Turkey	2006	91.641897084
Turkey	2007	77.89266464300002
Turkey	2008	75.40592864100002
Turkey	2009	58.85791119500001
Turkey	2010	71.74700676
Turkey	2011	69.419882848
Turkey	2012	91.463656944
Turkey	2013	90.81364351799999
Turkey	2014	102.98828426400001
Turkey	2015	116.80588760799999
United Arab Emirates	2002	60.55888007400001
United Arab Emirates	2003	58.28502412599999
United Arab Emirates	2004	73.19576777799999
United Arab Emirates	2005	61.776979348999994
United Arab Emirates	2006	89.06955610199999
United Arab Emirates	2007	91.49001893399999
United Arab Emirates	2008	123.68644351899998
United Arab Emirates	2009	121.42699499899999
United Arab Emirates	2010	107.22309557900005
United Arab Emirates	2011	118.191408584
United Arab Emirates	2012	133.326225036
United Arab Emirates	2013	161.31613233799996
United Arab Emirates	2014	152.078279318
United Arab Emirates	2015	181.312990062
United States of America	2002	2446.330244300999
United States of America	2003	2233.116193237
United States of America	2004	2406.376630444999
United States of America	2005	2276.8150966149997
United States of America	2006	2536.896371216
United States of America	2007	2333.6141901279993
United States of America	2008	1907.8710551309998
United States of America	2009	1839.1486334340004
United States of America	2010	1765.5577235
United States of America	2011	1842.7915298310008
United States of America	2012	1862.321358502
United States of America	2013	1877.873296906999
United States of America	2014	1982.1863286459998
United States of America	2015	2142.3243470760012
	// UDACITY DAND - Data Visualisation - Giacomo Sarchioni

	/*This JavaScript modules contains all the code for extracting
	data on the Data Analyst Nanodegree - Data Visualisation project.*/

	// Extract max value of the max values in an object
	function extract_MaxMax(data) {
	return d3.max(data, function(d) {
	return d3.max(d.values, function(d) {
	return d.value;
	});
	});
	};

	// Extract purpose percentage
	function extract_PurposePerc(datum, index) {
	return format_Perc(datum.values[index].value);
	};

	// Extract years from geo dataset
	function extract_Years(data) {

	// Use a for loop and an empty set
	years = d3.set();

	data.forEach(function(d) {
	years.add(d.year);
	})

	return years.values();
	};

	// Extract data of a specific country
	function extract_CountryData(countries, country) {

	// Return visitors array for a given country
	var filterData = countries.filter(function(d) {
	return d.properties.name == country;
	});

	// Return data only if there are visitors values.
	if(filterData.data()[0].properties.visitors) {
	return filterData.data()[0].properties.visitors;
	};
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>DAND - Data Viz</title>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://d3js.org/colorbrewer.v1.min.js"></script>
	<!-- https://github.com/d3/d3-scale-chromatic -->
	<script src="https://d3js.org/d3-color.v1.min.js"></script>
	<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

	<script type="text/javascript" src='setup.js'></script>
	<script type="text/javascript" src='format.js'></script>
	<script type="text/javascript" src='utility.js'></script>
	<script type="text/javascript" src='parse.js'></script>
	<script type="text/javascript" src='ttip.js'></script>
	<script type="text/javascript" src='create.js'></script>
	<script type="text/javascript" src='extract.js'></script>
	<script type="text/javascript" src='convert.js'></script>
	<script type="text/javascript" src='legend.js'></script>

	<script type="text/javascript" src='trends.js'></script>
	<script type="text/javascript" src='map.js'></script>

	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="newstyle.css">
	</head>
	<body>

	<!--Tooltip as per Scott Murray-->
	<div id="tooltip" class='hidden trend map'>
	<p><span id='tooltip-title'></span></p>
	<p><span id='tooltip-value'></span></p>
	</div>

	<script type="text/javascript">

	//----------------------------------------------------------//

	// * CHART AND DRAWING AREA *
	// Add chart
	var chart = d3.select("body")
	.append("svg")
	.attr("width", outerWidth)
	.attr("height", outerHeight)
	.append('g');


	// TEST: Append chart buttons
	var buttons = ['visits', 'purpose', 'origin'];
	chart.selectAll('text')
	.data(buttons)
	.enter()
	.append('text')
	.attr('class', 'button')
	.attr('x', function(d, i) {
	return 0.7 * innerWidth + i * 60;
	})
	.attr('y', 1.2 * padding.top)
	.attr('id', function(d) {return d;})
	.text(function(d) {
	return d;
	});

	// Add drawing area
	var area = chart.append('g')
	.attr('class', 'area');
	// Append title
	chart.append('g')
	.attr('id', 'title')
	.attr('transform', 'translate(' + (3 * padding.left) + ',' + (1.3 * padding.top) + ')')
	.append('text')
	.style("text-anchor", "start");

	// Start with first visulisation
	trends(1);

	// Add click behaviour to buttons
	d3.select('#visits')
	.on('click', function() {
	trends(1)
	});
	d3.select('#purpose')
	.on('click', function() {
	trends(2)
	});

	d3.select('#origin')
	.on('click', function() {
	map();
	})


	</script>
	</body>
	</html>
	// UDACITY DAND - Data Visualisation - Giacomo Sarchioni

	/*This JavaScript modules contains all the code for adding a legend to
	the map of the Data Analyst Nanodegree - Data Visualisation project.*/

	// Add legend
	function legend_Add() {

	// Append legend to area
	var legend = area.append('g')
	.attr('class', 'map legend')
	.attr('transform', 'translate(' + (5.2 * padding.right) + ',' + (0.88 * outerHeight + 25) + ')');

	// Define legendData
	var legendData = [];
	for (var i = 0; i < 150; i += 1) {
	legendData.push(i);
	};

	// Update legend scale
	legendColor.domain([0, legendData.length - 1]);

	// Add legend sections
	legend.append('g')
	.attr('class', 'legend-bar')
	.selectAll('rect')
	.data(legendData)
	.enter()
	.append('rect')
	.attr('x', function(d) {return d})
	.attr('y', '5')
	.attr('height', '10')
	.attr('width', '1')
	.attr('fill', function(d, i) {
	return utility_ColorMapInterpolate(i, true);
	});

	// Append title
	legend.append('text')
	.attr('class', 'legend-title')
	.text('International Visitors to London');

	// Append min
	legend.append('text')
	.attr('class', 'legend-range min')
	.text(0)
	.attr("transform","translate(0" +',' + 30 + ')');

	// Append max
	legend.append('text')
	.attr('class', 'legend-range')
	.text(format_Units(mapColor.domain()[1]))
	.attr("transform","translate(" + 150 +',' + 30 + ')');

	};
	/// UDACITY DAND - Data Visualisation - Giacomo Sarchioni

	/*This JavaScript modules contains the code for rendering the
	visualisation of the final chart in the project (i.e. map)*/
	function map() {

	// Remove all elements in area
	utility_RemoveObjs('*');

	// Change tooltip classes
	utility_ChangeClass('#tooltip', 'trend', false);
	utility_ChangeClass('#tooltip', 'map', true);
	utility_ChangeClass('#tooltip', 'hidden', false);

	// Change tooltipWidth to 200 px
	ttip_ChangeWidth(200);

	// Change tooltip position
	ttip_ChangePosition(5.2 * padding.right, 0.65 * outerHeight);

	// Make tooltip title and value empty
	ttip_ChangeTitle('');
	ttip_ChangeValue('');

	// Change title
	utility_ChangeChartTitle('International Visitors to London by Country of Origin');

	// Append yearBox
	var yearBox = area.append('text')
	.attr('x', 5.2 * padding.right)
	.attr('y', 0.88 * outerHeight)
	.attr('class', 'map year')

	// Append focus
	var focus = area.append('g')
	.attr('id', 'focus')
	.attr('class', 'map')
	.attr('transform', 'translate(' + (5.2 * padding.right) + ',' + (0.6 * outerHeight) + ')');

	// File downloaded from natural earth data as per Scott Murray
	// File was simplified with mapshaper
	// coropleth chapter from Scott Murray
	d3.csv('dataset_geo.csv', parse_Map, function(data) {

	// Extract years
	var years = extract_Years(data);

	// Add first year to text of yearBox
	yearBox.text(years[0]);

	// Get BBox of yearBox
	var box = yearBox.node().getBBox();

	// Define domain and range of yearBoxScale
	yearBoxScale.domain([years[0], years[years.length - 1]])
	.range([box.x + 5, box.x + box.width - 20]);

	// Update xScale
	xScale.rangeRoundBands([5, box.width], 0.05);

	// Append xAxis
	focus.append('g').attr('class', 'axis focus-x');

	// Call xScale on xAxis
	xFocusAxis.tickValues([years[0], years[years.length - 1]])
	.scale(xScale);
	focus.select('.focus-x').call(xFocusAxis);

	// Update yScale
	yScale.range([-30, 0]);

	// Append yAxis
	focus.append('g').attr('class', 'axis focus-y');

	// Nesting by market, i.e. by country of origin
	// https://github.com/d3/d3-collection#nests
	var nested = d3.nest()
	.key(function(d) {
	return d.market;
	})
	.entries(data);

	/*Update mapColor domain (max is the maximum number of
	international visitors from a country throughout history)*/
	mapColor.domain([0, format_RoundUpThousand(extract_MaxMax(nested))]);

	//http://bl.ocks.org/lucguillemot/37cc6eccbdd365556feb
	// Format legend
	legend_Add();

	/*Convert nested values from array of objects to a single
	object, where keys are represented by the years*/
	var nested = convert_NestedToObject(nested);

	// Load geoJSON data
	d3.json('world_simple.json', function(json) {

	// Add data to map as per Scott Murray choropleth
	for (var i = 0; i < nested.length; i++) {

	var dataCountry = nested[i].key;
	var dataValues = nested[i].values;

	for (var j = 0; j < json.features.length; j++) {

	var mapCountry = json.features[j].properties.name;

	if (dataCountry == mapCountry) {

	json.features[j].properties.visitors = dataValues;
	break;
	}
	}
	};

	// Bind data
	var countries = area.selectAll('path')
	.data(json.features)
	.enter()
	.append('path')
	.attr('d', mapPath)
	.attr('class', 'map country');

	// Change tooltip value based on countryData
	function newTtipValue(countryData, year) {

	if(countryData[year]) {

	return format_Units(countryData[year]);

	} else {

	return 'N/A';

	}
	};

	// Create focus mini chart, i.e. a line chart with a circle for a given year
	function appendFocusChart(country, year) {

	// Remove any existing focus line
	utility_RemoveObjs('.focus-line');

	// Remove any existing focus circle
	utility_RemoveObjs('.focus-circle');

	// Extract countryData
	var countryData = extract_CountryData(countries, country);

	// Change tooltip value
	ttip_ChangeValue(newTtipValue(countryData, year));

	// Convert to focusData
	var focusData = convert_CountryData(countryData);

	// Update yScale
	yScale.domain([
	d3.max(focusData, function(d) {
	return d.value;
	}),
	d3.min(focusData, function(d) {
	return d.value;
	})]);

	// Update yAxis scale
	yFocusAxis.scale(yScale)

	// Call yAxis
	focus.select('.focus-y').call(yFocusAxis);

	// Append focus line
	focus.append('path')
	.attr('d', line(focusData))
	.attr('class', 'focus-line');

	// Append circle
	focus.append('circle')
	.attr('r', 4)
	.attr('class', 'focus-circle')
	.attr('cx', function() {

	return xScale(year) + xScale.rangeBand() / 2;

	})
	.attr('cy', function() {

	return yScale(countryData[year])

	});
	};

	// Start with the US
	ttip_ChangeTitle('United States of America');

	// Append focusChart
	appendFocusChart(d3.select('#tooltip-title').node().textContent, years[0]);

	// Initialise chart
	updateMap(years[0]);

	function updateMap(year) {

	// Transition country fills
	countries.transition()
	.duration(50)
	.style('fill', function(d) {

	if(d.properties.visitors) {

	if(d.properties.visitors[year]) {

	return utility_ColorMapInterpolate(d.properties.visitors[year]);
	};
	};
	});

	// Transition yearBox value
	yearBox.transition()
	.duration(50)
	.text(year);

	// Extract name of country in tooltip
	var country = d3.select('#tooltip-title').node().textContent;

	// Extract country data
	var countryData = extract_CountryData(countries, country);


	// Update tooltip-value
	d3.select('#tooltip-value')
	.transition()
	.duration(500)
	.text(newTtipValue(countryData, year));

	// Update circle
	focus.select('circle')
	.transition()
	.duration(50)
	.attr('cx', xScale(year) + xScale.rangeBand()/2)
	.call(function() {

	// Extract countryData
	var state = d3.select('#tooltip-title').node().textContent;
	var countryData = extract_CountryData(countries, state)

	if(countryData[year]) {

	// Change circle position
	this.attr('cy', yScale(countryData[year]));

	// Change circle fill
	this.style('fill', 'red');

	} else {

	// Change circle fill
	this.style('fill', 'white');

	}
	});

	// Add countries mouseover and click effect
	countries.on('mouseover', function(d) {

	if(d.properties.visitors) {

	// Change the cursor
	d3.select(this).style('cursor', 'pointer');

	};

	})
	.on('click', function(d) {

	// Define previous country value
	var previousCountry = d3.select('#tooltip-title')[0][0].textContent;

	// Extract clicked state
	var clickedCountry= d.properties.name;

	// Change tooltip title
	ttip_ChangeTitle(clickedCountry);

	// Change focus and tooltip based on country value
	if(clickedCountry != previousCountry) {

	if(d.properties.visitors) {

	// Append focusChart
	appendFocusChart(clickedCountry, year);

	};
	};
	});
	};

	// Add yearBox mousemove effect
	yearBox.on('mousemove', function() {

	// Cancel current transition if any
	area.transition().duration(0);

	// Extract year using yearBoxScale
	var yearValue = Math.round(yearBoxScale.invert(d3.mouse(this)[0]));

	// Trim yearValue
	if(yearValue < years[0]) {

	yearValue = years[0];

	} else if (yearValue > years[years.length - 1]) {

	yearValue = years[years.length -1];

	} else {

	// Conver number to string
	yearValue = yearValue.toString();

	};

	// Change text of yearBox
	yearBox.transition()
	.duration(150)
	.text(yearValue);

	// Update map
	updateMap(yearValue);
	});
	});
	});
	};
	//// UDACITY DAND - Data Visualisation - Giacomo Sarchioni/
	/This is the main CSS stylesheet for the project/
	.axis {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300i;
	font-size: 14px;
	}

	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.axis path {
	display: none;
	}

	.bar {
	fill: #428bca;
	}

	.bar.highlight {
	fill: #ffbf00;
	}

	.country {
	stroke: #beb7b7;
	stroke-width: 0.75;
	fill: white;
	}

	.focus-circle {
	fill: red;
	stroke: white;
	stroke-width: 2;
	}

	.focus-line {
	fill: none;
	stroke: rgb(8,52,112);
	stroke-width: 2;
	}

	.focus-x {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300i;
	font-size: 10px;
	}

	.focus-y line{
	shape-rendering: crispEdges;
	stroke: #000;
	}

	.hidden {
	display: none;
	}

	.legend-range {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300i;
	font-size: 12px;
	text-anchor: end;
	fill: #beb7b7;
	}

	.legend-title {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	font-size: 12px;
	text-anchor: start;
	fill: grey;
	}

	.legend-range.min{
	text-anchor: start;
	}

	.line {
	fill: none;
	}

	.purpose path {
	stroke-width: 2;
	}

	.purpose text {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	font-size: 16px;
	}

	.purpose.focused path {
	stroke-width: 3;
	}

	.purpose.focused text {
	font-weight: 400;
	}

	.purpose.unfocused path {
	stroke: #d8d8d8;
	}

	.purpose.unfocused text {
	fill: #d8d8d8;
	}

	.purpose .percentage-box {
	text-align: left;
	alignment-baseline: middle;
	}

	.purpose .purpose-box {
	cursor: default;
	text-anchor: start;
	}

	.tick line {
	stroke-width: 0.5;
	opacity: 0.3;
	}

	#title {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: 18px;
	}

	#tooltip {
	position: absolute;
	pointer-events: none;
	height: auto;
	}

	#tooltip.map{
	position: absolute;
	text-align: left;
	height: auto;
	padding: 10px;
	background-color: none;
	pointer-events: none;
	}

	#tooltip.trend {
	text-align: center;
	padding: 10px;
	background-color: white;
	border-style: solid;
	border-color: black;
	border-width: 1px;
	opacity: 0.9;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	}

	#tooltip p {
	margin: 0;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	line-height: 20px;
	}

	#tooltip-title {
	font-weight: 700;
	}

	.year {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	font-size: 80px;
	fill: grey;
	cursor: ew-resize;
	}
	// UDACITY DAND - Data Visualisation - Giacomo Sarchioni

	/*This JavaScript modules contains all the code for setting up the
	page for the Data Analyst Nanodegree - Data Visualisation project.*/

	// ### MARGINS ###
	//Margins as per convention from bl.ocks.org
	var margin = {top: 20, right: 10, bottom: 20, left: 10};
	var padding = {top: 20, right: 20, bottom: 20, left:20};
	var outerWidth = 960,
	outerHeight = 500,
	width = outerWidth - margin.left - margin.right,
	height = outerHeight - margin.top - margin.bottom,
	innerWidth = width - padding.left - padding.right,
	innerHeight = height - padding.top - padding.bottom;

	// ### AXIS SCALES ###
	// xScale
	var xScale = d3.scale.ordinal();
	// yScale
	var yScale = d3.scale.linear();
	// Scale for yearBox
	var yearBoxScale = d3.scale.linear();

	// ### COLOR SCALES ###
	// Color scale for trend chart
	var purposeColor = d3.scale.ordinal().range(colorbrewer.Set1[5]);
	// Scale for legend
	var legendColor = d3.scale.linear().range([0,1]);
	// Color scale for map
	var mapColor = d3.scale.linear().range([0,1]);

	// ### AXIS ###
	var xAxis = d3.svg.axis().orient('bottom');
	var yAxis = d3.svg.axis().orient('left').ticks(4);
	var xFocusAxis = d3.svg.axis().orient('bottom').innerTickSize(0).tickPadding(5);
	var yFocusAxis = d3.svg.axis().orient('left').ticks(0);

	// ### LINE ###
	var line = d3.svg.line()
	.x(function(d) { return xScale(d.year) + xScale.rangeBand() / 2; })
	.y(function(d) { return yScale(d.value); });

	// ### PROJECTIONS ###
	var mapProjection = d3.geo.mercator()
	.scale(105)
	.translate([outerWidth/1.65, outerHeight/1.4]);
	var mapPath = d3.geo.path().projection(mapProjection);
	/// UDACITY DAND - Data Visualisation - Giacomo Sarchioni

	/*This JavaScript modules contains the code for rendering the
	visualisation of the first two charts in the project (i.e. Trends)*/

	function trends(story) {

	// Remove any map
	utility_RemoveObjs('.map');

	// Change tooltip classes
	utility_ChangeClass('#tooltip', 'trend', true);
	utility_ChangeClass('#tooltip', 'map', false);
	utility_ChangeClass('#tooltip', 'hidden', true);

	// Define tooltip width
	var tooltipWidth = 80;

	// Define range for xScale
	xScale.rangeRoundBands([
	5 * padding.left,
	outerWidth - 3 * padding.right],
	0.05);

	// Define range for yScale
	yScale.range([innerHeight, 5 * padding.top]);

	// Upload data
	var data = d3.csv('dataset.csv', parse_Trend, function(data) {

	// Append xAxis
	area.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0,' + (innerHeight + padding.bottom) + ')')

	// Append yAxis
	area.append('g')
	.attr('class', 'y axis')
	.attr('transform', 'translate(' + 4.5 * padding.left + ',0)')

	// Update xScale domain and call axis
	xScale.domain(data.map(function(d) {return d.year; }));
	xAxis.scale(xScale);
	area.select('.x').call(xAxis)

	// Choose story to render based on input
	if(story==1) {

	drawTrendOne(data);

	} else {

	drawTrendTwo(data);

	};

	// Define function to render first trend story
	function drawTrendOne(data) {

	// Remove object from second trend, i.e. purpose (if any)
	utility_RemoveObjs('.purpose');

	// Hide tooltip
	utility_ChangeClass('#tooltip', 'hidden', true);

	// Change tooltip width
	ttip_ChangeWidth(tooltipWidth);

	// Change title
	utility_ChangeChartTitle('International Visitors to London (in Millions)');

	// Update yScale domain and format, and call axis
	yScale.domain([0, d3.max(data, function(d) {
	return d.visits;
	})]);
	yAxis.tickFormat(function(d) {return format_Mill(d);})
	.innerTickSize(0)
	.scale(yScale);
	area.select('.y').call(yAxis);

	// Bind data
	var bars = area.selectAll('rect')
	.data(data)

	bars.enter()
	.append('rect')
	.attr('class', 'bar')
	.attr('width', xScale.rangeBand())
	.attr('height', 0)
	.attr('x', function(d) {
	return xScale(d.year);
	})
	.attr('y', innerHeight)
	// add transition
	.transition()
	.delay(function(d, i) {
	return i / (data.length - 1) * 500;
	})
	.duration(500)
	.attr('y', function(d) {
	return yScale(d.visits)
	})
	.attr('height', function(d) {
	return innerHeight - yScale(d.visits);
	});

	// Add mouseover and mouseout effects
	bars.on('mouseover', function(d) {

	// Extract x position
	var xPos = this.getAttribute('x');

	// Calculate left and top for tooltip
	var left = xPos - (tooltipWidth - xScale.rangeBand()) / 2
	var top = innerHeight - 3.5 * padding.bottom;

	// Change tooltip position
	ttip_ChangePosition(left, top);

	// Change tooltip's title and value
	ttip_ChangeTitle(d.year);
	ttip_ChangeValue(format_Mill(d.visits, tooltip = true));

	// Make tooltip visible and change style
	utility_ChangeClass('#tooltip', 'hidden', false);
	utility_ChangeClass('#trend', 'hidden', false);

	// Change class of bar to highlight
	utility_ChangeClass(this, 'highlight', true);

	})
	.on('mouseout', function() {

	// Change tooltip class to hidden
	utility_ChangeClass('#tooltip', 'hidden', true);

	// Reset bar, i.e. remove highlight class
	utility_ChangeClass(this, 'highlight', false);

	})
	};

	// Define function to render the second story
	function drawTrendTwo(data) {

	// Hide tooltip
	utility_ChangeClass('#tooltip', 'hidden', true);

	// Remove bars with transition
	area.selectAll('.bar')
	.transition()
	.duration(750)
	.attr('y', innerHeight)
	.attr('height', 0)
	.remove();

	// Change chart title
	utility_ChangeChartTitle('Purpose of International Visits to London (% of visitors)')

	// Create dataPurposes object
	// https://bl.ocks.org/mbostock/3884955
	var dataPurposes = create_PurposesData(data);

	// Update trendColor scale domain
	purposeColor.domain(dataPurposes.map(function(d) {return d.purpose; }))

	// Update yScale domain
	yScale.domain([0, extract_MaxMax(dataPurposes)])

	// Update yAxis formatting and call it
	yAxis.ticks(3)
	.tickFormat(function(d) {return format_Perc(d); })
	.innerTickSize(-innerWidth + 3 * padding.right)
	.scale(yScale);
	area.select('.y').call(yAxis);

	// Bind data
	var purposes = area.selectAll('.purpose')
	.data(dataPurposes)
	.enter()
	.append('g')
	.attr('class', function(d) {

	return d.purpose + ' purpose'

	});

	// Add line with animation
	//https://css-tricks.com/svg-line-animation-works/
	purposes.append("path")
	.attr("class", 'line')
	.attr("d", function(d) {

	return line(d.values);

	})
	.attr("stroke", function(d) {

	return purposeColor(d.purpose);

	})
	.style("stroke-dasharray", innerWidth)
	.style('stroke-dashoffset', innerWidth)
	.transition()
	.duration(1500)
	.style('stroke-dashoffset', 0);

	// http://bl.ocks.org/d3noob/8603837
	// Add text at the beginning of the line
	purposes.append('text')
	.attr('class', 'purpose-box')
	.attr('x', function(d) {

	return xScale(d.values[0].year) + xScale.rangeBand() / 2;

	})
	.attr('y', function(d) {

	var purpose = this.parentElement.classList[0];
	return format_PurposeBoxY(purpose, d, 0);

	})
	.text(function(d) {

	var purpose = this.parentElement.classList[0];
	return convert_PurposeName(purpose, d);

	})
	.attr('fill', function(d) {

	return purposeColor(d.purpose);

	})
	.style('opacity', 0)
	.transition()
	.duration(1500)
	.style('opacity', 1);

	// Add text at the end of the line
	purposes.append('text')
	.attr('class', 'percentage-box')
	.attr('x', function(d) {

	return xScale(d.values[d.values.length - 1].year) + 35;

	})
	.attr('y', function(d) {

	var purpose = this.parentElement.classList[0];
	return yScale(d.values[d.values.length - 1].value);

	})
	.text(function(d) {

	// Extarct precentage of last value
	return extract_PurposePerc(d, d.values.length - 1);

	})
	.attr('fill', function(d) {return purposeColor(d.purpose); })
	.style('opacity', 0)
	.transition()
	.duration(1500)
	.style('opacity', 1);

	// Add mouseover and mouseout effects when selecting purpose-box
	// Problem of JS taking precedence over CSS
	// http://stackoverflow.com/questions/15709304/d3-color-change-on-mouseover-using-classedactive-true
	area.selectAll('.purpose-box')
	.on('mouseover', function() {

	// Move selection to front
	d3.select(this.parentElement).format_MoveToFront();

	// Extract purpose
	var selectedPurpose = this.parentElement.classList[0];

	// Change class based on selection
	area.selectAll('.purpose')
	.classed('unfocused', function() {

	if(this.classList[0] != selectedPurpose) {
	return true;
	};
	})
	.classed('focused', function() {

	if(this.classList[0] == selectedPurpose) {
	return true;
	};

	});

	})
	.on('mouseout', function() {

	utility_ChangeClassAll('.purpose', 'unfocused', false);
	utility_ChangeClassAll('.purpose', 'focused', false);

	});
	}
	});
	};