kpq · April 15, 2014 02:14
diff --git a/index.html b/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>