fork of https://gist.github.com/benjchristensen/2657838 with zoomooz.js and intro.js functionality

#Quick Fork to add Zoom and Intro Zoom functionality from zoomooz.js Intro functionality from intro.js

#Original Readme.md 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>
	        <script src="intro.js"></script>
	
	        <link href="introjs.min.css" rel="stylesheet">
		<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" data-step="1" data-intro="This view offers a realtime look at the data and continously updates."></div>
	
	<div id="graph2" class="aGraph zoomTarget" data-targetsize="0.8" style="float:left;position:relative;width:49%;height:200px" data-step="2" data-intro="A look in to the future since this data is a couple of hours ahead of above.  Click to zoom."></div>
	<div id="graph3" class="aGraph zoomTarget" data-targetsize="0.8" style="float:left;position:relative;width:49%;height:200px" data-step="3" data-intro="5 days for comparison purposes.  Click on it to zoom in"></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);

introJs().start();
	</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