gcmsrc · January 22, 2017 17:44
diff --git a/dataset.csv b/dataset.csv
diff --git a/dataset_geo.csv b/dataset_geo.csv
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='support.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 focus-bar 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");

 		// 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();
 		  })

 		// This function draws charts for points 3 and 4
 		/*var map = function() {

 			// Remove elements in area
 			remove_object('*', all=true)
 			
 			// Define color function
 			var color = d3.scale.linear()
 					  	  .range([0,1]);

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

 			// 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', parseMap, function(data) {
 				
 				// Extract years
 				var years = d3.set();

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

 				var years = years.values();

 				// 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 color domain
 				color.domain([0,
 					roundUpThousand(d3.max(nested, function(d) {
 						return d3.max(d.values, function(x) {
 							return +x.visits;
 						});
 					}))]);
 				
 				// Transform nested from array of objects to object
 				nested.forEach(function(x) {
 					
 					// Empty object
 					var rv = {};

 					x.values.forEach(function(d, i) {
 						rv[d.year] = {
 							visits: d.visits,
 							spend: d.spend,
 							rel_spend: d.spend / d.visit
 						}
 					});

 					// Replace array with object
 					x.values = rv;
 				})

 				// Load json data (map)
 				d3.json('coord_names_only.json', function(json) {

 					// Enrich map with nested data
 					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 jsonCountry = json.features[j].properties.name;

 							if (dataCountry == jsonCountry) {

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

 					// *** Bind data ***
 					var countries = area.selectAll('path')
 										.data(json.features)
 										.enter()
 										.append('path')
 										.attr('d', path)
 										.attr('class', 'map country')
 										.style('stroke', 'white')
 										.style('stroke-width', 0.75)
 										.style('fill', 'white');
 					
 					// Append year box
 					var year_box = area.append('text')
 									   .attr('x', 4 * padding.right)
 									   .attr('y', 0.88 * outerHeight)
 									   .attr('class', 'year map')
 									   .style('opacity', 0)

 					// *** TEST ***
 					// *************************
 					var focus = area.append('g')
 								    .attr('id', 'focus')
 								    .attr('class', 'hidden map')
 								    .attr('transform', 'translate(' + 4 * padding.right + ',' + 0.63 * outerHeight + ')')

 					var yearAxis = d3.svg.axis()
 									 .orient('bottom')
 									 .innerTickSize(0)
 									 .tickValues([2002, 2015])
 									 .tickPadding(5)

 					focus.append('g')
    		   			 .attr('class', 'axis focus-x');
 					
 					var xScale = d3.scale.ordinal()
 					   .rangeRoundBands([5, 130], 0.05)
 					   .domain(years)

 					yearAxis.scale(xScale);
 					area.select('.focus-x')
 			    		.call(yearAxis);


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

 			    	var yScale = d3.scale.linear()
 			    				   .range([-30,0]);

 			    	var valueAxis = d3.svg.axis()
 									  .orient('left')
 									  .ticks(0);

 			    	var countryData = function(state) {
 			    		return area.selectAll('.country')
 			    		           .filter(function(d) {
 			    		           		return d.properties['name'] == state;
 			    		           	}).data()[0].properties.visitors;
 			    	};*/


 			    	// *************************
 					// *** END TEST ***

 					// Define update function
 					/*var update_map = function(year) {

 						// Update fill
 						countries.transition()
 								 .duration(50)
 								 .style('stroke', '#beb7b7')
 								 .style('fill', function(d) {

 								 	// Check if visitors and year data is available
 								 	if(d.properties.visitors) {
 								 		if(d.properties.visitors[year]) {
 								 			var dataColor = color(+d.properties.visitors[year].visits);
 								 			return d3.interpolateBlues(dataColor);
 								 		} else {
 								 			return 'white'
 								 		}
 								 	} else {
 								 		return 'white'
 								 	}					   	
 								 })

 						// Update year box
 						year_box.transition()
 								.duration(50)
 								.text(year)
 								.style('opacity', 1);

 						// Update tootltip value
 						d3.select('#tooltip-value')
 						  .text(function() {
 						  	if (this.textContent != '') {

 						  		var state = d3.select('#tooltip-title').node().textContent;
 						  	
 						  		var stateData = countryData(state);
 						  		
 						  		if (stateData[year]) {
 						  			d3.select(this)
 						  			  .transition()
 						  			  .duration(500)
 						  			  .text(formatMap(stateData[year].visits))
 						  		} else {
 						  			d3.select(this)
 						  			  .transition()
 						  			  .duration(500)
 						  			  .text('N/A');
 						  		}

 						  	}
 						 });
 						 
 						 // Update circle (if any)
 						 if(focus.select('circle')[0][0]) {
 						 	focus.select('circle')
 						 		 .transition()
 						 		 .duration(50)
 						 		 .attr('cx', xScale(year) + xScale.rangeBand()/2)
 						 		 .attr('cy', function() {
 						 		 	
 						 		 	var state = d3.select('#tooltip-title').node().textContent;
 						 		 	var stateData = countryData(state)

 						 		 	if(stateData[year]){
 						 		 		return yScale(+stateData[year].visits);
 						 		 	}
 						 		 	

 						 		 })
 						 		 .style('fill', function() {
 						 		 	var state = d3.select('#tooltip-title').node().textContent;
 						 		 	var stateData = countryData(state)

 						 		 	if(!stateData[year]) {
 						 		 		return 'white';
 						 		 	} else {
 						 		 		return 'red';
 						 		 	}

 						 		 	
 						 		 })
 						 }

 						// Behaviour of clicking on map
 						//debugger;

 						// Update mouseover behaviour
 						countries.on('mouseover', function(d) {

 									// Check if visitors and year data is available
 									if (d.properties.visitors) {
 										if (d.properties.visitors[year]) {
 											// Change the cursor
 											d3.select(this)
 											.style('cursor', 'pointer');
 										}
 									}
 							      })
 								  .on('click', function(d) {

 								  	var previous = null;
 								  	
 								  	if (d3.select('#tooltip-title')[0][0].textContent != '') {
 								  		previous = d3.select('#tooltip-title')[0][0].textContent;
 								  	}
 	  								
 	  								var current = d.properties.name;
 								  	// Check if selected
 								  	
 								  	var active = this.active? true:false;
 								  	console.log(previous, current, active)
 									
 									// Check if visitors and year data is available
 									if (d.properties.visitors) {

 										if (d.properties.visitors[year]) {
 											
 											// Change tooltip
 											d3.select("#tooltip")
 											.style("left", (4 * padding.right) + "px")
 											.style("top", (0.68 * outerHeight) + 'px')
 											.style("width", '200px')
 											.classed('map', true)
 											.classed('trend', false)

 											// Add tooltip content
 											d3.select('#tooltip-title')
 											.text(current);

 											d3.select("#tooltip-value")
 											.text(formatMap(d.properties.visitors[year].visits));

 											// Make tooltip visible
 											//http://bl.ocks.org/d3noob/5d621a60e2d1d02086bf

 											// TESTING
 											var state = d.properties.name;
 											var stateData = countryData(state);

 											var test = Object.keys(stateData)
 											     			 .map(function(key) {
 											     			 	return {
 											     			 		'x':key,
 											     			 		'y':stateData[key].visits
 											     			 	}
 											     			 })
 											yScale.domain([
 												d3.max(test, function(d) {
 													return +d.y;
 												}),
 												d3.min(test, function(d) {
 													return +d.y;
 												})]);

 											valueAxis.scale(yScale);
 											focus.select('.focus-y')
 			    								.call(valueAxis);

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

 							     			if (previous!=current) {
 							     				
 							     				focus.select('.focus-line')
 							     					 .remove();

 							     				focus.select('.focus-circle')
 							     					 .remove();

 							     				focus.append('path')
 							     			     .attr('d', testLine(test))
 							     			     .attr('class', 'focus-line')

 							     			    focus.append('circle')
 							     			    	 .attr('r', 4)
 							     			    	 .attr('class', 'focus-circle')
 							     			    	 .attr('cx', function() {
 							     			    	 	return xScale(year) + xScale.rangeBand() / 2;
 							     			    	 })
 							     			    	 .attr('cy', function() {
 							     			    	 	return yScale(stateData[year].visits)
 							     			    	 })
 							     			    	 .style('fill', 'red')
 							     			    	 .style('stroke', 'white')
 							     			    	 .style('stroke-width', 2)

 							     			    d3.select('#focus')
 												  	.classed('hidden', false);

 												d3.select('#tooltip')
 												  .classed('hidden', false);

 							     			} else {
 							     				
 							     				focus.select('.focus-line')
 							     					 .remove();

 							     				focus.select('.focus-circle')
 							     					 .remove();

 							     				d3.select('#focus')
 												  	.classed('hidden', true);

 												d3.select('#tooltip')
 												  .classed('hidden', true);

 												d3.select('#tooltip-title')
 												  .text('');					     				
 							     			}

 											// END TESTING
 											this.active = !active;	

 										} /*else  {
 											
 											if (d3.select('#tooltip-title').textContent != '') {
 												
 												d3.select('#tooltip')
 													  .classed('hidden', active);

 												d3.select('#focus')
 												  .classed('hidden', active);
 											}
 										}*/
 							/*		}
 								  });
 					};

 					var year = '2015'			
 					update_map(year);

 					year_box.on('mouseover', function() {

 						// Change cursor
 						d3.select(this)
 						  .style('cursor', 'ew-resize');

 						var box = year_box.node().getBBox();

 						var yearScale = d3.scale.linear()
 										  .domain([2002, 2015])
 										  .range([box.x + 5 , box.x + box.width - 5]);

 						year_box.on('mousemove', function() {

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

 							var value = Math.round(yearScale.invert(d3.mouse(this)[0]));

 							if(value < 2002) {
 								return 2002;
 							} else if (value > 2015) {
 								return 2015
 							}

 							year_box.transition()
 									.duration(150)
 									.text(value);
 	
 							update_map(value.toString());
 						})

 					})

 					// Add legend
 					//http://bl.ocks.org/lucguillemot/37cc6eccbdd365556feb
 					var legend = area.append('g')
 									 .attr('class', 'map legend')
 									 .attr('transform', 'translate(' + (4 * padding.right) + ',' + (0.88 * outerHeight) + ')')

 					var newData = [];
 					var legend_width = 150;
 					var divisions = 100;
 				    var sectionWidth = Math.floor(legend_width / divisions);

 				    for (var i=0; i < legend_width; i+= sectionWidth ) {
 				        newData.push(i);
 				    };

 				    var legend_scale = d3.scale.linear()
 				    					 .domain([0, newData.length - 1])
 				    					 .range([0, 1]);

 				    legend.selectAll('rect')
 				        .data(newData)
 				        .enter()
 				        .append('rect')
 				            .attr("x", function(d) { return d; })
 				            .attr("y", 10)
 				            .attr("height", 10)
 				            .attr("width", sectionWidth)
 				            .attr('fill', function(d, i) {
 				            	var dataColor = legend_scale(i);
 				            	return d3.interpolateBlues(dataColor);
 				            });

 				    legend.append("text")
 				    	  .attr('class', 'legend-range')
 				    	  .text(0)
 				    	  .attr("transform","translate(" + 2.5 +',' + 35 + ')')

 				    legend.append("text")
 				    	  .attr('class', 'legend-range')
 				    	  .text(formatMap(color.domain()[1]))
 				    	  .attr("transform","translate(" + 127.5 + ',' + 35 + ')')
 				})
 			

 				


 			})
 		};*/

 		

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

 	</script>
 </body>
 </html>
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
 	removeObjs('*');

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

 	// 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', parseMap, function(data) {

 		// Nesting by market, i.e. by country of origin
 		// https://github.com/d3/d3-collection#nests
 		var nested = extractNested(data);

 		/*Convert nested values from array of objects to a single
 		object, where keys are the years*/
 		nested.forEach(function(obj) {
 			
 			newObj = {};

 			obj.values.forEach(function(value) {
 				newObj[value.year] = value.visits
 			});

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

 		});

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

 			// Source Scott Murray choropleth
 			json = addDataToMap(nested, json);
 			
 			// Bind data
 			var countries = area.selectAll('path')
 							    .data(json.features)
 							    .enter()
 							    .append('path')
 							    .attr('d', mapPath)
 							    .attr('class', 'map country');
 			
 			// Append year-box
 			var year_box = area.append('text')
 							   .attr('x', 4 * padding.right)
 							   .attr('y', 0.88 * outerHeight)
 							   .attr('class', 'map year')
 							   .style('opacity', 0);

 			// ** DO LATER **
 			// Update and call xAxis
 			// Append focus group (i.e. where the small line chart is going to be)
 			var focus = area.append('g')
 							.attr('id', 'focus')
 							.attr('class', 'hidden map')
 							.attr('transform', 'translate(' + 4 * padding.right + ',' + 0.63 * outerHeight + ')');




 			
 		})



 	})

 };
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.focus {
 	fill: #ffbf00;
 }

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

 .hidden {
 	display: none;
 }

 .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.focus-bar {
 	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.focus-bar p {
 		margin: 0;
 		font-family: 'Roboto Condensed', sans-serif;
 		font-size: 16px;
 		line-height: 20px;
 	}

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






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

 /*This JavaScript modules contains all the supporting functions 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

 // ### UPDATING CHART ###
 // Title
 function changeTitle(newTitle) {
 	chart.select('#title')
 		 .select('text')
 		 .text(newTitle);
 };

 // ### FORMATTING ###
 // Formatting nymbers
 var formatDec = d3.format('.2f');
 var formatInt = d3.format(',.0f');
 var formatPerc = d3.format(',%');

 function formatMillAxis(value) {
 	return formatInt(parseFloat(value) / 1e3) + ' M';
 }

 function formatMill(value) {
 	return formatDec(parseFloat(value) / 1e3) + ' M';
 };

 function formatMap(value) {
 	return formatInt(parseFloat(value) * 1e3);
 };

 function roundUpThousand(value) {
 	/*Round up to the next hundredth thousand for a value expressed
 	in thousands*/
 	return Math.ceil(value / 1e2) * 1e2;
 };


 // ### DATA PARSING ###
 // Trends
 function parseTrends(data) {
 	for (var key in data) {
 		if (key != 'year') {
 			data[key] = +data[key];
 		}
 	}
 	return data;
 };
 // Map
 function parseMap(data) {
 	for (var key in data) {
 		if ((key!= 'year') && (key!='market')) {
 			data[key] = +data[key];
 		}
 	}
 	return data;
 };

 // ### OBJECT REMOVING ###
 // Remove objects from area
 function removeObjs(object) {
 	area.selectAll(object).remove();
 };

 // ### TOOLTIP MANAGING ###
 // Change tooltip title
 function changeTooltipTitle(newTitle) {
 	d3.select('#tooltip-title')
 	  .text(newTitle);
 }

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

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

 // Change tooltip class
 function changeTooltipClass(classed, boolean) {
 	d3.select('#tooltip')
 	  .classed(classed, boolean);
 }

 // Change tooltip position
 function changeTooltipPosition(left, top) {
 	d3.select('#tooltip')
 	  .style('left', left + 'px')
 	  .style('top', top + 'px');
 }

 // ### D3 SCALES ###
 // Axis scales
 var xScale = d3.scale.ordinal();
 var yScale = d3.scale.linear();

 // Color scales
 var trendColor = d3.scale.ordinal().range(colorbrewer.Set1[5]);
 var mapColor = d3.scale.linear().range([0,1]);


 // ### D3 AXIS ###
 var xAxis = d3.svg.axis().orient('bottom');
 var yAxis = d3.svg.axis().orient('left');

 // ### 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(110)
 					  .translate([outerWidth/1.7, outerHeight/1.35]);
 var mapPath = d3.geo.path().projection(mapProjection);

 // ### CREATE PURPOSE OBJECT ###
 function createPurposesData(data) {
 	/*Creates an object where for each purpose (key), there is an
 	array of values, one for every year*/
 	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;
 };


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

 // Extract properly formatted purpose name from an Object
 function extractPurposeName(purpose, datum) {
 	if(purpose == 'VFR') {
 		return 'Visiting friends and relatives'
 	} else {
 		return datum.purpose;
 	}
 };

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

 // Extract y of purpose-box
 function extractPurposeBoxY(purpose, datum, index) {
 	// Ad hoc code to position labelling correctly
 	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;
 	}
 };

 // Extract nested, i.e. visits data by country as a JS object
 function extractNested(data) {
 	return d3.nest()
 			 .key(function(d) {
 			 	return d.market;
 			 })
 			 .entries(data);
 };

 // Extract unique values from array of objects
 function extractUniques(data, field) {
 	var uniques = d3.set();

 	data.forEach(function(d) {
 		uniques.add(d[field]);
 	});

 	var uniques = uniques.values();

 	return uniques;

 };

 // ### MERGE DATASETS ***
 // Add visitors to data to geoJSON
 function addDataToMap(data, map) {

 	for (var i = 0; i < data.length; i++) {

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

 			if (dataCountry == mapCountry) {

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

 	return map;
 };

 // ### UPDATE MAP ###





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
 	removeObjs('.map');

 	// 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, 6 * padding.top]);

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

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

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

 		// Update axis
 		xAxis.innerTickSize(0);
 		yAxis.innerTickSize(0).ticks(4);

 		// 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)
 			removeObjs('.purpose');

 			// Hide tooltip
 			changeTooltipClass('hidden', true);

 			// Change tooltip width
 			changeTooltipWidth(tooltipWidth);

 			// Change title
 		    changeTitle('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 formatMillAxis(d);})
 		    	     .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 = parseFloat(d3.select(this).attr('x'));

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

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

 		    	// Change tooltip's title and value
 		    	changeTooltipTitle(d.year);
 		    	changeTooltipValue(formatMill(d.visits));

 		    	// Change tooltip width
 		    	changeTooltipWidth(80);

 		    	// Make tooltip visible and change style
 		    	changeTooltipClass('hidden', false);
 		    	changeTooltipClass('focus-bar', true);
 		    	
 		    	// Make bar focus
 		    	d3.select(this).classed('focus', true)
 		    })
 		    .on('mouseout', function(d) {

 		    	// Make tooltip invisile
 		    	changeTooltipClass('hidden', true);

 		    	// Reset bar color
 		    	d3.select(this).classed('focus', false);
 		    })
 		};

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

 			// Hide tooltip
 			changeTooltipClass('hidden', true);

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

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

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

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

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

 			// Update yAxis formatting and call it
 			yAxis.ticks(4)
 					 .tickFormat(function(d) {return formatPerc(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 trendColor(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 extractPurposeBoxY(purpose, d, 0);
 					})
 					.text(function(d) {
 						var purpose = this.parentElement.classList[0];
 						return extractPurposeName(purpose, d, 0);
 					})
 					.attr('fill', function(d) {
 						return trendColor(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 extractPurposePerc(d, d.values.length - 1);
 					})
 					.attr('fill', function(d) {
 						return trendColor(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() {

 					// 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() {
 					area.selectAll('.purpose')
 						.classed('unfocused', false)
 						.classed('focused', false);
 				})
 		}
 	});
 };
diff --git a/world_simple.json b/world_simple.json
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
	<!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='support.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 focus-bar 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");

	// 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();
	})

	// This function draws charts for points 3 and 4
	/*var map = function() {

	// Remove elements in area
	remove_object('*', all=true)

	// Define color function
	var color = d3.scale.linear()
	.range([0,1]);

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

	// 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', parseMap, function(data) {

	// Extract years
	var years = d3.set();

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

	var years = years.values();

	// 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 color domain
	color.domain([0,
	roundUpThousand(d3.max(nested, function(d) {
	return d3.max(d.values, function(x) {
	return +x.visits;
	});
	}))]);

	// Transform nested from array of objects to object
	nested.forEach(function(x) {

	// Empty object
	var rv = {};

	x.values.forEach(function(d, i) {
	rv[d.year] = {
	visits: d.visits,
	spend: d.spend,
	rel_spend: d.spend / d.visit
	}
	});

	// Replace array with object
	x.values = rv;
	})

	// Load json data (map)
	d3.json('coord_names_only.json', function(json) {

	// Enrich map with nested data
	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 jsonCountry = json.features[j].properties.name;

	if (dataCountry == jsonCountry) {

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

	// * Bind data *
	var countries = area.selectAll('path')
	.data(json.features)
	.enter()
	.append('path')
	.attr('d', path)
	.attr('class', 'map country')
	.style('stroke', 'white')
	.style('stroke-width', 0.75)
	.style('fill', 'white');

	// Append year box
	var year_box = area.append('text')
	.attr('x', 4 * padding.right)
	.attr('y', 0.88 * outerHeight)
	.attr('class', 'year map')
	.style('opacity', 0)

	// * TEST *
	// *************************
	var focus = area.append('g')
	.attr('id', 'focus')
	.attr('class', 'hidden map')
	.attr('transform', 'translate(' + 4 * padding.right + ',' + 0.63 * outerHeight + ')')

	var yearAxis = d3.svg.axis()
	.orient('bottom')
	.innerTickSize(0)
	.tickValues([2002, 2015])
	.tickPadding(5)

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

	var xScale = d3.scale.ordinal()
	.rangeRoundBands([5, 130], 0.05)
	.domain(years)

	yearAxis.scale(xScale);
	area.select('.focus-x')
	.call(yearAxis);


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

	var yScale = d3.scale.linear()
	.range([-30,0]);

	var valueAxis = d3.svg.axis()
	.orient('left')
	.ticks(0);

	var countryData = function(state) {
	return area.selectAll('.country')
	.filter(function(d) {
	return d.properties['name'] == state;
	}).data()[0].properties.visitors;
	};*/


	// *************************
	// * END TEST *

	// Define update function
	/*var update_map = function(year) {

	// Update fill
	countries.transition()
	.duration(50)
	.style('stroke', '#beb7b7')
	.style('fill', function(d) {

	// Check if visitors and year data is available
	if(d.properties.visitors) {
	if(d.properties.visitors[year]) {
	var dataColor = color(+d.properties.visitors[year].visits);
	return d3.interpolateBlues(dataColor);
	} else {
	return 'white'
	}
	} else {
	return 'white'
	}
	})

	// Update year box
	year_box.transition()
	.duration(50)
	.text(year)
	.style('opacity', 1);

	// Update tootltip value
	d3.select('#tooltip-value')
	.text(function() {
	if (this.textContent != '') {

	var state = d3.select('#tooltip-title').node().textContent;

	var stateData = countryData(state);

	if (stateData[year]) {
	d3.select(this)
	.transition()
	.duration(500)
	.text(formatMap(stateData[year].visits))
	} else {
	d3.select(this)
	.transition()
	.duration(500)
	.text('N/A');
	}

	}
	});

	// Update circle (if any)
	if(focus.select('circle')[0][0]) {
	focus.select('circle')
	.transition()
	.duration(50)
	.attr('cx', xScale(year) + xScale.rangeBand()/2)
	.attr('cy', function() {

	var state = d3.select('#tooltip-title').node().textContent;
	var stateData = countryData(state)

	if(stateData[year]){
	return yScale(+stateData[year].visits);
	}


	})
	.style('fill', function() {
	var state = d3.select('#tooltip-title').node().textContent;
	var stateData = countryData(state)

	if(!stateData[year]) {
	return 'white';
	} else {
	return 'red';
	}


	})
	}

	// Behaviour of clicking on map
	//debugger;

	// Update mouseover behaviour
	countries.on('mouseover', function(d) {

	// Check if visitors and year data is available
	if (d.properties.visitors) {
	if (d.properties.visitors[year]) {
	// Change the cursor
	d3.select(this)
	.style('cursor', 'pointer');
	}
	}
	})
	.on('click', function(d) {

	var previous = null;

	if (d3.select('#tooltip-title')[0][0].textContent != '') {
	previous = d3.select('#tooltip-title')[0][0].textContent;
	}

	var current = d.properties.name;
	// Check if selected

	var active = this.active? true:false;
	console.log(previous, current, active)

	// Check if visitors and year data is available
	if (d.properties.visitors) {

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

	// Change tooltip
	d3.select("#tooltip")
	.style("left", (4 * padding.right) + "px")
	.style("top", (0.68 * outerHeight) + 'px')
	.style("width", '200px')
	.classed('map', true)
	.classed('trend', false)

	// Add tooltip content
	d3.select('#tooltip-title')
	.text(current);

	d3.select("#tooltip-value")
	.text(formatMap(d.properties.visitors[year].visits));

	// Make tooltip visible
	//http://bl.ocks.org/d3noob/5d621a60e2d1d02086bf

	// TESTING
	var state = d.properties.name;
	var stateData = countryData(state);

	var test = Object.keys(stateData)
	.map(function(key) {
	return {
	'x':key,
	'y':stateData[key].visits
	}
	})
	yScale.domain([
	d3.max(test, function(d) {
	return +d.y;
	}),
	d3.min(test, function(d) {
	return +d.y;
	})]);

	valueAxis.scale(yScale);
	focus.select('.focus-y')
	.call(valueAxis);

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


	if (previous!=current) {

	focus.select('.focus-line')
	.remove();

	focus.select('.focus-circle')
	.remove();

	focus.append('path')
	.attr('d', testLine(test))
	.attr('class', 'focus-line')

	focus.append('circle')
	.attr('r', 4)
	.attr('class', 'focus-circle')
	.attr('cx', function() {
	return xScale(year) + xScale.rangeBand() / 2;
	})
	.attr('cy', function() {
	return yScale(stateData[year].visits)
	})
	.style('fill', 'red')
	.style('stroke', 'white')
	.style('stroke-width', 2)

	d3.select('#focus')
	.classed('hidden', false);

	d3.select('#tooltip')
	.classed('hidden', false);

	} else {

	focus.select('.focus-line')
	.remove();

	focus.select('.focus-circle')
	.remove();

	d3.select('#focus')
	.classed('hidden', true);

	d3.select('#tooltip')
	.classed('hidden', true);

	d3.select('#tooltip-title')
	.text('');
	}

	// END TESTING
	this.active = !active;

	} /*else {

	if (d3.select('#tooltip-title').textContent != '') {

	d3.select('#tooltip')
	.classed('hidden', active);

	d3.select('#focus')
	.classed('hidden', active);
	}
	}*/
	/* }
	});
	};

	var year = '2015'
	update_map(year);

	year_box.on('mouseover', function() {

	// Change cursor
	d3.select(this)
	.style('cursor', 'ew-resize');

	var box = year_box.node().getBBox();

	var yearScale = d3.scale.linear()
	.domain([2002, 2015])
	.range([box.x + 5 , box.x + box.width - 5]);

	year_box.on('mousemove', function() {

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

	var value = Math.round(yearScale.invert(d3.mouse(this)[0]));

	if(value < 2002) {
	return 2002;
	} else if (value > 2015) {
	return 2015
	}

	year_box.transition()
	.duration(150)
	.text(value);

	update_map(value.toString());
	})

	})

	// Add legend
	//http://bl.ocks.org/lucguillemot/37cc6eccbdd365556feb
	var legend = area.append('g')
	.attr('class', 'map legend')
	.attr('transform', 'translate(' + (4 * padding.right) + ',' + (0.88 * outerHeight) + ')')

	var newData = [];
	var legend_width = 150;
	var divisions = 100;
	var sectionWidth = Math.floor(legend_width / divisions);

	for (var i=0; i < legend_width; i+= sectionWidth ) {
	newData.push(i);
	};

	var legend_scale = d3.scale.linear()
	.domain([0, newData.length - 1])
	.range([0, 1]);

	legend.selectAll('rect')
	.data(newData)
	.enter()
	.append('rect')
	.attr("x", function(d) { return d; })
	.attr("y", 10)
	.attr("height", 10)
	.attr("width", sectionWidth)
	.attr('fill', function(d, i) {
	var dataColor = legend_scale(i);
	return d3.interpolateBlues(dataColor);
	});

	legend.append("text")
	.attr('class', 'legend-range')
	.text(0)
	.attr("transform","translate(" + 2.5 +',' + 35 + ')')

	legend.append("text")
	.attr('class', 'legend-range')
	.text(formatMap(color.domain()[1]))
	.attr("transform","translate(" + 127.5 + ',' + 35 + ')')
	})





	})
	};*/



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

	</script>
	</body>
	</html>
	/// 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
	removeObjs('*');

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

	// 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', parseMap, function(data) {

	// Nesting by market, i.e. by country of origin
	// https://github.com/d3/d3-collection#nests
	var nested = extractNested(data);

	/*Convert nested values from array of objects to a single
	object, where keys are the years*/
	nested.forEach(function(obj) {

	newObj = {};

	obj.values.forEach(function(value) {
	newObj[value.year] = value.visits
	});

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

	});

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

	// Source Scott Murray choropleth
	json = addDataToMap(nested, json);

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

	// Append year-box
	var year_box = area.append('text')
	.attr('x', 4 * padding.right)
	.attr('y', 0.88 * outerHeight)
	.attr('class', 'map year')
	.style('opacity', 0);

	// DO LATER
	// Update and call xAxis
	// Append focus group (i.e. where the small line chart is going to be)
	var focus = area.append('g')
	.attr('id', 'focus')
	.attr('class', 'hidden map')
	.attr('transform', 'translate(' + 4 * padding.right + ',' + 0.63 * outerHeight + ')');





	})



	})

	};
	//// 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.focus {
	fill: #ffbf00;
	}

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

	.hidden {
	display: none;
	}

	.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.focus-bar {
	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.focus-bar p {
	margin: 0;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	line-height: 20px;
	}

	#tooltip-title {
	font-weight: 700;
	}
	/// UDACITY DAND - Data Visualisation - Giacomo Sarchioni

	/*This JavaScript modules contains all the supporting functions 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

	// ### UPDATING CHART ###
	// Title
	function changeTitle(newTitle) {
	chart.select('#title')
	.select('text')
	.text(newTitle);
	};

	// ### FORMATTING ###
	// Formatting nymbers
	var formatDec = d3.format('.2f');
	var formatInt = d3.format(',.0f');
	var formatPerc = d3.format(',%');

	function formatMillAxis(value) {
	return formatInt(parseFloat(value) / 1e3) + ' M';
	}

	function formatMill(value) {
	return formatDec(parseFloat(value) / 1e3) + ' M';
	};

	function formatMap(value) {
	return formatInt(parseFloat(value) * 1e3);
	};

	function roundUpThousand(value) {
	/*Round up to the next hundredth thousand for a value expressed
	in thousands*/
	return Math.ceil(value / 1e2) * 1e2;
	};


	// ### DATA PARSING ###
	// Trends
	function parseTrends(data) {
	for (var key in data) {
	if (key != 'year') {
	data[key] = +data[key];
	}
	}
	return data;
	};
	// Map
	function parseMap(data) {
	for (var key in data) {
	if ((key!= 'year') && (key!='market')) {
	data[key] = +data[key];
	}
	}
	return data;
	};

	// ### OBJECT REMOVING ###
	// Remove objects from area
	function removeObjs(object) {
	area.selectAll(object).remove();
	};

	// ### TOOLTIP MANAGING ###
	// Change tooltip title
	function changeTooltipTitle(newTitle) {
	d3.select('#tooltip-title')
	.text(newTitle);
	}

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

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

	// Change tooltip class
	function changeTooltipClass(classed, boolean) {
	d3.select('#tooltip')
	.classed(classed, boolean);
	}

	// Change tooltip position
	function changeTooltipPosition(left, top) {
	d3.select('#tooltip')
	.style('left', left + 'px')
	.style('top', top + 'px');
	}

	// ### D3 SCALES ###
	// Axis scales
	var xScale = d3.scale.ordinal();
	var yScale = d3.scale.linear();

	// Color scales
	var trendColor = d3.scale.ordinal().range(colorbrewer.Set1[5]);
	var mapColor = d3.scale.linear().range([0,1]);


	// ### D3 AXIS ###
	var xAxis = d3.svg.axis().orient('bottom');
	var yAxis = d3.svg.axis().orient('left');

	// ### 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(110)
	.translate([outerWidth/1.7, outerHeight/1.35]);
	var mapPath = d3.geo.path().projection(mapProjection);

	// ### CREATE PURPOSE OBJECT ###
	function createPurposesData(data) {
	/*Creates an object where for each purpose (key), there is an
	array of values, one for every year*/
	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;
	};


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

	// Extract properly formatted purpose name from an Object
	function extractPurposeName(purpose, datum) {
	if(purpose == 'VFR') {
	return 'Visiting friends and relatives'
	} else {
	return datum.purpose;
	}
	};

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

	// Extract y of purpose-box
	function extractPurposeBoxY(purpose, datum, index) {
	// Ad hoc code to position labelling correctly
	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;
	}
	};

	// Extract nested, i.e. visits data by country as a JS object
	function extractNested(data) {
	return d3.nest()
	.key(function(d) {
	return d.market;
	})
	.entries(data);
	};

	// Extract unique values from array of objects
	function extractUniques(data, field) {
	var uniques = d3.set();

	data.forEach(function(d) {
	uniques.add(d[field]);
	});

	var uniques = uniques.values();

	return uniques;

	};

	// ### MERGE DATASETS ***
	// Add visitors to data to geoJSON
	function addDataToMap(data, map) {

	for (var i = 0; i < data.length; i++) {

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

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

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

	if (dataCountry == mapCountry) {

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

	return map;
	};

	// ### UPDATE MAP ###
	/// 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
	removeObjs('.map');

	// 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, 6 * padding.top]);

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

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

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

	// Update axis
	xAxis.innerTickSize(0);
	yAxis.innerTickSize(0).ticks(4);

	// 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)
	removeObjs('.purpose');

	// Hide tooltip
	changeTooltipClass('hidden', true);

	// Change tooltip width
	changeTooltipWidth(tooltipWidth);

	// Change title
	changeTitle('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 formatMillAxis(d);})
	.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 = parseFloat(d3.select(this).attr('x'));

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

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

	// Change tooltip's title and value
	changeTooltipTitle(d.year);
	changeTooltipValue(formatMill(d.visits));

	// Change tooltip width
	changeTooltipWidth(80);

	// Make tooltip visible and change style
	changeTooltipClass('hidden', false);
	changeTooltipClass('focus-bar', true);

	// Make bar focus
	d3.select(this).classed('focus', true)
	})
	.on('mouseout', function(d) {

	// Make tooltip invisile
	changeTooltipClass('hidden', true);

	// Reset bar color
	d3.select(this).classed('focus', false);
	})
	};

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

	// Hide tooltip
	changeTooltipClass('hidden', true);

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

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

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

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

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

	// Update yAxis formatting and call it
	yAxis.ticks(4)
	.tickFormat(function(d) {return formatPerc(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 trendColor(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 extractPurposeBoxY(purpose, d, 0);
	})
	.text(function(d) {
	var purpose = this.parentElement.classList[0];
	return extractPurposeName(purpose, d, 0);
	})
	.attr('fill', function(d) {
	return trendColor(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 extractPurposePerc(d, d.values.length - 1);
	})
	.attr('fill', function(d) {
	return trendColor(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() {

	// 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() {
	area.selectAll('.purpose')
	.classed('unfocused', false)
	.classed('focused', false);
	})
	}
	});
	};