phantomas1234/.gitignore

## .gitignore
.DS_Store
strains.csv
strain_lineage.nb

## README.md

      
    Raw
  

              README.md
            
          
    Visualize strain lineages using different layouts (timeline, product yield vs. growth, etc.) ...

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 8px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

.tick {
  font: 10px sans-serif;
}

#lineage {
  border: 1px solid black;
}

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

.axis .title {
  font-weight: bold;
  text-anchor: end;
}

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

#tooltip {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
}

#tooltip.hidden {
        display: none;
}

#tooltip p {
        margin: 0;
        font-family: sans-serif;
        font-size: 16px;
        line-height: 20px;
}

</style>


<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="lineage.js"></script>


<body>

<div id="lineage1"></div>
<div id="lineage2"></div>

<script>


var margin = {top: 20, right: 20, bottom: 20, left: 20},
    padding = {top: 60, right: 50, bottom: 60, left: 50},
    outerWidth = 960,
    outerHeight = 500,
    innerWidth = outerWidth - margin.left - margin.right,
    innerHeight = outerHeight - margin.top - margin.bottom,
    width = innerWidth - padding.left - padding.right,
    height = innerHeight - padding.top - padding.bottom;

var chart = lineage().width(width).height(height)

var svg = d3.select("#lineage1").append("svg")
    .attr("width", outerWidth)
    .attr("height", outerHeight)
    .append("g")
    .attr("transform", "translate(" + padding.left + "," + padding.top + ")");


d3.json("lineage1.json", function(error, data) {
    if (error) {console.log(error)};
    chart(data, svg)
});

var svg2 = d3.select("#lineage2").append("svg")
    .attr("width", outerWidth)
    .attr("height", outerHeight)
    .append("g")
    .attr("transform", "translate(" + padding.left + "," + padding.top + ")");

d3.json("lineage3.json", function(error, data) {
    if (error) {console.log(error)};
    chart(data, svg2)
});


</script>


</body>

## lineage.js
function lineage() {

    // var width = 1200, // default width
    // height = 600; // default height

    function my(data, svg) {
        "use strict";

        var cluster = d3.layout.cluster()
            .size([height, width]);

        var diagonal = d3.svg.diagonal()
            .projection(function(d) { return [d.y, d.x]; });

        var nodes = cluster.nodes(data)
        var links = cluster.links(nodes)

        var min_time_stamp = new Date(d3.min(nodes, function(elem) {return elem.time_stamp}))
        var max_time_stamp = new Date(d3.max(nodes, function(elem) {return elem.time_stamp}))
        var scale = d3.time.scale()
        scale.domain([min_time_stamp, max_time_stamp])
            .range([0, width])

        // var time_format = d3.time.format("%Y-%m-%d")

        var axis = d3.svg.axis()
            .tickFormat(function(d) {return d3.time.format('%x')(new Date(d)) })
            .scale(scale)
            .orient("bottom");

        svg.append("g").attr("class", "axis")
            .attr("transform", "translate(0," + (height + 20)  + ")")
            .call(axis)


        nodes.forEach(function(node) {
            if (node.parent) {
                node.y = scale(new Date(node.time_stamp))
            }
        })

        nodes[0].y = scale(nodes[0].time_stamp)

        var diagonal = d3.svg.diagonal()
            .projection(function(d) { return [d.y, d.x]; });

        var link = svg.selectAll(".link")
            .data(links)
            .enter().append("path")
            .attr("class", "link")
            .attr("d", diagonal);

        var node = svg.selectAll(".node")
            .data(nodes)
            .enter().append("g")
            .attr("class", "node")
            .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

        node.append("circle")
            .attr("r", 4.5)
            .on("mouseover", function(d) {
                var xpos = parseFloat(d3.select(this).x)
                var ypos = parseFloat(d3.select(this).y)
                d3.select("#tooltip")
                    .style("left", xpos + "px")
                    .style("top", ypos + "px")
                    .select("#value").text("test")
            })
            .on("mouseout", function(){
                d3.select("#tooltip").classed("hidden", true);
            })

        node.append("text")
            .attr("dx", function(d) { return d.children ? -8 : 8; })
            .attr("dy", 3)
            .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
            .text(function(d) { return d.name; });
    }

    my.width = function(value) {
      if (!arguments.length) return width;
      width = value;
      return my;
    };

    my.height = function(value) {
        if (!arguments.length) return height;
        height = value;
        return my;
    };

  return my;
}

