|
-<!DOCTYPE html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> |
|
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.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% } |
|
/*tool tip*/ |
|
.d3-tip { |
|
line-height: 1; |
|
font-weight: bold; |
|
padding: 12px; |
|
background: rgba(0, 0, 0, 0.8); |
|
color: #fff; |
|
border-radius: 2px; |
|
} |
|
|
|
/* Creates a small triangle extender for the tooltip */ |
|
.d3-tip:after { |
|
box-sizing: border-box; |
|
display: inline; |
|
font-size: 10px; |
|
width: 100%; |
|
line-height: 1; |
|
color: rgba(0, 0, 0, 0.8); |
|
content: "\25BC"; |
|
position: absolute; |
|
text-align: center; |
|
} |
|
|
|
/* Style northward tooltips differently */ |
|
.d3-tip.n:after { |
|
margin: -1px 0 0 0; |
|
top: 100%; |
|
left: 0; |
|
} |
|
/* Style northward tooltips differently */ |
|
.d3-tip.n:after { |
|
margin: -1px 0 0 0; |
|
top: 100%; |
|
left: 0; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<script> |
|
var genomelength = 80000 |
|
|
|
var keystone = d3.svg.arc() |
|
.innerRadius(230) |
|
.outerRadius(250) |
|
.startAngle(-0.0436332) |
|
.endAngle(0.0436332) |
|
|
|
var tip = d3.tip() |
|
.attr('class', 'd3-tip') |
|
.offset([-10, 0]) |
|
.html(function(d) { |
|
return "<strong>GP:</strong> <span style='color:red'>" + d.name + "</span>"; |
|
}) |
|
|
|
var chart = d3.select("body").append("svg:svg") |
|
.attr("class", "chart") |
|
.attr("width", 700) |
|
.attr("height", 700).append("svg:g") |
|
.attr("transform", "translate(400,400)") |
|
; |
|
d3.json("genes.json.txt", function(error, json) { |
|
if (error) return console.warn(error); |
|
var arc = d3.svg.arc() |
|
.innerRadius(function(d){if (d.name%2==0) |
|
return 290 |
|
else if (d.name%2==1) |
|
return 250;}) |
|
.outerRadius(function(d){if (d.name%2==0) |
|
return 330 |
|
else if (d.name%2==1) |
|
return 290;}) |
|
.startAngle(function(d, i){return ((d.start/genomelength)*6.2)+0.0436332;}) |
|
.endAngle(function(d, i){return ((d.stop/genomelength)*6.2)+0.0436332;}) |
|
; |
|
|
|
chart.call(tip); |
|
|
|
|
|
chart.selectAll("path") |
|
.data(json) |
|
.enter().append("svg:path") |
|
.style("fill", function(d, i){ if (d.direction=="forward") |
|
return "green" |
|
else if (d.direction=="reverse") |
|
return "red"; |
|
}) |
|
.style("stroke", "black") |
|
.attr("d", arc) |
|
.on('mouseover', tip.show) |
|
.on('mouseout', tip.hide) |
|
|
|
chart.append("circle") |
|
.attr({cx: 0, cy: 0, r: 250}) |
|
.style({ fill: "gray", opacity: 0}) |
|
.attr({stroke: "black"}); |
|
|
|
//Keystone |
|
chart.append("path") |
|
.attr("d", keystone) |
|
.attr("fill", "black") |
|
//.attr("stroke", "black") |
|
|
|
//Add code for line ticks |
|
var r = d3.scale.linear() |
|
.domain([0, 1]) |
|
.range([0, 200]); |
|
|
|
|
|
//default accessor [[x1,y1]] => radian and angle |
|
var line = d3.svg.line.radial() |
|
.radius(function(d){; return (r(d[1])); }) // will change between -1 and 1 |
|
.angle(function(d) { ;return d[0];}); |
|
|
|
|
|
// radius axis |
|
// cheat with CSS |
|
var gr = chart.append("g") |
|
.attr("class", "r axis") |
|
.selectAll("g") |
|
.data(r.ticks(10).slice(0)) |
|
.enter().append("g"); |
|
|
|
var thoutick = chart.append("g") |
|
.attr("stroke", "black") |
|
.selectAll("g") |
|
.data(d3.range(2.5, 357.5, (1000/genomelength)*355)) |
|
.enter().append("g") |
|
.attr("transform", function(d) { return "rotate(" + (d-90) + ")"; }); |
|
|
|
var fhuntick = chart.append("g") |
|
.attr("stroke", "black") |
|
.selectAll("g") |
|
.data(d3.range(2.5, 357.5, (500/genomelength)*355)) |
|
.enter().append("g") |
|
.attr("transform", function(d) { return "rotate(" + (d-90) + ")"; }); |
|
|
|
var fthotick = chart.append("g") |
|
.attr("stroke", "black") |
|
.selectAll("g") |
|
.data(d3.range(2.5, 357.5, (5000/genomelength)*355)) |
|
.enter().append("g") |
|
.attr("transform", function(d) { return "rotate(" + (d-90) + ")"; }); |
|
|
|
fthotick.append("line") |
|
.attr("x2", 250); |
|
|
|
fhuntick.append("line") |
|
.attr("x2", 235); |
|
|
|
thoutick.append("line") |
|
.attr("x2", 240) |
|
.style("stroke", "black"); |
|
|
|
chart.append("circle") |
|
.attr({cx: 0, cy: 0, r: 230}) |
|
.attr({stroke: "black"}) |
|
.style({ fill: "white", opacity: 0}); |
|
|
|
fthotick.append("text") |
|
.attr("x", 240) |
|
.attr("dy", ".35em") |
|
.style("text-anchor", "middle") |
|
.text(function(d) { return Math.ceil(((d-2.5)/355)*genomelength/1000); }) |
|
.style("fill", "white") |
|
.attr({stroke: "none"}) |
|
.attr({"font-size": "14px", "font-family": "Arial"}) |
|
//.attr("transform", "rotate(90)") |
|
; |
|
;}) |
|
d3.json("repeats.json.txt", function(error, json) { |
|
if (error) return console.warn(error); |
|
|
|
var repeat = chart.selectAll(".rep") |
|
.data(json) |
|
.enter() |
|
.append("g"); |
|
|
|
var loc = repeat.selectAll(".loc") |
|
.data(function(d){return d.coordinates;}) |
|
.enter() |
|
.append("g"); |
|
|
|
|
|
var connectfunc = loc.line() |
|
.x(function(d){return 400+(230*Math.sin(d.start*2*Math.PI/genomelength));}) |
|
.y(function(d){return 400+(230*Math.cos(d.start*2*Math.PI/genomelength));}) |
|
.interpolate(linear) |
|
|
|
; |
|
|
|
var connects = loc.append("path") |
|
.attr("d", connectfunc) |
|
.attr("stroke", "red") |
|
.attr("stroke-width", 5) |
|
|
|
;}) |
|
|
|
</script> |
|
</body> |
