Skov94 · November 22, 2018 21:42
diff --git a/combined_itchdata_5_aug-4_oct.csv b/combined_itchdata_5_aug-4_oct.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Iteration 6: Pressing locations</title>
 		<script src="https://d3js.org/d3.v4.min.js"></script>
 		
 		<!-- Leaflet CSS file -->
 		 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
 			integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
 			crossorigin=""/>
 			
 		<!-- Leaflet Javascript file -->
 		 <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
 			integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
 			crossorigin=""></script>
 			
 		<!-- Leaflet Clustering -->
 		<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
 		<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
 		<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
 		

 		<style type="text/css">
 		
 	
 			#map_area { 
 				
 				flex: 1;
 				margin-bottom: 5px;
 				width: 800px;

 		
 			}
 			
 			
 			#bar_area {
 			
 				flex: 1;
 				margin-bottom: 5px;
 				width: 800px;

 			}
 			
 						
 			#selection_area {
 			
 				 flex: 1;
 				 width: 800px;

 			
 			}
 			
 			#wrapper {
 	
 				display: flex;
 				flex-flow: column wrap;
 				height: 800px;
 				width: 1350px;

 			}
 			
 			.zoom {
 
 				cursor: move;
 				fill: none;
 				pointer-events: all;
 			}
 			
 			.brush {
 			
 				fill-opacity: .125;
 				shape-rendering: crispEdges;
 			
 			}
 			
 			.yaxis line, xaxis line {
 			
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			
 			}
 			
 			.yaxis text, xaxis text {
 			
 				font-family: sans-serif;
 				font-size: 8.5px;
 				font-weight: normal;
 				fill: black;
 			
 			}
 			
 			
 			.axislabel, dropdown_text {
 			
 				font-family: sans-serif;
 				font-size: 12px;
 				font-weight: normal;
 				fill: black;
 				text-anchor: middle;
 			
 			}
 			
 			
 			
 			rect.bar { 
 			
 				fill: grey;
 				clip-path: url(#clip);
 				
 				
 			}
 			
 			rect.barcontext{ 
 			
 				fill: grey;
 				opacity: 0.8;
 				
 			}
 			
 			rect.bordered {
 				
 				stroke: #E6E6E6;
 				stroke-width:1px;   
 			
 			}


 			.legend {
 			
 				font-size: 11px;
 				font-family: sans-serif;
 			
 			}		
 			
 			
 			.legend rect {
 					
 				cursor: pointer; 
 				stroke-width: 2;
 				
 			}
 			
 				
 			.legend rect.disabled {
 					
 				fill: transparent !important;
 			
 			}
 				
 			.legend text {
 				
 				fill: black;
 				
 			}
 			

 			label {
 				color: black;
 				font-size: 12px;
 			}	

 			.dates{
 				
 				position: absolute;
 				top:573px;
 				left:325px;
 			
 			}
 			
 			
 			.leaflet-interactive {

 				background: rgba(0,0,0,0);
 				border: none;
 			
 			}

 			.leaflet-interactive.outlined circle {
 				stroke-width: 2px;
 				stroke: blue;
 			}
 			

 			
 			.info {
 				padding: 6px 8px;
 				font: 10px Arial, sans-serif;
 				width: 65px;
 				color: black;
 				background: rgba(255,255,255,0.8);
 				box-shadow: 0 0 15px rgba(0,0,0,0.2);
 				border-radius: 5px;
 				cursor: default;
 			}
 			
 			.controlincident {
 				
 				background: red;
 			
 			}
 			
 			.controlincidenthour {
 				
 				background: white;
 			
 			}
 			
 			.controlhour {
 				
 				background: green;
 			
 			}
 			
 			.my-custom-control {
 				padding: 1px 4px;
 				background: rgba(255,255,255,0.7);
 				color: black;
 				font: 10px Arial, sans-serif;
 				box-shadow: 0 0 15px rgba(0,0,0,0.2);
 				border-radius: 5px;
 				width: 60px;
 				cursor: pointer;
 			}
 			
 			
 			.selected_transportation{
 				
 				background: rgba(255,255,255,0.9);
 				border: 2px solid blue;
 			
 			}
 			
 			.my-custom-control:empty {
 				display: none;
 			}
 			
 			.label {
 				display: inline-block;
 				vertical-align: middle;
 			}
 			
 			.circleClass{
 				
 				stroke: black;
 				stroke-width:1px;   
 				font-weight:bold;
 				text-anchor: middle;
 				dominant-baseline: central;


 			}
 			
 			.circleText{
 				
 				stroke: none;
 			
 			}

 			
 			.dot {
 				position : absolute;
 				background : silver;
 				width : 25px;
 				height : 25px;
 				max-width : 0px;
 				max-height : 0px;
 			}

 			.dot::after {
 				  content : "";
 				  display : block;
 				  background : inherit;
 				  transform : translate(-50%, -50%);
 				  width : inherit;
 				  height : inherit;
 				  border-radius : 50%;
 			}
 			
 			
 		

 			.col1{
 				width:25px;
 				height:25px;
 				display: flex;
 				align-items: center;
 				float:left;

 			}


 			.col2{
 				width:20px;
 				height:25px;
 				display: flex;
 				align-items: center;
 				float:left;


 			}
 			
 			.col3{
 				width:15px;
 				height:25px;
 				position: relative;
 				float:left;

 				
 			}
 			
 			

 			
 					
 		</style>
 	</head>
 	
 	<div id="wrapper">
 		<div id="map_area"></div>
 		<div id="bar_area"></div>
 		<div id="selection_area"></div>
 		<form class="dates">
 			<label for="minDate">From:</label>
 			<input type="datetime-local" id="minDate" value="2018-08-05T10:25:33" required>
 			
 			<label for="maxDate">to:</label>
 			<input type="datetime-local" id="maxDate" value="2018-10-04T10:25:33" required>
 		</form>

 	</div>
 	
 	
 	<body>

 		<script type="text/javascript">
 			
 						
 			//global variables
 			var inc_hours_array = []; //saves the incidents and time spent doing each activity
 			var total_itches = 0; 
 			var total_hours;
 			
 			//variables for bar charts
 			var margin = {top: 80, right: 20, bottom: 90, left: 50},
 				margin2 = {top: 230, right: 20, bottom: 30, left: 50},
 				width = 800 - margin.left - margin.right,
 				height = 300 - margin.top - margin.bottom,
 				height2 = 300 - margin2.top - margin2.bottom;		
 			
 		
 			//initialize map and set view (geographical coordinate and zoom level)
 			var map = L.map('map_area').setView([55.808, 12.5075], 13);
 			mapLink = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 			
 			
 			//create svg for barplots
 			var svg = d3.select("#bar_area")
 						.append("svg")
 						.attr("width", width + margin.left + margin.right)
 						.attr("height", height + margin.top + margin.bottom);
 					
 						
 			//create svg for selection area (area beneath barchart)
 			var svg_sel = d3.select("#selection_area")
 						.append("svg")
 						.attr("width", width + margin.left + margin.right)
 						.attr("height", 100);
 						
 						
 			//create scales for barplots
 			var xScale = d3.scaleTime().range([0, width]),
 				xScale2 = d3.scaleTime().range([0, width]),
 				yScale = d3.scaleLinear().range([height, 0]),
 				yScale2 = d3.scaleLinear().range([height2, 0])
 				
 			//create scale used for scaling circle describing percentage of incidents and time
 			var maxCircleArea = 300;
 							
 			var circleAreaScale = d3.scaleLinear()
 					.domain([0, 1])
 					.range([0, maxCircleArea]);
 			
 			
 			//create custom controls, showing what the colors on the map indicate:
 			var inc_per_hour_control = L.control({
 				position: 'bottomleft'
 			});
 			
 			inc_per_hour_control.onAdd = function(map) {
 				var div = L.DomUtil.create('div', 'info controlincidenthour legend');
 				div.innerHTML += 'incidents/hour'
 				return div;
 			};
 			
 			var incident_control = L.control({
 				position: 'bottomleft'
 			});
 			
 			incident_control.onAdd = function(map) {
 				var div = L.DomUtil.create('div', 'info controlincident legend');
 				div.innerHTML += '% of incidents'
 				return div;
 			};
 			
 			var hour_control = L.control({
 				position: 'bottomleft'
 			});
 			
 			hour_control.onAdd = function(map) {
 				var div = L.DomUtil.create('div', 'info controlhour legend');
 				div.innerHTML += '% of time'
 				return div;
 			};
 			
 			
 			incident_control.addTo(map);
 			hour_control.addTo(map);
 			inc_per_hour_control.addTo(map);

 				
 			//For converting Dates to strings when plotting on axis
 			var formatTime = d3.timeFormat("%a %e /%_m,%H:%M");
 			var formatTime1 = d3.timeFormat("%a %e /%_m,%H");
 			var formatTimeHour = d3.timeFormat("%H");
 			var formatTimeDay = d3.timeFormat("%u");
 			var formatTimeWeek = d3.timeFormat("%V, %Y");
 			var formatTimeWeek1 = d3.timeFormat("%V");

 						
 			//create axes
 			var xAxis = d3.axisBottom()
 				.scale(xScale)
 				.ticks(5)
 				.tickFormat(formatTime);
 				
 			var xAxis2 = d3.axisBottom()
 				.scale(xScale2)
 				.ticks(5)
 				.tickFormat(formatTime);
 				
 			var yAxis = d3.axisLeft()
 				.scale(yScale)
 				.ticks(5);
 						
 				
 			//append clippath 
 			svg.append("defs").append("clipPath")
 				.attr("id", "clip")
 			  .append("rect")
 				.attr("width", width)
 				.attr("height", height+margin.top);

 				
 			//create axis labels
 			svg.append("text")  
 				.attr("class", "axislabel")
 				.attr("transform", "translate(" + width/1.8 + " ," + 300  + ")")
 				.text("Date");
 				
 			svg.append("text")  
 				.attr("class", "axislabel")
 				.attr("transform", "rotate(-90)")
 				.attr("x", -height*1.1)
 				.attr("y",margin.left/2.2)
 				.text("# of itching incidents");
 				
 			var focus = svg.append("g")
 				.attr("class", "focus")
 				.attr("transform", "translate(" + margin.left + ",0)");


 			var context = svg.append("g")
 				.attr("class", "context")
 				.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
 				
 			//create array of possible forms of transportation, and the given icon: 
 			var transport_icons = {'On a bus': 'BUS', 'On a train': 'TRAIN','Walking': 'WALK', 'Cycling': 'BIKE', 'Boating':'BOAT' ,'Driving': 'CAR' }
 									
 			//load in the google kml data: 
 			d3.csv("kml_5_aug_4_oct.csv", function(kml_data){
 			
 				//load in the nomie tracked itch data
 				d3.csv("combined_itchdata_5_aug-4_oct.csv", function(nomie_data){
 				
 						var jsonFeatures = [];
 						var week_array = [];
 						var transport = [];
 						var transport_array = [];
 						
 						//add new objects to the itching data
 						nomie_data.forEach(function(d) {
 					
 							//save the date as a datetime:
 							d.date = new Date(d.iso_date);
 							
 							//save array of different weeks
 							if(!week_array.includes(formatTimeWeek(new Date(d.iso_date)))){
 								
 								week_array.push(formatTimeWeek(new Date(d.iso_date)));
 								
 							}
 							
 											
 						});		
 						
 						
 						//add new objects to the kml data and create geojson which is used for plotting on map
 						kml_data.forEach(function(d) {
 													
 							d.startdate = new Date(d.Starttime);
 							d.enddate = new Date(d.Endtime);
 							
 							//save/attach the itches made in the given location/time
 							var filtered_itches = nomie_data.filter(function(f){return f.date >= d.startdate && f.date < d.enddate});
 							d.itches = filtered_itches; 
 							
 							//if it is transportation we save it in a seperate array, and we also create an array, that contains all different transportforms
 							if(!d.Longitude){
 								
 								if(!transport_array.includes(d.Name)){
 								
 									transport_array.push(d.Name);
 								
 								}
 								
 							
 								transport.push(d);
 							
 							
 							}else{
 							
 								//create geojson
 								var feature = {type: 'Feature',
 									properties: d,
 									geometry: {
 										type: 'Point',
 										coordinates: [d.Longitude,d.Latitude]
 									}
 								};

 								jsonFeatures.push(feature);
 							}
 				
 						});		
 						
 						var geoJson = { type: 'FeatureCollection', features: jsonFeatures };
 						
 						//create domain of scale functions for bar plots (should go from earliest start date to latest end date of location data)
 						xScale.domain([
 							d3.min(kml_data, function(d) {return new Date(d.startdate); }),  
 							d3.max(kml_data, function(d) {return new Date(d.enddate); })
 							]);	
 						 xScale2.domain(xScale.domain());
 						 
 							
 						//draw itching incidents based on wristband data
 						// set the parameters for the histograms
 							
 						var histogram1 = d3.histogram()
 							.value(function(d) { return d.date; })
 							.domain(xScale.domain())
 							.thresholds(xScale.ticks(d3.timeMinute.every(15))); 
 						
 						var histogram2 = d3.histogram()
 							.value(function(d) { return d.date; })
 							.domain(xScale.domain())
 							.thresholds(xScale.ticks(d3.timeHour)); 
 							
 						var histogram3 = d3.histogram()
 							.value(function(d) { return d.date; })
 							.domain(xScale.domain())
 							.thresholds(xScale.ticks(d3.timeDay)); 
 							
 						var histogram4 = d3.histogram()
 							.value(function(d) { return d.date; })
 							.domain(xScale.domain())
 							.thresholds(xScale.ticks(d3.timeMonday)); 

 						var hist_array = [histogram1, histogram2, histogram3, histogram4];
 						
 						//default histogram is hour
 						var hist_index = 1;
 							
 						// group the data for the bars
 						var bins = hist_array[hist_index](nomie_data);;
 												
 						// Scale the range of the data in the y domain and define and add the y axis
 						yScale.domain([0, d3.max(bins, function(d) { return d.length; })]);
 						yScale2.domain(yScale.domain());
 						
 						// append bar plot to main chart area
 						var bar_rect = focus.append("g");
 							bar_rect.attr("clip-path", "url(#clip)");
 							bar_rect.selectAll("bar")
 								.data(bins)
 								.enter()
 								.append("rect")
 								.attr('class', 'bar')
 								.attr("transform", function(d) {		
 																	
 									return "translate(" + xScale(new Date(d.x0))  + "," + (yScale(d.length)+margin.top)+ ")"; //we have to add the margin.top because we shifted the focus area, such that there also is space for the activities
 							
 								})
 								.attr("width", function(d) { return xScale(new Date(d.x1)) - xScale(new Date(d.x0)); })
 								.attr("height", function(d) { return height - yScale(d.length); });
 						
 						//call axes
 						focus.append("g")
 							.attr("class", "xaxis")
 							.attr("transform", "translate(0," + (height+margin.top) + ")")
 							.call(xAxis);
 						   
 						focus.append("g")
 							.attr("class", "yaxis")
 							.attr("transform", "translate(0," + (margin.top) + ")")
 							.call(yAxis);
 							
 						 // append the bar rectangles to the brush chart area
 						var bar_rect = context.append("g");
 								bar_rect.attr("clip-path", "url(#clip)");
 								bar_rect.selectAll("barcontext")
 									.data(bins)
 									.enter()
 									.append("rect")
 									.attr('class', 'barcontext')
 									.attr("transform", function(d) {		
 																	
 										return "translate(" + xScale2(new Date(d.x0)) + "," + yScale2(d.length) + ")"; 
 							
 									})
 									.attr("width", function(d) { return xScale2(new Date(d.x1)) - xScale2(new Date(d.x0)) ; })
 									.attr("height", function(d) { return height2 - yScale2(d.length); });
 						   
 						 context.append("g")
 							.attr("class", "xaxis")
 							.attr("transform", "translate(0," + height2 + ")")
 							.call(xAxis2);
 							
 						//create zoom
 						var zoom = d3.zoom()
 							.scaleExtent([1, Infinity])
 							.translateExtent([[0, 0], [width, height]])
 							.extent([[0, 0], [width, height]])
 							.on("zoom", zoomed);
 							
 						//call zoom
 						svg.append("rect")
 							.attr("class", "zoom")
 							.attr("width", width)
 							.attr("height", height)
 							.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
 							.call(zoom);
 							
 						//create brush
 						var brush = d3.brushX()
 							.extent([[0,0], [width, height2]])   
 							.on("brush", brushed)
 							.on("end",brushend);
 						
 						//create global variable describing the brushed range:
 						var brush_dates = [d3.timeHour.offset(xScale2.domain()[1],-24), xScale2.domain()[1]];  //we start by calling brush on the last 24 hours
 						
 						//set min and max date of the date input boxes:
 						var formatDatetimes = d3.timeFormat("%Y-%m-%dT%H:%M:%S");
 						
 						document.getElementById("minDate").min = formatDatetimes(xScale2.domain()[0])
 						document.getElementById("minDate").max = formatDatetimes(d3.timeHour.offset(xScale2.domain()[1],-1))
 						document.getElementById("maxDate").min = formatDatetimes(d3.timeHour.offset(xScale2.domain()[0],1))
 						document.getElementById("maxDate").max = formatDatetimes(xScale2.domain()[1])
 												
 						//change the global variable describing the total number of hours in the selected period
 						total_hours = (brush_dates[1]-brush_dates[0])/(1000*60*60);
 												
 						//create text describing how many incidents and how many hours are selected
 						svg.append("text")  
 							.attr("class", "dropdown_text")
 							.attr("id", "incidents_text")
 							.attr("transform", "translate("+width*0.98+","+margin.top*1.3+")")
 							.attr("fill","black")
 							.attr("font-size", "11px")
 							.text("Incidents: " + total_itches );
 							
 						
 						svg.append("text")  
 							.attr("class", "dropdown_text")
 							.attr("id", "hour_text")
 							.attr("transform", "translate("+width*0.98+","+margin.top*1.1+")")
 							.attr("fill","black")
 							.attr("font-size", "11px")
 							.text("Hours: " + total_hours.toFixed(1) );
 					
 						
 						//create clustering markers
 						var markers = L.markerClusterGroup({
 							spiderfyOnMaxZoom: false,
 							showCoverageOnHover: false,
 							zoomToBoundsOnClick: false,
 							singleMarkerMode: true,          //makes sure that single incidents looks the same as clusters (but are still treated as single markers)
 							iconCreateFunction: defineClusterIcon 
 						});
 							
 						var layer_group = L.geoJSON(geoJson);
 							
 		
 						markers.addLayer(layer_group);
 						map.addLayer(markers);
 						map.fitBounds(markers.getBounds());	
 						
 						//create mouseover when mousing over clusters
 						markers.on('clustermouseover', function(c) {
 							var children_array = c.layer.getAllChildMarkers();
 							var time_spent = 0; 
 							var name_array = [];
 							
 							var string = '<b>Location(s):</b><br>'; 
 							if(c.layer.name_array.length>5){
 							
 								string += c.layer.name_array.length + ' different locations<br>';
 							
 							}else{
 								
 								c.layer.name_array.forEach(function(d){
 									
 									string += (d + '<br>');
 								});
 								
 							}
 							
 							string += '<br><b>Time spent here:</b><br>' + c.layer.time_spent.toFixed(2) + ' hours (<b><font color="green">'+ ((c.layer.time_spent/total_hours)*100).toFixed(2) + '%</b></font> of selected time)'
 														
 							string += '<br><br><b>Itches made here:</b><br>' + c.layer.number_of_itches + ' incidents (<b><font color="red">' + ((c.layer.number_of_itches/total_itches)*100).toFixed(2)  + '%</b></font> of all incidents)'
 							
 							var popup = L.popup()
 							.setLatLng(c.layer.getLatLng())
 							.setContent(string)
 							.openOn(map);
 						}).on('clustermouseout',function(c){
 							map.closePopup();
 						}).on('clusterclick',function(c){
 						
 							map.closePopup();
 							 
 							//toggle class to pressed or onpressed
 							c.originalEvent.target.closest(".leaflet-interactive")
 								.classList.toggle("outlined");
 						});
 						
 						//create mouseover when mousing over single markers
 						markers.on('mouseover', function(c) {
 							var time_spent = ((d3.min([c.layer.feature.properties.enddate,brush_dates[1]])-d3.max([c.layer.feature.properties.startdate,brush_dates[0]]))/(1000*60*60));
 							
 							//compute number of itches made in given cluster
 							var number_of_itches = 0;
 							c.layer.feature.properties.itches.forEach(function(f){
 								
 								if(f.date >= brush_dates[0] && f.date < brush_dates[1]){
 										
 									number_of_itches += 1;
 									
 								}
 								
 							})
 							
 							var string = '<b>Location(s):</b> <br>' + c.layer.feature.properties.Name + '<br><br><b>Time spent here:</b><br>' + time_spent.toFixed(2) + ' hours (<b><font color="green">'+ ((time_spent/total_hours)*100).toFixed(2) +'%</b></font> of selected time)<br><br><b>Itches made here:</b><br>' + number_of_itches + ' incidents (<b><font color="red">' + ((number_of_itches/total_itches)*100).toFixed(2) + '%</b></font> of all incidents)'
 
 							var popup = L.popup()
 							.setLatLng(c.layer.getLatLng())
 							.setContent(string)
 							.openOn(map);
 						}).on('mouseout',function(c){
 							map.closePopup();
 						}).on('click',function(c){
 							map.closePopup();
 							//toggle class to pressed or onpressed
 							c.originalEvent.target.closest(".leaflet-interactive")
 								.classList.toggle("outlined");
 						});
 						
 						//create custom controls, showing the transportation: 
 						var control_object = {};
 						var transport_itches_time = [];
 						var MyCustomControl = L.Control.extend({
 							options: {
 								position: 'topright'
 							},
 							onAdd: function (map) {
 								// Create a container with classname and return it
 								var container = L.DomUtil.create('checkbox', 'my-custom-control');
 								
 								//on mouseover we create a popup similar to the one seen when hovering over a cluster
 								container.onmouseover = function(){
 								
 									
 									transport_array.forEach(function(d){
 										
 										if(control_object[d]._container.innerHTML==container.innerHTML){
 										
 											//create string
 											var string = '<b>' + d + '</b>';
 											string += '<br><br><b>Time spent:</b><br>' +  transport_itches_time[d][1].toFixed(2) + ' hours (<b><font color="green">'+ (( transport_itches_time[d][1]/total_hours)*100).toFixed(2) + '%</b></font> of selected time)'
 							
 											string += '<br><br><b>Itches made:</b><br>' + transport_itches_time[d][0] + ' incidents (<b><font color="red">' + ((transport_itches_time[d][0]/total_itches)*100).toFixed(2)  + '%</b></font>  of all incidents)'
 														
 											//compute the position to put the popup in
 											var centerPoint = map.getSize().divideBy(2),
 											targetPoint = centerPoint.subtract([-centerPoint.x*0.5, -centerPoint.y*0.3]),
 											targetLatLng = map.containerPointToLatLng(targetPoint);
 											
 											//create popup
 											var popup = L.popup()
 												.setLatLng(targetLatLng)
 												.setContent(string)
 												.openOn(map);
 																																	
 										}
 										
 									})
 								}
 								container.onmouseout = function(){
 									
 									map.closePopup();

 									
 								}
 								container.onclick = function(){
 									
 									map.closePopup();
 									
 									//change style on control, describing whether it is selected or not
 									container.classList.toggle("selected_transportation");


 									
 								}
 								
 								return container;
 							},
 							setContent: function (content) {
 							// Set the innerHTML of the container
 								this.getContainer().innerHTML = content;
 							}
 						});

 						//create one control per transportation form 
 						transport_array.forEach(function(d){   
 						
 							//save control in object so that it easily can be accessed and content can be changed
 							control_object[d] = new MyCustomControl().addTo(map);
 							control_object[d].setContent(transport_icons[d]);
 						
 						})
 					
 						
 						//call brush
 						context.append("g")
 							.attr("class", "brush")
 							.call(brush)
 							.call(brush.move, [xScale2(brush_dates[0]),xScale2.range()[1]]);   //call brush on the last 24 hours;					
 																
 							
 						function brushed() {
 							if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom"){
 								//if it is a brush zoom we only want to update the markers on the map
 								var brush_coords = d3.brushSelection(this);
 								brush_dates = [xScale2.invert(brush_coords[0]),xScale2.invert(brush_coords[1])]
 								
 								//change the dates in the date input boxes:
 								document.getElementById("minDate").value = formatDatetimes(brush_dates[0])
 								document.getElementById("maxDate").value = formatDatetimes(brush_dates[1])
 								
 								//compute the number of itches made in chosen time period
 								//first we need to find all bins that are within the chosen period (also the ones that are only partly within)
 								var filtered_bins = bins.filter(function(d){return d.x1>= brush_dates[0] && d.x0 <= brush_dates[1]});
 								
 								
 								total_itches = 0; 
 								filtered_bins.forEach(function(d){
 								
 									//we now need to find the incidents that are actually within the brush (if only part of the bin is within the brush some of the incidents might not be)
 									d.forEach(function(f){
 									
 										if(f.date >= brush_dates[0] && f.date <= brush_dates[1]){
 											
 											total_itches += 1;
 											
 										}
 									
 									})
 																	
 								})
 								
 								//update the text describing the total number of incidents
 								d3.select("#incidents_text").text("Incidents:" + total_itches)
 								
 								//update the text describing the total hours
 								total_hours = (brush_dates[1]-brush_dates[0])/(1000*60*60);
 								d3.select("#hour_text").text("Hours:" + total_hours.toFixed(1))
 								
 								//only layers/locations that are created within the brushed time limit are included in the cluster markers
 								layer_group.eachLayer(function (layer) {
 									markers.removeLayer(layer);
 									if ((layer.feature.properties.startdate <= brush_dates[0] && layer.feature.properties.enddate >= brush_dates[1]) || (layer.feature.properties.startdate >= brush_dates[0] && layer.feature.properties.startdate <= brush_dates[1]) || (layer.feature.properties.enddate >= brush_dates[0] && layer.feature.properties.enddate <= brush_dates[1])) {
 										
 										markers.addLayer(layer);
 										
 									}
 								});
 								map.flyToBounds(markers.getBounds(),{padding: [20,20]});
 								
 								//update transportation and activities, so that only the ones that are within the brushed limit are shown
 								update_transportation();
 								
 							
 							}else{
 							 
 							
 								//update zoomed bar chart according to brushed area:
 								var s = d3.event.selection || xScale2.range();
 								xScale.domain(s.map(xScale2.invert, xScale2));
 								focus.selectAll(".bar")
 									.attr("transform", function(d) {		
 																	
 										return "translate(" + xScale(new Date(d.x0)) + "," + (yScale(d.length)+margin.top) + ")"; 
 							
 									})
 									.attr("width", function(d) { return xScale(new Date(d.x1)) - xScale(new Date(d.x0)); })
 									.attr("height", function(d) { return height - yScale(d.length); });
 								focus.select(".xaxis").call(xAxis);
 								focus.selectAll(".activities")
 									.attr("x", function(d){  
 												
 											if(!isNaN(d.startdate)){					
 								
 												return xScale(new Date(d.startdate));
 									
 											} else { 
 								
 												return xScale(new Date(d.enddate));
 									
 											}
 									})
 									.attr("width", function(d){
 							
 										if(!isNaN(d.startdate)){	
 								
 											return xScale(new Date(d.enddate)) - xScale(new Date(d.startdate));  //width is distance between start and enddate
 							
 										}else{   
 									
 											return 2;
 									
 										}
 								
 									})
 					
 								svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
 									.scale(width / (s[1] - s[0]))
 									.translate(-s[0], 0));
 								
 								//update the map according to the brushed area
 								var brush_coords = d3.brushSelection(this);
 								brush_dates = [xScale2.invert(brush_coords[0]),xScale2.invert(brush_coords[1])]
 								
 								//change the dates in the date input boxes:
 								document.getElementById("minDate").value = formatDatetimes(brush_dates[0])
 								document.getElementById("maxDate").value = formatDatetimes(brush_dates[1])
 								
 								//compute the number of itches made in chosen time period
 								//first we need to find all bins that are within the chosen period (also the ones that are only partly within)
 								var filtered_bins = bins.filter(function(d){return d.x1>= brush_dates[0] && d.x0 <= brush_dates[1]});
 								
 								total_itches = 0; 
 								filtered_bins.forEach(function(d){
 									
 									//we now need to find the incidents that are actually within the brush (if only part of the bin is within the brush some of the incidents might not be)
 									d.forEach(function(f){
 									
 										if(f.date >= brush_dates[0] && f.date <= brush_dates[1]){
 											
 											total_itches += 1;
 											
 										}
 									
 									})
 									
 								})
 								
 								//update the text describing the number of incidents
 								d3.select("#incidents_text").text("Incidents:" + total_itches)
 								
 								//update the text describing the total hours
 								total_hours = (brush_dates[1]-brush_dates[0])/(1000*60*60);
 								d3.select("#hour_text").text("Hours:" + total_hours.toFixed(1))
 								
 								//only layers/locations that are created within the brushed time limit are included in the cluster markers
 								layer_group.eachLayer(function (layer) {
 									markers.removeLayer(layer);
 									if ((layer.feature.properties.startdate <= brush_dates[0] && layer.feature.properties.enddate >= brush_dates[1]) || (layer.feature.properties.startdate >= brush_dates[0] && layer.feature.properties.startdate <= brush_dates[1]) || (layer.feature.properties.enddate >= brush_dates[0] && layer.feature.properties.enddate <= brush_dates[1])){ 
 										
 										markers.addLayer(layer);
 										
 									}
 								});
 								map.flyToBounds(markers.getBounds(),{padding: [20,20]});

 								//update transportation and activities, so that only the ones that are within the brushed limit are shown
 								update_transportation();

 								

 								
 							}	
 						}

 						function zoomed() {
 							if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
 							var t = d3.event.transform;
 							xScale.domain(t.rescaleX(xScale2).domain());
 							focus.selectAll(".bar")
 								.attr("transform", function(d) {		
 																	
 									return "translate(" + xScale(new Date(d.x0)) + "," + (yScale(d.length)+margin.top) + ")"; 
 							
 								})
 								.attr("width", function(d) { return xScale(new Date(d.x1)) - xScale(new Date(d.x0)) ; })
 								.attr("height", function(d) { return height - yScale(d.length); });
 							focus.selectAll(".activities")
 									.attr("x", function(d){  
 												
 											if(!isNaN(d.startdate)){					
 								
 												return xScale(new Date(d.startdate));
 									
 											} else { 
 								
 												return xScale(new Date(d.enddate));
 									
 											}
 									})
 									.attr("width", function(d){
 							
 										if(!isNaN(d.startdate)){	
 								
 											return xScale(new Date(d.enddate)) - xScale(new Date(d.startdate));  //width is distance between start and enddate
 							
 										}else{   
 									
 											return 2;
 									
 										}
 								
 									})
 							focus.select(".xaxis").call(xAxis);
 							context.select(".brush").call(brush.move, xScale.range().map(t.invertX, t));

 						}
 							
 						function brushend() {
 												
 							//if there at brushend is no selection, it is because the user has clicked outside the brush without dragging a new brush
 							//we will in that case make sure that the brush covers the entire timeperiod
 							if(d3.event.selection == null){
 							
 								context.select(".brush").call(brush.move, xScale2.range());
 						
 							}
 						}
 												
 						function update_transportation(){
 													
 							//find the transportation times that are within the brushed time limit 
 							var filtered_transport = transport.filter(function(d){return (d.startdate <= brush_dates[0] && d.enddate >= brush_dates[1]) || (d.startdate >= brush_dates[0] && d.startdate <= brush_dates[1]) || (d.enddate >= brush_dates[0] && d.enddate <= brush_dates[1])})
 							
 							
 							//nest the data by transportation form
 							var transportationByName = d3.nest()
 								.key(function(d) { return d.Name; })
 								.entries(filtered_transport);
 																
 							//set content of all transportation to nothing
 							transport_array.forEach(function(d){   
 						
 								control_object[d].setContent('');
 						
 							})
 							
 							//set content of the transportation forms within the limit 
 							transport_itches_time = [];
 							transportationByName.forEach(function(d){
 								
 								var number_of_itches = 0;
 								var time_spent = 0; 
 								
 								//find number of incidents for this transportation form and hours spent
 								d.values.forEach(function(f){
 																
 									time_spent += (d3.min([f.enddate,brush_dates[1]])-d3.max([f.startdate,brush_dates[0]]))/(1000*60*60); //difference between start and enddate in hours - if the brush is within the range we count from the brushdate
 								
 									f.itches.forEach(function(g){
 										
 										//we need to check whether the itch is actually within the brush
 										if(g.date >= brush_dates[0] && g.date < brush_dates[1]){
 											
 											number_of_itches += 1;
 									
 										}
 								
 									});
 									
 								});		
 								
 								//save in global variable, so that it can be used when hovering over control
 								transport_itches_time[d.key] = [number_of_itches, time_spent]
 								
 								//the radius is computed by scaling the area of the circles based on the percentage of time or itches
 								green_radius = Math.sqrt(circleAreaScale(time_spent/total_hours)/Math.PI)
 								red_radius = Math.sqrt(circleAreaScale(number_of_itches/total_itches)/Math.PI)
 								
 																
 								//set content								
 								control_object[d.key].setContent('<div class="col1">' +transport_icons[d.key] + '</div><div class="col2"> &nbsp;' + (number_of_itches/time_spent).toFixed(2) + '</div><div class="col3"><div class="dot"  style="background-color:red; bottom: 3px; right: 1px; height:' + 2*red_radius + 'px; width:' + 2*red_radius + 'px"></div><div class="dot" style="background-color:green; top: 3px; right: 1px; height:' + 2*green_radius + 'px; width:' + 2*green_radius + 'px"></div></div>');
 															
 							});							
 						
 						}
 						
 						
 						//function that defines the cluster icons
 						function defineClusterIcon(cluster) {
 								//compute number of itches made in given cluster
 								var number_of_itches = 0;
 								var time_spent = 0; 
 							    var name_array = [];
 								var children_array = cluster.getAllChildMarkers();
 								
 								children_array.forEach(function(d){
 								
 								
 									if(!name_array.includes(d.feature.properties.Name)){
 								
 									name_array.push(d.feature.properties.Name);
 									
 									}
 								
 									time_spent += (d3.min([d.feature.properties.enddate,brush_dates[1]])-d3.max([d.feature.properties.startdate,brush_dates[0]]))/(1000*60*60); 
 									//difference between start and enddate in hours - if the brush is within the range we count from the brushdate
 								
 									d.feature.properties.itches.forEach(function(f){
 								
 										if(f.date >= brush_dates[0] && f.date < brush_dates[1]){
 											
 											number_of_itches += 1;
 									
 										}
 								
 									});
 									
 								});
 								
 								//save so that it also can be used at mouseover
 								cluster.number_of_itches = number_of_itches;
 								cluster.time_spent = time_spent;
 								cluster.name_array = name_array;
 								
 								
 								//create the html svg markup which describes the icon
 								html = createHTMLIcon(time_spent,number_of_itches);
 								
 								return L.divIcon({ 
 									iconSize: new L.Point(40, 45),
 									html: html,
 									classname: 'leaflet-interactive'
 								});
 						}
 						
 						function createHTMLIcon(time_spent,number_of_itches){
 							
 							var w = 40, h = 45;
 							
 							//the timespent value and number_of_itches will at first be wrong, because we need to create the markers (and therefore icons) before we can call the brush function (and they are calculated based on the fact that the brush has been called - i.e. total_itches and total hours must be computed and only the markers within the brush should be considered) - it doesn't matter as we wont see these icons, we just have to handle it:
 							if(time_spent<0 || total_itches == 0){
 								
 								green_radius = 0;
 								red_radius = 0;
 								
 							} else{	
 								
 								//the radius is computed by scaling the area of the circles based on the percentage of time or itches
 								green_radius = Math.sqrt(circleAreaScale(time_spent/total_hours)/Math.PI)
 								red_radius = Math.sqrt(circleAreaScale(number_of_itches/total_itches)/Math.PI)
 								
 							}
 														
 														
 							//create the dataset which consists of the 3 circles
 							var dataset = [{fill: "red", radius: red_radius, translate: [10,10]},{fill: "green", radius: green_radius, translate: [30,10]},{fill: "white", radius: 15, translate:[w/2,h/2]}]
 							
 							//Create an svg element
 							var svg = document.createElementNS(d3.namespaces.svg, "svg");
 							
 							var vis = d3.select(svg)
 							    .attr('class', "circleClass")
 								.attr('width', w)
 								.attr('width', w)
 								.attr('height', h);
 								
 							var circles = vis.selectAll("circle")
 								.data(dataset)
 								.enter().append("circle")
 								.attr("r", function(d){return d.radius;})
 								.attr('transform', function(d){return 'translate(' + d.translate[0] + ',' + d.translate[1] + ')'})
 								.style("fill", function(d){return d.fill;});
 								
 							 vis.append('text')
 								.attr('class', 'circleText')
 								.attr('x',w/2)
 								.attr('y',h/2)
 								.text((number_of_itches/time_spent).toFixed(2));
 							
 							return serializeXmlNode(svg);
 						
 						
 						}
 						
 						/*Helper function*/
 						function serializeXmlNode(xmlNode) {
 							if (typeof window.XMLSerializer != "undefined") {
 								return (new window.XMLSerializer()).serializeToString(xmlNode);
 							} else if (typeof xmlNode.xml != "undefined") {
 								return xmlNode.xml;
 							}
 						return "";
 						}
 						
 						//function that updates brush when date is changed in one of the input boxes
 						document.getElementById("minDate").onchange = function() {updateBrush_ondatechange()};
 						document.getElementById("maxDate").onchange = function() {updateBrush_ondatechange()};
 						
 						function updateBrush_ondatechange(){
 							
 							//make sure that the dates arent outside the barchart area
 							if(new Date(document.getElementById("minDate").value)<new Date(document.getElementById("minDate").min)){
 							
 									document.getElementById("minDate").value = document.getElementById("minDate").min;
 							
 							}
 							
 							if(new Date(document.getElementById("maxDate").value)>new Date(document.getElementById("maxDate").max)){
 							
 							
 									document.getElementById("maxDate").value = document.getElementById("maxDate").max;
 							
 							}
 							
 							//also make sure that the mindate is smaller than the maxDate
 							if(new Date(document.getElementById("maxDate").value)<=new Date(document.getElementById("minDate").value)){

 									//set the max value to the min value plus one day
 									document.getElementById("maxDate").value = formatDatetimes(d3.timeHour.offset(new Date(document.getElementById("minDate").value),24));
 							
 							}
 							

 							//move brush to chosen area
 							context.select(".brush").call(brush.move, [xScale2(new Date(document.getElementById("minDate").value)), xScale2(new Date(document.getElementById("maxDate").value))]);
 							
 						
 						
 						}
 						
 					});
 						
 					});	
 										
 		
 		</script>
 	</body>
 </html>
diff --git a/kml_5_aug_4_oct.csv b/kml_5_aug_4_oct.csv