nswamy14 · January 2, 2016 05:19
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Insert title here</title>
 <link rel="stylesheet" type="text/css" href="Over_lap.css">
 </head>
 <body>
 <div id = "Plot_div">
 		<div style="text-align: center;">
 		<div id = "Disti_plot_txt_cluster">Cluster - 0</div>
 		<form>
 			 <label><input type="radio" name="mode" value="COND-D" checked>COND-D</label>			
  			<label><input type="radio" name="mode" value="DBO-E">DBO-E</label>
  			<label><input type="radio" name="mode" value="DQO-E">DQ-E</label> 
  			<label><input type="radio" name="mode" value="SED-E">SED-E</label>
  			<label><input type="radio" name="mode" value="DBO-S">DBO-S</label>
  			<label><input type="radio" name="mode" value="PH-E">PH-E</label>
  			<label><input type="radio" name="mode" value="ZN-E" >ZN_E</label> 
  			<label><input type="radio" name="mode" value="SSV-D">SSV-D</label> 
  			<label><input type="radio" name="mode" value="PH-P">PH-P</label>
  			<label><input type="radio" name="mode" value="SSV-S">SSV-S</label> 
  			
  			
  		</form>
 		
 		</div>
 		<script src="http://d3js.org/d3.v2.js"></script>
 			 <script>
 			 window.onload = function()
             {
 				 myFunction();
             };
 			 
 			 
 			 var cluster_value = '';
 			 var attribute_value = 'COND-D';
 			 function myFunction(d)
 			 {
 			 	//On change in cluster value, call this module. 
 				 	
 				//giving default value for cluster selection.
 				if(d != null)
 					{
 					cluster_value = d.value;
 					}
 				else
 					{
 					cluster_value = 'C_517';
 					}
 				
 				d3.select("#Disti_plot_txt_cluster")
 					.text(cluster_value)
 				    .style("background-color","grey")
 				    .style("font-size","20px")
 				    .style("color","white");
 				d3.select(".time_chart")
 			       .remove();
 			 var format = d3.time.format("%b %Y");
 			 var formatCount = d3.format(",.0f");

 			 var margin = {top: 40, right: 40, bottom: 40, left: 40},
 			     width = (window.innerWidth)*0.65,
 			     height = (window.innerHeight)*0.7 - margin.bottom - 10 ;
 				
 			  var x = d3.scale.linear()
 		     .domain([0, 15])
 		     .range([0, width - margin.left - margin.right ]);


 			 var xAxis = d3.svg.axis()
 			     .scale(x)
 			     .orient("bottom")
 			     .tickPadding(8)
 			     ;
 			 
 			 var y = d3.scale.linear()
 			     .range([height - margin.top - margin.bottom, 0]);
 				 
 			 var yAxis = d3.svg.axis()
 			     .scale(y)
 			     .orient("right")
 			     .tickPadding(8);

 			
 			 
 			 			   
 			 d3.csv('water_sample_cluster.csv', function(data) {
 				 
 		var svg3 = d3.select("#Plot_div").append("svg")
 		 			.attr("width", width)
 		       		.attr("height", height)
 		       		.attr("class", "time_chart")
 		       		.style("display","block")
 		       		.append("g")
 		       		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 			   
 		
 		   var svg_Xaxis = svg3.append("g")
 		       .attr("class", "x axis")
 		       .attr("transform", "translate(0," + y.range()[0] + ")")
 		       ;

 		   var svg_Yaxis = svg3.append("g")
 		       .attr("class", "y axis")
 		       .attr("transform", "translate(" + x.range()[1] + ")")
 		       ;
 			   
 		   var svg_f1 = svg3.append("path");
 		   var svg_ff = svg3.append("path");
 		   
 		   var dat = d3.layout.histogram();
 		   change(d);
           d3.selectAll("input").on("change", change);
 			   
 			   
 			   function change(d) {	
 					 //On change in attribute, call this module
 	        	    var area = d3.svg.area()
 					   	.x(function(d) { return x(d.x); })
 					   	.y0(y.range()[0])
 					   	.y1(function(d) { return y(formatCount(d.y)); });
 					attribute_value = this.value;
 					var value = '';
 					//giving default value for attribute selection.
 					if(attribute_value != null)
 					{
 						value = attribute_value;	
 					}else
 					{

 						value = 'COND-D';
 					}
 			 		
 					
 						 series = new Array();
 						 data.forEach(function(r)
 						 {
 							 
 							 var nextRow = parseInt(r[value]);
 							 	 series.push(nextRow);	 
 							 				     
 						 });
 						 
 						 var xx = d3.scale.linear()
 					     .domain([0, d3.max(series)])
 					     .range([0, width - margin.left - margin.right ]);
 						 
 				   var data2 = dat.bins(xx.ticks(20))(series);
 				   
 					   x.domain(d3.extent(data2, function(d) { return d.x; }));
 					   y.domain([0, d3.max(data2, function(d) { return d.y; })]); 
 					   
 					   svg_f1.datum(data2)
 					   .attr("class", "area")
 					   .transition()
 			           	   .attr("d", area);
 				
 						   series1 = new Array();
 					   	    data.forEach(function(r)
 							 {
 					   	    			 var nextRow = parseInt(r[value]);
 										 if(r["cluster"]== cluster_value ){
 											 series1.push(nextRow);	 
 										 }
 									     
 									 });
 						    var data1 = d3.layout.histogram()
 						     .bins(x.ticks(20))
 						     (series1);
 						    
 					   
 						    svg_ff.datum(data1)
 				           	.attr("class", "area1")
 				           	.transition()
 				           	.attr("d", area);
 						svg_Xaxis
 						.transition()
 						.call(xAxis);	
 				        	svg_Yaxis
 				        	.transition()
 				        	.call(yAxis);
 					   };
 			   
 			 });
 			 
 			 }
 			 
 		</script>
 		 <div id="Dis_axis_dtl" style="float:right;">
 		 <h3>
 		 X-axis: Range <br>
 		 Y-axis: Count
 		 </h3>
 		 </div>
 		</div>

 </body>
 </html>
