Andrew-Reid/index.html Secret

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
    <!-- load the d3.js library -->
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <script>

    //--- Network----
    let rcvT;
    let socket = io.connect('http://localhost:3000');

    //Recive event from server
    socket.on("connect", function() {});
    socket.on("disconnect", function(client) {});
    socket.on("S_to_C_message", function(data) {
        rcvT = data.value;
        passiveZoom(rcvT);

    });

    function sendMessage(msg) {
        socket.emit("C_to_S_message", { value: msg }); //send to server
    }

    // Set the dimensions of the canvas / graph
    var margin = { top: 30, right: 20, bottom: 30, left: 50 },
        width = 600 - margin.left - margin.right,
        height = 270 - margin.top - margin.bottom;

    // Some dummy data (y values equal pixel values, no need for scale):
	var data = [ [0,0],[0.33,height],[0.67,height/2],[1,height] ];

    // Set the scales (use default domain given: 0,1 given the test data):
    var x = d3.scaleLinear().range([0, width]);
    var x2 = d3.scaleLinear().range([0, width]);

	// set up an x axis:
    var xAxis = d3.axisBottom(x);

    // Define the line
    var area = d3.area()
	   .curve(d3.curveBasis)
	   .x(function(d) { return x(d[0]); })

    // Add the svg
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    // Add the valueline path.
    var path = svg.selectAll()
        .data([data])
		.enter()
		.append("path")
        .attr("class", "line")
		.attr("fill","steelblue")
        .attr("d", area);

    // Add the X Axis
    svg.append("g")
       .attr("class", "xaxis")
       .attr("transform", "translate(0," + height + ")")
       .call(xAxis);

    //follow is zoom method------------------
    zoom = d3.zoom()
        .scaleExtent([1, 45])
        .on("zoom", zoomed);

    var rect = svg.append("rect")
        .attr("class", "zoom")
        .attr("width", width)
        .attr("height", height)
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .call(zoom)
		.attr("fill", "rgba(0,0,0,0)");

    function zoomed() {
		let t = d3.event.transform;

		// 1. update the scale, same as in brush and zoom:
		x.domain(t.rescaleX(x2).domain());

		// 2. redraw the graph and axis, same as in brush and zoom:
		path.attr("d", area);
		svg.select(".xaxis").call(xAxis);

		// Send the transform, if needed:
		if(t.alreadySent == undefined) {
		  t.alreadySent = true; // custom property.
		  sendMessage([t.k,t.x,t.y,t.alreadySent]);
		}
    }


    function passiveZoom(rcv){
		// trigger a zoom event:
		var t = d3.zoomIdentity;
		t.k = rcv[0];
		t.x = rcv[1];
		t.y = rcv[2];
		t.alreadySent = rcv[3];
		rect.call(zoom.transform,t);
    }


    </script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<!-- load the d3.js library -->
	<script src="http://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
	<script>

	//--- Network----
	let rcvT;
	let socket = io.connect('http://localhost:3000');

	//Recive event from server
	socket.on("connect", function() {});
	socket.on("disconnect", function(client) {});
	socket.on("S_to_C_message", function(data) {
	rcvT = data.value;
	passiveZoom(rcvT);

	});

	function sendMessage(msg) {
	socket.emit("C_to_S_message", { value: msg }); //send to server
	}

	// Set the dimensions of the canvas / graph
	var margin = { top: 30, right: 20, bottom: 30, left: 50 },
	width = 600 - margin.left - margin.right,
	height = 270 - margin.top - margin.bottom;

	// Some dummy data (y values equal pixel values, no need for scale):
	var data = [ [0,0],[0.33,height],[0.67,height/2],[1,height] ];

	// Set the scales (use default domain given: 0,1 given the test data):
	var x = d3.scaleLinear().range([0, width]);
	var x2 = d3.scaleLinear().range([0, width]);

	// set up an x axis:
	var xAxis = d3.axisBottom(x);

	// Define the line
	var area = d3.area()
	.curve(d3.curveBasis)
	.x(function(d) { return x(d[0]); })

	// Add the svg
	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


	// Add the valueline path.
	var path = svg.selectAll()
	.data([data])
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("fill","steelblue")
	.attr("d", area);

	// Add the X Axis
	svg.append("g")
	.attr("class", "xaxis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	//follow is zoom method------------------
	zoom = d3.zoom()
	.scaleExtent([1, 45])
	.on("zoom", zoomed);

	var rect = svg.append("rect")
	.attr("class", "zoom")
	.attr("width", width)
	.attr("height", height)
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
	.call(zoom)
	.attr("fill", "rgba(0,0,0,0)");

	function zoomed() {
	let t = d3.event.transform;

	// 1. update the scale, same as in brush and zoom:
	x.domain(t.rescaleX(x2).domain());

	// 2. redraw the graph and axis, same as in brush and zoom:
	path.attr("d", area);
	svg.select(".xaxis").call(xAxis);

	// Send the transform, if needed:
	if(t.alreadySent == undefined) {
	t.alreadySent = true; // custom property.
	sendMessage([t.k,t.x,t.y,t.alreadySent]);
	}
	}


	function passiveZoom(rcv){
	// trigger a zoom event:
	var t = d3.zoomIdentity;
	t.k = rcv[0];
	t.x = rcv[1];
	t.y = rcv[2];
	t.alreadySent = rcv[3];
	rect.call(zoom.transform,t);
	}



	</script>
	</body>