
function survey_color_ramp(input_setting_data,MapColumns,MapRows){	
   //var c = e.getContext('2d');
	var color_matrix=[];
		var width=50;
		var height=50;
	//var color = document.getElementById("color");
	    if($("#color_ramp_display").length==0){
		$('#color_ramp_display').remove();
		}
		$('#color_ramp_contain').append('<canvas id="color_ramp_display" width="'+width+'" height="'+height+'" style="position:absolute; border: red;border-style: dotted">')
		
		var canvas = document.getElementById('color_ramp_display');
				canvas.crossOrigin="anonymous";
		var context = canvas.getContext("2d");
		 
		var imageObj = new Image();
		//console.log(imageObj.length);
		imageObj.onload = function(){
			context.drawImage(imageObj, 0, 0);	
			//console.log("color_data");
			var color_matrix=color_to_cell_mapping(context,input_setting_data["data"],MapColumns,MapRows);
		    create_plot(init_settings,color_matrix);
			prepare_cluster_data_for_pcp(input_setting_data,color_matrix);
		};
		imageObj.src = $("#color_ramp_select").val();
			
	
	function prepare_cluster_data_for_pcp(init_settings_input,color_matrix){
		var id_to_cluster={},cluster_coord_to_color={},row_data_with_cluster=[],data_collection_array,join_key=init_settings_input['join_key'];		
		color_matrix.forEach((color_for_node) => {			
			cluster_coord_to_color[color_for_node[1]]=color_for_node[0];
		});		
		for(var each_coord in init_settings_input['data']){ 
			var cluster_color = cluster_coord_to_color[each_coord] || '#45484c';
			for(var each_data in init_settings_input['data'][each_coord]){
				var each_data_id = init_settings_input['data'][each_coord][each_data]['id'];
				id_to_cluster[each_data_id]={"cluster_id":each_coord, "cluster_color":cluster_color};				
			}
		}		
		data_collection_array = init_settings_input["raw_data"]["features"] || init_settings_input["raw_data"];		
		data_collection_array.forEach((each_array) => {
			var each_data_entry= each_array["properties"] || each_array;
			//each_data_entry['cluster_color']= id_to_cluster[each_data_entry[join_key]]['cluster_color'];
			each_data_entry['cluster_id']= id_to_cluster[each_data_entry[join_key]]['cluster_id'];
			row_data_with_cluster.push(each_data_entry);			
			
		});	
		//console.log("PCP result");
		//console.log(row_data_with_cluster);
		//var pcp_data=[{"sed_ratio_n":"0.400102","stc_n":"0.3","area_km":"18.8698","nhdslope":"0.00405351","q100":"4467.96","claycat":"24.8207","rusle_mean":"81","agc_cd":"37.3626381158829","grass_cd":"40.2930408716202","tall_tree_cd":"14.1941398382187"},{"sed_ratio_n":"0.620248","stc_n":"0.168","area_km":"4.63944","nhdslope":"0.00802913","q100":"2465.74","claycat":"24.0217","rusle_mean":"70","agc_cd":"54.9076795578003","grass_cd":"33.5276961326599","tall_tree_cd":"1.84645280241966"},{"sed_ratio_n":"0.250171","stc_n":"0.47","area_km":"49.2923","nhdslope":"0.00103995","q100":"6338.58","claycat":"18.9204","rusle_mean":"39","agc_cd":"46.405228972435","grass_cd":"26.4705896377563","tall_tree_cd":"3.26797403395176"},{"sed_ratio_n":"0.330173","stc_n":"0.262","area_km":"46.9011","nhdslope":"0.00103995","q100":"6338.58","claycat":"18.9204","rusle_mean":"39","agc_cd":"46.405228972435","grass_cd":"26.4705896377563","tall_tree_cd":"3.26797403395176"}];
		
			//$.getScript( "js/d3.parcoords.js", function( data, textStatus, jqxhr ){
				console.log("implement");
				//console.log(row_data_with_cluster);
				init_settings['pcp_data']=row_data_with_cluster;
		
		//console.log(init_settings_input);
		
		
		function order_and_select_field_for_pcp(row_data_with_cluster){
			var final_result=[];
			for(var each_item_index in row_data_with_cluster){
					let each_item=row_data_with_cluster[each_item_index];
					let temp_row={};
				temp_row['cluster_id']=each_item['cluster_id'];
				
				
				temp_row[init_settings_input["join_key"]]=each_item[init_settings_input["join_key"]];
				//console.log(init_settings_input["variables"]);
				for (var each_field_index in init_settings_input["variables"]){
					let each_field = init_settings_input["variables"][each_field_index];					
					//console.log(init_settings_input["variables"]);
					//console.log(each_field+"   "+init_settings_input["variables"].indexOf(each_field));
					if(init_settings_input["variables"].indexOf(each_field)!=-1 && each_field!=init_settings_input["join_key"] && each_field!="cluster_id"){
						//delete each_item[each_field];
						temp_row[each_field]=each_item[each_field];
					}			
				}
				 if(each_item.hasOwnProperty('landform_region')){
					temp_row['landform_region']=each_item['landform_region'];
				}
				final_result.push(temp_row);
			}
			return final_result;
		}
		
		function row_data_cluster_calculate_mean_by_class(options){
			var target_class_name=options['target_class_name'], skip_field =options['skip_field'], data_input=options['data_input'];
			var collecting_data_for_each_class={};
			data_input.map(function(x,i){
				if(!collecting_data_for_each_class.hasOwnProperty(x["cluster_id"])){
					collecting_data_for_each_class[x["cluster_id"]]={ "data":{},"mean":{},"std":{}}
				}
				
				
				for(var field_name in x){
					let field_value=x[field_name];
					if(field_name!=target_class_name && skip_field.indexOf(field_name)==-1){  /*exclude cluster name and other unwanted field*/
						if(!collecting_data_for_each_class[x["cluster_id"]]["data"].hasOwnProperty(field_name)){
						collecting_data_for_each_class[x["cluster_id"]]["data"][field_name]=[];		/*defining the array for storing each field further statistical analysis*/
						}	
						collecting_data_for_each_class[x["cluster_id"]]["data"][field_name].push(field_value);	/*collecting field value in an array for further statistical analysis*/
					}
				}
													 
				
			});
			
				
			for(var class_name in collecting_data_for_each_class){				
				let each_class_data = collecting_data_for_each_class[class_name];
				
				for(var each_field_name in each_class_data['data']){
					let each_data_array = each_class_data['data'][each_field_name];	
						//console.log(each_class_data);
					each_class_data["mean"][each_field_name]=each_data_array.map(function(x,i,arr){return x/arr.length}).reduce(function(a,b){return a + b}); 
					each_class_data["std"][each_field_name]=Math.sqrt(each_data_array.reduce(function (sq, n) {
																		return sq + Math.pow(n - each_class_data["mean"][each_field_name], 2);
																	}, 0) / (each_data_array.length - 1)); 
					
					
					/*iterate each field of valuse (array) to calculate mean value for cluster (used for edge bundling)*/
				}
			};		
			console.log(collecting_data_for_each_class);
			return { "class":target_class_name,"cluster_info":collecting_data_for_each_class};
			//var mean = [7,14,21].map(function(x,i,arr){return x/arr.length}).reduce(function(a,b){return a + b});			
			//javascript get mean			
		}
		
			var cluster_mean_info=row_data_cluster_calculate_mean_by_class({'target_class_name':"cluster_id",'skip_field':["class"],'data_input':row_data_with_cluster});
		
		//console.log(color);	
			$("#paracoord").empty();
		    window['som_pcp'] = d3.parcoords()("#paracoord").data(order_and_select_field_for_pcp(row_data_with_cluster)).clusterdata(cluster_mean_info).color(function(d) {								  //if value exists, assign it a color; otherwise assign gray
								if (id_to_cluster[d[join_key]]) {	 
									var rgb_color =(id_to_cluster[d[join_key]]["cluster_color"].replace("rgb(", "").replace(")", "")).split(",");									
									var hex_color = rgbToHex(Number(rgb_color[0]), Number(rgb_color[1]), Number(rgb_color[2]));
									return hex_color; //recolorMap holds the colorScale generator
								  } else {
									return "#ccc";
								  };
								}).render().brushable().on("brush", function(items) {
								
								
								//console.log(items);
								var items_id_list = (items.map((val, i, arr) => {
									  
									 // return id_to_cluster[val[join_key]]["cluster_id"];
									 return val["cluster_id"];
									}));
									window['som_pcp'].unhighlight(); 
								//console.log(items_id_list);
								//items.length!=0 ? console.log(id_to_cluster[items[join_key]]["cluster_id"]) : console.log("empty");
								//console.log(id_to_cluster[items[join_key]]["cluster_id"] );
								
								hex_som.style("opacity", 0.11).filter(function(d) {	
										    //console.log("S:"+selected_cluster_to_individual+"  dkey:"+d.properties[key]);
										    //console.log("i"+d.i+"-"+d.j);																						
											return items_id_list.indexOf("i"+(d.j)+"-"+(d.i)) > -1 ;
											  //if there it is in the slected  value
										  }).style("opacity", 1);
								
								}); 
								window['som_pcp'].clusterdata(cluster_mean_info);								
								
								pcp_label_conversion();
							   
								
								
								
			//});
	}
	
	function color_to_cell_mapping(context,input_data,MapColumns,MapRows){
		var data_color=[];
		var counter=0
		//console.log(MapColumns+"--"+MapRows);
		//console.log(input_data);
				//console.log(init_settings["data"]);				
			for (i = 0; i < MapColumns; i++) {
			     //for (j = MapRows; j >=0 ; j--) {
				for (j = 0; j < MapRows; j++) {						
						var index="i"+i+"-"+j;
						//console.log("rgb("+canvasColor[0]+","+canvasColor[1]+","+canvasColor[2]+")")
						  //console.log(index);
						var canvasColor=context.getImageData(parseInt(j/MapRows*height),parseInt(i/MapColumns*width), 1, 1).data;
						var color_result="rgb("+canvasColor[0]+","+canvasColor[1]+","+canvasColor[2]+")"						  
					     if(init_settings["data"].hasOwnProperty(index)){ 						 
							 data_color.push([color_result,index,"node"]);							 
						 }else{
							 data_color.push([color_result,index,"empty"]);   //no data 
						 }
					counter++;
				}
			}//end of for loop
			//console.log(data_color);
			return data_color;
	}	
} //end of whole_color map



function culvert_vis_analysis_som-draw_edgebundle_pcp(){
	
	
	
	
	
}

