Skip to content

Instantly share code, notes, and snippets.

@Heywhoyou22

Heywhoyou22/.block

Last active February 8, 2018 17:18
Show Gist options
  • Save Heywhoyou22/44b460143dde87388117f7ef56fb5a58 to your computer and use it in GitHub Desktop.
Save Heywhoyou22/44b460143dde87388117f7ef56fb5a58 to your computer and use it in GitHub Desktop.
Download ZIP
Genome Browser
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var ruler1000=[]
var ruler100=[]
var ruler500=[]
var bleh=d3.range(10000)
for (v in bleh)
if (v%1000==0)(ruler1000.push[v])
else if (v%500==0)(ruler500.push[v])
else if (v%100==0)(ruler100.push[v])
var Ruler={width:800,height:50}
var Genes=[
{name:"1",start:50,sequence:"ATGCTAGCGGAT",direction:"F",function:"Hair cell gene"}, {name:"2",start:250,sequence:"ACTGCACGGGA",direction:"R",function:"Skin cell gene"},{name:"3",start:250,sequence:"GATAGCTGAC",direction:"F",function:"Hair color gene"},{name:"4",start:450,sequence:"TGAAGCTTAGTCTAGCTGAGCTAGGAC",direction:"F",function:"Stomach cell gene"}]
var svg = d3.select("body").append("svg")
.attr("width", 1000)
.attr("height", 500)
svg.selectAll("fool")
.data(Genes)
.enter()
.append("rect")
.attr("y",function(v){if (v.direction=="F"){return 100;}else{return 300;}})
.attr("x",function(v){if (v.direction=="F"){return 1000;}else{return -1-((v.sequence.length)*13);}})
.attr("width",function(v){return 20+(v.sequence.length)*11})
.attr("height",50)
.attr("fill",function(v){if (v.direction=="F"){return "green";}else{return "red";}})
.attr("fill-opacity",.5)
.attr("stroke","black")
.attr("stroke-width",1)
.transition()
.duration(1500)
.attr("x",function(v){return v.start;})
.delay(function(v,i){return i*1000;})
;
svg.selectAll("Sequences")
.data(Genes)
.enter()
.append("text")
.text(function(v){return v.sequence})
.attr("y",function(v){if (v.direction=="F"){return 130;}else{return 330;}})
.attr("x",function(v){if (v.direction=="F"){return 1000;}else{return -1-((v.sequence.length)*13);}})
.attr("font-size", 20)
.attr("font-family", "monospace")
.transition()
.duration(1500)
.attr("x",function(v){return v.start+10})
.delay(function(v,i){return i*1000;})
;
svg.selectAll("Functions")
.data(Genes)
.enter()
.append("text")
.text(function(v){return v.function})
.attr("y",function(v){if (v.direction=="F"){return 90;}else{return 290;}})
.attr("x",function(v){if (v.direction=="F"){return 1000;}else{return -1-((v.sequence.length)*13);}})
.attr("font-size", 20)
.attr("font-family", "monospace")
.transition()
.duration(1500)
.attr("x",function(v){return v.start})
.delay(function(v,i){return i*1000;})
;
svg.append("rect")
.attr("y", 200)
.attr("x", 50)
.attr("width",Ruler.width)
.attr("height",Ruler.height)
.attr("fill-opacity","0")
.attr("stroke","white")
.transition()
.duration(1500)
.attr("fill-opacity","0.3")
.attr("stroke","black")
;
svg.selectAll("ruler")
.data(ruler1000)
.enter()
.append("rect")
.attr("fill","black")
.attr("width",2)
.attr("height",50)
.attr("y",200)
.attr("x", function(v) {return v/10})
;
svg.append("text")
.text("Genome Browser")
.attr("y", 50)
.attr("x", 120)
.attr("font-size", 36)
.attr("font-family", "monospace")
;
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment