Skip to content

Instantly share code, notes, and snippets.

@grybnicky

grybnicky/README.md

Last active April 8, 2016 17:58
Show Gist options
  • Save grybnicky/b4f37349887a4c178ef93ed855153605 to your computer and use it in GitHub Desktop.
Save grybnicky/b4f37349887a4c178ef93ed855153605 to your computer and use it in GitHub Desktop.
Download ZIP
Repeat finder circle ruler arc genes
Raw
genes.json.txt
[{
"name": 1,
"pham": 7,
"sequence": "ATGCTACGTAGCTACGTACGATCGTACGATCGATCGTACG",
"start": 50,
"stop": 2000,
"direction": "forward"
},
{
"name": 2,
"pham": 201,
"sequence": "GACTGACTGACTAGCTGACTGATCGTACTCGAT",
"start": 2150,
"stop": 2900,
"direction": "reverse"
},
{
"name": 3,
"pham": 90,
"sequence": "ATCGTACGTACGTACGTACGATCGTACGATCGCGCGCGCGGCGCATCGATCGATCGTACTA",
"start": 3000,
"stop": 4550,
"direction": "reverse"
},
{
"name": 4,
"pham": 3752,
"sequence": "TTCTAGTCGATCGTACGTGTACGTGCATTATTGATGCTATATATCGTATATACGTA",
"start": 4700,
"stop": 7550,
"direction": "forward"
}
]
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>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic">
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
svg.append("circle")
.attr({cx: 300, cy: 300, r: 200})
.style({ fill: "green", opacity: 1})
.attr({stroke: "black"});
//Add code for line ticks
svg.append("circle")
.attr({cx: 300, cy: 300, r: 150})
.attr({stroke: "black"})
.style({ fill: "white", opacity: 1});
d3.json("genes.json.txt", function(error, json) {
if (error) return console.warn(error);
var genes = svg.selectAll(".genes")
.data(json)
.enter()
.append("g")
.attr("transform", "translate (300,300)");
//outer circle
var r = 250
var p = Math.PI *2;
var arc = d3.svg.arc()
.innerRadius(r-30)
.outerRadius(r)
.startAngle(0)
.endAngle(p)
genes.append("path")
.attr("d", arc)
.style({fill: "red"})
.attr("stroke", "black");
;})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment