D3.js Template

CSS

body {
  font: 10px sans-serif;
  margin: 50px;
}
 
.grid .tick {
	stroke: lightgrey;
	opacity: 0.7;
	shape-rendering: crispEdges;
}
 
.grid path {
	stroke-width: 0;
}
 
.axis path {
	fill: none;
	stroke: #bbb;
	shape-rendering: crispEdges;
}
 
.axis text {
	fill: #555;
}
 
.axis line {	
	stroke: #e7e7e7;
	shape-rendering: crispEdges;
}
 
.axis .axis-label {
	font-size: 14px;
}
 
.line {
	fill: none;
	stroke-width: 1.5px;
}
 
.dot {
	/* consider the stroke-with the mouse detect radius? */
	stroke: transparent;
	stroke-width: 10px;  
	cursor: pointer;
}
 
.dot:hover {
	stroke: rgba(68, 127, 255, 0.3);
}

JavaScript

//************************************************************
// Data notice the structure
//************************************************************
/*var data = 	[
	[{'x':1,'y':0,'name':'A'},{'x':2,'y':5,'name':'A'},{'x':3,'y':10,'name':'A'},{'x':4,'y':0,'name':'A'},{'x':5,'y':6,'name':'A'},{'x':6,'y':11,'name':'A'},{'x':7,'y':9,'name':'A'},{'x':8,'y':4,'name':'A'},{'x':9,'y':11,'name':'A'},{'x':10,'y':2,'name':'A'}],
	[{'x':1,'y':1,'name':'B'},{'x':2,'y':6,'name':'B'},{'x':3,'y':11,'name':'B'},{'x':4,'y':1,'name':'B'},{'x':5,'y':7,'name':'B'},{'x':6,'y':12,'name':'B'},{'x':7,'y':8,'name':'B'},{'x':8,'y':3,'name':'B'},{'x':9,'y':13,'name':'B'},{'x':10,'y':3,'name':'B'}],
	[{'x':1,'y':2,'name':'C'},{'x':2,'y':7,'name':'C'},{'x':3,'y':12,'name':'C'},{'x':4,'y':2,'name':'C'},{'x':5,'y':8,'name':'C'},{'x':6,'y':13,'name':'C'},{'x':7,'y':7,'name':'C'},{'x':8,'y':2,'name':'C'},{'x':9,'y':4,'name':'C'},{'x':10,'y':7,'name':'C'}],
	[{'x':1,'y':3,'name':'D'},{'x':2,'y':8,'name':'D'},{'x':3,'y':13,'name':'D'},{'x':4,'y':3,'name':'D'},{'x':5,'y':9,'name':'D'},{'x':6,'y':14,'name':'D'},{'x':7,'y':6,'name':'D'},{'x':8,'y':1,'name':'D'},{'x':9,'y':7,'name':'D'},{'x':10,'y':9,'name':'D'}],
	[{'x':1,'y':4,'name':'E'},{'x':2,'y':9,'name':'E'},{'x':3,'y':14,'name':'E'},{'x':4,'y':4,'name':'E'},{'x':5,'y':10,'name':'E'},{'x':6,'y':15,'name':'E'},{'x':7,'y':5,'name':'E'},{'x':8,'y':0,'name':'E'},{'x':9,'y':8,'name':'E'},{'x':10,'y':5,'name':'E'}]
];*/
var data=[
	{
	"zone":"zone1",
  "values":[
  	{
  		"time":"1-May-12",
    	"count":0
  	},{
  		"time":"12-May-12",
      "count":6
  	}
  	]
	},
  {
	"zone":"zone2",
  "values":[
  	{
  		"time":"1-May-12",
    	"count":1
  	},{
  		"time":"12-May-12",
      "count":8
  	}
  	]
	}
];

 
var colors = [
	'steelblue',
	'green',
	'red',
	'purple'
]
 
 
//************************************************************
// Create Margins and Axis and hook our zoom...