example.css

html,body,#wrapper {
	width: 100%;
	height: 100%;
	margin: 0px;
}

.chart {
	font-family: Arial, sans-serif;
	font-size: 12px;
}

.axis path,.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.bar {
	fill: #33b5e5;
}

.bar-failed {
	fill: #CC0000;
}

.bar-running {
	fill: #669900;
}

.bar-succeeded {
	fill: #33b5e5;
}

.bar-killed {
	fill: #ffbb33;
}

#forkme_banner {
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	z-index: 10;
	padding: 10px 50px 10px 10px;
	color: #fff;
	background:
		url('http://dk8996.github.io/Gantt-Chart/images/blacktocat.png')
		#0090ff no-repeat 95% 50%;
	font-weight: 700;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	text-decoration: none;
}

example3.js

var tasks = [
{"startDate":new Date(2013, 1, 1, 0, 0, 0), "endDate":new Date(2013, 1, 1, 0, 4, 7), "taskName":"Look Down", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 4, 7), "endDate":new Date(2013, 1, 1, 0, 5, 3), "taskName":"On My Own", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 5, 3), "endDate":new Date(2013, 1, 1, 0, 5, 17), "taskName":"Look Down", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 5, 17), "endDate":new Date(2013, 1, 1, 0, 5, 33), "taskName":"Now Look Who's Here!", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 7, 27), "endDate":new Date(2013, 1, 1, 0, 8, 27), "taskName":"Tell Me Quickly", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 17, 40), "endDate":new Date(2013, 1, 1, 0, 22, 19), "taskName":"I Dreamed A Dream", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 24, 27), "endDate":new Date(2013, 1, 1, 0, 25, 19), "taskName":"Now Look Who's Here!", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 25, 19), "endDate":new Date(2013, 1, 1, 0, 26, 27), "taskName":"Tell Me Quickly", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 26, 27), "endDate":new Date(2013, 1, 1, 0, 28, 21), "taskName":"Fantine's Death", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 29, 6), "endDate":new Date(2013, 1, 1, 0, 29, 35), "taskName":"Now Look Who's Here!", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 29, 35), "endDate":new Date(2013, 1, 1, 0, 30, 8), "taskName":"Tell Me Quickly", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 30, 8), "endDate":new Date(2013, 1, 1, 0, 33, 20), "taskName":"Who Am I?", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 33, 20), "endDate":new Date(2013, 1, 1, 0, 34, 14), "taskName":"Fantine's Death", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 34, 14), "endDate":new Date(2013, 1, 1, 0, 37, 5), "taskName":"On My Own", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 37, 5), "endDate":new Date(2013, 1, 1, 0, 38, 50), "taskName":"Look Down", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 38, 50), "endDate":new Date(2013, 1, 1, 0, 39, 39), "taskName":"I Dreamed A Dream", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 41, 44), "endDate":new Date(2013, 1, 1, 0, 42, 54), "taskName":"Now Look Who's Here!", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 51, 11), "endDate":new Date(2013, 1, 1, 0, 51, 28), "taskName":"Now Look Who's Here!", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 51, 28), "endDate":new Date(2013, 1, 1, 0, 52, 41), "taskName":"Look Down", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 53, 51), "endDate":new Date(2013, 1, 1, 0, 54, 6), "taskName":"Look Down", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 54, 6), "endDate":new Date(2013, 1, 1, 0, 54, 15), "taskName":"Tell Me Quickly", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 57, 42), "endDate":new Date(2013, 1, 1, 0, 59, 32), "taskName":"ABC Cafe", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 0, 59, 32), "endDate":new Date(2013, 1, 1, 1, 2, 9), "taskName":"Red and Black", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 2, 9), "endDate":new Date(2013, 1, 1, 1, 3, 34), "taskName":"ABC Cafe", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 13, 43), "endDate":new Date(2013, 1, 1, 1, 13, 50), "taskName":"Now Look Who's Here!", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 14, 24), "endDate":new Date(2013, 1, 1, 1, 15, 0), "taskName":"Now Look Who's Here!", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 15, 0), "endDate":new Date(2013, 1, 1, 1, 16, 0), "taskName":"Who Am I?", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 16, 0), "endDate":new Date(2013, 1, 1, 1, 17, 26), "taskName":"I Dreamed A Dream", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 17, 26), "endDate":new Date(2013, 1, 1, 1, 17, 46), "taskName":"Who Am I?", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 17, 46), "endDate":new Date(2013, 1, 1, 1, 17, 57), "taskName":"Tell Me Quickly", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 18, 8), "endDate":new Date(2013, 1, 1, 1, 18, 57), "taskName":"I Dreamed A Dream", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 18, 57), "endDate":new Date(2013, 1, 1, 1, 19, 50), "taskName":"Who Am I?", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 19, 50), "endDate":new Date(2013, 1, 1, 1, 20, 13), "taskName":"Tell Me Quickly", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 22, 6), "endDate":new Date(2013, 1, 1, 1, 25, 15), "taskName":"On My Own", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 25, 52), "endDate":new Date(2013, 1, 1, 1, 26, 18), "taskName":"Red and Black", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 26, 18), "endDate":new Date(2013, 1, 1, 1, 27, 26), "taskName":"ABC Cafe", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 27, 26), "endDate":new Date(2013, 1, 1, 1, 27, 48), "taskName":"Red and Black", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 29, 32), "endDate":new Date(2013, 1, 1, 1, 29, 48), "taskName":"Tell Me Quickly", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 35, 11), "endDate":new Date(2013, 1, 1, 1, 35, 44), "taskName":"Who Am I?", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 37, 8), "endDate":new Date(2013, 1, 1, 1, 37, 31), "taskName":"Now Look Who's Here!", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 45, 16), "endDate":new Date(2013, 1, 1, 1, 46, 0), "taskName":"ABC Cafe", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 46, 40), "endDate":new Date(2013, 1, 1, 1, 47, 9), "taskName":"Red and Black", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 1, 53, 27), "endDate":new Date(2013, 1, 1, 1, 54, 19), "taskName":"Look Down", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 2, 8, 47), "endDate":new Date(2013, 1, 1, 2, 9, 15), "taskName":"Fantine's Death", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 2, 11, 11), "endDate":new Date(2013, 1, 1, 2, 11, 41), "taskName":"Fantine's Death", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 2, 12, 41), "endDate":new Date(2013, 1, 1, 2, 13, 37), "taskName":"Fantine's Death", "status":"SUCCEEDED"},
{"startDate":new Date(2013, 1, 1, 2, 13, 37), "endDate":new Date(2013, 1, 1, 2, 15, 21), "taskName":"On My Own", "status":"SUCCEEDED"},
 ];