diff --git a/Over_lap.css b/Over_lap.css
 	path {
 		stroke: #000;
 		stroke-width: 1.5;
 		cursor: pointer;
 		}

 	body {
 		  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 		  margin: auto;
 		  position: relative;
 		  width: 70%;
 		 /* width: 960px;*/
 		}	

 	form {
 		  position: relative;
 		  right: 10px;
 		  top: 10px;
 		}
 	
 	.axis path,
 	.axis line {
  		fill: none;
  		stroke: #000;
  		shape-rendering: crispEdges;
 		}	

 	.area {
  			fill: steelblue;
 		}
 	.area1 {
  			fill: black;
 		}
 		
 	span
 		{
  		display: inline-block;
  		vertical-align: middle;
  		line-height: 44px;
 		}
 	#Plot_div
 	{
 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 		  margin: auto;
 		  position: relative;
 		  width: 100%;
 		  height:100%;
 	}

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/water_sample_cluster.csv b/water_sample_cluster.csv
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="Over_lap.css">
	</head>
	<body>
	<div id = "Plot_div">
	<div style="text-align: center;">
	<div id = "Disti_plot_txt_cluster">Cluster - 0</div>
	<form>
	<label><input type="radio" name="mode" value="COND-D" checked>COND-D</label>
	<label><input type="radio" name="mode" value="DBO-E">DBO-E</label>
	<label><input type="radio" name="mode" value="DQO-E">DQ-E</label>
	<label><input type="radio" name="mode" value="SED-E">SED-E</label>
	<label><input type="radio" name="mode" value="DBO-S">DBO-S</label>
	<label><input type="radio" name="mode" value="PH-E">PH-E</label>
	<label><input type="radio" name="mode" value="ZN-E" >ZN_E</label>
	<label><input type="radio" name="mode" value="SSV-D">SSV-D</label>
	<label><input type="radio" name="mode" value="PH-P">PH-P</label>
	<label><input type="radio" name="mode" value="SSV-S">SSV-S</label>


	</form>

	</div>
	<script src="http://d3js.org/d3.v2.js"></script>
	<script>
	window.onload = function()
	{
	myFunction();
	};


	var cluster_value = '';
	var attribute_value = 'COND-D';
	function myFunction(d)
	{
	//On change in cluster value, call this module.

	//giving default value for cluster selection.
	if(d != null)
	{
	cluster_value = d.value;
	}
	else
	{
	cluster_value = 'C_517';
	}

	d3.select("#Disti_plot_txt_cluster")
	.text(cluster_value)
	.style("background-color","grey")
	.style("font-size","20px")
	.style("color","white");
	d3.select(".time_chart")
	.remove();
	var format = d3.time.format("%b %Y");
	var formatCount = d3.format(",.0f");

	var margin = {top: 40, right: 40, bottom: 40, left: 40},
	width = (window.innerWidth)*0.65,
	height = (window.innerHeight)*0.7 - margin.bottom - 10 ;

	var x = d3.scale.linear()
	.domain([0, 15])
	.range([0, width - margin.left - margin.right ]);


	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.tickPadding(8)
	;

	var y = d3.scale.linear()
	.range([height - margin.top - margin.bottom, 0]);

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("right")
	.tickPadding(8);




	d3.csv('water_sample_cluster.csv', function(data) {

	var svg3 = d3.select("#Plot_div").append("svg")
	.attr("width", width)
	.attr("height", height)
	.attr("class", "time_chart")
	.style("display","block")
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


	var svg_Xaxis = svg3.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + y.range()[0] + ")")
	;

	var svg_Yaxis = svg3.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + x.range()[1] + ")")
	;

	var svg_f1 = svg3.append("path");
	var svg_ff = svg3.append("path");

	var dat = d3.layout.histogram();
	change(d);
	d3.selectAll("input").on("change", change);


	function change(d) {
	//On change in attribute, call this module
	var area = d3.svg.area()
	.x(function(d) { return x(d.x); })
	.y0(y.range()[0])
	.y1(function(d) { return y(formatCount(d.y)); });
	attribute_value = this.value;
	var value = '';
	//giving default value for attribute selection.
	if(attribute_value != null)
	{
	value = attribute_value;
	}else
	{

	value = 'COND-D';
	}


	series = new Array();
	data.forEach(function(r)
	{

	var nextRow = parseInt(r[value]);
	series.push(nextRow);

	});

	var xx = d3.scale.linear()
	.domain([0, d3.max(series)])
	.range([0, width - margin.left - margin.right ]);

	var data2 = dat.bins(xx.ticks(20))(series);

	x.domain(d3.extent(data2, function(d) { return d.x; }));
	y.domain([0, d3.max(data2, function(d) { return d.y; })]);

	svg_f1.datum(data2)
	.attr("class", "area")
	.transition()
	.attr("d", area);

	series1 = new Array();
	data.forEach(function(r)
	{
	var nextRow = parseInt(r[value]);
	if(r["cluster"]== cluster_value ){
	series1.push(nextRow);
	}

	});
	var data1 = d3.layout.histogram()
	.bins(x.ticks(20))
	(series1);


	svg_ff.datum(data1)
	.attr("class", "area1")
	.transition()
	.attr("d", area);
	svg_Xaxis
	.transition()
	.call(xAxis);
	svg_Yaxis
	.transition()
	.call(yAxis);
	};

	});

	}

	</script>
	<div id="Dis_axis_dtl" style="float:right;">
	<h3>
	X-axis: Range <br>
	Y-axis: Count
	</h3>
	</div>
	</div>

	</body>
	</html>
	path {
	stroke: #000;
	stroke-width: 1.5;
	cursor: pointer;
	}

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 70%;
	/* width: 960px;*/
	}

	form {
	position: relative;
	right: 10px;
	top: 10px;
	}

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

	.area {
	fill: steelblue;
	}
	.area1 {
	fill: black;
	}

	span
	{
	display: inline-block;
	vertical-align: middle;
	line-height: 44px;
	}
	#Plot_div
	{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 100%;
	height:100%;
	}