## lineage1.json
{"name" : "CEN.PK102-5B",
"time_stamp" : 1314977520000,
"children" : [
	{
		"name" : "St614- pINT-3xFP-is3",
		"time_stamp" : 1357308540000,
		"children" : [
			{
				"name" : "ST899isB4",
				"time_stamp" : 1372244640000
			},
			{
				"name" : "ST900isD4",
				"time_stamp" : 1372244940000
			},
			{
				"name" : "ST901isB7",
				"time_stamp" : 1372244940000
			},
			{
				"name" : "ST902isA11",
				"time_stamp" : 1372245000000
			},
			{
				"name" : "ST903isE8",
				"time_stamp" : 1372245060000
			},
			{
				"name" : "ST904isG7",
				"time_stamp" : 1372245060000
			},
			{
				"name" : "ST905isG8",
				"time_stamp" : 1372245120000
			}
		]
	},
	{
		"name" : "St615- pINT-3xFP-is4",
		"time_stamp" : 1357308660000
	},
	{
		"name" : "St616- pINT-3xFP-is5",
		"time_stamp" : 1357308960000
	},
	{
		"name" : "St617- pINT-3xFP-is7",
		"time_stamp" : 1357309020000
	},
	{
		"name" : "Sc Delta pdc5",
		"time_stamp" : 1362158340000
	},
	{
		"name" : "Sc Delta aro10",
		"time_stamp" : 1362158400000,
		"children" : [
			{
				"name" : "Sc Delta aro10-pdc5",
				"time_stamp" : 1363165320000,
				"children" : [
					{
						"name" : "ST691+5HTP-PW",
						"time_stamp" : 1369666260000
					},
					{
						"name" : "ID1524_ST691-RA11-L2",
						"time_stamp" : 1380704400000
					}
				]
			}
		]
	},
	{
		"name" : "SCEARO-0001",
		"time_stamp" : 1363276440000
	},
	{
		"name" : "TY4-MCR-ACC1",
		"time_stamp" : 1363278660000
	},
	{
		"name" : "TY4MCR-ACC1-ACS-ALD6",
		"time_stamp" : 1363278780000
	},
	{
		"name" : "SCE-R2-118",
		"time_stamp" : 1365442920000,
		"children" : [
			{
				"name" : "SCE-PYC1^PYC2^ (ura-his-leu-)",
				"time_stamp" : 1367065080000,
				"children" : [
					{
						"name" : "SCE-R2-(194-201)",
						"time_stamp" : 1369133340000
					},
					{
						"name" : "SCE-R2-200 (E8)",
						"time_stamp" : 1376581680000
					}
				]
			},
			{
				"name" : "SCE-R2-(202-209)",
				"time_stamp" : 1369133400000
			}
		]
	},
	{
		"name" : "5B_SFA1Cys276Ser-KlLEU2",
		"time_stamp" : 1365515820000
	},
	{
		"name" : "CEN.PK5B_SFA1Met283Ile-KlLEU2",
		"time_stamp" : 1365515940000
	},
	{
		"name" : "CEN.PK5B_SFA1wt-KlLEU2",
		"time_stamp" : 1365516000000
	},
	{
		"name" : "5HTP NO1",
		"time_stamp" : 1366284420000,
		"children" : [
			{
				"name" : "St782 (ST737isC2)",
				"time_stamp" : 1369232400000
			},
			{
				"name" : "St783 (ST737isB5)",
				"time_stamp" : 1369232460000
			}
		]
	},
	{
		"name" : "SCE-R2-(178-185)",
		"time_stamp" : 1369133280000
	},
	{
		"name" : "STC-R1-(1-15)",
		"time_stamp" : 1369406820000
	},
	{
		"name" : "MelatoninPW strains",
		"time_stamp" : 1370876760000,
		"children" : [
			{
				"name" : "ST827isA3",
				"time_stamp" : 1372090500000,
				"children" : [
					{
						"name" : "ST892loopedout",
						"time_stamp" : 1374066960000,
						"children" : [
							{
								"name" : "SC925_more isolates",
								"time_stamp" : 1376302380000
							},
							{
								"name" : "SC916-T1-S1",
								"time_stamp" : 1377079620000
							}
						]
					}
				]
			}
		]
	},
	{
		"name" : "SC10-RA1to16andWT",
		"time_stamp" : 1371635520000
	},
	{
		"name" : "SC10-WTandRA16to24 ",
		"time_stamp" : 1371635580000
	},
	{
		"name" : "ID1522_ST10-RA11-S1",
		"time_stamp" : 1380704280000
	},
	{
		"name" : "ID1523_ST10-RA11-S2",
		"time_stamp" : 1380704340000
	}
]}

## lineage3.json
{"name" : "BW25113",
"time_stamp" : 1347272040000,
"children" : [
	{
		"name" : "HL1301",
		"time_stamp" : 1359469260000,
		"children" : [
			{
				"name" : "HL1302",
				"time_stamp" : 1359469320000,
				"children" : [
					{
						"name" : "HL1304",
						"time_stamp" : 1360493340000,
						"children" : [
							{
								"name" : "HL1306",
								"time_stamp" : 1361625000000
							},
							{
								"name" : "HL1308",
								"time_stamp" : 1361878500000,
								"children" : [
									{
										"name" : "HL1310",
										"time_stamp" : 1373272740000,
										"children" : [
											{
												"name" : "HL1312",
												"time_stamp" : 1374053340000
											},
											{
												"name" : "HL1314",
												"time_stamp" : 1374053400000,
												"children" : [
													{
														"name" : "HL13141",
														"time_stamp" : 1375367040000
													},
													{
														"name" : "HL1332",
														"time_stamp" : 1377076380000
													},
													{
														"name" : "HL1334",
														"time_stamp" : 1377076440000
													}
												]
											},
											{
												"name" : "HL1326",
												"time_stamp" : 1376486520000
											},
											{
												"name" : "HL1328",
												"time_stamp" : 1377076200000
											},
											{
												"name" : "HL1330",
												"time_stamp" : 1377076320000
											},
											{
												"name" : "HL1336",
												"time_stamp" : 1379754780000
											}
										]
									},
									{
										"name" : "HL1316",
										"time_stamp" : 1374220680000
									},
									{
										"name" : "HL1318",
										"time_stamp" : 1374406560000
									},
									{
										"name" : "HL1320",
										"time_stamp" : 1374406620000
									},
									{
										"name" : "HL1322",
										"time_stamp" : 1375172940000
									}
								]
							}
						]
					}
				]
			},
			{
				"name" : "HL1303",
				"time_stamp" : 1360493280000,
				"children" : [
					{
						"name" : "HL1305",
						"time_stamp" : 1371652620000
					}
				]
			}
		]
	},
	{
		"name" : "HL1307",
		"time_stamp" : 1373272680000,
		"children" : [
			{
				"name" : "HL1309",
				"time_stamp" : 1374053280000,
				"children" : [
					{
						"name" : "HL1311",
						"time_stamp" : 1374827580000
					}
				]
			}
		]
	}
]}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.node circle {
	fill: #fff;
	stroke: steelblue;
	stroke-width: 1.5px;
	}

	.node {
	font: 8px sans-serif;
	}

	.link {
	fill: none;
	stroke: #ccc;
	stroke-width: 1.5px;
	}

	.tick {
	font: 10px sans-serif;
	}

	#lineage {
	border: 1px solid black;
	}

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

	.axis .title {
	font-weight: bold;
	text-anchor: end;
	}

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

	#tooltip {
	position: absolute;
	width: 200px;
	height: auto;
	padding: 10px;
	background-color: white;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	pointer-events: none;
	}

	#tooltip.hidden {
	display: none;
	}

	#tooltip p {
	margin: 0;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 20px;
	}

	</style>



	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="lineage.js"></script>


	<body>

	<div id="lineage1"></div>
	<div id="lineage2"></div>

	<script>


	var margin = {top: 20, right: 20, bottom: 20, left: 20},
	padding = {top: 60, right: 50, bottom: 60, left: 50},
	outerWidth = 960,
	outerHeight = 500,
	innerWidth = outerWidth - margin.left - margin.right,
	innerHeight = outerHeight - margin.top - margin.bottom,
	width = innerWidth - padding.left - padding.right,
	height = innerHeight - padding.top - padding.bottom;

	var chart = lineage().width(width).height(height)

	var svg = d3.select("#lineage1").append("svg")
	.attr("width", outerWidth)
	.attr("height", outerHeight)
	.append("g")
	.attr("transform", "translate(" + padding.left + "," + padding.top + ")");


	d3.json("lineage1.json", function(error, data) {
	if (error) {console.log(error)};
	chart(data, svg)
	});

	var svg2 = d3.select("#lineage2").append("svg")
	.attr("width", outerWidth)
	.attr("height", outerHeight)
	.append("g")
	.attr("transform", "translate(" + padding.left + "," + padding.top + ")");

	d3.json("lineage3.json", function(error, data) {
	if (error) {console.log(error)};
	chart(data, svg2)
	});


	</script>





	</body>
	function lineage() {

	// var width = 1200, // default width
	// height = 600; // default height

	function my(data, svg) {
	"use strict";

	var cluster = d3.layout.cluster()
	.size([height, width]);

	var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.y, d.x]; });

	var nodes = cluster.nodes(data)
	var links = cluster.links(nodes)

	var min_time_stamp = new Date(d3.min(nodes, function(elem) {return elem.time_stamp}))
	var max_time_stamp = new Date(d3.max(nodes, function(elem) {return elem.time_stamp}))
	var scale = d3.time.scale()
	scale.domain([min_time_stamp, max_time_stamp])
	.range([0, width])

	// var time_format = d3.time.format("%Y-%m-%d")

	var axis = d3.svg.axis()
	.tickFormat(function(d) {return d3.time.format('%x')(new Date(d)) })
	.scale(scale)
	.orient("bottom");

	svg.append("g").attr("class", "axis")
	.attr("transform", "translate(0," + (height + 20) + ")")
	.call(axis)


	nodes.forEach(function(node) {
	if (node.parent) {
	node.y = scale(new Date(node.time_stamp))
	}
	})

	nodes[0].y = scale(nodes[0].time_stamp)

	var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.y, d.x]; });

	var link = svg.selectAll(".link")
	.data(links)
	.enter().append("path")
	.attr("class", "link")
	.attr("d", diagonal);

	var node = svg.selectAll(".node")
	.data(nodes)
	.enter().append("g")
	.attr("class", "node")
	.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

	node.append("circle")
	.attr("r", 4.5)
	.on("mouseover", function(d) {
	var xpos = parseFloat(d3.select(this).x)
	var ypos = parseFloat(d3.select(this).y)
	d3.select("#tooltip")
	.style("left", xpos + "px")
	.style("top", ypos + "px")
	.select("#value").text("test")
	})
	.on("mouseout", function(){
	d3.select("#tooltip").classed("hidden", true);
	})

	node.append("text")
	.attr("dx", function(d) { return d.children ? -8 : 8; })
	.attr("dy", 3)
	.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
	.text(function(d) { return d.name; });
	}

	my.width = function(value) {
	if (!arguments.length) return width;
	width = value;
	return my;
	};

	my.height = function(value) {
	if (!arguments.length) return height;
	height = value;
	return my;
	};

	return my;
	}
	{"name" : "CEN.PK102-5B",
	"time_stamp" : 1314977520000,
	"children" : [
	{
	"name" : "St614- pINT-3xFP-is3",
	"time_stamp" : 1357308540000,
	"children" : [
	{
	"name" : "ST899isB4",
	"time_stamp" : 1372244640000
	},
	{
	"name" : "ST900isD4",
	"time_stamp" : 1372244940000
	},
	{
	"name" : "ST901isB7",
	"time_stamp" : 1372244940000
	},
	{
	"name" : "ST902isA11",
	"time_stamp" : 1372245000000
	},
	{
	"name" : "ST903isE8",
	"time_stamp" : 1372245060000
	},
	{
	"name" : "ST904isG7",
	"time_stamp" : 1372245060000
	},
	{
	"name" : "ST905isG8",
	"time_stamp" : 1372245120000
	}
	]
	},
	{
	"name" : "St615- pINT-3xFP-is4",
	"time_stamp" : 1357308660000
	},
	{
	"name" : "St616- pINT-3xFP-is5",
	"time_stamp" : 1357308960000
	},
	{
	"name" : "St617- pINT-3xFP-is7",
	"time_stamp" : 1357309020000
	},
	{
	"name" : "Sc Delta pdc5",
	"time_stamp" : 1362158340000
	},
	{
	"name" : "Sc Delta aro10",
	"time_stamp" : 1362158400000,
	"children" : [
	{
	"name" : "Sc Delta aro10-pdc5",
	"time_stamp" : 1363165320000,
	"children" : [
	{
	"name" : "ST691+5HTP-PW",
	"time_stamp" : 1369666260000
	},
	{
	"name" : "ID1524_ST691-RA11-L2",
	"time_stamp" : 1380704400000
	}
	]
	}
	]
	},
	{
	"name" : "SCEARO-0001",
	"time_stamp" : 1363276440000
	},
	{
	"name" : "TY4-MCR-ACC1",
	"time_stamp" : 1363278660000
	},
	{
	"name" : "TY4MCR-ACC1-ACS-ALD6",
	"time_stamp" : 1363278780000
	},
	{
	"name" : "SCE-R2-118",
	"time_stamp" : 1365442920000,
	"children" : [
	{
	"name" : "SCE-PYC1^PYC2^ (ura-his-leu-)",
	"time_stamp" : 1367065080000,
	"children" : [
	{
	"name" : "SCE-R2-(194-201)",
	"time_stamp" : 1369133340000
	},
	{
	"name" : "SCE-R2-200 (E8)",
	"time_stamp" : 1376581680000
	}
	]
	},
	{
	"name" : "SCE-R2-(202-209)",
	"time_stamp" : 1369133400000
	}
	]
	},
	{
	"name" : "5B_SFA1Cys276Ser-KlLEU2",
	"time_stamp" : 1365515820000
	},
	{
	"name" : "CEN.PK5B_SFA1Met283Ile-KlLEU2",
	"time_stamp" : 1365515940000
	},
	{
	"name" : "CEN.PK5B_SFA1wt-KlLEU2",
	"time_stamp" : 1365516000000
	},
	{
	"name" : "5HTP NO1",
	"time_stamp" : 1366284420000,
	"children" : [
	{
	"name" : "St782 (ST737isC2)",
	"time_stamp" : 1369232400000
	},
	{
	"name" : "St783 (ST737isB5)",
	"time_stamp" : 1369232460000
	}
	]
	},
	{
	"name" : "SCE-R2-(178-185)",
	"time_stamp" : 1369133280000
	},
	{
	"name" : "STC-R1-(1-15)",
	"time_stamp" : 1369406820000
	},
	{
	"name" : "MelatoninPW strains",
	"time_stamp" : 1370876760000,
	"children" : [
	{
	"name" : "ST827isA3",
	"time_stamp" : 1372090500000,
	"children" : [
	{
	"name" : "ST892loopedout",
	"time_stamp" : 1374066960000,
	"children" : [
	{
	"name" : "SC925_more isolates",
	"time_stamp" : 1376302380000
	},
	{
	"name" : "SC916-T1-S1",
	"time_stamp" : 1377079620000
	}
	]
	}
	]
	}
	]
	},
	{
	"name" : "SC10-RA1to16andWT",
	"time_stamp" : 1371635520000
	},
	{
	"name" : "SC10-WTandRA16to24 ",
	"time_stamp" : 1371635580000
	},
	{
	"name" : "ID1522_ST10-RA11-S1",
	"time_stamp" : 1380704280000
	},
	{
	"name" : "ID1523_ST10-RA11-S2",
	"time_stamp" : 1380704340000
	}
	]}
	{"name" : "BW25113",
	"time_stamp" : 1347272040000,
	"children" : [
	{
	"name" : "HL1301",
	"time_stamp" : 1359469260000,
	"children" : [
	{
	"name" : "HL1302",
	"time_stamp" : 1359469320000,
	"children" : [
	{
	"name" : "HL1304",
	"time_stamp" : 1360493340000,
	"children" : [
	{
	"name" : "HL1306",
	"time_stamp" : 1361625000000
	},
	{
	"name" : "HL1308",
	"time_stamp" : 1361878500000,
	"children" : [
	{
	"name" : "HL1310",
	"time_stamp" : 1373272740000,
	"children" : [
	{
	"name" : "HL1312",
	"time_stamp" : 1374053340000
	},
	{
	"name" : "HL1314",
	"time_stamp" : 1374053400000,
	"children" : [
	{
	"name" : "HL13141",
	"time_stamp" : 1375367040000
	},
	{
	"name" : "HL1332",
	"time_stamp" : 1377076380000
	},
	{
	"name" : "HL1334",
	"time_stamp" : 1377076440000
	}
	]
	},
	{
	"name" : "HL1326",
	"time_stamp" : 1376486520000
	},
	{
	"name" : "HL1328",
	"time_stamp" : 1377076200000
	},
	{
	"name" : "HL1330",
	"time_stamp" : 1377076320000
	},
	{
	"name" : "HL1336",
	"time_stamp" : 1379754780000
	}
	]
	},
	{
	"name" : "HL1316",
	"time_stamp" : 1374220680000
	},
	{
	"name" : "HL1318",
	"time_stamp" : 1374406560000
	},
	{
	"name" : "HL1320",
	"time_stamp" : 1374406620000
	},
	{
	"name" : "HL1322",
	"time_stamp" : 1375172940000
	}
	]
	}
	]
	}
	]
	},
	{
	"name" : "HL1303",
	"time_stamp" : 1360493280000,
	"children" : [
	{
	"name" : "HL1305",
	"time_stamp" : 1371652620000
	}
	]
	}
	]
	},
	{
	"name" : "HL1307",
	"time_stamp" : 1373272680000,
	"children" : [
	{
	"name" : "HL1309",
	"time_stamp" : 1374053280000,
	"children" : [
	{
	"name" : "HL1311",
	"time_stamp" : 1374827580000
	}
	]
	}
	]
	}
	]}