Fork of Ben Christensen multiline with zoomooz

#Fork of Ben Christensen multi-line graph Fork adds zoomooz zoom functionality to the graph. Works well, but the hover element does not offset to reflect the zoom.

Original Readme.md is below

Proof of concept line graph implemented using d3.js and some jQuery that builds on previous examples.

The top graph is 24 hours of data in 2 minute increments. I have it rolling every 2 seconds to simulate live updating. In real-life it would only update every 2 minutes to match the data granularity.

See it running at /benjchristensen/2657838

Features:

incrementally update data or replace entire dataset
interactive mouseover to view details
animated switching of y-axis scale types (linear, power, log)
dynamic redrawing on window resize

Missing:

not yet integrated with touch events, only mouse

I don't normally work in javascript, so if it isn't quite right, I'd appreciate suggestions on where to improve it.

<html>
	<head>
		<title>Interactive Line Graph</title>
		<script src="https://d3js.org/d3.v3.js"></script>
		
		<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
		<script src="sample_data.js"></script>
		<script src="line-graph.js"></script>
        <script src="jquery.zoomooz.js"></script>
		<link rel="stylesheet" href="style.css" type="text/css">
		<style>
			body {
				font-family: "Helvetica Neue", Helvetica;
			}
					
			p {
				clear:both;
				top: 20px;
			}		
					
			div.aGraph {
				margin-bottom: 30px;
			}
		</style>
	</head>
	<body>
	<div id="graph1" class="aGraph" style="position:relative;width:100%;height:400px"></div>
	
	<div id="graph2" class="aGraph zoomTarget" data-targetsize="0.8" data-debug="false" style="float:left;position:relative;width:49%;height:200px"></div>
	<div id="graph3" class="aGraph zoomTarget" data-targetsize="0.8" data-debug="false" style="float:left;position:relative;width:49%;height:200px"></div>

// create graph now that we've added presentation config
		var l1 = new LineGraph({containerId: 'graph1', data: data});
		var l2 = new LineGraph({containerId: 'graph2', data: data2});
		var l3 = new LineGraph({containerId: 'graph3', data: data3});
		
	setInterval(function() {
		/*
		* The following will simulate live updating of the data (see dataA, dataB, dataC etc in data.js which are real examples)
		* This is being simulated so this example functions standalone without a backend server which generates data such as data.js contains.
		*/
		// for each data series ...
		var newData = [];
		data.values.forEach(function(dataSeries, index) {
			// take the first value and move it to the end
			// and capture the value we're moving so we can send it to the graph as an update
			var v = dataSeries.shift();
			dataSeries.push(v);
			// put this value in newData as an array with 1 value
			newData[index] = [v];
		})
		
		// we will reuse dataA each time
		dataA.values = newData;
		// increment time 1 step
		dataA.start = dataA.start + dataA.step;
		dataA.end = dataA.end + dataA.step; 
					
		l1.slideData(dataA);
	}, 2000);

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://code.jquery.com/jquery-1.7.2.min.js to a secure url

https://d3js.org/d3.v3.js

https://code.jquery.com/jquery-1.7.2.min.js