Skip to content

Instantly share code, notes, and snippets.

@rubin2ma

rubin2ma/.block

Created February 9, 2018 17:36
Show Gist options
  • Save rubin2ma/ccb42bebc3d443b8c5822b4241c32803 to your computer and use it in GitHub Desktop.
Save rubin2ma/ccb42bebc3d443b8c5822b4241c32803 to your computer and use it in GitHub Desktop.
Download ZIP
Genome Browser with Tape Measure
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>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
var gene_data = [{"name":"1", "start": 50,"end":100, "direction": "F", "function": "function_1"},
{"name":"2", "start": 110,"end":200, "direction": "F", "function": "function_2"},
{"name":"3", "start": 250,"end":350, "direction": "R", "function": "function_3"},
{"name":"4", "start": 400,"end":600, "direction": "F", "function": "function_4"}]
var ruler_100 = [];
var ruler_500 = [];
var ruler_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])
}
};
//console.log("1000:", ruler_1000);
//console.log("500:", ruler_500);
//console.log("100:", ruler_100);
svg.append("rect")
.attr("y",100)
.attr("x",0)
.attr("width", 960)
.attr("height", 50)
.attr("fill","yellow")
.attr("stroke", "black")
.attr("stroke-width", 2)
svg.selectAll(".rect1000")
.data(ruler_1000)
.enter()
.append("rect")
.classed("rect1000", true)
.attr("fill","black")
.attr("width", 2)
.attr("height", 50)
.attr("y", 100)
.attr("x", function(d) {return d/10});
svg.selectAll(".rect500")
.data(ruler_500)
.enter()
.append("rect")
.classed("rect500", true)
.attr("fill","black")
.attr("width", 2)
.attr("height", 20)
.attr("y", 100)
.attr("x", function(d) {return d/10});
svg.selectAll(".rect100")
.data(ruler_100)
.enter()
.append("rect")
.classed("rect100", true)
.attr("fill","black")
.attr("width", 2)
.attr("height", 10)
.attr("y", 100)
.attr("x", function(d) {return d/10});
console.log(gene_data);
svgEnter = svg.selectAll("rect") //selects anything in the svg data file
.data(gene_data) //data join... what connects the data to making the pic
.enter();
svgEnter.append("rect")
.attr("y",function(d) {if ( d.direction=="F" ) {return 100;} else {return 200;}})
.attr("x", function(d) {if ( d.direction=="F" ) {return 0-(d.end-d.start);} else {return 960;}})
.attr("f", function(d) {return d.function;})
.attr("width", function(d) {return d.end-d.start;})
.attr("height", 50)
.attr("fill", function (d) {if (d.direction=="F"){return "Tomato";} else {return "Turquoise";}})
.transition()
.duration(1500)
.delay(function(d, i) {return i *1500})
.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("opacity",0)
.attr("font-size", 20)
.attr("font-family", "monospace")
.attr("x", function (d) {return (d.start + d.end)/2})
.attr("y",function(d) {if ( d.direction=="F" ) {return 125;} else {return 225;}})
.transition()
.duration(2000)
.delay(300 + (gene_data.length) * 1000)
.attr("opacity",1)
;
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment