Gorgeous Duo Line Graph - Synced

by Nivaldo

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
    <div class="tooltip">
        </div>
</body>

CSS

body{
	font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
	
.axis path,
	line {
		fill: none;
		stroke: #000;
		shape-rendering: crispEdges;
		stroke-width: 2px;
}
	

.label{
	color:#000;
	font-weight:bold;
	}

path {
  fill: none;
  stroke-width: 5px;
	}

circle {
	fill: white;
	stroke-width: 4px;
	}

.glucose {
	stroke: #762a83;
	color: #762a83;
}
	
.xylose {
	stroke: #1b7837;
	color: #1b7837;
	}

.bar { 
	fill: whitesmoke;
	fill-opacity: 0;
}

.tooltip {
	position: absolute;
	width: 120px;                  
 	height: 50px;
	padding: 5px;
	text-align:center;
	font-size: 12px;
	opacity: 0;
	background-color: papayawhip;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

span {
	font-size: 14px;
}

JavaScript

//Page and svg margins and work space
	var margin = {top:10, right:10, bottom:10, left:10},
		padding = {top:10, right:10, bottom:50, left:75},
		outerWidth = 700,
		outerHeight = 400,
		innerWidth = outerWidth - margin.left - margin.right,
		innerHeight = outerHeight - margin.top - margin.bottom,
		width = innerWidth - padding.left - padding.right,
		height = innerHeight - padding.top - padding.bottom;

//Specify radius and upper and lower limits for data points
	var radius = 7,
		gluUpper2MAD = 393.79,
		gluLower2MAD = 334.49,
		xylUpper2MAD = 220.89,
		xylLower2MAD = 171.97,
		gluUpper1MAD = 378.97,
		gluLower1MAD = 349.32,
		xylUpper1MAD = 208.66,
		xylLower1MAD = 184.20;
			
//Import data		
    //*
    var data = [
        {batch:686, glucose:378, xylose:204.5},
        {batch:688, glucose:354, xylose:177},
        {batch:690, glucose:374, xylose:187},
        {batch:691, glucose:382.7, xylose:212.5}   
    ];
    // */		
	/*		
	var data = [];
    d3.csv("hydrolis.csv", function(d) {
		return{
			batch:d.Batch,
			glucose:(+d.Glucose).toFixed(2),
			xylose:(+d.Xylose).toFixed(2)
		}; 
		
		
//If successful, return data in console, if unsuccesful, return error in console.
	}, function(error, data){ // */
	console.log(data);
    

//Equations for glucose and xylose lines
var glucoseLine = d3.svg.line()
    	.x(function(d) { return x(d.batch); })
    	.y(function(d) { return y(d.glucose); })

var xyloseLine = d3.svg.line()
    	.x(function(d) { return x(d.batch); })
    	.y(function(d) { return y(d.xylose); })

		
//Create SVG container for figure
	var svg = d3.select("body")
		.append("svg")
		.attr("width",outerWidth)
		.attr("height",outerHeight);

	svg.append("g")	
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


//Create x- and y-scales
	var yMax = d3.max(data, function(d) { return Math.max(d.glucose, d.xylose, gluUpper2MAD, gluLower2MAD, xylUpper2MAD, xylLower2MAD);})
		yMin = d3.min(data, function(d) { return...