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