Skov94 · November 5, 2018 16:02
diff --git a/combined_itchdata_5_aug-4_oct.csv b/combined_itchdata_5_aug-4_oct.csv
diff --git a/d3-tip.js b/d3-tip.js
 // d3.tip
 // Copyright (c) 2013 Justin Palmer
 // ES6 / D3 v4 Adaption Copyright (c) 2016 Constantin Gavrilete
 // Removal of ES6 for D3 v4 Adaption Copyright (c) 2016 David Gotz
 //
 // Tooltips for d3.js SVG visualizations

 d3.functor = function functor(v) {
  return typeof v === "function" ? v : function() {
    return v;
  };
 };

 d3.tip = function() {

  var direction = d3_tip_direction,
      offset    = d3_tip_offset,
      html      = d3_tip_html,
      node      = initNode(),
      svg       = null,
      point     = null,
      target    = null

  function tip(vis) {
    svg = getSVGNode(vis)
    point = svg.createSVGPoint()
    document.body.appendChild(node)
  }

  // Public - show the tooltip on the screen
  //
  // Returns a tip
  tip.show = function() {
    var args = Array.prototype.slice.call(arguments)
    if(args[args.length - 1] instanceof SVGElement) target = args.pop()

    var content = html.apply(this, args),
        poffset = offset.apply(this, args),
        dir     = direction.apply(this, args),
        nodel   = getNodeEl(),
        i       = directions.length,
        coords,
        scrollTop  = document.documentElement.scrollTop || document.body.scrollTop,
        scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

    nodel.html(content)
      .style('position', 'absolute')
      .style('opacity', 1)
      .style('pointer-events', 'all')

    while(i--) nodel.classed(directions[i], false)
    coords = direction_callbacks[dir].apply(this)
    nodel.classed(dir, true)
      .style('top', (coords.top +  poffset[0]) + scrollTop + 'px')
      .style('left', (coords.left + poffset[1]) + scrollLeft + 'px')

    return tip
  }

  // Public - hide the tooltip
  //
  // Returns a tip
  tip.hide = function() {
    var nodel = getNodeEl()
    nodel
      .style('opacity', 0)
      .style('pointer-events', 'none')
    return tip
  }

  // Public: Proxy attr calls to the d3 tip container.  Sets or gets attribute value.
  //
  // n - name of the attribute
  // v - value of the attribute
  //
  // Returns tip or attribute value
  tip.attr = function(n, v) {
    if (arguments.length < 2 && typeof n === 'string') {
      return getNodeEl().attr(n)
    } else {
      var args =  Array.prototype.slice.call(arguments)
      d3.selection.prototype.attr.apply(getNodeEl(), args)
    }

    return tip
  }

  // Public: Proxy style calls to the d3 tip container.  Sets or gets a style value.
  //
  // n - name of the property
  // v - value of the property
  //
  // Returns tip or style property value
  tip.style = function(n, v) {
    // debugger;
    if (arguments.length < 2 && typeof n === 'string') {
      return getNodeEl().style(n)
    } else {
      var args = Array.prototype.slice.call(arguments);
      if (args.length === 1) {
        var styles = args[0];
        Object.keys(styles).forEach(function(key) {
          return d3.selection.prototype.style.apply(getNodeEl(), [key, styles[key]]);
        });
      }
    }

    return tip
  }

  // Public: Set or get the direction of the tooltip
  //
  // v - One of n(north), s(south), e(east), or w(west), nw(northwest),
  //     sw(southwest), ne(northeast) or se(southeast)
  //
  // Returns tip or direction
  tip.direction = function(v) {
    if (!arguments.length) return direction
    direction = v == null ? v : d3.functor(v)

    return tip
  }

  // Public: Sets or gets the offset of the tip
  //
  // v - Array of [x, y] offset
  //
  // Returns offset or
  tip.offset = function(v) {
    if (!arguments.length) return offset
    offset = v == null ? v : d3.functor(v)

    return tip
  }

  // Public: sets or gets the html value of the tooltip
  //
  // v - String value of the tip
  //
  // Returns html value or tip
  tip.html = function(v) {
    if (!arguments.length) return html
    html = v == null ? v : d3.functor(v)

    return tip
  }

  // Public: destroys the tooltip and removes it from the DOM
  //
  // Returns a tip
  tip.destroy = function() {
    if(node) {
      getNodeEl().remove();
      node = null;
    }
    return tip;
  }

  function d3_tip_direction() { return 'n' }
  function d3_tip_offset() { return [0, 0] }
  function d3_tip_html() { return ' ' }

  var direction_callbacks = {
    n:  direction_n,
    s:  direction_s,
    e:  direction_e,
    w:  direction_w,
    nw: direction_nw,
    ne: direction_ne,
    sw: direction_sw,
    se: direction_se
  };

  var directions = Object.keys(direction_callbacks);

  function direction_n() {
    var bbox = getScreenBBox()
    return {
      top:  bbox.n.y - node.offsetHeight,
      left: bbox.n.x - node.offsetWidth / 2
    }
  }

  function direction_s() {
    var bbox = getScreenBBox()
    return {
      top:  bbox.s.y,
      left: bbox.s.x - node.offsetWidth / 2
    }
  }

  function direction_e() {
    var bbox = getScreenBBox()
    return {
      top:  bbox.e.y - node.offsetHeight / 2,
      left: bbox.e.x
    }
  }

  function direction_w() {
    var bbox = getScreenBBox()
    return {
      top:  bbox.w.y - node.offsetHeight / 2,
      left: bbox.w.x - node.offsetWidth
    }
  }

  function direction_nw() {
    var bbox = getScreenBBox()
    return {
      top:  bbox.nw.y - node.offsetHeight,
      left: bbox.nw.x - node.offsetWidth
    }
  }

  function direction_ne() {
    var bbox = getScreenBBox()
    return {
      top:  bbox.ne.y - node.offsetHeight,
      left: bbox.ne.x
    }
  }

  function direction_sw() {
    var bbox = getScreenBBox()
    return {
      top:  bbox.sw.y,
      left: bbox.sw.x - node.offsetWidth
    }
  }

  function direction_se() {
    var bbox = getScreenBBox()
    return {
      top:  bbox.se.y,
      left: bbox.e.x
    }
  }

  function initNode() {
    var node = d3.select(document.createElement('div'))
    node
      .style('position', 'absolute')
      .style('top', '0')
      .style('opacity', '0')
      .style('pointer-events', 'none')
      .style('box-sizing', 'border-box')

    return node.node()
  }

  function getSVGNode(el) {
    el = el.node()
    if(el.tagName.toLowerCase() === 'svg')
      return el

    return el.ownerSVGElement
  }

  function getNodeEl() {
    if(node === null) {
      node = initNode();
      // re-add node to DOM
      document.body.appendChild(node);
    };
    return d3.select(node);
  }

  // Private - gets the screen coordinates of a shape
  //
  // Given a shape on the screen, will return an SVGPoint for the directions
  // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
  // sw(southwest).
  //
  //    +-+-+
  //    |   |
  //    +   +
  //    |   |
  //    +-+-+
  //
  // Returns an Object {n, s, e, w, nw, sw, ne, se}
  function getScreenBBox() {
    var targetel   = target || d3.event.target;

    while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) {
        targetel = targetel.parentNode;
    }

    var bbox       = {},
        matrix     = targetel.getScreenCTM(),
        tbbox      = targetel.getBBox(),
        width      = tbbox.width,
        height     = tbbox.height,
        x          = tbbox.x,
        y          = tbbox.y

    point.x = x
    point.y = y
    bbox.nw = point.matrixTransform(matrix)
    point.x += width
    bbox.ne = point.matrixTransform(matrix)
    point.y += height
    bbox.se = point.matrixTransform(matrix)
    point.x -= width
    bbox.sw = point.matrixTransform(matrix)
    point.y -= height / 2
    bbox.w  = point.matrixTransform(matrix)
    point.x += width
    bbox.e = point.matrixTransform(matrix)
    point.x -= width / 2
    point.y -= height / 2
    bbox.n = point.matrixTransform(matrix)
    point.y += height
    bbox.s = point.matrixTransform(matrix)

    return bbox
  }

  return tip
 };
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>
 		
 		<!-- 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>
 		
 		<!--D3 tooltip https://github.com/VACLab/d3-tip -->
 		 <script src="d3-tip.js"></script>

   

 		<style type="text/css">
 		
 			
 			#summary_area {
 			
 				flex: 1 0 100%;
 				margin-left: 5px;
 				width: 500px;

 			
 			}
 			
 			.demoSelection {
 				
 				position: absolute;
 				width: 150px;
 				top:50px;
 				left:1150px;
 			
 			}
 			
 			
 			
 			
 			.dropdown_text {
 			
 				font-family: sans-serif;
 				font-size: 12px;
 				font-weight: normal;
 				fill: black;
 				text-anchor: middle;
 			
 			}


 			.legend {
 			
 				font-size: 11px;
 				font-family: sans-serif;
 			
 			}
 			
 			text.dayLabel, text.timeLabel, text.legend_sum{
 				
 				font-size: 9px;
 				font-family: sans-serif;
 				fill: black;
 			
 			}
 			
 			
 			.legend rect {
 					
 				cursor: pointer; 
 				stroke-width: 2;
 				
 			}
 			

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

 			.dates{
 				
 				position: absolute;
 				top:597px;
 				left:325px;
 			
 			}
 			
 			.d3-tip{
 		
 				line-height: 1;
 				font-weight: bold;
 				font-size: 12px;
 				padding: 12px;
 				background: rgba(255, 255, 255, 1);
 				color: black;
 				border-radius: 2px;

 			}
 			
 			.tipchart{
 				
 				font-weight: normal;
 				font-size: 10px;
 			
 			}
 			
 					
 		</style>
 	</head>
 	

 		<div id="summary_area"></div>

 	</div>
 	
 	
 	<body>

 		<script type="text/javascript">
 			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;
 			
 			//variables for summary weekcalender
 			var margin_sum = { top: 100, right: 0, bottom: 100, left: 30 },
 				width_sum = 500 - margin_sum.left - margin_sum.right,
 				height_sum = 300 - margin_sum.top - margin_sum.bottom,
 				gridSize = Math.floor(width_sum / 24),
 				legendElementWidth = gridSize*2,
 				buckets = 9,
 				colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9]
 				days = ["M", "T", "W", "T", "F", "S", "S"],
 				abr_days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
 				times = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
 			
 						
 			//create svg for summary calender
 			var svg_sum = d3.select("#summary_area")
 						.append("svg")
 						.attr("width", width_sum + margin_sum.left + margin_sum.right)
 						.attr("height", height_sum + margin_sum.top + margin_sum.bottom)
 						.append("g")
 						.attr("transform", "translate(" + margin_sum.left + "," + margin_sum.top + ")");
 			
 			//create tooltip used in the summary calender
 			var tool_tip = d3.tip()
 				.attr("class", "d3-tip")
 				.offset([10, -50])
 				.html(function(d){console.log(d); return "<p> Day: and hour:</p><div id='tipDiv'></div>";});
 				//.html(function(d,i){console.log(d); return "<p>Distribution for all weeks at: Day: " + d.day + " and hour: " + d.hour +"</p><div id='tipDiv'></div>";});

 			svg_sum.call(tool_tip);
 						
 		
 						
 			//create svg for selection area
 			var svg_sel = d3.select("#selection_area")
 						.append("svg")
 						.attr("width", width + margin.left + margin.right)
 						.attr("height", 100);
 						
 				
 			//create labels for day and hour for weekly summary
 			var dayLabels = svg_sum.selectAll(".dayLabel")
 				.data(days)
 				.enter().append("text")
 				.text(function (d) { return d; })
 				.attr("x", 0)
 				.attr("y", function(d, i){return i * gridSize;})
 				.style("text-anchor", "end")
 				.attr("transform", "translate(-6," + gridSize / 1.5 + ")")
 				.attr("class", "dayLabel");

 			var timeLabels = svg_sum.selectAll(".timeLabel")
 				.data(times)
 				.enter().append("text")
 				.text(function (d) { return d; })
 				.attr("x", function(d, i) {return i * gridSize;})
 				.attr("y", 0)
 				.style("text-anchor", "middle")
 				.attr("transform", "translate(" + gridSize / 2 + ", -6)")
 				.attr("class", "timeLabel");
 			
 				
 			//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");
 			var formatTimeWeek1 = d3.timeFormat("%V");

 				//load in the nomie tracked itch data
 				d3.csv("combined_itchdata_5_aug-4_oct.csv", function(nomie_data){
 				
 						var week_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)));
 								
 							}
 							
 											
 						});		
 						
 						//create scale
 						var xScale = d3.scaleTime().range([0, width]);
 						xScale.domain([
 							d3.min(nomie_data, function(d) {return new Date(d.date); }),  
 							d3.max(nomie_data, function(d) {return new Date(d.date); })
 							]);	
 						
 						
 						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);;
 						
 					
 						//create weekly calender summary (http://bl.ocks.org/tjdecke/5558084 - Copyright (c) 2016, Tom May)
 						weekly_summary(bins);					
 				
 						//create drowdown menu - first we append a option called (all weeks): 
 						week_array.push("All")
 					
 						var index = week_array.length-1;
 					
 					
 						
 						var cards;
 						var legend_sum;
 						
 						//function used to create a datetime given the weeknumber, year, hour and day
 						var parseDate_click = d3.timeParse("%a %_H %V, %Y");

 						
 						//function that recomputes the weekly calender summary
 						function weekly_summary(data){
 												
 							//nest the data (i.e. save average number of incidents for each weekday (1-7) and each hour of each weekday (00-23))
 							var nested_data = d3.nest()
 								.key(function(d) { return formatTimeDay(new Date(d.x0)); })
 								.key(function(d) { return  formatTimeHour(new Date(d.x0)); })
 								.rollup(function(v) { return d3.sum(v, function(d) { return d.length; }); })
 								.object(data);
 								
 							//nest the data, in a way so that we can access it for the all data option
 							var nested_data_all = d3.nest()
 								.key(function(d) { return formatTimeDay(new Date(d.x0)); })
 								.key(function(d) { return  formatTimeHour(new Date(d.x0)); })
 								.object(data);
 							
 							//restructure data so that we can use it to create the calender
 							var flatList = [];
 							for (var day in nested_data) {
 								var day_data = nested_data[day];
 								for (var hour in day_data) {
 									flatList.push( { day: +day, hour: hour, value: day_data[hour]} );
 								}
 							}
 																											
 							//create colorScale
 							var colorScale_sum = d3.scaleQuantile()
 								.domain([0, buckets - 1, d3.max(flatList, function (d) { return d.value; })])
 								.range(colors);						
 		
 							//if the calender already has been drawn once before, we clear it
 							if(cards){cards.remove();}
 							
 							//draw the squares of the calender
 							cards = svg_sum.selectAll(".hour")
 								.data(flatList)
 								.enter().append("rect")
 									.attr("x", function(d,i) { return (d.hour) * gridSize; })
 									.attr("y", function(d) { return (d.day-1) * gridSize; })
 									.attr("rx", 4)
 									.attr("ry", 4)
 									.attr("class", "hour bordered")
 									.attr("width", gridSize)
 									.attr("height", gridSize)
 									.style("fill", colors[0])
 									.style("cursor", "pointer")
 									.on('click', function(d){ 
 									
 										//when clicking a rectangle we want to move the brush to that hour (only done for single weeks (i.e. not for option all))
 										
 										if(index != week_array.length-1){
 											
 											var first_date = xScale2(parseDate_click(abr_days[d.day-1] + ' ' + d.hour + ' ' + week_array[index]));
 											var second_date = xScale2(d3.timeHour.offset(parseDate_click(abr_days[d.day-1] + ' ' + d.hour + ' ' + week_array[index])), 1);
 										
 								
 											//brush covers the hour
 											context.select(".brush").transition().duration(2000).call(brush.move, [first_date, second_date]);
 										
 										}
 										else{   //when clicking a rectangle in the All weekly summary, we create a popup showing the distribution for all weeks for the chosen hour
 																						
 											//find the values for all weeks for the given day/hour
 											var allWeeks_values = nested_data_all[d.day][d.hour];
 											
 											//save the number of incidents per week for the given day/hour)
 											var dataset = [];
 											allWeeks_values.forEach(function(f){
 												
 												dataset.push([formatTimeWeek1(f.x0), f.length]);
 											
 											});
 																					
 											//create the popup
 											tool_tip.show();
 											
 											var barWidth = 20;
 											var chartheight = 80;
 											var margin = 30;
 											
 											//create the svg which we will create the chart within
 											var tipSVG = d3.select("#tipDiv")
 												.append("svg")
 												.attr("width", barWidth*dataset.length)
 												.attr("height", chartheight)
 												.on('click', tool_tip.hide);
 											
 											//create the scale for the bar chart
 											var y = d3.scaleLinear()
 												.domain([0, d3.max(dataset, function(d) { return d[1];})])
 												.range([chartheight-margin,0]);

 											var bar = tipSVG.selectAll("g")
 												.data(dataset)
 												.enter().append("g")
 												.attr("transform", function(d, i){
 						
 													return "translate(" + i * barWidth + ",0)";
 											
 												});
 				
 											bar.append("rect")
 												.attr("width", barWidth-1)
 												.attr("height", 0)
 												.attr("y",function(d){return y(d[1])})
 												.attr("fill", "grey")
 												.transition()
 												.duration(1000)
 													.attr("height", function(d){return chartheight-margin-y(d[1])});

 											bar.append("text")
 												.attr("class", "tipchart")
 												.attr("x", 2)
 												.attr("y", chartheight-margin*0.7)
 												.attr("dx", ".15em")
 												.attr("fill", "black")
 												.text(function(d){return d[0]});
 																								
 											tipSVG.append("text")
 												.attr("class", "tipchart")
 												.attr("transform", "translate("+ ((barWidth*dataset.length-margin)/2) + "," + (chartheight-margin*0.2) + ")")
 												.attr("fill", "black")
 												.text("Week");
 										}
 									
 									})
 									 

 									
 							//draw the colors
 							cards.transition().duration(1000)
 								.style("fill", function(d) { return colorScale_sum(d.value); });
 														
 							//create hover over popup
 							var formatDecimal = d3.format(".1f");
 							cards.append("title").text(function(d) { return "Number of incidents: " + formatDecimal(d.value); });
 															
 						
 							//create legend describing colors
 							if(legend_sum){legend_sum.remove();}
 							legend_sum = svg_sum.selectAll(".legend")
 								.data([0].concat(colorScale_sum.quantiles()), function(d) { return d; })
 									.enter()
 									.append("g")
 									.attr("class", "legend")
 									.attr("transform", function(d,i){
 								
 										return 'translate(' + (legendElementWidth * i) + ',' + 2*margin.top + ')';
 								
 									});

 							legend_sum.append("rect")
 								.attr("width", legendElementWidth)
 								.attr("height", gridSize / 2)
 								.style("cursor", "default")
 								.style("fill", function(d, i) { return colors[i]; });

 							legend_sum.append("text")
 								.attr("class", "summary_legend")
 								.text(function(d) {return "≥ " + formatDecimal(d); })
 								.attr("x", 0.2*legendElementWidth)
 								.attr("y", 0.6*legendElementWidth)
 								.attr("font-weight", "normal");
 								

 						}
 						
 					
 			   });
 					
 		
 		</script>
 	</body>
 </html>
	// d3.tip
	// Copyright (c) 2013 Justin Palmer
	// ES6 / D3 v4 Adaption Copyright (c) 2016 Constantin Gavrilete
	// Removal of ES6 for D3 v4 Adaption Copyright (c) 2016 David Gotz
	//
	// Tooltips for d3.js SVG visualizations

	d3.functor = function functor(v) {
	return typeof v === "function" ? v : function() {
	return v;
	};
	};

	d3.tip = function() {

	var direction = d3_tip_direction,
	offset = d3_tip_offset,
	html = d3_tip_html,
	node = initNode(),
	svg = null,
	point = null,
	target = null

	function tip(vis) {
	svg = getSVGNode(vis)
	point = svg.createSVGPoint()
	document.body.appendChild(node)
	}

	// Public - show the tooltip on the screen
	//
	// Returns a tip
	tip.show = function() {
	var args = Array.prototype.slice.call(arguments)
	if(args[args.length - 1] instanceof SVGElement) target = args.pop()

	var content = html.apply(this, args),
	poffset = offset.apply(this, args),
	dir = direction.apply(this, args),
	nodel = getNodeEl(),
	i = directions.length,
	coords,
	scrollTop = document.documentElement.scrollTop \|\| document.body.scrollTop,
	scrollLeft = document.documentElement.scrollLeft \|\| document.body.scrollLeft

	nodel.html(content)
	.style('position', 'absolute')
	.style('opacity', 1)
	.style('pointer-events', 'all')

	while(i--) nodel.classed(directions[i], false)
	coords = direction_callbacks[dir].apply(this)
	nodel.classed(dir, true)
	.style('top', (coords.top + poffset[0]) + scrollTop + 'px')
	.style('left', (coords.left + poffset[1]) + scrollLeft + 'px')

	return tip
	}

	// Public - hide the tooltip
	//
	// Returns a tip
	tip.hide = function() {
	var nodel = getNodeEl()
	nodel
	.style('opacity', 0)
	.style('pointer-events', 'none')
	return tip
	}

	// Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value.
	//
	// n - name of the attribute
	// v - value of the attribute
	//
	// Returns tip or attribute value
	tip.attr = function(n, v) {
	if (arguments.length < 2 && typeof n === 'string') {
	return getNodeEl().attr(n)
	} else {
	var args = Array.prototype.slice.call(arguments)
	d3.selection.prototype.attr.apply(getNodeEl(), args)
	}

	return tip
	}

	// Public: Proxy style calls to the d3 tip container. Sets or gets a style value.
	//
	// n - name of the property
	// v - value of the property
	//
	// Returns tip or style property value
	tip.style = function(n, v) {
	// debugger;
	if (arguments.length < 2 && typeof n === 'string') {
	return getNodeEl().style(n)
	} else {
	var args = Array.prototype.slice.call(arguments);
	if (args.length === 1) {
	var styles = args[0];
	Object.keys(styles).forEach(function(key) {
	return d3.selection.prototype.style.apply(getNodeEl(), [key, styles[key]]);
	});
	}
	}

	return tip
	}

	// Public: Set or get the direction of the tooltip
	//
	// v - One of n(north), s(south), e(east), or w(west), nw(northwest),
	// sw(southwest), ne(northeast) or se(southeast)
	//
	// Returns tip or direction
	tip.direction = function(v) {
	if (!arguments.length) return direction
	direction = v == null ? v : d3.functor(v)

	return tip
	}

	// Public: Sets or gets the offset of the tip
	//
	// v - Array of [x, y] offset
	//
	// Returns offset or
	tip.offset = function(v) {
	if (!arguments.length) return offset
	offset = v == null ? v : d3.functor(v)

	return tip
	}

	// Public: sets or gets the html value of the tooltip
	//
	// v - String value of the tip
	//
	// Returns html value or tip
	tip.html = function(v) {
	if (!arguments.length) return html
	html = v == null ? v : d3.functor(v)

	return tip
	}

	// Public: destroys the tooltip and removes it from the DOM
	//
	// Returns a tip
	tip.destroy = function() {
	if(node) {
	getNodeEl().remove();
	node = null;
	}
	return tip;
	}

	function d3_tip_direction() { return 'n' }
	function d3_tip_offset() { return [0, 0] }
	function d3_tip_html() { return ' ' }

	var direction_callbacks = {
	n: direction_n,
	s: direction_s,
	e: direction_e,
	w: direction_w,
	nw: direction_nw,
	ne: direction_ne,
	sw: direction_sw,
	se: direction_se
	};

	var directions = Object.keys(direction_callbacks);

	function direction_n() {
	var bbox = getScreenBBox()
	return {
	top: bbox.n.y - node.offsetHeight,
	left: bbox.n.x - node.offsetWidth / 2
	}
	}

	function direction_s() {
	var bbox = getScreenBBox()
	return {
	top: bbox.s.y,
	left: bbox.s.x - node.offsetWidth / 2
	}
	}

	function direction_e() {
	var bbox = getScreenBBox()
	return {
	top: bbox.e.y - node.offsetHeight / 2,
	left: bbox.e.x
	}
	}

	function direction_w() {
	var bbox = getScreenBBox()
	return {
	top: bbox.w.y - node.offsetHeight / 2,
	left: bbox.w.x - node.offsetWidth
	}
	}

	function direction_nw() {
	var bbox = getScreenBBox()
	return {
	top: bbox.nw.y - node.offsetHeight,
	left: bbox.nw.x - node.offsetWidth
	}
	}

	function direction_ne() {
	var bbox = getScreenBBox()
	return {
	top: bbox.ne.y - node.offsetHeight,
	left: bbox.ne.x
	}
	}

	function direction_sw() {
	var bbox = getScreenBBox()
	return {
	top: bbox.sw.y,
	left: bbox.sw.x - node.offsetWidth
	}
	}

	function direction_se() {
	var bbox = getScreenBBox()
	return {
	top: bbox.se.y,
	left: bbox.e.x
	}
	}

	function initNode() {
	var node = d3.select(document.createElement('div'))
	node
	.style('position', 'absolute')
	.style('top', '0')
	.style('opacity', '0')
	.style('pointer-events', 'none')
	.style('box-sizing', 'border-box')

	return node.node()
	}

	function getSVGNode(el) {
	el = el.node()
	if(el.tagName.toLowerCase() === 'svg')
	return el

	return el.ownerSVGElement
	}

	function getNodeEl() {
	if(node === null) {
	node = initNode();
	// re-add node to DOM
	document.body.appendChild(node);
	};
	return d3.select(node);
	}

	// Private - gets the screen coordinates of a shape
	//
	// Given a shape on the screen, will return an SVGPoint for the directions
	// n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
	// sw(southwest).
	//
	// +-+-+
	// \| \|
	// + +
	// \| \|
	// +-+-+
	//
	// Returns an Object {n, s, e, w, nw, sw, ne, se}
	function getScreenBBox() {
	var targetel = target \|\| d3.event.target;

	while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) {
	targetel = targetel.parentNode;
	}

	var bbox = {},
	matrix = targetel.getScreenCTM(),
	tbbox = targetel.getBBox(),
	width = tbbox.width,
	height = tbbox.height,
	x = tbbox.x,
	y = tbbox.y

	point.x = x
	point.y = y
	bbox.nw = point.matrixTransform(matrix)
	point.x += width
	bbox.ne = point.matrixTransform(matrix)
	point.y += height
	bbox.se = point.matrixTransform(matrix)
	point.x -= width
	bbox.sw = point.matrixTransform(matrix)
	point.y -= height / 2
	bbox.w = point.matrixTransform(matrix)
	point.x += width
	bbox.e = point.matrixTransform(matrix)
	point.x -= width / 2
	point.y -= height / 2
	bbox.n = point.matrixTransform(matrix)
	point.y += height
	bbox.s = point.matrixTransform(matrix)

	return bbox
	}

	return tip
	};
	<!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>

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

	<!--D3 tooltip https://github.com/VACLab/d3-tip -->
	<script src="d3-tip.js"></script>



	<style type="text/css">


	#summary_area {

	flex: 1 0 100%;
	margin-left: 5px;
	width: 500px;


	}

	.demoSelection {

	position: absolute;
	width: 150px;
	top:50px;
	left:1150px;

	}




	.dropdown_text {

	font-family: sans-serif;
	font-size: 12px;
	font-weight: normal;
	fill: black;
	text-anchor: middle;

	}


	.legend {

	font-size: 11px;
	font-family: sans-serif;

	}

	text.dayLabel, text.timeLabel, text.legend_sum{

	font-size: 9px;
	font-family: sans-serif;
	fill: black;

	}


	.legend rect {

	cursor: pointer;
	stroke-width: 2;

	}


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

	.dates{

	position: absolute;
	top:597px;
	left:325px;

	}

	.d3-tip{

	line-height: 1;
	font-weight: bold;
	font-size: 12px;
	padding: 12px;
	background: rgba(255, 255, 255, 1);
	color: black;
	border-radius: 2px;

	}

	.tipchart{

	font-weight: normal;
	font-size: 10px;

	}


	</style>
	</head>


	<div id="summary_area"></div>

	</div>


	<body>

	<script type="text/javascript">
	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;

	//variables for summary weekcalender
	var margin_sum = { top: 100, right: 0, bottom: 100, left: 30 },
	width_sum = 500 - margin_sum.left - margin_sum.right,
	height_sum = 300 - margin_sum.top - margin_sum.bottom,
	gridSize = Math.floor(width_sum / 24),
	legendElementWidth = gridSize*2,
	buckets = 9,
	colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9]
	days = ["M", "T", "W", "T", "F", "S", "S"],
	abr_days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
	times = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];


	//create svg for summary calender
	var svg_sum = d3.select("#summary_area")
	.append("svg")
	.attr("width", width_sum + margin_sum.left + margin_sum.right)
	.attr("height", height_sum + margin_sum.top + margin_sum.bottom)
	.append("g")
	.attr("transform", "translate(" + margin_sum.left + "," + margin_sum.top + ")");

	//create tooltip used in the summary calender
	var tool_tip = d3.tip()
	.attr("class", "d3-tip")
	.offset([10, -50])
	.html(function(d){console.log(d); return "<p> Day: and hour:</p><div id='tipDiv'></div>";});
	//.html(function(d,i){console.log(d); return "<p>Distribution for all weeks at: Day: " + d.day + " and hour: " + d.hour +"</p><div id='tipDiv'></div>";});

	svg_sum.call(tool_tip);



	//create svg for selection area
	var svg_sel = d3.select("#selection_area")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", 100);


	//create labels for day and hour for weekly summary
	var dayLabels = svg_sum.selectAll(".dayLabel")
	.data(days)
	.enter().append("text")
	.text(function (d) { return d; })
	.attr("x", 0)
	.attr("y", function(d, i){return i * gridSize;})
	.style("text-anchor", "end")
	.attr("transform", "translate(-6," + gridSize / 1.5 + ")")
	.attr("class", "dayLabel");

	var timeLabels = svg_sum.selectAll(".timeLabel")
	.data(times)
	.enter().append("text")
	.text(function (d) { return d; })
	.attr("x", function(d, i) {return i * gridSize;})
	.attr("y", 0)
	.style("text-anchor", "middle")
	.attr("transform", "translate(" + gridSize / 2 + ", -6)")
	.attr("class", "timeLabel");


	//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");
	var formatTimeWeek1 = d3.timeFormat("%V");

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

	var week_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)));

	}


	});

	//create scale
	var xScale = d3.scaleTime().range([0, width]);
	xScale.domain([
	d3.min(nomie_data, function(d) {return new Date(d.date); }),
	d3.max(nomie_data, function(d) {return new Date(d.date); })
	]);


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


	//create weekly calender summary (http://bl.ocks.org/tjdecke/5558084 - Copyright (c) 2016, Tom May)
	weekly_summary(bins);

	//create drowdown menu - first we append a option called (all weeks):
	week_array.push("All")

	var index = week_array.length-1;



	var cards;
	var legend_sum;

	//function used to create a datetime given the weeknumber, year, hour and day
	var parseDate_click = d3.timeParse("%a %_H %V, %Y");


	//function that recomputes the weekly calender summary
	function weekly_summary(data){

	//nest the data (i.e. save average number of incidents for each weekday (1-7) and each hour of each weekday (00-23))
	var nested_data = d3.nest()
	.key(function(d) { return formatTimeDay(new Date(d.x0)); })
	.key(function(d) { return formatTimeHour(new Date(d.x0)); })
	.rollup(function(v) { return d3.sum(v, function(d) { return d.length; }); })
	.object(data);

	//nest the data, in a way so that we can access it for the all data option
	var nested_data_all = d3.nest()
	.key(function(d) { return formatTimeDay(new Date(d.x0)); })
	.key(function(d) { return formatTimeHour(new Date(d.x0)); })
	.object(data);

	//restructure data so that we can use it to create the calender
	var flatList = [];
	for (var day in nested_data) {
	var day_data = nested_data[day];
	for (var hour in day_data) {
	flatList.push( { day: +day, hour: hour, value: day_data[hour]} );
	}
	}

	//create colorScale
	var colorScale_sum = d3.scaleQuantile()
	.domain([0, buckets - 1, d3.max(flatList, function (d) { return d.value; })])
	.range(colors);

	//if the calender already has been drawn once before, we clear it
	if(cards){cards.remove();}

	//draw the squares of the calender
	cards = svg_sum.selectAll(".hour")
	.data(flatList)
	.enter().append("rect")
	.attr("x", function(d,i) { return (d.hour) * gridSize; })
	.attr("y", function(d) { return (d.day-1) * gridSize; })
	.attr("rx", 4)
	.attr("ry", 4)
	.attr("class", "hour bordered")
	.attr("width", gridSize)
	.attr("height", gridSize)
	.style("fill", colors[0])
	.style("cursor", "pointer")
	.on('click', function(d){

	//when clicking a rectangle we want to move the brush to that hour (only done for single weeks (i.e. not for option all))

	if(index != week_array.length-1){

	var first_date = xScale2(parseDate_click(abr_days[d.day-1] + ' ' + d.hour + ' ' + week_array[index]));
	var second_date = xScale2(d3.timeHour.offset(parseDate_click(abr_days[d.day-1] + ' ' + d.hour + ' ' + week_array[index])), 1);


	//brush covers the hour
	context.select(".brush").transition().duration(2000).call(brush.move, [first_date, second_date]);

	}
	else{ //when clicking a rectangle in the All weekly summary, we create a popup showing the distribution for all weeks for the chosen hour

	//find the values for all weeks for the given day/hour
	var allWeeks_values = nested_data_all[d.day][d.hour];

	//save the number of incidents per week for the given day/hour)
	var dataset = [];
	allWeeks_values.forEach(function(f){

	dataset.push([formatTimeWeek1(f.x0), f.length]);

	});

	//create the popup
	tool_tip.show();

	var barWidth = 20;
	var chartheight = 80;
	var margin = 30;

	//create the svg which we will create the chart within
	var tipSVG = d3.select("#tipDiv")
	.append("svg")
	.attr("width", barWidth*dataset.length)
	.attr("height", chartheight)
	.on('click', tool_tip.hide);

	//create the scale for the bar chart
	var y = d3.scaleLinear()
	.domain([0, d3.max(dataset, function(d) { return d[1];})])
	.range([chartheight-margin,0]);

	var bar = tipSVG.selectAll("g")
	.data(dataset)
	.enter().append("g")
	.attr("transform", function(d, i){

	return "translate(" + i * barWidth + ",0)";

	});

	bar.append("rect")
	.attr("width", barWidth-1)
	.attr("height", 0)
	.attr("y",function(d){return y(d[1])})
	.attr("fill", "grey")
	.transition()
	.duration(1000)
	.attr("height", function(d){return chartheight-margin-y(d[1])});

	bar.append("text")
	.attr("class", "tipchart")
	.attr("x", 2)
	.attr("y", chartheight-margin*0.7)
	.attr("dx", ".15em")
	.attr("fill", "black")
	.text(function(d){return d[0]});

	tipSVG.append("text")
	.attr("class", "tipchart")
	.attr("transform", "translate("+ ((barWidthdataset.length-margin)/2) + "," + (chartheight-margin0.2) + ")")
	.attr("fill", "black")
	.text("Week");
	}

	})



	//draw the colors
	cards.transition().duration(1000)
	.style("fill", function(d) { return colorScale_sum(d.value); });

	//create hover over popup
	var formatDecimal = d3.format(".1f");
	cards.append("title").text(function(d) { return "Number of incidents: " + formatDecimal(d.value); });


	//create legend describing colors
	if(legend_sum){legend_sum.remove();}
	legend_sum = svg_sum.selectAll(".legend")
	.data([0].concat(colorScale_sum.quantiles()), function(d) { return d; })
	.enter()
	.append("g")
	.attr("class", "legend")
	.attr("transform", function(d,i){

	return 'translate(' + (legendElementWidth * i) + ',' + 2*margin.top + ')';

	});

	legend_sum.append("rect")
	.attr("width", legendElementWidth)
	.attr("height", gridSize / 2)
	.style("cursor", "default")
	.style("fill", function(d, i) { return colors[i]; });

	legend_sum.append("text")
	.attr("class", "summary_legend")
	.text(function(d) {return "≥ " + formatDecimal(d); })
	.attr("x", 0.2*legendElementWidth)
	.attr("y", 0.6*legendElementWidth)
	.attr("font-weight", "normal");


	}


	});


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