circosJS
circosJS copied to clipboard
Published
20 hours ago •
nicgirault
nicgirault
Choords not visible !
"GRCh37.json" and "fusion-genes.csv" files are located inside the same folder. Unfortunately, it does not display anything in browser(chrome/firefox). Did I miss something ?
<!DOCTYPE html>
<html>
<head>
<script src='https://cdn.rawgit.com/nicgirault/circosJS/v2/dist/circos.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.3/d3-queue.js'></script>
</head>
<body>
<svg id='chart'></svg>
<script>
var circos = new Circos({
container: '#chart'
});
var drawCircos = function(error, GRCh37, rawData) {
data = rawData.map(function(d){
return [
d.source_id,
parseInt(d.source_breakpoint) - 2000000,
parseInt(d.source_breakpoint) + 2000000,
d.target_id,
parseInt(d.target_breakpoint) - 2000000,
parseInt(d.target_breakpoint) + 2000000,
];
});
circos
.layout(
{
ticks: {display: true},
},
GRCh37
)
.chord('gene-fusion', {color: '#fd6a62'}, data)
.render();
};
queue()
.defer(d3.json, "GRCh37.json")
.defer(d3.csv, "fusion-genes.csv")
.await(drawCircos);
</script>
</body>
</html>
I am still wondering about the error. But, It worked following way:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js"></script>
<script src='https://cdn.rawgit.com/nicgirault/circosJS/v2/dist/circos.js'></script>
</head>
<body>
<script>
var width = $(window).width() - 20,
height = $(window).height() - 20
var svg = d3.select("body")
.append("svg")
.attr('id', 'chart')
.attr("width", width)
.attr("height", height)
var myCircos = new Circos({
container: '#chart',
width: width,
height: height,
})
var layout_data = [
{"len": 31, "color": "#8dd3c7", "label": "January", "id": "january"},
{"len": 28, "color": "#ffffb3", "label": "February", "id": "february"},
{"len": 31, "color": "#bebada", "label": "March", "id": "march"},
{"len": 30, "color": "#fb8072", "label": "April", "id": "april"},
{"len": 31, "color": "#80b1d3", "label": "May", "id": "may"},
{"len": 30, "color": "#fdb462", "label": "June", "id": "june"},
{"len": 31, "color": "#b3de69", "label": "July", "id": "july"},
{"len": 31, "color": "#fccde5", "label": "August", "id": "august"},
{"len": 30, "color": "#d9d9d9", "label": "September", "id": "september"},
{"len": 31, "color": "#bc80bd", "label": "October", "id": "october"},
{"len": 30, "color": "#ccebc5", "label": "November", "id": "november"},
{"len": 31, "color": "#ffed6f", "label": "December", "id": "december"}
]
var layout_data2 = [
{
source: { id: 'january', start: 1, end: 12 },
target: { id: 'april', start: 18, end: 20 }
},
{
source: { id: 'february', start: 20, end: 28 },
target: { id: 'december', start: 1, end: 13 }
}
]
var configuration = {
innerRadius: 250,
outerRadius: 300,
cornerRadius: 10,
gap: 0.04, // in radian
labels: {
display: true,
position: 'center',
size: '14px',
color: '#000000',
radialOffset: 20,
},
ticks: {
display: true,
color: 'grey',
spacing: 10000000,
labels: true,
labelSpacing: 10,
labelSuffix: 'Mb',
labelDenominator: 1000000,
labelDisplay0: true,
labelSize: '10px',
labelColor: '#000000',
labelFont: 'default',
majorSpacing: 5,
size: {
minor: 2,
major: 5,
}
},
clickCallback: null
}
myCircos.layout(layout_data, configuration)
myCircos.chords('my-coord', layout_data2, configuration)
myCircos.render()
</script>
</body>
</html>