Skip to content

Instantly share code, notes, and snippets.

@zaccagbj

zaccagbj/README.md

Last active March 21, 2016 20:13
Show Gist options
  • Save zaccagbj/f494728af00496ea1aa4 to your computer and use it in GitHub Desktop.
Save zaccagbj/f494728af00496ea1aa4 to your computer and use it in GitHub Desktop.
Download ZIP
newer work on genome thing
Raw
genes.json.txt
[{
"phageName":"money",
"genomelength":7800,
"genes":[
{
"name": 1,
"start": 50,
"pham": 7,
"sequence": "ATGCTACGTAGCTACGTACGATCGTACGATCGATCGTACG",
"stop": 2000,
"direction": "forward",
"genomelength":7800
},
{
"name": 2,
"start": 2150,
"pham": 201,
"sequence": "GACTGACTGACTAGCTGACTGATCGTACTCGAT",
"stop": 2900,
"direction": "forward",
"genomelength":7800
},
{
"name": 3,
"start": 3000,
"pham": 90,
"sequence": "ATCGTACGTACGTACGTACGATCGTACGATCGCGCGCGCGGCGCATCGATCGATCGTACTA",
"stop": 4550,
"direction": "reverse",
"genomelength":7800
},
{
"name": 4,
"start": 4700,
"pham": 3752,
"sequence": "TTCTAGTCGATCGTACGTGTACGTGCATTATTGATGCTATATATCGTATATACGTA",
"stop": 7550,
"direction": "reverse",
"genomelength":7800
}]},
{
"phageName":"big",
"genomelength":7800,
"genes":[
{
"name": 1,
"start": 50,
"pham": 7,
"sequence": "ATGCTACGTAGCTACGTACGATCGTACGATCGATCGTACG",
"stop": 2000,
"direction": "forward",
"genomelength":7800
},
{
"name": 2,
"start": 2150,
"pham": 201,
"sequence": "GACTGACTGACTAGCTGACTGATCGTACTCGAT",
"stop": 2900,
"direction": "forward",
"genomelength":7800
},
{
"name": 3,
"start": 3000,
"pham": 90,
"sequence": "ATCGTACGTACGTACGTACGATCGTACGATCGCGCGCGCGGCGCATCGATCGATCGTACTA",
"stop": 4550,
"direction": "reverse",
"genomelength":7800
},
{
"name": 4,
"start": 4700,
"pham": 3752,
"sequence": "TTCTAGTCGATCGTACGTGTACGTGCATTATTGATGCTATATATCGTATATACGTA",
"stop": 7550,
"direction": "reverse",
"genomelength":7800
}]}
]
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see!
d3.json("genes.json.txt", function(error, json) {
if (error) return console.warn(error);
var svg = d3.select("body")
.selectAll(".svg")
.data(json)
.enter()
.append("svg")
.attr("width", function(d)
{if (d.phageName !=0)
{return d.genomelength/10}
else {return 0}})
.attr("height",function(d)
{if (d.phageName !=0)
{return 250}
else {return 0}})
.attr("x",0)
var ruler = svg
.selectAll(".space")
.data(function (d){return d.genes})
.enter()
.append("rect")
var rulerActual = ruler
.attr({x: 0, y: 100, width: function(d){return d.genomelength/10}, height: 30})
.style({"stroke-width": "2px", "fill": "white", "stroke": "black"});
/// genome_positions.forEach(function(currentValue, index, myArray){
/// if (currentValue % 1000 === 0) {
// tickMarks.thousand.push(currentValue);
// }
// else if (currentValue % 500 === 0) {
// tickMarks.fivehundred.push(currentValue);
//
// }
// else if (currentValue % 100 === 0) {
// tickMarks.onehundred.push(currentValue);
// }
// });
var group = svg.selectAll(".a")
.data(function(d){
var tickmark = {thousand:[]}
var genome_positions = [];
for (var i = 1; i <= d.genomelength; i++) {
genome_positions.push(i);}
genome_positions.forEach(function(currentValue, index, myArray){
if (currentValue % 1000 === 0){tickmark.thousand.push(currentValue);}
})
return tickmark.thousand
})
.enter()
.append("g");
group.append("rect")
.style({"fill": "black"})
.attr({x: 0, y: 100, width: "1px", height: 30})
.transition().duration(3000)
.attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
group.append("text")
.text(function (d) {return d/1000})
.attr("x", function(d){return d/10 })
.attr({y: 112, width: "1px", height: 30})
.attr("text-anchor", "end")
.attr("font-size", "13px")
var group2 = svg.selectAll(".b")
.data(function(d){
var tickmark = {fivehundred:[]}
var genome_positions = [];
for (var i = 1; i <= d.genomelength; i++) {
genome_positions.push(i);}
genome_positions.forEach(function(currentValue, index, myArray){
if (currentValue % 500 === 0 && currentValue % 1000 !=0){tickmark.fivehundred.push(currentValue);}
})
return tickmark.fivehundred}
)
.enter()
.append("g");
group2.append("rect")
.style({"fill": "black"})
.attr({x: 0, y: 100, width: "1px", height: 15})
.transition().duration(2000)
.attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
var group3 = svg.selectAll(".c")
.data(function(d){
var tickmark = {onehundred:[]}
var genome_positions = [];
for (var i = 1; i <= d.genomelength; i++) {
genome_positions.push(i);}
genome_positions.forEach(function(currentValue, index, myArray){
if (currentValue % 100 === 0 && currentValue % 1000 !=0 && currentValue %500 !=0){tickmark.onehundred.push(currentValue);}})
return tickmark.onehundred} )
.enter()
.append("g");
group3.append("rect")
.style({"fill": "black"})
.attr({x: 0, y: 115, width: "1px", height: 15})
.transition().duration(1000)
.attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
var rects = svg.selectAll(".stank")
.data(function (d){return d.genes})
.enter()
.append("rect")
var rectAttributes = rects
.attr("x", function (d) {if (d.direction == "forward")
{return (0-((d.stop-d.start)/10)-2);}
else if (d.direction == "reverse") {
return (d.genomelength/10)+2;}
})
.attr("y", function (d) {if (d.direction == "forward" && d.name%2!=0)
{return 30}
else if (d.direction == "forward" && d.name%2==0)
{return 70}
else if (d.direction =="reverse" && d.name%2!=0)
{return 130}
else if (d.direction =="reverse" && d.name%2==0)
{return 170}
else {return 0}})
.attr("height", function(d) { return 30;})
.attr("width", function (d) { return (d.stop-d.start)/10; })
.style({"fill":function(d)
{if (d.direction == "forward")
{return "blue"}
else if (d.direction =="reverse")
{return"darkOrange"}
else {return "black"}},"stroke":"black", "stroke-width": "2px"})
.transition().delay(3000).duration(1000)
.attr("x", function (d) { return d.start/10; });
var pham = svg.selectAll(".frosty")
.data(function (d){return d.genes})
.enter()
.append("text")
var nameAttributes = pham
.attr("x", function (d) { return ((d.stop+d.start)/2)/10})
.attr("y", function (d) {if (d.direction == "forward" && d.name%2!=0)
{return 25}
else if (d.direction == "forward" && d.name%2==0)
{return 65}
else if (d.direction =="reverse" && d.name%2!=0)
{return 180}
else if (d.direction =="reverse" && d.name%2==0)
{return 220}
else {return 0}})
.text(function (d) {return d.pham})
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "black")
.attr("stroke", "black")
.attr("stroke-width",".5px");
var name = svg.selectAll(".baggy")
.data(function (d){return d.genes})
.enter()
.append("text")
var nameAttributes = name
.attr("x", function (d) { return ((d.stop+d.start)/2)/10})
.attr("y", function (d) {if (d.direction == "forward" && d.name%2!=0)
{return 50}
else if (d.direction == "forward" && d.name%2==0)
{return 90}
else if (d.direction =="reverse" && d.name%2!=0)
{return 150}
else if (d.direction =="reverse" && d.name%2==0)
{return 190}
else {return 0}})
.text(function (d) {return d.name})
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "black")
.attr("stroke", "black")
.attr("stroke-width",".5px");
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment