d3.json("property.json", function(error, property_data) {
	
	//create arrays of number of properties for drawing paths
	for(i=0; i < property_data.length; i++){
		window[property_data[i].COUNTY + "_array"]=[]	;
		for(j = 0; j < range_bands.length; j++){
					window[property_data[i].COUNTY + "_array"].push(property_data[i]["d"+ String(100 + 30*j)])
				}
	};

	
	
	for(i=0; i < property_data.length; i++){
		county_total.push({COUNTY:property_data[i].COUNTY, PROVINCE:property_data[i].PROVINCE, total:0});
		county_total[i].total = (property_data[i]['d100'] + property_data[i]['d130'] + property_data[i]['d160'] + property_data[i]['d190'] + property_data[i]['d220'] + property_data[i]['d250'] + property_data[i]['d280'] + property_data[i]['d310'] + property_data[i]['d340'] + property_data[i]['d370'] + property_data[i]['d400'] + property_data[i]['d430'] + property_data[i]['d460'] + property_data[i]['d490'] + property_data[i]['d520'] + property_data[i]['d550'] + property_data[i]['d580'] + property_data[i]['d610'] + property_data[i]['d640'] + property_data[i]['d670'] + property_data[i]['d700'] + property_data[i]['d730'] + property_data[i]['d760'] + property_data[i]['d790'] + property_data[i]['d820'] + property_data[i]['d850'] + property_data[i]['d880'] + property_data[i]['d910'] + property_data[i]['d940'] + property_data[i]['d970'] + property_data[i]['d1000'])
	};
	
	
	get_abc_order();
	get_numerical_order(county_counter);
	
	
	for(i=0; i<property_data.length; i++){
		for(j=0; j < range_bands.length; j++){
					if (property_data[i][range_bands[j]] > max_properties){
						max_properties = property_data[i][range_bands[j]];
					}
				
				}
	};
	
	
	
	
	for(i=0; i<property_data.length; i++){
		small_ms_coords.push( {x:order_counter_x, y:order_counter_y} );
		order_counter_x +=1;
		if (order_counter_x == 6){
								order_counter_x = 0;
								order_counter_y += 1;
							}
	};
	
	
	
	var colorScale=d3.scale.linear()
	.domain([0, numerical_order[0].total])
	.range(["white","red"]);
	

	//set ranges
	var xScale=d3.scale.linear()
				.domain([0, 30])
				.range([0, small_m_width - spacer*4 ])	
				
	var xScale2=d3.scale.linear()
				//.domain([100, 970])
				.domain([0, 30])
				.range([0, small_m_width - spacer*4 ])	
					
	var yScale=d3.scale.linear()
							.domain([0, max_properties + 10])
							.range([small_m_height - spacer*4, 0])
							;
		
	///////////////////////////////////////////////////////	

	//define axes
	var xAxis=d3.svg.axis()
	.scale(xScale2)
	.orient("bottom")
	.ticks(32)
	.outerTickSize(0)
	//.attr('style', 'display:none')
	
	
	

	

	var yAxis=d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(3)
	.innerTickSize(-small_m_width - spacer*4)
	.outerTickSize(0)
	//.tickFormat("");

	
	// Define the line
	var valueline = d3.svg.line()
	//.interpolate("basis")
    .x(function(d,i) {return xScale(i)})
    .y(function(d) {  return yScale(d) });
	
	var area = d3.svg.area()
	//.interpolate("basis")
	.x(function(d,i) { return xScale(i) })
	.y0(small_m_height - spacer*4)
	.y1(function(d) { return yScale(d) });
	
	
	
	var bisect = d3.bisector(function(datum) {
	  return datum;
	}).right;

///////////////////////////////////////////////////////
	
	hexagons=canvas.selectAll("g")
		.data(property_data)
		.enter()
		.append("path")
		.attr("id", function(d,i){return d.COUNTY +"_svg"})
		.attr("stroke", "grey")
			// return colorScale( 
			// d.d100	+ d.d130 + d.d160 + d.d190 + d.d220 + d.d250 + d.d280 + d.d310 + d.d340 + d.d370 + d.d400 + d.d430 + d.d460 + d.d490 + d.d520 + d.d550 + d.d580 + d.d610 + d.d640 + d.d670 + d.d700 + d.d730 + d.d760 + d.d790 + d.d820 + d.d850 + d.d880 + d.d910 + d.d940 + d.d970
			// )  
			//}
		.attr("fill", function(d,i){
			return colorScale( 
			d.d100	+ d.d130 + d.d160 + d.d190 + d.d220 + d.d250 + d.d280 + d.d310 + d.d340 + d.d370 + d.d400 + d.d430 + d.d460 + d.d490 + d.d520 + d.d550 + d.d580 + d.d610 + d.d640 + d.d670 + d.d700 + d.d730 + d.d760 + d.d790 + d.d820 + d.d850 + d.d880 + d.d910 + d.d940 + d.d970 + d.d1000
			)
		})
		.attr("class", "hex")
		.attr("d", "M0 12.990381056766578L7.5 0L22.5 0L30 12.990381056766578L22.5 25.980762113533157L7.5 25.980762113533157Z")
		.attr("transform", function(d,i){return "translate("+(26*d.x).toString()+ ","+ (15*d.y).toString() +")"});
		
		
		
		
		
		
		/////////////////////////////////////////////////////////////////
		small_ms =canvas_2.selectAll("g")
		.data(property_data)
		.enter()
		.append("svg")
		  .attr("width", small_m_width)
		  .attr("height", small_m_height - spacer)
		  .attr("x", function(d,i){
								return small_ms_coords[i].x * small_m_width
		  })
		  .attr("y", function(d,i){
								return small_ms_coords[i].y * small_m_height
								})
			.attr("fill", "white");
	


		//this will be used to test for hover over- when hovering over path area, brushing tooltip will appear- we want the same when hovering over white space  
		hover_check = small_ms.append('rect')
			.attr('fill', 'white')
			.attr('class', 'tracker')
			.attr('x', 0)
			.attr('y', 0)
			.attr('width', small_m_width - spacer*4)
			.attr('height', small_m_height - spacer*4)
			.attr("transform","translate("+ String(spacer*3) +" ," +(spacer)+")");
		  
		  //small multiple label
		  small_ms.append("text")
			.html(function(d){return d.COUNTY})
			.attr("font-size", 10)
			.attr("id", "county_label")
			.attr("text-anchor", "middle")
			.attr("transform","translate("+ String((small_m_width-spacer)/2) +" ,"  +spacer+")")
			.attr("fill", "grey");
			
			
			area = small_ms.append("path")
				//.datum(function(d){return valueline(window[d.COUNTY + "_array"])})
				.attr("class", "area tracker")
				.attr("d", function(d){return area(window[d.COUNTY + "_array"])})
				.attr("transform","translate("+ String(spacer*3) +" ," +(spacer)+")")
			
			lines=small_ms.append("path")
			//.attr("fill", "none")
			.attr("d",  function(d){return valueline(window[d.COUNTY + "_array"])})
			.attr("class", "path")
			.attr("transform","translate("+ String(spacer*3) +" ," +(spacer)+")");
				
			small_ms.append("g")
			.attr("id", function(d,i){return d.COUNTY+"_yAxis"})
			.attr("transform","translate("+ String(spacer*3) +" ," +(spacer)+")")
			.attr("class", "axis")
			.call(yAxis);
			
			k100 = small_ms.append("text")
			.html('-100k')
			.attr("font-size", 10)
			.attr("id", "100k")
			.attr("text-anchor", "start")
			.attr("transform","translate("+ String(spacer*3) +" ,"  +String(small_m_height - spacer*1.5)+")")
			.attr("fill", "grey");
			
			m1 = small_ms.append("text")
			.html('+1m')
			.attr("font-size", 10)
			.attr("id", "100k")
			.attr("text-anchor", "end")
			.attr("transform","translate("+ String(small_m_width)  +" ,"  +String(small_m_height - spacer*1.5)+")")
			.attr("fill", "grey");

			
			
			
			
			d3.selectAll(".x_axis > .tick > text") 
			.attr("class", function(d,i) {return "axisText axisText" + d})
			.attr('style', function(d,i){
								if(d == 0|| d == 30){
									return 'visibility: show'
								}
								else{
									return 'visibility: hidden'
								}
							}
						)
			;
			
			//target ticks
			d3.selectAll(".tick > text")
			.style("font-size", 10);
			
			
		//TOOL TIP____________________________________________________________________ -->
		var tooltip=d3.select("body").append("div")
						.style("position","absolute")
						.style("padding","0px")
						.style("opacity","0")
						.style("background", "#6D6D6D")
						.style("border", "2px;")
						.style("text-align","center")
						.style("vertical-align","middle")
						.style("padding","10px")
						.attr("id", "tooltip")
						.style("color", "white")
		
		hexagons.on("mousemove", function(d,i){
			tooltip
			.html( function(){
									for(j=0; j<county_total.length; j++){
										if(d.COUNTY == county_total[j].COUNTY){
											return d.COUNTY + "<br/>" + String(county_total[j].total)
										}
									}
								})
			.style("opacity", 1)
					.style("left", function(){
									if(d3.event.pageX+200<$( window ).width()){
										return(d3.event.pageX+10)+"px"
									}
									else{
										return(d3.event.pageX-$("#tooltip").width()-30)+"px"
									}
									})
					.style("top", (d3.event.pageY-20)+"px");
			
	})
	.on("mouseout", function(){
		tooltip
			.style("opacity", 0)
			.style("left", "-100px")
			.style("top", "-100px")
	
	});
	

	 
	
	north_counties.on("mousemove", function(d,i){
			tooltip
			.html( function(){
								if(d.COUNTY == 'Lough Neagh'){
									return d.COUNTY
								}
								else{
									return d.COUNTY 
									}
								})
			.style("opacity", 1)
					.style("left", function(){
									if(d3.event.pageX+200<$( window ).width()){
										return(d3.event.pageX+10)+"px"
									}
									else{
										return(d3.event.pageX-$("#tooltip").width()-30)+"px"
									}
									})
					.style("top", (d3.event.pageY-20)+"px")
			
	})
	.on("mouseout", function(){
		tooltip
			.style("opacity", 0)
			.style("left", "-100px")
			.style("top", "-100px")
	
	});
	
	tracker = small_ms.append("line")
					.attr("id", "tracker")
					.attr("x1", spacer*3)
					.attr("y1", 0)
                    .attr("x2", spacer*3)
                    .attr("y2", small_m_height)
					.attr("stroke", "none")
					;
					
	tracker_dot = small_ms.append("circle")
					.attr("id", "tracker_spot")
					.attr("cx", spacer*3+30)
					.attr("cy", 30)
					.attr("r", 2)
					.attr("stroke", "none")
					.attr("fill", "black")
					.attr("visibility", "hidden")
					;
	tracker_text_no = small_ms.append("text")
					.attr("id", "tracker_text_no")
					.html('Null')
					.attr("x", spacer*3+30)
					.attr("y", 30)
					.attr("fill", "black")
					.attr("font-size", 10)
					.attr("visibility", "hidden")
					;

	tracker_text_vol = small_ms.append("text")
					.attr("id", "tracker_text_vol")
					.html('Null')
					.attr("x", spacer*3+30)
					.attr("y", 30)
					.attr("fill", "grey")
					.attr("font-size", 10)
					.attr("visibility", "hidden")
					;
	
	d3.selectAll(".tracker").on("mousemove", function(d,i){
					
					mouse_x = xScale.invert(d3.mouse(this)[0]);
					mouse_x_index = (bisect(range, mouse_x));
					
					tracker_dot
					.attr("cx", spacer*3+ xScale(mouse_x_index))
					.attr("cy", function(d, i){return spacer + yScale(window[String(d.COUNTY) + "_array"][mouse_x_index])})
					.attr("visibility", "show");
					
					tracker_text_no
					.html(function(d){return window[String(d.COUNTY) + "_array"][mouse_x_index]})
					.attr("x", spacer*3+ xScale(mouse_x_index))
					.attr('text-anchor',  function(d, i){if(mouse_x_index >=10){
																return 'start'
															}
															else{
															return 'end'
															}
															} )
					.attr("y", function(d, i){return spacer - 5 + yScale(window[String(d.COUNTY) + "_array"][mouse_x_index])})
					.attr("visibility", "show");
					
					tracker_text_vol
					.html(function(){return String(range_bands2[mouse_x_index]) + " - " + String(range_bands2[mouse_x_index]+30) + "k"})
					.attr("x", spacer*3+ xScale(mouse_x_index))
					.attr('text-anchor',  'middle')
					.attr("y", String(small_m_height - spacer*1.5))
					.attr("visibility", "show");
					
					 attay = document.getElementsByClassName("axisText0");
					 
					m1.attr("visibility", "hidden");
					k100.attr("visibility", "hidden");
					
			
	})
	.on("mouseout", function(){
		tracker_dot
		.attr("visibility", "hidden");
		
		tracker_text_no
		.attr("visibility", "hidden");
		
		tracker_text_vol
		.attr("visibility", "hidden");
		
		m1.attr("visibility", "show");
		k100.attr("visibility", "show");
		
	});
	
	

});

	function order_123(){
		sort_style = 123;
	
		small_ms.transition().duration(500)
		.attr("x", function(d,i){
							for(j=0; j < numerical_order.length; j++){
								if(d.COUNTY == numerical_order[j].COUNTY){
									return small_ms_coords[j].x * small_m_width 
									}
								}
							})
		 .attr("y", function(d,i){
							for(j=0; j < numerical_order.length; j++){
								if(d.COUNTY == numerical_order[j].COUNTY){
									return small_ms_coords[j].y * small_m_height 
									}
								}
							})
	};
	
	
	
	

	
	// http://stackoverflow.com/questions/19187085/how-can-i-quickly-and-easily-convert-spreadsheet-data-to-json
// http://www.convertcsv.com/csv-to-json.htm
// https://www.dashingd3js.com/lessons/d3-and-json
//https://codepen.io/wvr/pen/WrNgJp