Skip to content

Instantly share code, notes, and snippets.

@timchu90

timchu90/D781E.tsv

Last active January 7, 2019 22:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timchu90/560e740a8f04d37690352ee4fd3d8421 to your computer and use it in GitHub Desktop.
Save timchu90/560e740a8f04d37690352ee4fd3d8421 to your computer and use it in GitHub Desktop.
Download ZIP
sf3b1_variants
Raw
README.md

SF3B1 Variants

Visualization showing the sf3b1 structure and variants detected as well as associated studies

Raw
D781E.tsv
cohort numsample
TCGA_BRCA 1
Raw
D781G.tsv
cohort numsample
Leucegene_AML 2
Raw
D894H.tsv
cohort numsample
TCGA_SARC 1
Raw
E622D.tsv
cohort numsample
TCGA_PRAD 1
Raw
E902G.tsv
cohort numsample
TCGA_BLCA 1
Raw
E902K.tsv
cohort numsample
TCGA_BLCA 6
Raw
G742D.tsv
cohort numsample
TCGA_KIRC 1
ICGC_CLL 1
Raw
H662D.tsv
cohort numsample
ICGC_CLL 1
Raw
H662Q.tsv
cohort numsample
GEO_Nalm6 3
Raw
H662R.tsv
cohort numsample
TCGA_UVM 1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
#chart {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: -2;
height: 100%;
}
#hex4,#hex6{
fill: gold;
}
body {
font-family: sans-serif
}
div.tooltip {
position: absolute;
text-align: center;
left: 50%;
bottom: 5%;
width: 20%;
height: 15%;
padding: 2px;
border: 0px;
border-radius: 2px;
pointer-events: none;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script>
var chartDiv = document.getElementById("chart");
var width = chartDiv.clientWidth -20;
var height = chartDiv.clientHeight -20;
var x = d3.scaleLinear().range([0,width]).domain([0,1000])
var y = d3.scaleLinear().range([0,height]).domain([1000,0])
var scale = d3.scaleLinear().range([0,height]).domain([0,1000])
var cohorts = ['CUMC_CLL','dbGaP_CLL','ICGC_CLL','GEO_Nalm6','Leucegene_AML','TCGA_AML','MSK_K562','GEO_MDS','Oxford_MDS','TCGA_UVM','TCGA_SKCM','TCGA_KIRC','TCGA_PRAD','TCGA_SARC','TCGA_THYM','TCGA_LIHC','TCGA_BRCA','TCGA_BLCA']
var colorScale = d3.scaleOrdinal()
.domain(cohorts)
.range(['#E91C24','#ED1C24','#F05029','#FAD405','#FAAA33','#D1DD26','#F2E900','#F68E1E','#CC6528','#4252A3','#40C2D6','#C7C2A6','#FDCE94','#B9C7C2','#009149','#20B24A','#6588BA','#2E2E7B'])
// add the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.attr("font-size",scale(60))
.style("opacity", 0);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
//calculate x,y position of hex on circle given degrees
var arc_x = x(430);
var arc_y = y(130);
var arc_r = scale(450);
function calcArc(deg) {
return {
x:arc_x + arc_r * Math.cos(deg * (Math.PI / 180)),
y:arc_y + arc_r * Math.sin(deg * (Math.PI / 180)),
};
}
//draw pills
var pills = svg.append('g')
pills.append('line')
.attr('stroke','black')
.attr('stroke-width','2px')
.attr('x1', calcArc(205).x)
.attr('y1', calcArc(205).y)
.attr('x2', calcArc(215).x)
.attr('y2', calcArc(215).y)
pills.append('rect')
.attr('fill','firebrick')
.attr('stroke','darkred')
.attr('x', calcArc(205).x - scale(20))
.attr('y', calcArc(205).y - scale(20))
.attr('width',scale(120))
.attr('height', scale(45))
.attr('rx', scale(25))
.attr('ry', scale(25))
.attr('transform','rotate(115,' + calcArc(205).x + ',' + calcArc(205).y + ')')
pills.append('rect')
.attr('fill','dodgerblue')
.attr('stroke','darkblue')
.attr('x', calcArc(190).x - scale(20))
.attr('y',calcArc(190).y - scale(15))
.attr('width',scale(120))
.attr('height', scale(45))
.attr('rx', scale(25))
.attr('ry', scale(25))
.attr('transform','rotate(100,' + calcArc(190).x + ',' + calcArc(190).y + ')')
//calculate points to generate hex using center x,y
var hex_h = scale(60);
var hex_w = scale(43);
var peak_h = scale(15);
function calcPoints(x,y) {
return (x - (hex_w/2)) + ',' + (y-(hex_h/2)) +
' ' + (x - (hex_w/2)) + ',' + (y+(hex_h/2)) +
' ' + x + ',' + (y + (hex_h/2) + peak_h) +
' ' + (x + (hex_w/2)) + ',' + (y+(hex_h/2)) +
' ' + (x + (hex_w/2)) + ',' + (y-(hex_h/2)) +
' ' + x + ',' + (y - (hex_h/2) - peak_h)
}
//circle for testing
/*
svg.append('circle')
.attr('fill','none')
.attr('stroke','black')
.attr('cx',arc_x)
.attr('cy',arc_y)
.attr('r',arc_r)
*/
//calculate degree separating each hex
var angles = []
for(var i = 0; i < 21; i++){
angles.push(215+(i*6.1))
}
var spine = svg.append('g').attr('class','spine')
var lines = spine.append('g')
//draw donut charts
var pie = d3.pie()
.sort(null)
.value(function(d) { return d.numsample; });
var calcDonutUp = function(deg,dist){
return {
x: dist * Math.cos(deg * (Math.PI/180)) + calcArc(deg).x ,
y: dist * Math.sin(deg * (Math.PI/180)) + calcArc(deg).y
}
}
var calcDonutDown = function(deg,dist){
return {
x: -1 * dist * Math.cos(deg * (Math.PI/180)) + calcArc(deg).x ,
y: -1 * dist * Math.sin(deg * (Math.PI/180)) + calcArc(deg).y
}
}
var donutGen = function(input, radius, r_out, r_in, angle, distance, direction, labeldir){
d3.tsv(input, function(error,data){
if (error) throw error;
var arc = d3.arc()
.outerRadius(radius - r_out)
.innerRadius(radius - r_in);
var biggarc = d3.arc()
.outerRadius(radius)
.innerRadius(radius - r_in);
if(direction == 'up'){
var donut = svg.append("g")
.attr("transform", "translate(" + calcDonutUp(angle,distance).x + "," + calcDonutUp(angle,distance).y + ")")
.attr('class','donut')
lines.append('line')
.attr('x1',calcArc(angle).x)
.attr('y1',calcArc(angle).y)
.attr('x2', distance * Math.cos(angle * (Math.PI/180)) + calcArc(angle).x )
.attr('y2', distance * Math.sin(angle * (Math.PI/180)) + calcArc(angle).y )
.attr('stroke','black')
.attr('stroke-width','1.5px')
.attr('opacity',0)
.transition()
.delay(1200)
.duration(500)
.attr('opacity',1)
spine.append('circle')
.attr('cx',distance * Math.cos(angle * (Math.PI/180)) + calcArc(angle).x)
.attr('cy',distance * Math.sin(angle * (Math.PI/180)) + calcArc(angle).y)
.attr('r', radius - r_in)
.attr('stroke','none')
.attr('fill','white')
} else {
var donut = svg.append("g")
.attr("transform", "translate(" + calcDonutDown(angle,distance).x + "," + calcDonutDown(angle,distance).y + ")")
.attr('class','donut')
lines.append('line')
.attr('x1',calcArc(angle).x)
.attr('y1',calcArc(angle).y)
.attr('x2', -1 * distance * Math.cos(angle * (Math.PI/180)) + calcArc(angle).x )
.attr('y2', -1 * distance * Math.sin(angle * (Math.PI/180)) + calcArc(angle).y )
.attr('stroke','black')
.attr('stroke-width','1.5px')
.attr('opacity',0)
.transition()
.delay(1200)
.duration(500)
.attr('opacity',1)
spine.append('circle')
.attr('cx', -1 * distance * Math.cos(angle * (Math.PI/180)) + calcArc(angle).x)
.attr('cy', -1 * distance * Math.sin(angle * (Math.PI/180)) + calcArc(angle).y)
.attr('r', radius - r_in)
.attr('stroke','none')
.attr('fill','white')
}
var g = donut.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc")
g.append("path")
.attr('d',arc)
.style('stroke','white')
.style('fill', function(d) {return colorScale(d.data.cohort); })
.attr('opacity',0)
.attr('pointer-events', 'none')
.on('mouseover',function(d){
d3.select(this)
.transition()
.duration(200)
.attr('d',biggarc)
div.transition()
.duration(100)
.style("opacity", .9);
div.html("<b>" + d.data.cohort + "</b><br/>" + "size: " + d.data.numsample + "<br/>")
})
.on('mouseout',function(d){
d3.select(this)
.transition()
.duration(100)
.attr('d',arc)
div.transition()
.duration(100)
.style("opacity",0);
})
.transition()
.delay(1000)
.duration(500)
.attr('opacity',1)
.transition()
//transition doesnt work if you hover during reveal.
//disable mouse until after
.attr('pointer-events','')
//sample number label
donut.append('text')
.attr('class','totallabel')
.style("text-anchor", "middle")
.text(d3.sum(data.map(function(d){ return d.numsample})))
.attr('dy', r_in/3)
.attr('font-size', r_in + 1)
.attr('opacity',0)
.transition()
.delay(1500)
.duration(500)
.attr('opacity',1)
//mutation label
if(labeldir == 'right'){
donut.append('text')
.attr('class','mutlabel')
.text(input.slice(0,5))
.attr('dx', radius)
.attr('dy', r_in/3 )
.attr('font-size', r_in + 1)
.attr('opacity',0)
.transition()
.delay(1800)
.duration(500)
.attr('opacity',1)
} else {
donut.append('text')
.attr('class','mutlabel')
.text(input.slice(0,5))
.style("text-anchor", "end")
.attr('dx', radius * -1)
.attr('dy', r_in/3)
.attr('font-size', r_in + 1)
.attr('opacity',0)
.transition()
.delay(1800)
.duration(500)
.attr('opacity',1)
}
});
}
donutGen('E622D.tsv', scale(20), scale(2), scale(12), angles[3], scale(100), 'up', 'left')
donutGen('R625C.tsv', scale(50), scale(5), scale(28), angles[3], scale(190), 'up', 'left')
donutGen('R625H.tsv', scale(60), scale(6), scale(35), angles[3], scale(320), 'up', 'left')
donutGen('H662D.tsv', scale(20), scale(2), scale(12), angles[4], scale(100), 'down', 'left')
donutGen('H662Q.tsv', scale(30), scale(3), scale(17), angles[4], scale(160), 'down', 'left')
donutGen('H662R.tsv', scale(20), scale(2), scale(12), angles[4], scale(220), 'down', 'left')
donutGen('K666E.tsv', scale(25), scale(3), scale(14), angles[4], scale(275), 'down', 'left')
donutGen('K666N.tsv', scale(50), scale(5), scale(28), angles[4], scale(360), 'down', 'left')
donutGen('K666R.tsv', scale(20), scale(2), scale(12), angles[4], scale(440), 'down', 'left')
donutGen('K666T.tsv', scale(30), scale(3), scale(17), angles[4], scale(500), 'down', 'left')
donutGen('K700E.tsv', scale(120), scale(12), scale(65), angles[5], scale(265), 'up', 'right')
donutGen('G742D.tsv', scale(25), scale(3), scale(14), angles[6], scale(100), 'up', 'right')
donutGen('D781E.tsv', scale(20), scale(2), scale(12), angles[7], scale(100), 'down', 'right')
donutGen('D894H.tsv', scale(20), scale(2), scale(12), angles[10], scale(100), 'up', 'right')
donutGen('E902G.tsv', scale(20), scale(2), scale(12), angles[10], scale(150), 'up', 'right')
donutGen('E902K.tsv', scale(40), scale(4), scale(24), angles[10], scale(220), 'up', 'right')
//draw the hexes
angles.forEach(function(a,index){
spine.append('polygon')
.attr('stroke','green')
.attr('id','hex'+index)
.attr('fill','yellowgreen')
.attr('opacity',0)
.attr('points', calcPoints(calcArc(a).x,calcArc(a).y))
.attr('transform','rotate(' + (a + 90) + ','+calcArc(a).x+','+calcArc(a).y+')')
.transition()
.delay(index*50)
.duration(200)
.attr('opacity',1)
})
//legend
var legendgroup = svg.append('g')
var legend = legendgroup.selectAll('g')
.data(cohorts)
.enter()
.append('g')
.attr('class', 'legend')
legend.append('rect')
.attr('x', x(885))
.attr('y', function(d, i) {
return (i * scale(30)) + scale(20) ;
})
.attr('width', scale(20))
.attr('height', scale(20))
.attr('fill', function(d){return colorScale(d)})
.attr('opacity',0)
.transition()
.delay(2000)
.duration(250)
.attr('opacity',1)
legend.append('text')
.attr('font-size', scale(20))
.attr('x', x(885) + scale(25))
.attr('y', function(d, i) {
return (i * scale(30)) + scale(37);
})
.text(function(d) {
return d;
})
.attr('opacity',0)
.transition()
.delay(2000)
.duration(500)
.attr('opacity',1)
</script>
</body>
</html>
Raw
K666E.tsv
cohort numsample
dbGaP_CLL 1
TCGA_BRCA 1
Raw
K666N.tsv
cohort numsample
GEO_Nalm6 3
ICGC_CLL 1
Leucegene_AML 1
TCGA_AML 1
Raw
K666R.tsv
cohort numsample
GEO_MDS 1
Raw
K666T.tsv
cohort numsample
TCGA_LIHC 1
TCGA_UVM 2
GEO_MDS 1
Raw
K700E.tsv
cohort numsample
CUMC_CLL 6
dbGaP_CLL 6
ICGC_CLL 6
GEO_Nalm6 3
MSK_K562 3
GEO_MDS 4
Oxford_MDS 19
TCGA_AML 2
TCGA_BRCA 8
TCGA_PRAD 1
TCGA_SARC 1
TCGA_THYM 2
Raw
R625C.tsv
cohort numsample
Leucegene_AML 1
TCGA_SKCM 2
TCGA_UVM 5
Raw
R625H.tsv
cohort numsample
TCGA_SKCM 3
TCGA_UVM 8
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment