Skov94 · October 31, 2018 14:46
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 5: plotting transportation in corner</title>
 		<script src="https://d3js.org/d3.v4.min.js"></script>   

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

 			}
 			

 			
 			.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:2px;   
 			
 			}


 			.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;
 				
 			}
 			
 			#selection_area {
 			
 				 flex: 1;
 				 width: 800px;

 			
 			}
 			

 			

 				
 			
 		</style>
 	</head>
 	
 		<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>
 	

 	
 	
 	<body>

 		<script type="text/javascript">
 			
 						
 			//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;
 			
 			//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 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]);
 				
 				
 			//For converting Dates to strings when plotting on axis
 			var formatTime = d3.timeFormat("%a %e /%_m,%H:%M");
 			
 			var formatTimeHour = d3.timeFormat("%H");
 			
 			var formatTimeDay = d3.timeFormat("%u");
 			
 			var formatTimeWeek = d3.timeFormat("%V, %Y");						
 			
 			//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 + ")");

 						
 			
 				//load in the nomie tracked itch data
 				d3.csv("combined_itchdata_5_aug-4_oct.csv", function(nomie_data){
 				
 						
 						//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);
 							
 											
 						});		
 						
 						

 						//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(nomie_data, function(d) {return new Date(d.date); }),  
 							d3.max(nomie_data, function(d) {return new Date(d.date); })
 							]);	
 						 xScale2.domain(xScale.domain());
 						 
 						
 						
 						//draw itching incidents based on wristband data
 						// set the parameters for the histogram
 						var histogram = d3.histogram()
 							.value(function(d) { return d.date; })
 							.domain(xScale.domain())
 							.thresholds(xScale.ticks(d3.timeHour));
 							
 						// group the data for the bars
 						var bins = histogram(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])						
 						
 						//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])
 			
 							
 							}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));
 								
 								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])
 								
 								
 							}	
 						}

 						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 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;
 							
 							}

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


 							
 						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());
 						
 							}
 						}
 						
 						
 					
 					
 			});
 		
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Iteration 5: plotting transportation in corner</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>

	<style type="text/css">


	#bar_area {

	flex: 1;
	margin-bottom: 5px;
	width: 800px;

	}



	.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:2px;

	}


	.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;

	}

	#selection_area {

	flex: 1;
	width: 800px;


	}






	</style>
	</head>

	<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>




	<body>

	<script type="text/javascript">


	//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;

	//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 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]);


	//For converting Dates to strings when plotting on axis
	var formatTime = d3.timeFormat("%a %e /%_m,%H:%M");

	var formatTimeHour = d3.timeFormat("%H");

	var formatTimeDay = d3.timeFormat("%u");

	var formatTimeWeek = d3.timeFormat("%V, %Y");

	//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 + ")");



	//load in the nomie tracked itch data
	d3.csv("combined_itchdata_5_aug-4_oct.csv", function(nomie_data){


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


	});



	//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(nomie_data, function(d) {return new Date(d.date); }),
	d3.max(nomie_data, function(d) {return new Date(d.date); })
	]);
	xScale2.domain(xScale.domain());



	//draw itching incidents based on wristband data
	// set the parameters for the histogram
	var histogram = d3.histogram()
	.value(function(d) { return d.date; })
	.domain(xScale.domain())
	.thresholds(xScale.ticks(d3.timeHour));

	// group the data for the bars
	var bins = histogram(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])

	//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])


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

	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])


	}
	}

	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 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;

	}

	//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))]);



	}



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

	}
	}




	});

	</script>
	</body>
	</html>