Skip to content

Instantly share code, notes, and snippets.

@Craftbd

Craftbd/.block

Last active February 8, 2018 17:22
Show Gist options
  • Save Craftbd/1a2f08f675b1f679cafde65673562b1f to your computer and use it in GitHub Desktop.
Save Craftbd/1a2f08f675b1f679cafde65673562b1f to your computer and use it in GitHub Desktop.
Download ZIP
Gene coding
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 svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
var gene = [{"name": "1","start": 50,"end": 121,"direction": "F","function":"function 1"},
{"name": "2","start": 195,"end": 250,"direction": "F","function":"function 2"},
{"name": "3","start": 370,"end": 450,"direction": "F","function":"function 3"},
{"name": "4","start": 252,"end": 295,"direction": "R","function":"function 4"},
{"name": "5","start": 80,"end": 145,"direction": "R","function":"function 5"},
{"name": "6","start": 330,"end": 385,"direction": "R","function":"function 6"}
];
var ruler_100=[100];
var ruler_500=[500];
var ruler_1000=[1000];
var numbers= d3.range(10000);
for(i in numbers){
if (i % 1000==0){
ruler_1000.push(numbers[i]);
}
else if (i % 500==0){
ruler_500.push(numbers[i]);
}
else if (i % 100==0){
ruler_100.push(numbers[i]);
}
}
//Start of the ruler code
svg.append("rect")
.attr("y", 202)
.attr("x", 0)
.attr("width", 960)
.attr("height", 36)
.attr("fill", "yellow")
.attr("stroke","black")
.attr("stroke-width", 1)
svg.selectAll(".rect1000")
.data(ruler_1000)
.enter()
.append("rect")
.classed("rect1000", true)
.attr("fill","black")
.attr("width", 3)
.attr("height",36)
.attr("y",202)
.attr("x",function(d){return d/10});
svg.selectAll(".rect500")
.data(ruler_500)
.enter()
.append("rect")
.classed("rect1000", true)
.attr("fill","black")
.attr("width", 2)
.attr("height",20)
.attr("y",202)
.attr("x",function(d){return d/10});
svg.selectAll(".rect100")
.data(ruler_100)
.enter()
.append("rect")
.classed("rect1000", true)
.attr("fill","black")
.attr("width", 2)
.attr("height",10)
.attr("y",229)
.attr("x",function(d){return d/10});
//end ruler code
console.log(gene);
svgEnter = svg.selectAll(".rect")// creates a selection
.data(gene)// reads gene var
.enter()
; //does something about the above function.
svgEnter.append("rect")
.attr("x", function(d)
{if ( d.direction=="F")
{return 0 - (d.end-d.start);}
else
{return 960;}
})
.attr("width", function(d) {return d.end-d.start;})
.attr("y", function(d)
{if ( d.direction=="F")
{return 160;}
else
{return 240;}
})
.classed("gene", true)
.attr("d", function(d) {return d.direction;})
.attr("fill", function(d) {return d.fill;})
.attr("f", function(d) {return d.function;})
.attr("stroke","black")
.attr("stroke-width", 2)
.attr("fill", function (d)
{if (d.direction=="F")
{return "green";}
else
{return "red";}
})
.attr("n", function(d) {return d.name;})
.attr("opacity",0)
.transition()
.duration(2000)
.attr("height", 40)
.delay(function(d,i){return i *500})
.attr("opacity", 1)
.attr("width", function(d) {return d.end-d.start;})
.attr("x", function(d) {return d.start;})
svgEnter.append("text")
.text(function (d) {return d.name})
.attr("text-anchor", "middle")
.attr("alignment-baseline","middle")
.attr("font-size",20)
.attr("opacity",0)
.attr("font-family", "monospace")
.attr("x", function(d) {return (d.start + d.end)/2})
//with the begining of the text . we need a text-achor
.attr("y", function(d) {if ( d.direction=="F") {return 180;} else {return 260;}})
.transition()
.delay(500+(gene.length*100))
.duration(2500)
.attr("opacity",1)
;
; // end code line
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment