vincentpham1991 · May 1, 2016 06:53
diff --git a/ECG2_data.csv b/ECG2_data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <meta http-equiv="cache-control" content="max-age=0" />
 <meta http-equiv="cache-control" content="no-cache" />
 <meta http-equiv="expires" content="0" />

 <meta http-equiv="pragma" content="no-cache" />
 <script type="text/javascript" src="shared.js"></script>

 <style>
 /*-----------style-------------------*/

 body {
  font: 10px sans-serif;
 }

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

 /*
 .x.axis path {
  display: none;
 }
 */

 .line {
  stroke: black;
  fill: none;
  stroke-width: 0.75px;
 }

 .line.line0 {
  stroke: steelblue;
 	stroke-width: 1.3;
 }

 .line.line1 {
  stroke: indianred;
 }

 .overlay {
  fill: none;
  pointer-events: all;
 }

 .focus circle {
  fill: none;
 }

 .focus circle.y0 {
  stroke: blue;
 }

 .focus circle.y1 {
  stroke: red;
 }

 .focus line {
  stroke: purple;
  shape-rendering: crispEdges;
 }

 .focus line.y0 {
  stroke: steelblue;
  stroke-dasharray: 3 3;
  opacity: .5;
 }

 .focus line.y1 {
  stroke: indianred;
  stroke-dasharray: 3 3;
  opacity: .5;
 }

 .brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
 }
 </style>
 <body>
 <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
 <script>


 //Date formatting
 var formatDate = d3.time.format("%d/%m/%Y %X"),
    parseDate = formatDate.parse,
    bisectDate = d3.bisector(function(d) { return d.date; }).left;
    formatOutput0 = function(d) { return formatDate(d.date) + " - " + d.a ; };

 /*-------------------global Variables-------------------------*/
 var globalMargin ={top: 10, right: 190, bottom: 1, left: 60};
 var svgPadding=30;
 var i=0,j=0,counter=0,svgID=0;	
 var globalWidth=1260-globalMargin.left-globalMargin.right;
 var focusHeight=105;
 var globalHeight = focusHeight+400-svgPadding;

 //global-Scale
 var globalScale = d3.time.scale().range([0, globalWidth]);
    
 //global Axis
 var globalAxis = d3.svg.axis()
    .scale(globalScale)
    .orient("bottom");
 //Global SVG
 var svg = d3.select("body").append("svg")
 	.attr("width", globalWidth+globalMargin.left)
    .attr("height", focusHeight)
 	.attr("id","global-svg")
 	.style("position","fixed")
 	.style("background-color","rgba(255,130,40,0.3)");

 svg.append("text")
 	.text("global Zoom")
 	.attr("x","10")
 	.attr("y","20")
 	.style("font-size","20px")
 	.style("font-family","sans-serif");

 var mini = svg.append("g")
    .attr("transform", "translate(" + globalMargin.left + "," + globalMargin.top + ")");

 var brush1 = d3.svg.brush()
    .x(globalScale)
    .on("brush", globalBrush);

 d3.csv("ECG2_data.csv", function(error, data){

 		data.forEach(function(d) {
 	    		d.date = parseDate(d.date);
 		});

 globalScale.domain([data[0].date,data[data.length-1].date]);

 /*-------------Draw Global Axis and brush------------------*/
 mini.append("g")
      .attr("class", "x brush")
      .call(brush1)		
    .selectAll("rect")
      .attr("y", -6)
      .attr("height", focusHeight + 7);	

 mini.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (focusHeight-30) + ")")
      .call(globalAxis);

 });


 /*------Global Brush()------*/
 /*--------The working of this function can be checked by reffering line no. 390 (brush() Function) -------------*/
 function globalBrush() {

 var main_x = d3.time.scale()
    .range([0, globalWidth]);
 var j=0;
  main_x.domain(brush1.empty() ? globalScale.domain() : brush1.extent());
 // d3.selectAll("#svg").selectAll("#xbrush").call(brush1);


 for(i=0;i<2;i++)
 {
 /*------------------Condition-Which checkboxes were checked?-------------*/
 	
 var main_y0=d3.scale.linear().range([230,0]);

 var file="ECG2_data.csv";

 d3.csv(file, function(error, data) {
  	data.forEach(function(d) {
    		d.a = +d.a;
  	});

 main_y0.domain([d3.min(data,function(d){  return d.a;})/1.2, d3.max(data, function(d) { return d.a; })*1.2]);


 var main_line0 = d3.svg.line()
    .x(function(d) { return main_x(d.date); })
    .y(function(d) { return main_y0(d.a); });



  d3.selectAll("#a"+j).attr("d", main_line0);
  d3.selectAll("#motif"+parseInt(j+1)).attr("d", main_line0);

 	
 j++;	
 });	

 }

  var Axis1 = d3.svg.axis()
    .scale(main_x)
    .orient("bottom");

  d3.selectAll("#xAxis").call(Axis1);
 }	

 d3.select("body").append("br");
 d3.select("body").append("br");
 d3.select("body").append("br");
 d3.select("body").append("br");
 d3.select("body").append("br");
 d3.select("body").append("br");
 d3.select("body").append("br");
 d3.select("body").append("br");

 d3.select("body")
 	.append("div")
 	.attr("id","scale")
 	.style("position","fixed")
 	.style("background-color","rgba(255,130,40,0.3)");


 /*----------------Main Loop.........................*/

 for(i=0;i<2;i++)
 {
 		plot(svgID); 		// Call plot function
 		svgID++;		
 }
 /*------------------Plot Function Definition------------------------------*/


 function plot(svgID){
 //Header

 //Margins
 var main_margin = {top: 20, right: 190, bottom: 100, left: 60},
    mini_margin = {top: 280, right: 190, bottom: 30, left: 60},
    main_width = 1260 - main_margin.left - main_margin.right,
    main_height = 350 - main_margin.top - main_margin.bottom,
    mini_height = 350 - mini_margin.top - mini_margin.bottom;

 //X-scale Range
 var main_x = d3.time.scale()
    .range([0, main_width]),
 //mini-X(Focus) scale
    mini_x = d3.time.scale()
    .range([0, main_width]);



 //Y-Scale Range
 var main_y0 = d3.scale.linear()
    .range([main_height, 0]),
 //mini-Y(Focus) scale
    mini_y0 = d3.scale.sqrt()
    .range([mini_height, 0]);
   


 //X-Axis
 var main_xAxis = d3.svg.axis()
    .scale(main_x)
    .orient("bottom"),
 //mini-X Axis 
    mini_xAxis = d3.svg.axis()
    .scale(mini_x)
    .orient("bottom");
 //Y-Axis
 var main_yAxisLeft = d3.svg.axis()
    .scale(main_y0)
    .orient("left");

 //Brush
 var brush = d3.svg.brush()
    .x(mini_x)
    .on("brush", brush);	//Call function brush()
 //Main line(graph)
 var main_line0 = d3.svg.line()
    .x(function(d) { return main_x(d.date); })
    .y(function(d) { return main_y0(d.a); });
 	
 //Mini line(graph)
 var mini_line0 = d3.svg.line()
    .x(function(d) { return mini_x(d.date); })
    .y(function(d) { return mini_y0(d.a); });



 //Define SVG
 var svg = d3.select("body").append("svg")
 	.attr("id","svg")
 	.attr("width", main_width+main_margin.left+main_margin.right)
    .attr("height", main_height+main_margin.top+main_margin.bottom);
 	

 //Define Clip path on which the line graph is drawn

 svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", main_width)
    .attr("height", main_height);

 //plot main and mini
 var main = svg.append("g")
    .attr("transform", "translate(" + main_margin.left + "," + main_margin.top + ")");

 var mini = svg.append("g")
    .attr("transform", "translate(" + mini_margin.left + "," + mini_margin.top + ")");

 /*------------------Load CSV Data------------------------*/
 var file="ECG2_data.csv";
 d3.csv(file, function(error, data) {

  	data.forEach(function(d) {
    		d.date = parseDate(d.date);
    		d.a = +d.a;
  	});
 //Sort date wise if it is not sorted
 /*  data.sort(function(a, b) {
    return a.date - b.date;
  }); */

 //All scale Domains
  main_x.domain([data[0].date, data[data.length - 1].date]);
  main_y0.domain([d3.min(data,function(d){  return d.a;})/1.2, d3.max(data, function(d) { return d.a; })*1.2]);
  mini_x.domain(main_x.domain());
  mini_y0.domain(main_y0.domain());


 /*-----------------------Draw all the elements---------------------------*/

  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line line0")
      .attr("id","a"+svgID)
      .attr("d", main_line0);


  main.append("g")
      .attr("class", "x axis")
      .attr("id","xAxis")
      .attr("transform", "translate(0," + main_height + ")")
      .call(main_xAxis);

  main.append("g")
      .attr("class", "y axis axisLeft")
      .attr("id","yAxis"+svgID)
      .call(main_yAxisLeft)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");



  mini.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + mini_height + ")")
      .call(main_xAxis);

  mini.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("id","b"+svgID)
      .attr("d", mini_line0);

  mini.append("g")
      .attr("class", "x brush")
      .attr("id","xbrush")
      .call(brush)
    .selectAll("rect")
      .attr("y", -6)
      .attr("height", mini_height + 7);

  var focus = main.append("g")
      .attr("class", "focus")
 	.attr("id","focus"+svgID)
      .style("display", "none");

 	counter+=350;
 svgID++;
 });
 /*-----------------function brush() definition----------------*/
 function brush() {
  main_x.domain(brush.empty() ? mini_x.domain() : brush.extent());
 main.select(".line0").attr("d", main_line0);
 main.selectAll(".line1").attr("d", main_line0);
 main.select(".x axis").call(main_xAxis);


 }
 }
 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<meta http-equiv="cache-control" content="max-age=0" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />

	<meta http-equiv="pragma" content="no-cache" />
	<script type="text/javascript" src="shared.js"></script>

	<style>
	/-----------style-------------------/

	body {
	font: 10px sans-serif;
	}

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

	/*
	.x.axis path {
	display: none;
	}
	*/

	.line {
	stroke: black;
	fill: none;
	stroke-width: 0.75px;
	}

	.line.line0 {
	stroke: steelblue;
	stroke-width: 1.3;
	}

	.line.line1 {
	stroke: indianred;
	}

	.overlay {
	fill: none;
	pointer-events: all;
	}

	.focus circle {
	fill: none;
	}

	.focus circle.y0 {
	stroke: blue;
	}

	.focus circle.y1 {
	stroke: red;
	}

	.focus line {
	stroke: purple;
	shape-rendering: crispEdges;
	}

	.focus line.y0 {
	stroke: steelblue;
	stroke-dasharray: 3 3;
	opacity: .5;
	}

	.focus line.y1 {
	stroke: indianred;
	stroke-dasharray: 3 3;
	opacity: .5;
	}

	.brush .extent {
	stroke: #fff;
	fill-opacity: .125;
	shape-rendering: crispEdges;
	}
	</style>
	<body>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script>


	//Date formatting
	var formatDate = d3.time.format("%d/%m/%Y %X"),
	parseDate = formatDate.parse,
	bisectDate = d3.bisector(function(d) { return d.date; }).left;
	formatOutput0 = function(d) { return formatDate(d.date) + " - " + d.a ; };

	/-------------------global Variables-------------------------/
	var globalMargin ={top: 10, right: 190, bottom: 1, left: 60};
	var svgPadding=30;
	var i=0,j=0,counter=0,svgID=0;
	var globalWidth=1260-globalMargin.left-globalMargin.right;
	var focusHeight=105;
	var globalHeight = focusHeight+400-svgPadding;

	//global-Scale
	var globalScale = d3.time.scale().range([0, globalWidth]);

	//global Axis
	var globalAxis = d3.svg.axis()
	.scale(globalScale)
	.orient("bottom");
	//Global SVG
	var svg = d3.select("body").append("svg")
	.attr("width", globalWidth+globalMargin.left)
	.attr("height", focusHeight)
	.attr("id","global-svg")
	.style("position","fixed")
	.style("background-color","rgba(255,130,40,0.3)");

	svg.append("text")
	.text("global Zoom")
	.attr("x","10")
	.attr("y","20")
	.style("font-size","20px")
	.style("font-family","sans-serif");

	var mini = svg.append("g")
	.attr("transform", "translate(" + globalMargin.left + "," + globalMargin.top + ")");

	var brush1 = d3.svg.brush()
	.x(globalScale)
	.on("brush", globalBrush);

	d3.csv("ECG2_data.csv", function(error, data){

	data.forEach(function(d) {
	d.date = parseDate(d.date);
	});

	globalScale.domain([data[0].date,data[data.length-1].date]);

	/-------------Draw Global Axis and brush------------------/
	mini.append("g")
	.attr("class", "x brush")
	.call(brush1)
	.selectAll("rect")
	.attr("y", -6)
	.attr("height", focusHeight + 7);

	mini.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (focusHeight-30) + ")")
	.call(globalAxis);

	});


	/------Global Brush()------/
	/--------The working of this function can be checked by reffering line no. 390 (brush() Function) -------------/
	function globalBrush() {

	var main_x = d3.time.scale()
	.range([0, globalWidth]);
	var j=0;
	main_x.domain(brush1.empty() ? globalScale.domain() : brush1.extent());
	// d3.selectAll("#svg").selectAll("#xbrush").call(brush1);


	for(i=0;i<2;i++)
	{
	/------------------Condition-Which checkboxes were checked?-------------/

	var main_y0=d3.scale.linear().range([230,0]);

	var file="ECG2_data.csv";

	d3.csv(file, function(error, data) {
	data.forEach(function(d) {
	d.a = +d.a;
	});

	main_y0.domain([d3.min(data,function(d){ return d.a;})/1.2, d3.max(data, function(d) { return d.a; })*1.2]);


	var main_line0 = d3.svg.line()
	.x(function(d) { return main_x(d.date); })
	.y(function(d) { return main_y0(d.a); });



	d3.selectAll("#a"+j).attr("d", main_line0);
	d3.selectAll("#motif"+parseInt(j+1)).attr("d", main_line0);


	j++;
	});

	}

	var Axis1 = d3.svg.axis()
	.scale(main_x)
	.orient("bottom");

	d3.selectAll("#xAxis").call(Axis1);
	}

	d3.select("body").append("br");
	d3.select("body").append("br");
	d3.select("body").append("br");
	d3.select("body").append("br");
	d3.select("body").append("br");
	d3.select("body").append("br");
	d3.select("body").append("br");
	d3.select("body").append("br");

	d3.select("body")
	.append("div")
	.attr("id","scale")
	.style("position","fixed")
	.style("background-color","rgba(255,130,40,0.3)");


	/----------------Main Loop........................./

	for(i=0;i<2;i++)
	{
	plot(svgID); // Call plot function
	svgID++;
	}
	/------------------Plot Function Definition------------------------------/


	function plot(svgID){
	//Header

	//Margins
	var main_margin = {top: 20, right: 190, bottom: 100, left: 60},
	mini_margin = {top: 280, right: 190, bottom: 30, left: 60},
	main_width = 1260 - main_margin.left - main_margin.right,
	main_height = 350 - main_margin.top - main_margin.bottom,
	mini_height = 350 - mini_margin.top - mini_margin.bottom;

	//X-scale Range
	var main_x = d3.time.scale()
	.range([0, main_width]),
	//mini-X(Focus) scale
	mini_x = d3.time.scale()
	.range([0, main_width]);



	//Y-Scale Range
	var main_y0 = d3.scale.linear()
	.range([main_height, 0]),
	//mini-Y(Focus) scale
	mini_y0 = d3.scale.sqrt()
	.range([mini_height, 0]);



	//X-Axis
	var main_xAxis = d3.svg.axis()
	.scale(main_x)
	.orient("bottom"),
	//mini-X Axis
	mini_xAxis = d3.svg.axis()
	.scale(mini_x)
	.orient("bottom");
	//Y-Axis
	var main_yAxisLeft = d3.svg.axis()
	.scale(main_y0)
	.orient("left");

	//Brush
	var brush = d3.svg.brush()
	.x(mini_x)
	.on("brush", brush); //Call function brush()
	//Main line(graph)
	var main_line0 = d3.svg.line()
	.x(function(d) { return main_x(d.date); })
	.y(function(d) { return main_y0(d.a); });

	//Mini line(graph)
	var mini_line0 = d3.svg.line()
	.x(function(d) { return mini_x(d.date); })
	.y(function(d) { return mini_y0(d.a); });



	//Define SVG
	var svg = d3.select("body").append("svg")
	.attr("id","svg")
	.attr("width", main_width+main_margin.left+main_margin.right)
	.attr("height", main_height+main_margin.top+main_margin.bottom);


	//Define Clip path on which the line graph is drawn

	svg.append("defs").append("clipPath")
	.attr("id", "clip")
	.append("rect")
	.attr("width", main_width)
	.attr("height", main_height);

	//plot main and mini
	var main = svg.append("g")
	.attr("transform", "translate(" + main_margin.left + "," + main_margin.top + ")");

	var mini = svg.append("g")
	.attr("transform", "translate(" + mini_margin.left + "," + mini_margin.top + ")");

	/------------------Load CSV Data------------------------/
	var file="ECG2_data.csv";
	d3.csv(file, function(error, data) {

	data.forEach(function(d) {
	d.date = parseDate(d.date);
	d.a = +d.a;
	});
	//Sort date wise if it is not sorted
	/* data.sort(function(a, b) {
	return a.date - b.date;
	}); */

	//All scale Domains
	main_x.domain([data[0].date, data[data.length - 1].date]);
	main_y0.domain([d3.min(data,function(d){ return d.a;})/1.2, d3.max(data, function(d) { return d.a; })*1.2]);
	mini_x.domain(main_x.domain());
	mini_y0.domain(main_y0.domain());


	/-----------------------Draw all the elements---------------------------/

	main.append("path")
	.datum(data)
	.attr("clip-path", "url(#clip)")
	.attr("class", "line line0")
	.attr("id","a"+svgID)
	.attr("d", main_line0);


	main.append("g")
	.attr("class", "x axis")
	.attr("id","xAxis")
	.attr("transform", "translate(0," + main_height + ")")
	.call(main_xAxis);

	main.append("g")
	.attr("class", "y axis axisLeft")
	.attr("id","yAxis"+svgID)
	.call(main_yAxisLeft)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end");



	mini.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + mini_height + ")")
	.call(main_xAxis);

	mini.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("id","b"+svgID)
	.attr("d", mini_line0);

	mini.append("g")
	.attr("class", "x brush")
	.attr("id","xbrush")
	.call(brush)
	.selectAll("rect")
	.attr("y", -6)
	.attr("height", mini_height + 7);

	var focus = main.append("g")
	.attr("class", "focus")
	.attr("id","focus"+svgID)
	.style("display", "none");

	counter+=350;
	svgID++;
	});
	/-----------------function brush() definition----------------/
	function brush() {
	main_x.domain(brush.empty() ? mini_x.domain() : brush.extent());
	main.select(".line0").attr("d", main_line0);
	main.selectAll(".line1").attr("d", main_line0);
	main.select(".x axis").call(main_xAxis);


	}
	}
	</script>