Skip to content

Instantly share code, notes, and snippets.

@greenmna

greenmna/.block

Last active February 8, 2018 17:15
Show Gist options
  • Save greenmna/7c16f1019b8ea49f0276cf222122f6ed to your computer and use it in GitHub Desktop.
Save greenmna/7c16f1019b8ea49f0276cf222122f6ed to your computer and use it in GitHub Desktop.
Download ZIP
Fake Genes (02/08/18)
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", 3000)
.attr("height", 1000)
var genemap= [{"name": "Gene 1", "start": 50, "end": 100, "direction":"F", "function": "function 1", },{"name": "Gene 2", "start": 150, "end": 300, "direction":"F", "function": "function 2", },{"name": "Gene 3", "start": 250, "end": 400, "direction":"R", "function": "function 3", },{"name": "Gene 4", "start": 350, "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(ruler_100)
console.log(ruler_500)
console.log(ruler_1000)*/
var svgEnter= svg.selectAll("rect")
.data(genemap)
.enter()
svg.selectAll("rect")
.data(genemap)
.enter()
.append("rect")
.attr("x", function(d) {if (d.direction=="F") {return 0-(d.end-d.start);} else{return 1000;}})
.attr("width", function(d) {return d.end - d.start;})
.attr("y", function(d) {if (d.direction =="F") {return 100;} else{return 225;}})
.attr("height", 50)
.attr("fill", function(d) {if (d.direction=="F") {return "cyan";} else{return "pink";}})
.attr("stroke", "black")
.transition()
.duration(2000)
.delay (function (d, i) {return i *1000})
.attr("x", function(d) {return d.start;})
svgEnter.append("text")
.text(function (d) {return d.name})
.attr("x", function(d) {return (d.start+d.end)/2})
.attr("y", function (d) {if (d.direction=="F") {return 100+25;} else{return 225+25;}})
.attr("font-family", "Times New Roman")
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.attr("font-size", 15)
.attr("font-color", "black")
.attr("opacity", 0)
.transition()
.delay(500 + genemap.length * 1000)
.duration(500)
.attr("opacity", 1)
svg.selectAll(".rect1000")
.data(ruler_1000)
.enter()
.append("rect")
.classed("rect1000", true)
.attr("fill", "black")
.attr("width", 2)
.attr("height", 35)
.attr("y", 150)
.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", 150)
.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", 175)
.attr("x", function(d) {return d/10})
//.attr("fill", function(d) {if (d.direction=="F", d.name=="1") {return "green";} else if(d.name=="2") {return "yellow";} else if(d.name=="4") {return "purple";} else {return "blue"}})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment