kpq/drug-streaks.tsv

## drug-streaks.tsv

          
            drug
            start
            end
            type
            company

            
              Milk
              6/3/09
              5/6/10
              Manufacturing delay
              Hospira, Bbraun

            
              Milk
              2/27/11
              1/1/12
              Manufacturing delay
              Hospira

            
              Milk
              1/12/12
              1/8/14
              Manufacturing delay
              Hospira

            
              Orange Juice
              4/28/11
              3/25/14
              Manufacturing delay
              Abbott

            
              Applesauce
              10/9/12
              3/13/13
              Failed inspection
              Genzyme

            
              Applesauce
              12/28/13
              4/9/14
              Other
              Genzyme

            
              Jell-O
              5/5/10
              9/10/11
              Demand increase
              Teva

            
              Jell-O
              12/15/11
              3/1/12
              Demand increase
              Teva, Bbraun

            
              Jell-O
              2/10/13
              4/9/14
              Other
              Teva, Hospira

            
              Pudding
              12/17/09
              5/22/10
              Other
              SarahDrugShop

## 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>
drug	start	end	type	company
Milk	6/3/09	5/6/10	Manufacturing delay	Hospira, Bbraun
Milk	2/27/11	1/1/12	Manufacturing delay	Hospira
Milk	1/12/12	1/8/14	Manufacturing delay	Hospira
Orange Juice	4/28/11	3/25/14	Manufacturing delay	Abbott
Applesauce	10/9/12	3/13/13	Failed inspection	Genzyme
Applesauce	12/28/13	4/9/14	Other	Genzyme
Jell-O	5/5/10	9/10/11	Demand increase	Teva
Jell-O	12/15/11	3/1/12	Demand increase	Teva, Bbraun
Jell-O	2/10/13	4/9/14	Other	Teva, Hospira
Pudding	12/17/09	5/22/10	Other	SarahDrugShop
	<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>