dr-dimitru · March 25, 2016 23:01
diff --git a/dace2_csv.csv b/dace2_csv.csv
diff --git a/histogram.js b/histogram.js
 function histogramChart(dataset, myOptions)

 {

 	//=========================================================================================================================
 	//svg dimensions and margins

 	//var margin = {top: 20, right: 20, bottom: 20, left: 20};
 	//var margin  = {top: 20, right: 20, bottom: 40, left: 60}

 	var margintop = typeof(myOptions.margintop) !== "undefined" ? myOptions.margintop : 20;
 	var marginbottom = typeof(myOptions.marginbottom) !== "undefined" ? myOptions.marginbottom : 20;
 	var marginleft = typeof(myOptions.marginleft) !== "undefined" ? myOptions.marginleft : 30;
 	var marginright = typeof(myOptions.marginright) !== "undefined" ? myOptions.marginright : 20;


 	var margin = {
 		top: margintop,
 		right: marginright,
 		bottom: marginbottom,
 		left: marginleft
 	};


 	var responsive = typeof(myOptions.responsive) !== "undefined" ? myOptions.responsive : "no";

 	if (responsive == "yes")
 	{
 		//To get width and height of body element
 		var width = window.innerWidth - margin.left / 2 - margin.right / 2;
 		var height = window.innerHeight - margin.top / 2 - margin.bottom / 2;

 		//This one gets the width and height of the div
 		//var width = $("#myChart").width();

 		//console.log(window.innerWidth)
 		//console.log(window.innerHeight)
 	}
 	else
 	{
 		var width = typeof(myOptions.width) !== "undefined" ? myOptions.width : 400;
 		var height = typeof(myOptions.height) !== "undefined" ? myOptions.height : 300;
 		var padding = typeof(myOptions.padding) !== "undefined" ? myOptions.padding : 0;
 	};

 	var w1 = width; //width
 	var h1 = height; //height

 	var width = w1 - margin.left - margin.right;
 	var height = h1 - margin.top - margin.bottom;
 	var padding = 0;
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//column to sample in the input data

 	//number of bins (bars) in the histogram;
 	var number_of_bins = typeof(myOptions.number_of_bins) !== "undefined" ? myOptions.number_of_bins : 10;

 	//column to sample
 	var column_s = typeof(myOptions.column_s) !== "undefined" ? myOptions.column_s : 1;

 	//title 
 	var column_t = typeof(myOptions.column_t) !== "undefined" ? myOptions.column_t : column_s;

 	//=========================================================================================================================



 	//=========================================================================================================================
 	//aggregator type
 	//count, mean, sum, min, max, std, variance
 	var agg_type = typeof(myOptions.agg_type) !== "undefined" ? myOptions.agg_type : "count";
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//Add some offset

 	//Control the chart position using offset and margins

 	//offset of graph and axis from right      
 	var xOffset = typeof(myOptions.xOffset) !== "undefined" ? myOptions.xOffset : 30;

 	//offset of graph and axis from top      
 	var yOffset = typeof(myOptions.yOffset) !== "undefined" ? myOptions.yOffset : 30;

 	//offset of left axis and graph 
 	var xa_start = typeof(myOptions.xa_start) !== "undefined" ? myOptions.xa_start : 0;

 	//offset of bottom axis and graph
 	var ya_start = typeof(myOptions.ya_start) !== "undefined" ? myOptions.ya_start : 0;

 	//translate bottom axis 
 	var shift_ax = typeof(myOptions.shift_ax) !== "undefined" ? myOptions.shift_ax : 0;

 	//translate left axis     
 	var shift_ay = typeof(myOptions.shift_ay) !== "undefined" ? myOptions.shift_ay : 0;
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//EXPERIMENTAL

 	//Start and end of clipping
 	// var xc_begin  = 0;
 	// var xc_Offset = 0;     //usually same as xOffSet if you want to clip to the end of the axis
 	// //var xc_end    = 0;
 	// var xc_end    = xc_Offset + xc_begin;
 	// var yc_begin  = 0;
 	// var yc_Offset = 0;     //usually same as yOffSet if you want to clip to the ens of the axis
 	// //var yc_end    = yc_Offset + yc_begin;
 	// var yc_end    = 0;
 	//Start and end of clipping

 	//EXPERIMENTAL
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//gap between bars
 	//var gap = typeof(myOptions.gap) !== "undefined" ? myOptions.gap + xa_start : 1 + xa_start;
 	var gap = typeof(myOptions.gap) !== "undefined" ? myOptions.gap + shift_ay : 1 + shift_ay;
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//Legend position
 	var legend_x = typeof(myOptions.legend_x) !== "undefined" ? myOptions.legend_x : 0;
 	var legend_y = typeof(myOptions.legend_y) !== "undefined" ? myOptions.legend_y : 0;
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//x label position
 	var text_padding_axx = typeof(myOptions.text_padding_axx) !== "undefined" ? myOptions.text_padding_axx : width / 2 - margin.right;
 	var text_padding_axy = typeof(myOptions.text_padding_axy) !== "undefined" ? myOptions.text_padding_axy : 35;
 	//x label position

 	//y label position
 	var text_padding_ayx = typeof(myOptions.text_padding_ayx) !== "undefined" ? myOptions.text_padding_ayx : 40;
 	var text_padding_ayy = typeof(myOptions.text_padding_ayy) !== "undefined" ? myOptions.text_padding_ayy : height / 2;
 	//y label position

 	//title position
 	var title_x = typeof(myOptions.title_x) !== "undefined" ? myOptions.title_x : width / 2;
 	var title_y = typeof(myOptions.title_y) !== "undefined" ? myOptions.title_y : 10;
 	//title position


 	//show title and additional title parameters
 	//yes or no
 	var show_title = typeof(myOptions.show_title) !== "undefined" ? myOptions.show_title : "no";
 	var title_auto_label = typeof(myOptions.title_auto_label) !== "undefined" ? myOptions.title_auto_label : "yes";
 	var title_label = typeof(myOptions.title_label) !== "undefined" ? myOptions.title_label : "{title_label: Chart title}";
 	//show title


 	//axes legend parameters
 	//yes or no
 	var xa_show_legend = typeof(myOptions.xa_show_legend) !== "undefined" ? myOptions.xa_show_legend : "yes";
 	var xa_auto_legend = typeof(myOptions.xa_auto_legend) !== "undefined" ? myOptions.xa_auto_legend : "yes";
 	var xa_legend = typeof(myOptions.xa_legend) !== "undefined" ? myOptions.xa_legend : "{axis label: label}";

 	var ya_show_legend = typeof(myOptions.ya_show_legend) !== "undefined" ? myOptions.ya_show_legend : "yes";
 	var ya_auto_legend = typeof(myOptions.ya_auto_legend) !== "undefined" ? myOptions.ya_auto_legend : "yes";
 	var ya_legend = typeof(myOptions.ya_legend) !== "undefined" ? myOptions.ya_legend : "{axis label: label}";
 	//axes legend parameters


 	//show text on bars
 	var show_bar_text = typeof(myOptions.show_bar_text) !== "undefined" ? myOptions.show_bar_text : "no";
 	var bar_f = typeof(myOptions.bar_f) !== "undefined" ? myOptions.bar_f : ".2f";
 	//show text on bars


 	//bars colors.  The bar can be positive or negative
 	var bar_color = typeof(myOptions.bar_color) !== "undefined" ? myOptions.bar_color : "steelblue";
 	var bar_neg_color = typeof(myOptions.bar_neg_color) !== "undefined" ? myOptions.bar_neg_color : "brown";
 	//bars colors.  The bar can be positive or negative


 	//x, y axes font size
 	var axes_font_size = typeof(myOptions.axes_font_size) !== "undefined" ? myOptions.axes_font_size : 10;
 	//x, y axes font size


 	//axes number ticks
 	var x_ticks = typeof(myOptions.x_ticks) !== "undefined" ? myOptions.x_ticks : 10;
 	var y_ticks = typeof(myOptions.y_ticks) !== "undefined" ? myOptions.y_ticks : 10;
 	//axes number ticks

 	//plot inner frame
 	var plot_frame = typeof(myOptions.plot_frame) !== "undefined" ? myOptions.plot_frame : "no";


 	//axes and tooltio number format
 	//examples: .d .f .2f .2r
 	var ax_f = typeof(myOptions.ax_f) !== "undefined" ? myOptions.ax_f : ".d";
 	var ay_f = typeof(myOptions.ay_f) !== "undefined" ? myOptions.ay_f : ".d";
 	var tooltip_f = typeof(myOptions.tooltip_f) !== "undefined" ? myOptions.tooltip_f : ".4f";
 	//axes and tooltio number format


 	//transition parameters
 	var enable_transition = typeof(myOptions.enable_transition) !== "undefined" ? myOptions.enable_transition : "yes";
 	var transition_color = typeof(myOptions.transition_color) !== "undefined" ? myOptions.transition_color : "orange";
 	var transition_duration = typeof(myOptions.transition_duration) !== "undefined" ? myOptions.transition_duration : 250;
 	var enable_tooltip = typeof(myOptions.enable_tooltip) !== "undefined" ? myOptions.enable_tooltip : "yes";
 	//transition parameters
 	//=========================================================================================================================



 	//=========================================================================================================================	
 	var headerNames = d3.keys(dataset[0]); //get header, using d3.  Here we get first row
 	//console.log(headerNames)

 	var keys = Object.keys(dataset[0]); //get keys outside the loop.  Same as the previous method but we do not use d3 
 	//console.log(keys)

 	//get id of header to plot as title and axis name
 	var xLabel = Object.keys(dataset[0])[column_s];
 	var tLabel = Object.keys(dataset[0])[column_t];
 	//=========================================================================================================================



 	//=========================================================================================================================
 	dataset.forEach(function(d, i)
 	{
 		keys.forEach(function(key, i)
 		{
 			orig = d[key];
 			modified = Number(orig);
 			d[key] = (typeof orig === "string" && !isNaN(modified)) ? modified : orig;
 		});

 	});
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//map data to new arrays
 	//in this case we are mapping the data in column_s of dataset
 	//can be a good idea to add a loop here to map all columns
 	var mapdata = dataset.map(function(d, i)
 	{
 		return d[keys[column_s]];
 	});

 	//console.log(mapdata);
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//create the histogram with the number of bins defined by number_of_bins	
 	var myHistogram = d3.layout.histogram()
 		.bins(number_of_bins)(mapdata); //the data is coming from mapdata

 	//console.log(myHistogram);
 	//=========================================================================================================================



 	//=========================================================================================================================
 	// call aggregators function

 	var aggregator = aggregators(myHistogram, agg_type);

 	//console.log(aggregator);
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//create scaling functions
 	var xScale = d3.scale.linear()
 		.domain([d3.min(mapdata), d3.max(mapdata)])
 		//.domain([0,d3.max(mapdata)])
 		//.range([xa_start, width - xOffset])
 		.range([shift_ay, width - xOffset])
 		.nice(); //fit nice the axis


 	if (agg_type == "count" || agg_type == "std" || agg_type == "variance")
 	{
 		var yScale = d3.scale.linear()
 			.domain([0, d3.max(aggregator)])
 			//.range([height - ya_start, yOffset])
 			.range([height - shift_ax, yOffset])
 			.nice();
 	}
 	else
 	{
 		var yScale = d3.scale.linear()
 			//.domain([0, d3.max(myHistogram, function(d) { return d.y; })])				//return the y value of all bins, equivalent to previous function.  I found this easier
 			//.domain([0, d3.max(aggregator)])												//return the y value of all bins, equivalent to previous function.  I found this easier
 			.domain([d3.min(aggregator), d3.max(aggregator)])
 			//.range([height,0])	
 			//.range([height,yOffset])
 			//.range([height - ya_start, yOffset]) //To reverse y axis and we add offset
 			.range([height - shift_ax, yOffset])
 			.nice(); //fit nice the axis	
 	};

 	//=========================================================================================================================



 	//=========================================================================================================================
 	//Create axes.  We need to draw them on the svg, this is done at the end
 	var xAxis = d3.svg.axis()
 		.scale(xScale)
 		.orient("bottom")
 		.ticks(x_ticks)
 		//.ticks(5);
 		//.ticks(number_of_bins)
 		.tickFormat(d3.format(ax_f));

 	var yAxis = d3.svg.axis()
 		.scale(yScale)
 		.orient("left")
 		.ticks(y_ticks)
 		//.ticks(5);
 		.tickFormat(d3.format(ay_f));


 	if (plot_frame == "yes")
 	{
 		xAxis.outerTickSize(-height + yOffset + shift_ax);
 		yAxis.outerTickSize(-width + xOffset + shift_ay);
 	};
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//tooltip function
 	//taken form http://bl.ocks.org/Caged/6476579
 	if (agg_type == "count")
 	{
 		tooltip_f = ".f"
 	};

 	var tip = d3.tip()
 		.attr("class", "d3-tip")
 		.offset([-10, 0])
 		//Set or get a tip's HTML content
 		//Initialize tooltip 
 		.html(function(d, i)
 		{
 			return "<span style='color:white;font-size:10px'>" + agg_type + ": </span> <span style='color:red;font-size:10px'>" + d3.format(tooltip_f)(aggregator[i]) + "</span>";
 		});
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//create the svg where we are going to plot the histogram
 	//add svg to DOM
 	var mySvg = d3.select("body").append("svg")
 		.attr("id", "chart") //add style to svg, defined in main.css													
 		.attr("width", width + margin.left + margin.right) //The svg does not have margin
 		.attr("height", height + margin.top + margin.bottom) //The svg does not have margin
 		//Responsive svg
 		//.call(responsivefy)
 		.append("g") //not sure what this group is doing		
 		.attr("transform", "translate(" + 2 * margin.left + ",0)"); //to traslate whole svg			

 	//=========================================================================================================================


 	//=========================================================================================================================
 	//bin the data to the document
 	//the data is coming from histogram
 	var bars = mySvg.selectAll(".bar") //style defined in main.css
 		.data(myHistogram)
 		.enter()
 		.append("g");
 	//.attr("transform", function(d) { return "translate(" + xScale(d.x)*0. + "," + yScale(d.y)*0 + ")"; });	
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//Invoke the tip in the context of your visualization 
 	//apply the tooltip to the svg
 	mySvg.call(tip);

 	//This will add the tooltips
 	if (enable_tooltip == "yes")
 	{
 		bars
 			.on("mouseover", tip.show)
 			.on("mouseout", tip.hide)
 	};
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//append the data to the actual bars
 	//remember the bars goes from top to bottom

 	myRect = bars.append("rect") //create the bars using rect
 		//I added d3.min(mapdata) because the histogram does not start from 0
 		.attr("x", function(d)
 		{
 			return xScale(d.x);
 		}) //starts from the left corner.  It is function of x, which is computed in the histogram
 		//.attr("y", 0)																//starts from the top, no edge swapping
 		//.attr("y", function (d) {return yScale(d.y)})													//swap y axis
 		.attr("y", function(d, i)
 		{
 			return yScale(aggregator[i]);
 		}) //swap y axis
 		//the width of each bar, for strictly positive values in x and minumum x equal to zero
 		//.attr("width", function(d){ return xScale(d.dx) - gap})	
 		//the width of each bar, for neg/pos values in x							
 		//.attr("width", xScale(d3.min(mapdata)  + myHistogram[0].dx) - gap )			
 		.attr("width", xScale(xScale.domain()[0] + myHistogram[0].dx) - gap) //when using .nice ()														
 		//.attr("height", function(d){ return height - yScale(d.y)})							//the frequency of the bin or the height (bar)
 		.attr("height", function(d, i)
 		{
 			return height - yScale(aggregator[i]) - shift_ax;
 		}) //aggregator or the height (bar)
 		.style("fill", function(d, i)
 		{
 			return aggregator[i] < 0 ? bar_neg_color : bar_color;
 		});
 	//.style("fill",bar_color)
 	// .style("stroke","black")
 	// .style("stroke-width",1)
 	//Method to add tooltip using web-browser, the easy way
 	//.append("title")
 	//.text(function(d){ return "Count " + d.y})


 	if (enable_transition == "yes")
 	{
 		myRect
 		//Add interaction to change bar color on mouse over
 			.on("mouseover", function(d)
 			{
 				//change fill
 				d3.select(this).style("fill", transition_color);
 			})
 			//transition out of bar color
 			.on("mouseout", function(d, i)
 			{
 				d3.select(this)
 					.transition()
 					.duration(transition_duration)
 					.style("fill", bar_color)
 					.style("fill", function()
 					{
 						return aggregator[i] < 0 ? bar_neg_color : bar_color;
 					});

 				//d3.select("#tooltip").remove();			//not in use
 			});
 	};


 	//=========================================================================================================================



 	//=========================================================================================================================
 	//add text to the bars
 	if (show_bar_text == "yes")
 	{
 		bars.append("text")
 			.classed("bar-label", true)
 			//.attr("x", function (d) {return xScale(d.x - d3.min(mapdata))})	
 			.attr("x", function(d)
 			{
 				return xScale(d.x + xScale.domain()[0]);
 			})
 			//.attr("y", function (d) {return yScale(d.y)})
 			.attr("y", function(d, i)
 			{
 				return yScale(aggregator[i]) - padding / 1.3;
 			})
 			.attr("dy", "40px")
 			.attr("dx", function(d)
 			{
 				return xScale(d.dx) / 2;
 			})
 			.style("font-family", "sans-serif")
 			.style("font-size", "10px")
 			.style("font-weight", "bold")
 			.style("fill", "black")
 			//.style("text-anchor", "end")
 			.text(function(d, i)
 			{
 				return d.y;
 			}) //the text is coming from y or frequency
 			//.text(function (d,i) {return d3.format(bar_f)(aggregator[i])})	//the text is coming from aggregator
 	};

 	//=========================================================================================================================



 	//=========================================================================================================================
 	//create a group where to apply the axes

 	var group = mySvg.append("g")
 		//.attr("class", "axis")  										//Assign "axis" class
 		.classed("axis", true) //Assign "axis" class
 		.attr("font-size", axes_font_size)
 		.attr("transform", "translate(0," + (height - shift_ax) + ")") //translate axis from top to bottom
 		.call(xAxis);

 	if (xa_show_legend == "yes")
 	{
 		if (xa_auto_legend == "yes")
 		{
 			xLabel = xLabel;
 		}
 		else
 		{
 			xLabel = xa_legend;
 		};

 		group.append("text")
 			//.attr("x", width + xOffset)
 			//.attr("y", -12)
 			.attr("y", text_padding_axy)
 			.attr("x", text_padding_axx)
 			//.attr("class", "label")
 			.style("font-family", "sans-serif")
 			.style("font-size", "12px")
 			.style("font-weight", "bold")
 			.style("fill", "black")
 			.style("text-anchor", "middle")
 			//.style("text-anchor", "end")
 			//.text("QOI");
 			//.text(function(){ var title = Object.keys(dataset[0])[column_s]; return title});
 			.text(function()
 			{
 				return xLabel;
 			});
 	};



 	var group = mySvg.append("g")
 		//.attr("class", "axis")  										//Assign "axis" class
 		.classed("axis", true) //Assign "axis" class
 		.attr("font-size", axes_font_size)
 		.attr("transform", "translate(" + shift_ay + ",0)")
 		//.attr("transform", "translate("+ xOffset + ",0)")				//translate axis from top to bottom
 		//.attr("transform", "translate("+ xOffset/10 + ",0)")			//To avoid the axis legend superimpose the bar
 		.call(yAxis);

 	if (ya_show_legend == "yes")
 	{
 		if (ya_auto_legend == "yes")
 		{
 			yLabel = agg_type;
 		}
 		else
 		{
 			yLabel = ya_legend;
 		};

 		group.append("text")
 			.attr("transform", "rotate(-90)")
 			.attr("y", -text_padding_ayx)
 			.attr("x", -text_padding_ayy)
 			//.attr("y", 6)
 			//.attr("dy", ".71em")
 			//.attr("class", "label")
 			.style("font-family", "sans-serif")
 			.style("font-size", "12px")
 			.style("font-weight", "bold")
 			.style("fill", "black")
 			.style("text-anchor", "middle")
 			//.style("text-anchor", "end")
 			//.text("Count");
 			.text(yLabel);
 	};

 	//=========================================================================================================================



 	//=========================================================================================================================
 	//chart title
 	if (show_title == "yes")
 	{
 		if (title_auto_label == "yes")
 		{
 			mySvg.append("text")
 				.attr("x", title_x)
 				.attr("y", title_y)
 				//.attr("dy", "0.35em")
 				.style("text-anchor", "middle")
 				.style("font-family", "sans-serif")
 				.style("font-size", "20px")
 				.style("font-weight", "bold")
 				.style("fill", "black")
 				//.text("This the title");
 				//.text(function(){ var title = Object.keys(dataset[0])[column_s]; return title});
 				.text(function()
 				{
 					return tLabel;
 				});
 		}
 		else
 		{
 			mySvg.append("text")
 				.attr("x", title_x)
 				.attr("y", title_y)
 				//.attr("dy", "0.35em")
 				.style("text-anchor", "middle")
 				.style("font-family", "sans-serif")
 				.style("font-size", "20px")
 				.style("font-weight", "bold")
 				.style("fill", "black")
 				//.text("This the title");
 				//.text(function(){ var title = Object.keys(dataset[0])[column_s]; return title});
 				.text(title_label);
 		};

 	};
 	//=========================================================================================================================



 	//=========================================================================================================================
 	//FUNCTIONS HERE
 	//=========================================================================================================================

 	//=========================================================================================================================
 	//Aggregators
 	function aggregators(myHistogram, agg_type)
 	{
 		var aggregator = [];

 		if (agg_type == "count")
 		{
 			var count = 0;
 			myHistogram.forEach(function(d, i)
 			{
 				aggregator.push(myHistogram[i].length);

 				//console.log(d)
 			});
 		}
 		else if (agg_type == "sum")
 		{
 			myHistogram.forEach(function(d, i)
 			{
 				var sum = 0;
 				d.forEach(function(point)
 				{
 					sum += point;
 				});

 				//sum=ss.sum(myHistogram[i])

 				aggregator.push(sum);
 			});
 		}
 		else if (agg_type == "max")
 		{
 			var max = 0;
 			myHistogram.forEach(function(d, i)
 			{
 				if (myHistogram[i].length == 0)
 				{
 					max = 0;
 				}
 				else
 				{
 					max = d3.max(myHistogram[i]);
 				}
 				aggregator.push(max);
 			});
 		}
 		else if (agg_type == "min")
 		{
 			var min = 0;
 			myHistogram.forEach(function(d, i)
 			{
 				if (myHistogram[i].length == 0)
 				{
 					min = 0;
 				}
 				else
 				{
 					min = d3.min(myHistogram[i]);
 				};
 				aggregator.push(min);
 			});
 		}
 		else if (agg_type == "mean")
 		{
 			// var mean = 0;
 			// myHistogram.forEach(function (d,i)
 			// {
 			// 	if (myHistogram[i].length == 0)
 			// 	{
 			// 		aggregator.push(0);
 			// 	}

 			// 	else
 			// 	{
 			// 		var sum = 0;
 			// 		d.forEach(function(dd)
 			// 		{
 			// 			sum += dd;
 			// 		});
 			// 		aggregator.push(sum/myHistogram[i].length);
 			// 	}
 			// });	

 			myHistogram.forEach(function(d, i)
 			{
 				if (myHistogram[i].length == 0)
 				{
 					aggregator.push(0);
 				}
 				else
 				{
 					mean = ss.mean(myHistogram[i]);
 					aggregator.push(mean);
 				};
 			});
 		}
 		else if (agg_type == "std")
 		{
 			myHistogram.forEach(function(d, i)
 			{
 				if (myHistogram[i].length == 0)
 				{
 					aggregator.push(0);
 				}
 				else
 				{
 					std = ss.sampleStandardDeviation(myHistogram[i]);
 					aggregator.push(std);
 				};
 			});
 		}
 		else if (agg_type == "variance")
 		{
 			myHistogram.forEach(function(d, i)
 			{
 				if (myHistogram[i].length == 0)
 				{
 					aggregator.push(0);
 				}
 				else
 				{
 					variance = ss.sampleVariance(myHistogram[i]);
 					aggregator.push(variance);
 				};
 			});
 		}
 		else
 		{
 			//console.log("aggregator not in list")
 			alert("Aggregator not in list.\nValid options: count, sum, min, max, mean, std, variance")
 		};

 		//console.log(aggregator)

 		return aggregator;
 	};
 	//Aggregators
 	//=========================================================================================================================



 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <!--To definelanguage attribute-->	
 <html lang="en">
 <!--<html>-->	
 <!--To definelanguage attribute-->	

 <head>

 <!--
 Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
 -->
 	<meta charset="UTF-8">
 	<meta name="description" content="Free Web tutorials">
 	<meta name="keywords" content="HTML,CSS,XML,JavaScript">
 	<meta name="author" content="joegi">
 <!--
 Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
 -->

 	<title>D3.JS histogram</title>
 	
 <!--To read external CCS-->	
 	<link rel="stylesheet" href="main.css">
 <!--To read external CCS-->	
 	
 <!--To read external js-->	
 	<script  src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.min.js"></script>
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/simple-statistics/1.0.0/simple_statistics.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 <style>

 /*Read main.css for style definition*/

 </style>

 </head>

 <body>
 <!--Place all DOM elements here -->

 <script src="histogram.js"></script> 

 <script>
 //Write your code here

 var fix_body_length = "no" //yes or no

 //These options will fix the body width and number of columns
 if (fix_body_length == "yes")
 {
    var body_width = 800
    var svg_per_row = 2
    //document.body.style.width = '800px';
    //$('body').css('width', '800px');
    $('body').css('width', body_width);

    var width = body_width / svg_per_row
    var aspect_ratio = 1 //height-to-width
    var height = width * aspect_ratio
 }

 myOptions = {
    //responsive: "no",
    //width: 400, 
    //height: 400,
    width: width,           //use this option when using fix_body_length
    height: height,         //use this option when using fix_body_length
    // margintop: 20,
    // marginbottom: 20,
    // marginleft: 30,
    // marginright: 20,
    //padding: 0,
    number_of_bins: 20,
    column_s: 1,
    agg_type: "count",    //count, sum, mean, std, min, max, variance
    //xOffset: 60,
    // yOffset: 30,
    // shift_ax: 10,
    // shift_ay: 10,
    // gap: 1.0,        //gap between bars
    //legend_x: 0,
    //legend_y: 0,
    // text_padding_axx: 250,
    // text_padding_axy: 35,
    // text_padding_ayx: 50,
    // text_padding_ayy: 200,
    // show_title: 'yes',
    // title_auto_label: 'no',
    // title_label: 'Histogram',
    // title_x: 250,
    // title_y: 20,
    //xa_show_legend: "yes",
    //xa_auto_legend: "no",
    //xa_legend: "This is a manual legend",
    //ya_show_legend: "yes",
    //ya_auto_legend: "yes",
    //ya_legend: "This is a manual legend",
    //show_bar_text: "yes",
    //bar_f: ".2f",
    //bar_color: "steelblue",
    //bar_neg_color: "brown",
    // ax_f: ".d",    //.d, 2f, .4r
    // ay_f: ".d",
    // x_ticks: 5,
    // y_ticks: 5,
    //axes_font_size: 10,
    // tooltip_f: ".4f",
    // enable_transition: "yes",
    // transition_color: "orange",    
    // transition_duration: 250,  
    // enable_tooltip: "yes",
    //plot_frame: "yes",
 }

 //To clone myOptions.  Doing options2 = options1 does not work
 var options1 = jQuery.extend(true, {}, myOptions); //clone object
 //     options1.column_s = 2;




 //=========================================================================================================
 //jQuery
 $(document).ready(function() 
 {
    //Begin read csv
    d3.csv('dace2_csv.csv', function(error, inputdata)
    {
            var myChart = histogramChart(inputdata, options1);
            //var myChart = lineChart(inputdata,options2);
            //var myChart = lineChart(inputdata,{id1:"myChart2"},{column_y:2, responsive:"yes"});  
    //=========================================================================================================================
    });
    //End read csv

 }); //close jQuery
 //=========================================================================================================================
 </script>	


 <div class="container">

 </div>


 </body>
 </html>
diff --git a/main.css b/main.css

 body,html{
 /*
 	margin: 0;
 	padding: 0;
 */
 	font-family: "Arial", sans-serif;
 /*
 	font-size: 0.95em;
 	text-align: center;
 */
 }



 #chart{
  background-color: #F5F2EB;
 /*  border: 1px solid #CCC;*/
  border: 1px solid black;
 }

 /*
 .bar
 */
 .bar rect{
 	fill: steelblue;
 	shape-rendering: crispEdges;
 }

 .bar.positive {
  fill: steelblue;
  shape-rendering: crispEdges;
 }

 .bar.negative {
  fill: brown;
  shape-rendering: crispEdges;
 }


 .bar-label{
  fill: black;
  text-anchor:middle;     start middle end
  font-size: 10px;
  font-family: "Arial", sans-serif;
 }

 .axis path,
 .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
 }

 .axis text {
 /*    font-family: "Arial", sans-serif;
    font-size: 10px;*/
 }

 .d3-tip {
  line-height: 0;
  /*font-weight: bold;*/
  /*padding: 12px;*/
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
 }

 /* Creates a small triangle extender for the tooltip */
 .d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
 }

 /* Style northward tooltips differently */
 .d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
 }
