Timelinechart

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://d3js.org/d3.v4.min.js"></script>


<div 
            	class="timelinechart" 
            	data-role="timelinechart" 
            	data-width=500 
            	data-height=300 
                data-data=""
            >
            </div>

CSS

body {
		  background: #eeeeee;
		}

		#holder {
		  overflow: hidden;
		}

/*
.chart {
	shape-rendering: crispEdges;
}
*/

.timelinechart{
	/*width:100%;
	border: 1px solid red;*/
}

.timelinechart svg{
	width:100%;
	/*border: 1px solid green;*/
}

.timelinechartg{
	
}

.mini text {
	font: 10px sans-serif;	
}

.main text {
	font: 12px sans-serif;	
}

.miniItem {
	/*fill: darksalmon;*/
	stroke-width: 6;	
}

.miniItem.future{
	fill: #448875;
}
text.future {
	fill: #f7b363;
}


.brush .extent {
	stroke: #b6b8b9;
	fill: #57585b;
	fill-opacity: .365;
	stroke-width: .2;
}

.laneImg{
	border-radius: 25px;
}

JavaScript

$(document).ready(function() {


  var $this = $('.timelinechart');
		
    	var w = $this.data("width");
    	var h = $this.data("height");
    	//var data = $this.data("data");

    	
		var data = [
			{
				"label": "person a",
				"icon": "4",
				"times": [
					{"text": "Test 1", "starting_time": 1355752800000, "ending_time": 1355759900000},
					{"text": "Test 2", "starting_time": 1355767900000, "ending_time": 1355774400000},
					{"text": "Test 6", "starting_time": 1355761900000, "ending_time": 1355764520000},
					{"text": "Test 7", "starting_time": 1355767900000, "ending_time": 1355774400000}
				]
			},
      {
				"label": "person b",
				"icon": "5",
				"times": [
					{"text": "Test 8", "starting_time": 1355752800000, "ending_time": 1355759900000},
					{"text": "Test 9", "starting_time": 1355767900000, "ending_time": 1355774400000},
					{"text": "Test 10", "starting_time": 1355767900000, "ending_time": 1355867900000}
				]
			}
		];


		var lanes = [];
		var times = [];
		var icons = [];
		$.each(data, function(index, value) {
			lanes.push(value.label);
			//icons.push(_avatarList[value.icon].image);
			$.each(value.times, function(i, v) {
				v["lane"] = index;
			});
			times.push(value.times);	
		});

		var laneLength = lanes.length;
		var items = [].concat.apply([], times);

		$.each(items, function(i, v) {
			v["id"] = i;
		});

		var timeBegin = d3.min(items, function(d) { return d["starting_time"]; });
		var timeEnd = d3.max(items, function(d) { return d["ending_time"]; });

		var m = [25, 80, 15, 105], //top right bottom left 
			w = w - m[1] - m[3],
			h = h - m[0] - m[2],
			miniHeight = laneLength * 12 + 50,
			mainHeight = h - miniHeight - 50;

		//scales
		var x =  d3.scaleTime()
				.range([0, w])				
				.domain([timeBegin, timeEnd]);
		var x1 = d3.scaleLinear()
				.range([0, w]);
		var y1 = d3.scaleLinear()
				.range([0, mainHeight])
				.domain([0, laneLength]);
		var y2 = d3.scaleLinear()
				.range([0,...