var taskStatus = {
    "SUCCEEDED" : "bar"
    };

var taskNames = ["Look Down",
"On My Own",
"Now Look Who's Here!",
"Tell Me Quickly",
"I Dreamed A Dream",
"Fantine's Death",
"Who Am I?",
"ABC Cafe",
"Red and Black"
];

tasks.sort(function(a, b) {
    return a.endDate - b.endDate;
});
var maxDate = tasks[tasks.length - 1].endDate;
tasks.sort(function(a, b) {
    return a.startDate - b.startDate;
});
var minDate = tasks[0].startDate;

var format = "%H:%M";

var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format).height(450).width(1200);


gantt.timeDomainMode("fixed");
gantt.timeDomain([ new Date(2013, 1, 1, 0, 0, 0), new Date(2013, 1, 1, 2, 16, 0) ]);
format = "%H:%M"
gantt.tickFormat(format);
gantt.redraw(tasks);

gantt(tasks);

gantt.redraw(tasks);

index.html

<!DOCTYPE html>
<html>
<head>
<title>Gantt Chart Example 3</title>
<link type="text/css" href="http://mbostock.github.io/d3/style.css" rel="stylesheet" />
<link type="text/css" href="example.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="http://www.mentful.com/gantt-chart-d3v2.js"></script>
	<script type="text/javascript" src="example3.js"></script>