dv1	dv2	of1	of2	of3
3.95E+000	1.63E+000	0.44242	0.0055127	0.0666262
7.11E+000	3.44E+000	0.860229	0.00615626	0.174343
6.90E+000	1.78E+000	0.782869	0.0089705	0.122455
7.79E+000	3.82E+000	0.960738	0.00650422	0.203037
1.25E+000	3.28E+000	0.158067	0.00373114	0.031634
5.63E+000	2.11E+000	0.643855	0.00648422	0.107407
6.64E+000	2.33E+000	0.762737	0.00699037	0.132135
3.96E+000	1.41E+000	0.444265	0.00597551	0.0638318
6.38E+000	4.89E+000	0.864868	0.00535356	0.201884
6.73E+000	4.60E+000	0.888628	0.0055163	0.202745
5.19E+000	4.79E+000	0.715961	0.00467028	0.166038
4.17E+000	4.39E+000	0.548693	0.00436052	0.123177
4.88E+000	1.88E+000	0.548022	0.00599115	0.0867015
5.81E+000	5.20E+000	0.821098	0.00499549	0.196221
3.56E+000	2.00E+000	0.380212	0.00543787	0.0601358
2.01E+000	2.38E+000	0.224484	0.00371717	0.0387185
3.71E+000	3.77E+000	0.461587	0.00408124	0.0971772
1.59E+000	5.36E+000	0.22686	0.0034927	0.0546232
7.74E+000	2.52E+000	0.894798	0.00802057	0.159765
1.88E+000	1.53E+000	0.209732	0.00418863	0.031095
3.28E+000	5.69E+000	0.489082	0.00400579	0.120467
7.83E+000	2.23E+000	0.894583	0.00841351	0.152001
6.03E+000	1.36E+000	0.662026	0.0059983	0.0940703
2.14E+000	1.16E+000	0.231075	0.00438567	0.0301151
7.39E+000	1.62E+000	0.821169	0.0104971	0.122461
4.83E+000	2.56E+000	0.56422	0.00497418	0.101825
2.87E+000	3.63E+000	0.332118	0.00466696	0.0684656
1.15E+000	2.68E+000	0.133462	0.00361322	0.0246652
1.39E+000	4.17E+000	0.179275	0.00372934	0.0395262
1.76E+000	3.74E+000	0.211937	0.00352874	0.0443347
6.82E+000	5.22E+000	0.949148	0.00595308	0.226929
7.57E+000	1.06E+000	0.817644	0.0090214	0.108385
5.38E+000	1.97E+000	0.617319	0.00658967	0.100748
2.40E+000	5.98E+000	0.371265	0.00386663	0.0932652
2.55E+000	3.99E+000	0.303265	0.00471644	0.0652136
4.08E+000	2.89E+000	0.483524	0.00451893	0.0916055
1.98E+000	2.95E+000	0.228924	0.00341306	0.0434032
1.09E+000	4.26E+000	0.147701	0.00358678	0.0325229
2.28E+000	5.16E+000	0.32764	0.0036458	0.0782611
3.19E+000	4.86E+000	0.433477	0.00397291	0.101071
2.09E+000	5.66E+000	0.313284	0.00381699	0.0771384
2.80E+000	4.93E+000	0.396343	0.00375472	0.093132
3.47E+000	5.54E+000	0.506127	0.00433163	0.123053
1.31E+000	3.06E+000	0.160795	0.00372824	0.0312874
7.30E+000	5.88E+000	1.09393	0.00621427	0.272825
3.88E+000	4.73E+000	0.528649	0.0040154	0.121908
7.06E+000	1.30E+000	0.787188	0.0106095	0.113181
4.61E+000	3.97E+000	0.579743	0.00449266	0.124819
6.51E+000	2.47E+000	0.7533	0.00681935	0.133751
4.01E+000	3.35E+000	0.484282	0.00435258	0.0974481
4.71E+000	3.20E+000	0.575467	0.00472183	0.11375
5.62E+000	2.99E+000	0.672241	0.00506832	0.129022
7.97E+000	3.44E+000	0.962246	0.00688882	0.195355
1.74E+000	5.03E+000	0.251872	0.00365795	0.0594795
6.22E+000	3.58E+000	0.772566	0.00540564	0.159721
5.57E+000	5.79E+000	0.839926	0.0053538	0.208591
3.73E+000	5.95E+000	0.574916	0.00455026	0.143466
6.96E+000	4.08E+000	0.893945	0.00575139	0.194748
7.60E+000	5.10E+000	1.04975	0.00638273	0.248782
3.06E+000	3.65E+000	0.381245	0.0041165	0.0798542
5.97E+000	4.48E+000	0.785495	0.00499614	0.177473
2.97E+000	1.82E+000	0.341119	0.00435284	0.0541011
7.42E+000	2.94E+000	0.878185	0.00676385	0.16704
4.57E+000	4.31E+000	0.601725	0.00458861	0.134022
6.68E+000	4.02E+000	0.850017	0.00551937	0.18421
1.23E+000	2.17E+000	0.139634	0.00369273	0.0235267
3.13E+000	2.70E+000	0.344307	0.00494575	0.0624528
6.88E+000	2.28E+000	0.785636	0.00798532	0.134366
1.42E+000	5.57E+000	0.211371	0.00366727	0.0516679
6.41E+000	1.42E+000	0.718886	0.00919798	0.102702
4.95E+000	3.70E+000	0.620955	0.00472399	0.130103
6.30E+000	5.72E+000	0.945	0.00565265	0.233703
5.23E+000	4.13E+000	0.676453	0.00479473	0.148103
4.42E+000	2.80E+000	0.5174	0.00474291	0.0966413
4.68E+000	1.04E+000	0.510168	0.00548327	0.0665036
5.08E+000	3.15E+000	0.607972	0.00507892	0.118618
2.93E+000	3.86E+000	0.373286	0.00403311	0.0797137
1.58E+000	4.65E+000	0.202184	0.00367698	0.046118
5.99E+000	1.72E+000	0.678367	0.00809129	0.103941
7.53E+000	5.59E+000	1.10196	0.00629203	0.270522
1.65E+000	4.56E+000	0.225404	0.0036595	0.0514577
2.49E+000	1.70E+000	0.280629	0.00413248	0.0429471
4.29E+000	5.00E+000	0.603704	0.00448411	0.1423
5.16E+000	4.43E+000	0.675874	0.00479725	0.151896
2.72E+000	4.30E+000	0.358434	0.00381974	0.0797646
3.26E+000	4.39E+000	0.427684	0.00413141	0.0958692
6.11E+000	3.11E+000	0.733094	0.0054457	0.14309
4.19E+000	5.44E+000	0.609194	0.00428096	0.147824
3.52E+000	1.92E+000	0.372418	0.00557168	0.0576857
5.74E+000	3.91E+000	0.718092	0.00518379	0.153837
7.36E+000	5.06E+000	1.01933	0.00623193	0.241402
6.61E+000	4.20E+000	0.861557	0.00550133	0.190104
2.64E+000	1.11E+000	0.292954	0.00503437	0.0384433
5.47E+000	4.84E+000	0.74939	0.00473995	0.174484
3.39E+000	1.22E+000	0.358101	0.00663352	0.0470239
3.78E+000	2.63E+000	0.454295	0.00507747	0.0832427
2.16E+000	2.29E+000	0.239519	0.00386806	0.040708
6.16E+000	5.50E+000	0.892422	0.00559686	0.21769
5.44E+000	5.42E+000	0.791011	0.00498362	0.191699
3.64E+000	5.26E+000	0.514737	0.00431793	0.123394
5.75E+000	3.38E+000	0.704696	0.00538639	0.142518
2.23E+000	5.33E+000	0.324973	0.00350689	0.0785113
2.36E+000	2.41E+000	0.273065	0.00401765	0.0479484
1.87E+000	3.55E+000	0.222555	0.00354138	0.0457607
5.00E+000	1.18E+000	0.542092	0.00507232	0.0725536
1.50E+000	1.54E+000	0.159653	0.00370631	0.022439
1.05E+000	1.28E+000	0.106321	0.00358308	0.0135324
7.18E+000	3.12E+000	0.856723	0.00622188	0.166763
6.45E+000	1.83E+000	0.731659	0.00766459	0.115655
3.36E+000	2.83E+000	0.397884	0.00407112	0.0747562
7.93E+000	4.55E+000	1.05334	0.0063934	0.239276
5.31E+000	5.85E+000	0.792741	0.00512185	0.197314
2.79E+000	3.26E+000	0.315443	0.00481832	0.0621428
4.33E+000	2.06E+000	0.498069	0.00512112	0.0827967
7.71E+000	4.68E+000	1.03656	0.0062326	0.238596
4.78E+000	3.49E+000	0.588175	0.00462752	0.120412
7.22E+000	2.61E+000	0.845494	0.00719094	0.153888
4.41E+000	5.81E+000	0.670656	0.00469022	0.166601
2.61E+000	2.15E+000	0.292859	0.00395829	0.0488465
5.87E+000	2.76E+000	0.692342	0.00595331	0.128726
4.49E+000	1.47E+000	0.509683	0.00685561	0.0748377
	<!DOCTYPE html>

	<!--To definelanguage attribute-->
	<html lang="en">
	<!--<html>-->
	<!--To definelanguage attribute-->

	<head>

	<!--
	Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
	-->
	<meta charset="UTF-8">
	<meta name="description" content="Free Web tutorials">
	<meta name="keywords" content="HTML,CSS,XML,JavaScript">
	<meta name="author" content="joegi">
	<!--
	Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
	-->

	<title>D3.JS histogram</title>

	<!--To read external CCS-->
	<link rel="stylesheet" href="main.css">
	<!--To read external CCS-->

	<!--To read external js-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.min.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-statistics/1.0.0/simple_statistics.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

	<style>

	/Read main.css for style definition/

	</style>

	</head>

	<body>
	<!--Place all DOM elements here -->

	<script src="histogram.js"></script>

	<script>
	//Write your code here

	var fix_body_length = "no" //yes or no

	//These options will fix the body width and number of columns
	if (fix_body_length == "yes")
	{
	var body_width = 800
	var svg_per_row = 2
	//document.body.style.width = '800px';
	//$('body').css('width', '800px');
	$('body').css('width', body_width);

	var width = body_width / svg_per_row
	var aspect_ratio = 1 //height-to-width
	var height = width * aspect_ratio
	}

	myOptions = {
	//responsive: "no",
	//width: 400,
	//height: 400,
	width: width, //use this option when using fix_body_length
	height: height, //use this option when using fix_body_length
	// margintop: 20,
	// marginbottom: 20,
	// marginleft: 30,
	// marginright: 20,
	//padding: 0,
	number_of_bins: 20,
	column_s: 1,
	agg_type: "count", //count, sum, mean, std, min, max, variance
	//xOffset: 60,
	// yOffset: 30,
	// shift_ax: 10,
	// shift_ay: 10,
	// gap: 1.0, //gap between bars
	//legend_x: 0,
	//legend_y: 0,
	// text_padding_axx: 250,
	// text_padding_axy: 35,
	// text_padding_ayx: 50,
	// text_padding_ayy: 200,
	// show_title: 'yes',
	// title_auto_label: 'no',
	// title_label: 'Histogram',
	// title_x: 250,
	// title_y: 20,
	//xa_show_legend: "yes",
	//xa_auto_legend: "no",
	//xa_legend: "This is a manual legend",
	//ya_show_legend: "yes",
	//ya_auto_legend: "yes",
	//ya_legend: "This is a manual legend",
	//show_bar_text: "yes",
	//bar_f: ".2f",
	//bar_color: "steelblue",
	//bar_neg_color: "brown",
	// ax_f: ".d", //.d, 2f, .4r
	// ay_f: ".d",
	// x_ticks: 5,
	// y_ticks: 5,
	//axes_font_size: 10,
	// tooltip_f: ".4f",
	// enable_transition: "yes",
	// transition_color: "orange",
	// transition_duration: 250,
	// enable_tooltip: "yes",
	//plot_frame: "yes",
	}

	//To clone myOptions. Doing options2 = options1 does not work
	var options1 = jQuery.extend(true, {}, myOptions); //clone object
	// options1.column_s = 2;




	//=========================================================================================================
	//jQuery
	$(document).ready(function()
	{
	//Begin read csv
	d3.csv('dace2_csv.csv', function(error, inputdata)
	{
	var myChart = histogramChart(inputdata, options1);
	//var myChart = lineChart(inputdata,options2);
	//var myChart = lineChart(inputdata,{id1:"myChart2"},{column_y:2, responsive:"yes"});
	//=========================================================================================================================
	});
	//End read csv

	}); //close jQuery
	//=========================================================================================================================
	</script>


	<div class="container">

	</div>


	</body>
	</html>

	body,html{
	/*
	margin: 0;
	padding: 0;
	*/
	font-family: "Arial", sans-serif;
	/*
	font-size: 0.95em;
	text-align: center;
	*/
	}



	#chart{
	background-color: #F5F2EB;
	/* border: 1px solid #CCC;*/
	border: 1px solid black;
	}

	/*
	.bar
	*/
	.bar rect{
	fill: steelblue;
	shape-rendering: crispEdges;
	}

	.bar.positive {
	fill: steelblue;
	shape-rendering: crispEdges;
	}

	.bar.negative {
	fill: brown;
	shape-rendering: crispEdges;
	}


	.bar-label{
	fill: black;
	text-anchor:middle; start middle end
	font-size: 10px;
	font-family: "Arial", sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	/* font-family: "Arial", sans-serif;
	font-size: 10px;*/
	}

	.d3-tip {
	line-height: 0;
	/font-weight: bold;/
	/padding: 12px;/
	padding: 8px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 2px;
	}

	/* Creates a small triangle extender for the tooltip */
	.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1.2;
	color: rgba(0, 0, 0, 0.8);
	content: "\25BC";
	position: absolute;
	text-align: center;
	}

	/* Style northward tooltips differently */
	.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	}