kpq/index.html

## index.html
<style type="text/css">
	svg {
		border:1px solid #f0f;
		font: 10px arial;
	}

	.product-name {
		text-anchor: end;
		font-size:13px;
		font-weight:bold;
	}

	.annotation-line {
		stroke:#dedede;
		stroke-width:1px;
	}

	.streak-line {
		stroke:red;
	}

</style>

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<div class="timeline-chart"></div>


</body>
</html>


<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">

var margin = {top: 20, right: 10, bottom: 20, left: 100};

var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var startDate = new Date(2004,0,1),
	endDate = new Date(2016,0,1);

var dateFormat = d3.time.format("%m/%d/%y")

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.time.scale()
    .range([0, width])
    .domain([ startDate, endDate ]);

 var y0 = d3.scale.ordinal()
		 .rangeBands([0, height]);

var y = d3.scale.linear()
    .range([height, 0]);

d3.tsv("drug-streaks.tsv", function(err, data) {

	// loop through the data, changing the formats from strings to dates.
	data.forEach(function(d) {
		d.start = dateFormat.parse(d.start);
		d.end = dateFormat.parse(d.end);
	});

	streaksByDrug = d3.nest()
			.key(function(d) { return d.drug; })
			.entries(data);

	y0.domain(streaksByDrug.map(function(d) { return d.key }));

	var backgroundStreaks = svg.selectAll(".drug-streak")
			.data(streaksByDrug)
			.enter().append("g")
			.attr("transform", function(d) { return "translate(0," + y0(d.key) +  ")" });

  backgroundStreaks.append("text")
  		.text(function(d) { return d.key; })
  		.attr("class", "product-name")
  		.attr("dx", -10);

  backgroundStreaks.append("line")
      .attr("x1", x(startDate))
      .attr("y1", 0)
      .attr("x2", x(endDate) )
      .attr("y2", 0)
      .classed("annotation-line",true);

   var drugStreaks = backgroundStreaks.selectAll(".drug-streak")
   	.data(function(d) { return d.values; })
   	.enter()
   	.append("g");

   	drugStreaks.append("line")
      .attr("x1", function(d) { return x(d.start); })
      .attr("y1", 0)
      .attr("x2", function(d) { return x(d.end); })
      .attr("y2", 0)
      .classed("streak-line",true);


});


</script>
	<style type="text/css">
	svg {
	border:1px solid #f0f;
	font: 10px arial;
	}

	.product-name {
	text-anchor: end;
	font-size:13px;
	font-weight:bold;
	}

	.annotation-line {
	stroke:#dedede;
	stroke-width:1px;
	}

	.streak-line {
	stroke:red;
	}

	</style>

	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>

	<div class="timeline-chart"></div>


	</body>
	</html>


	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script type="text/javascript">

	var margin = {top: 20, right: 10, bottom: 20, left: 100};

	var width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var startDate = new Date(2004,0,1),
	endDate = new Date(2016,0,1);

	var dateFormat = d3.time.format("%m/%d/%y")

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var x = d3.time.scale()
	.range([0, width])
	.domain([ startDate, endDate ]);

	var y0 = d3.scale.ordinal()
	.rangeBands([0, height]);

	var y = d3.scale.linear()
	.range([height, 0]);

	d3.tsv("drug-streaks.tsv", function(err, data) {

	// loop through the data, changing the formats from strings to dates.
	data.forEach(function(d) {
	d.start = dateFormat.parse(d.start);
	d.end = dateFormat.parse(d.end);
	});

	streaksByDrug = d3.nest()
	.key(function(d) { return d.drug; })
	.entries(data);

	y0.domain(streaksByDrug.map(function(d) { return d.key }));

	var backgroundStreaks = svg.selectAll(".drug-streak")
	.data(streaksByDrug)
	.enter().append("g")
	.attr("transform", function(d) { return "translate(0," + y0(d.key) + ")" });

	backgroundStreaks.append("text")
	.text(function(d) { return d.key; })
	.attr("class", "product-name")
	.attr("dx", -10);

	backgroundStreaks.append("line")
	.attr("x1", x(startDate))
	.attr("y1", 0)
	.attr("x2", x(endDate) )
	.attr("y2", 0)
	.classed("annotation-line",true);

	var drugStreaks = backgroundStreaks.selectAll(".drug-streak")
	.data(function(d) { return d.values; })
	.enter()
	.append("g");

	drugStreaks.append("line")
	.attr("x1", function(d) { return x(d.start); })
	.attr("y1", 0)
	.attr("x2", function(d) { return x(d.end); })
	.attr("y2", 0)
	.classed("streak-line",true);


	});



	</script>