nicgirault / circosjs Goto Github PK
View Code? Open in Web Editor NEWd3 library to build circular graphs
License: MIT License
d3 library to build circular graphs
License: MIT License
Hi,
npm install --save circos
npm WARN enoent ENOENT: no such file or directory, open '/home/mictadlo/projects/circos/package.json'
npm WARN circos No description
npm WARN circos No repository field.
npm WARN circos No README data
npm WARN circos No license field.
What did I miss?
Thank you in advance.
I would like to configure my circos plots to center on <0,0> when I create them. It looks like there's a g
element with a .all
class that gets a transform
such that the circos plot appears nicely when it is generated on its own. However, I am generating circos plots inside of my own g
elements and I'd like to turn off the transform. Is there a way to configure the plot that way? I realize I could also just delete the translate
attribute on all .all
elements after I create the plot.
On further thought, the .all
class might better be name-spaced so that it does not clash with user classes. Perhaps it might be worth adding a "standalone" configuration option. If it is false
, then perhaps the g.all
element is just never created?
Sorry to bother you.
This is great job. But i have some trouble in working with "line". When i using "fill",i can't change its color,it is always gray.Is that normal? How can i change fill-color?
Thank you.
I love circosJS and have used it several times in college rankings articles for a client. But for the life of me, I cannot figure out how to add tooltips like the ones that appear in the Global Migration chord diagram. I'm using layout, histogram, heatmap, and text in one circular chart, but none have provisions for tooltips. Or at least the documentation does not show that. I'm going to see if I can use D3js to query my objects and bind tooltips, but I wanted to see if there was a simpler way before first. If there is (for at least histogram and heatmap), I'm wondering if you could add something in the documentation to show that. Please and thank you.
This is a great project.
Can you please explain what the input is?
var heatmap = [
['january',0,1,1368001],
It seems that it is MONTH, DAY, DAY, POWER.
but heatmap is supposed to have 3 dimensions so why there are 4?
thanks
Hi,
Thanks for the excellent project.
I would like to know if there a way to control the radius of chords tracks, just like circos.
Thanks.
Hello @nicgirault,
Is there a way to implement normal D3 zooming abilities within Circos layouts?
I'm using the Chords track similar to this example: https://github.com/nicgirault/circosJS/blob/master/doc/chords.png. I want to implement normal pan and zoom by scrolling with the mouse (https://bl.ocks.org/sgruhier/50990c01fe5b6993e82b8994951e23d0), and this is what I'm trying to do:
var width = 1000;
var height = 850;
var svg = d3.select("body")
.append("div")
.attr('id', 'chart')
.attr("width", width)
.attr("height", height);
svg.select(".all")
.call(d3.zoom().on("zoom", function() {
svg.select(".all").attr("transform", d3.event.transform)
}))
.append("g");
var myCircos = new Circos({
container: '#chart',
width: width,
height: height
});
// ...
// Adding the configuration data for the layout and chords, and rendering
The zooming is not working as expected. As you can see, I have to do svg.select(".all")
to actually select the svg element within the div tag.
Thank you!
Hi nicgirault,
I really like your circosJS.
Do you have any plans to add legend feature for the heatmap plot in CircosJS?
Thanks,
J
Hi,
Firstly... amazing library! Well done. It looks spectacular.
The documentation for Heatmap on the front page says the data should look like this:
Data format:
var data = [
// each datum should be
// layout_block_id, start, end, value
['january', 0, 1, 1368001],
['january', 1, 2, 1458583],
['january', 2, 3, 1481633],
]
i.e. each datum is an array. However, when I tried using this nothing would render.
When I changed the data format to use objects as datum:
var data = [
{
block_id: 'january',
start: 1,
end: 10,
value: 5
}
];
Then it renders. I spent many hours trying to debug why it wasn't working. This is either a bug (I think it should accept the array datum, Highchart series work this way) or else a regression?
In using your canvas example, I get
layout.selectAll('g').data(instance._layout.data).enter is not a function. (In 'layout.selectAll('g').data(instance._layout.data).enter()', 'layout.selectAll('g').data(instance._layout.data).enter' is undefined)
circos.js:7430
Hi @nicgirault,
I couldn't any information on README on how to use circosjs in ES6, so I tried this:
import React, { Component } from 'react';
import Circos from 'circos';
class Chart extends Component {
render() {
let myCircos = new Circos({
container: '#lineChart',
width: 500,
height: 500,
});
return (
<div id="lineChart"></div>
);
}
}
But I got this error:
TypeError: __WEBPACK_IMPORTED_MODULE_2_circos___default.a is not a constructor
I am very new to ES6 so please bear with me. Thank you very much, would appreciate any help.
JSFiddle reproduces issue at https://jsfiddle.net/9m5e7wm9/2/
This chord looks funny. It isn't in the right place, and the ends are strange. What can I do?
Hi there, after countless hours of trying to get chords rendered (receiving 'No data source at index [0..n-1]' for each array of data given to the track), I found a discrepency after running through the source for the provided demo seen here.
I found the chord data used in the demo was formatted as objects, seen below:
[
{
source: {
id: 'sourceID',
start: sourceStart,
end: sourceEnd
},
target: {
id: 'targetID',
start: targetStart,
end: targetEnd
}
},
[
Yet any documentation I found was stating chord data be formatted as arrays:
[
['sourceID', sourceStart, sourceEnd, 'targetID', targetStart, targetEnd],
]
Only after using the object formatting for my data did the chords render without error.
Taking a quick look at the heatmap demo, it would seem the case is the same, data is formatted in objects as opposed to arrays seen in the documentation.
Hoping this can be updated to help out others :)
Thanks.
Hi,
How can I get chords.js labels orientation changed in the in the same way like in text.js example?
Thank you in advance
Michal
Hi,
Does CircosJS has resize chart method/functionality?. I would like to resize the chart according to the window resize. Is there anything which is in built already?. If not, please let me know if anyone has done anything similar. Thanks.
I am trying to run the heatmap graph in the demo but with error about color configuration. But the highlight graph is ok with the color settings.
The error is:"circos.js:13427 Uncaught TypeError: Cannot read property '0' of undefined"
When you re-render a track with only one configuration parameter that change, you should not re-render all the track
Hi @nicgirault ,
Is there a way to create labels on the axes on scatter chart like below. Please let me know. Thank you.
I tried label0Display=true on ticks but they are showing on the ticks.
Hi @nicgirault ,
Thank you for your response in the earlier issue. I really appreciate that you spend your time on the problem.
I've tried re-installing circos using
npm remove circos && npm install [email protected]
and importing and instantiating it as per the suggestion by @ferrantejake in #38
import * as Circos from 'circos';
class Chart extends Component {
render() {
let myCircos = Circos({
width: 700,
height: 700,
container: 'lineChart',
defaultTrackWidth: 10
});
return (<div id="lineChart"/>);
}
}
but still getting the same error:
TypeError: __WEBPACK_IMPORTED_MODULE_2_circos__ is not a function
What did I miss?
Thank you.
Hi,
I got the following errors with my data:
1 "datum" "unknown parent id" {line: 1, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 2, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 3, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 4, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 5, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 6, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 7, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 8, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 9, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 10, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:3998 Error: <path> attribute d: Expected number, "….43564672524005LNaN,NaNZ".
(anonymous) @ circos.js:3998
selection_each @ circos.js:3963
selection_attr @ circos.js:4020
renderLayout @ circos.js:7440
render @ circos.js:7017
render @ circos.js:205
drawCircos @ chords.js:83
_call @ d3-queue.js:42
maybeNotify @ d3-queue.js:118
(anonymous) @ d3-queue.js:89
(anonymous) @ d3.js:10999
call @ d3.js:668
respond @ d3.js:10924
XMLHttpRequest.send (async)
send @ d3.js:11001
get @ d3.js:10981
(anonymous) @ d3.js:11042
start @ d3-queue.js:72
poke @ d3-queue.js:56
defer @ d3-queue.js:33
(anonymous) @ chords.js:88
1365circos.js:3998 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNZ".
(anonymous) @ circos.js:3998
selection_each @ circos.js:3963
selection_attr @ circos.js:4020
renderLayout @ circos.js:7440
render @ circos.js:7017
render @ circos.js:205
drawCircos @ chords.js:83
_call @ d3-queue.js:42
maybeNotify @ d3-queue.js:118
(anonymous) @ d3-queue.js:89
(anonymous) @ d3.js:10999
call @ d3.js:668
respond @ d3.js:10924
XMLHttpRequest.send (async)
send @ d3.js:11001
get @ d3.js:10981
(anonymous) @ d3.js:11042
start @ d3-queue.js:72
poke @ d3-queue.js:56
defer @ d3-queue.js:33
(anonymous) @ chords.js:88
circos.js:3998 Error: <path> attribute d: Expected number, "….72942341610366LNaN,NaNZ".
(anonymous) @ circos.js:3998
selection_each @ circos.js:3963
selection_attr @ circos.js:4020
renderLayoutLabels @ circos.js:7365
renderLayout @ circos.js:7447
render @ circos.js:7017
render @ circos.js:205
drawCircos @ chords.js:83
_call @ d3-queue.js:42
maybeNotify @ d3-queue.js:118
(anonymous) @ d3-queue.js:89
(anonymous) @ d3.js:10999
call @ d3.js:668
respond @ d3.js:10924
XMLHttpRequest.send (async)
send @ d3.js:11001
get @ d3.js:10981
(anonymous) @ d3.js:11042
start @ d3-queue.js:72
poke @ d3-queue.js:56
defer @ d3-queue.js:33
(anonymous) @ chords.js:88
1365circos.js:3998 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNZ".
(anonymous) @ circos.js:3998
selection_each @ circos.js:3963
selection_attr @ circos.js:4020
renderLayoutLabels @ circos.js:7365
renderLayout @ circos.js:7447
render @ circos.js:7017
render @ circos.js:205
drawCircos @ chords.js:83
_call @ d3-queue.js:42
maybeNotify @ d3-queue.js:118
(anonymous) @ d3-queue.js:89
(anonymous) @ d3.js:10999
call @ d3.js:668
respond @ d3.js:10924
XMLHttpRequest.send (async)
send @ d3.js:11001
get @ d3.js:10981
(anonymous) @ d3.js:11042
start @ d3-queue.js:72
poke @ d3-queue.js:56
defer @ d3-queue.js:33
(anonymous) @ chords.js:88
1366circos.js:3998 Error: <g> attribute transform: Expected number, "rotate(NaN)translate(14…".
This is chord.js
code:
var gieStainColor = {
gpos100: 'rgb(0,0,0)',
gpos: 'rgb(0,0,0)',
gpos75: 'rgb(130,130,130)',
gpos66: 'rgb(160,160,160)',
gpos50: 'rgb(200,200,200)',
gpos33: 'rgb(210,210,210)',
gpos25: 'rgb(200,200,200)',
gvar: 'rgb(220,220,220)',
gneg: 'rgb(255,255,255)',
acen: 'rgb(217,47,39)',
stalk: 'rgb(100,127,164)',
select: 'rgb(135,177,255)'
}
var drawCircos = function (error, GRCh37, data) {
var width = document.getElementsByClassName('mdl-card__supporting-text')[0].offsetWidth
var circos = new Circos({
container: '#chordsChart',
width: width,
height: width
})
data = data.map(function (d) {
return {
source: {
id: d.source_id,
start: parseInt(d.source_breakpoint) - 2000000,
end: parseInt(d.source_breakpoint) + 2000000
},
target: {
id: d.target_id,
start: parseInt(d.target_breakpoint) - 2000000,
end: parseInt(d.target_breakpoint) + 2000000
}
}
})
circos
.layout(
GRCh37,
{
innerRadius: width/2 - 80,
outerRadius: width/2 - 40,
labels: {
radialOffset: 70
},
ticks: {
display: true,
labelDenominator: 1000000
},
events: {
'click.demo': function (d, i, nodes, event) {
console.log('clicked on layout block', d, event)
}
}
}
)
.chords(
'l1',
data,
{
radius: function (d) {
if (d.source.id === 'chr1') {
return 0.5
} else {
return null
}
},
logScale: false,
opacity: 0.7,
color: '#ff5722',
tooltipContent: function (d) {
return '<h3>' + d.source.id + ' ➤ ' + d.target.id + ': ' + d.value + '</h3><i>(CTRL+C to copy to clipboard)</i>'
},
events: {
'mouseover.demo': function (d, i, nodes, event) {
console.log(d, i, nodes, event.pageX)
}
}
}
)
.render()
}
d3.queue()
.defer(d3.json, './data/circle.json')
.defer(d3.json, './data/data.json')
.await(drawCircos)
This is circle.json
:
[
{
"color": "#996600",
"id": "chr03",
"len": "35020413",
"label": "chr03"
},
{
"color": "#666600",
"id": "tig00007144",
"len": 40868,
"label": "tig00007144"
}
]
This is data.json
[
{
"source": {
"start": 30824,
"end": 23113,
"id": "tig00007144"
},
"target": {
"start": 33203431,
"end": 33211142,
"id": "chr03"
}
},
{
"source": {
"start": 5564,
"end": 1,
"id": "tig00007144"
},
"target": {
"start": 33172892,
"end": 33178421,
"id": "chr03"
}
},
{
"source": {
"start": 36357,
"end": 30947,
"id": "tig00007144"
},
"target": {
"start": 33211132,
"end": 33216579,
"id": "chr03"
}
}
]
This is the index.html
:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Circos</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="shortcut icon" href="images/favicon.png">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="//code.getmdl.io/1.3.0/material.deep_purple-pink.min.css">
<link rel="stylesheet" href="styles.css">
<script src='https://cdn.rawgit.com/nicgirault/circosJS/v2/dist/circos.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.3/d3-queue.js'></script>
</head>
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
<a href="#chords" class="mdl-layout__tab is-active">Chords</a>
<a href="#heatmap" class="mdl-layout__tab">Heatmap</a>
<a href="#highlight" class="mdl-layout__tab">Highlight</a>
<a href="#histogram" class="mdl-layout__tab">Histogram</a>
<a href="#line" class="mdl-layout__tab">Line</a>
<a href="#scatter" class="mdl-layout__tab">Scatter</a>
<a href="#stack" class="mdl-layout__tab">Stack</a>
<a href="#text" class="mdl-layout__tab">Text</a>
</div>
</header>
<main class="mdl-layout__content">
<div class="mdl-layout__tab-panel is-active" id="chords">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text">
<h4>Chords</h4>
<div id='chordsChart'></div>
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read the documentation</a>
</div>
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="line">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text">
<h4>Line</h4>
<div id='lineChart'></div>
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read the documentation</a>
</div>
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="scatter">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text">
<h4>Scatter</h4>
<div id='scatterChart'></div>
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read the documentation</a>
</div>
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="stack">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text">
<h4>Stack</h4>
<div id='stackChart'></div>
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read the documentation</a>
</div>
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="text">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text">
<h4>Text</h4>
<div id='textChart'></div>
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read the documentation</a>
</div>
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="highlight">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text">
<h4>Highlight</h4>
<div id='highlightChart'></div>
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read the documentation</a>
</div>
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="heatmap">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text">
<h4>Heatmap</h4>
<div id='heatmapChart'></div>
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read the documentation</a>
</div>
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="histogram">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text">
<h4>Histogram</h4>
<div id='histogramChart'></div>
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read the documentation</a>
</div>
</div>
</section>
</div>
</main>
</div>
<script src="//code.getmdl.io/1.3.0/material.min.js"></script>
<script src='./chords.js'></script>
</body>
</html>
What did I miss?
Thank you in advance.
Another doc request, if it's suitable... I recently tried to have two different sets of "layouts" in a complex college data CircosJS comparison chart for a client. Didn't work: the 2nd layout obliterated the first-defined one, and as a result, some tracks did not render. I tried with both the same ID set and a different set. What I was trying to do is have a track where each layout item (a college) could have a different "length" than what was defined in the layout.
So if I defined "len": 3 for, say, Harvard, and used it to show a histogram track for in-state tuition, out-of state tuition and net price, great. But in a different track, I might want to show two variables -- e.g., number of undergrads and grads. As it stands, I have to introduce a third value per layout item. I'm wondering if there's a way to effectively change "len" for a single track, but have the track bind to the original layout items. I tried two .layout(...) blocks - no luck. Just adding more data points per school with one layout block does not render correctly, either.
Here's an example:
http://affordableschools.net/25-exclusive-public-bachelors-colleges-admission-rate/
In this example chart, I have the 3rd track counting in as a heatmap of the college's age. To get the effect, I had to repeat the age three times in total in the age array. Similarly, for track 2 (text) just inside the green histogram track, I had to have a 3-tuple for each college, but the third value is a blank string.
I'm wondering if there's anyway that a given track can "locally" override the layout item's "len" value.
Hi @nicgirault,
Thank you for creating this library. This is the only the I found to be able to do what I need ie. create flexible polar chart. Recently I've been using for my work and now I want to integrate it into reactjs so that it is more modular.
However, I am stuck. I am having problem migrating my code into ES6. So, I request that you show example in the documentation on how to create a simple chart in ES6, preferably in reactjs. I think will be useful to many junior developers like me since ES6 and reactjs are taking place really soon.
Thank you.
Hi, I have the following chords.js
file
var gieStainColor = {
gpos100: 'rgb(0,0,0)',
gpos: 'rgb(0,0,0)',
gpos75: 'rgb(130,130,130)',
gpos66: 'rgb(160,160,160)',
gpos50: 'rgb(200,200,200)',
gpos33: 'rgb(210,210,210)',
gpos25: 'rgb(200,200,200)',
gvar: 'rgb(220,220,220)',
gneg: 'rgb(255,255,255)',
acen: 'rgb(217,47,39)',
stalk: 'rgb(100,127,164)',
select: 'rgb(135,177,255)'
}
var drawCircos = function (error, GRCh37, data) {
var width = document.getElementsByClassName('mdl-card__supporting-text')[0].offsetWidth
var circos = new Circos({
container: '#chordsChart',
width: width,
height: width
})
cytobands = cytobands.map(function (d) {
return {
block_id: d.chrom,
start: parseInt(d.chromStart),
end: parseInt(d.chromEnd),
gieStain: d.gieStain,
name: d.name
}
})
data = data.map(function (d) {
return {
source: {
id: d.source_id,
start: parseInt(d.source_breakpoint) - 2000000,
end: parseInt(d.source_breakpoint) + 2000000
},
target: {
id: d.target_id,
start: parseInt(d.target_breakpoint) - 2000000,
end: parseInt(d.target_breakpoint) + 2000000
}
}
})
circos
.layout(
GRCh37,
{
innerRadius: width/2 - 80,
outerRadius: width/2 - 40,
labels: {
radialOffset: 70
},
ticks: {
display: true,
labelDenominator: 1000000
},
events: {
'click.demo': function (d, i, nodes, event) {
console.log('clicked on layout block', d, event)
}
}
}
)
.highlight('cytobands', cytobands, {
innerRadius: width/2 - 80,
outerRadius: width/2 - 40,
opacity: 0.3,
color: function (d) {
return gieStainColor[d.gieStain]
},
tooltipContent: function (d) {
return d.name
}
})
.chords(
'l1',
data,
{
radius: function (d) {
if (d.source.id === 'chr1') {
return 0.5
} else {
return null
}
},
logScale: false,
opacity: 0.7,
color: '#ff5722',
tooltipContent: function (d) {
return '<h3>' + d.source.id + ' ➤ ' + d.target.id + ': ' + d.value + '</h3><i>(CTRL+C to copy to clipboard)</i>'
},
events: {
'mouseover.demo': function (d, i, nodes, event) {
console.log(d, i, nodes, event.pageX)
}
}
}
)
.render()
}
d3.queue()
.defer(d3.json, './data/circle.json')
.defer(d3.csv, './data/data.json')
.await(drawCircos)
and my index.html
is:
<html lang="en">
<head>
<title>Circos</title>
<script src="https://cdn.rawgit.com/nicgirault/circosJS/master/dist/circosJS.js" type="text/javascript"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.3/d3-queue.js'></script>
</head>
<body>
<script src='./chords.js'></script>
</body>
</html>
I am just got an empty page with:
$ python -m SimpleHTTPServer 8000
Serving HTTP on 0.0.0.0 port 8000 ...
127.0.0.1 - - [29/Oct/2017 22:50:44] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [29/Oct/2017 22:50:50] "GET /chords.js HTTP/1.1" 200 -
127.0.0.1 - - [29/Oct/2017 22:50:50] "GET /data/circle.json HTTP/1.1" 200 -
127.0.0.1 - - [29/Oct/2017 22:50:54] code 404, message File not found
127.0.0.1 - - [29/Oct/2017 22:50:54] "GET /favicon.ico HTTP/1.1" 404 -
127.0.0.1 - - [29/Oct/2017 22:50:54] "GET /data/data.json HTTP/1.1" 200 -
What did I miss?
Thank you in advance
Michal
Hi,
I wonder how I do to hook up a listener to detect a click event, returning datum object in the same way as it is done for the tooltipContent implementation?
Have managed to detect a click event for the Layout using onClick but it is returning HTML elements and it is not working for any other tracks.
Any suggestions?
best wishes
I just noticed that all of the work I did for a client showing CircosJS charts no longer render. I've used the RawGit CDN URL https://cdn.rawgit.com/nicgirault/circosJS/master/dist/circosJS.js, which points to a file that no longer exists. I tried the URL to "circos.js", which does exist, but the charts still do not render. I have to use a CDN because the client did not give me the ability to upload a JS file for re-use. CDNjs.com does not have the file.
Because the client did not want the charts in newer articles, I have not had reason to go through your revision notes, but maybe you can save me a bit of time by saying whether there have been significant changes in function names? Any suggestions for how I can quickly fix all these CircosJS charts no longer rendering? E.g., is there any archive of the original JS file on RawGit?
Thanks in advance.
-raj
The documentation says that Stack tracks can be used to show spans over the layout. Spans will stack within their track to avoid overlap.
Now I want spans will stack within their track to allow overlap ,the same data will be stack together at one place. Or how to modify the CircosJS make the same color tracks only one round about the follow picture .
Hello!
I've faced a problem with label orientation in text track. It seems that it changes angle clockwise but I need different behaviour like in the example in the demo. I have not found the parameter that manages it so I'm wondering how to do that.
Thank you in advance
Hi,
I am interested to get similar chords plot. I have the following table which shows the relationship between the data
query | subject | query start | query end | subject start | Subject end
Locus_1 | tig00007234 | 1 | 1054 | 140511 | 137383
Locus_1 | tig00007234 | 1 | 1057 | 77478 | 74353
Locus_1 | tig00007234 | 1 | 1057 | 46295 | 43158
How should I format the above data to make it compatible to CircosJS?
Thank you in advance,
Michal
I'm trying to use circosJS in a Angular2 project but I am struggling with getting it to import. Have installed the library using npm which seem to be successful. Any suggestions/solution?
When I try to run the initial example given in https://nicgirault.gitbooks.io/circosjs/content/layout.html then I get the error message:
circos.js:4483 Uncaught TypeError: Cannot create property 'offset' on number '250'
at Layout.agg.blocks (circos.js:4483)
at circos.js:6959
at circos.js:1845
at baseForOwn (circos.js:3274)
at circos.js:3387
at baseReduce (circos.js:6956)
at reduce (circos.js:5542)
at new Layout (circos.js:4482)
at Core.layout (circos.js:151)
at circos_test.html:67
It looks like perhaps the gitbook is outdated?
One clear discrepancy I find between it and what is in the layout section of the README.md is the order of the configuration
and data
arguments supplied to instance.layout
:
gitbook: instance.layout(configuration, layout_data);
README.md: myCircos.layout(data, configuration);
I am having this very strange issue where the SVG text has 0w and 0h in chrome for my particular web application. The JS fiddle example works fine for me, as does my current code in MS Edge and Safari. I can see the text in the actual html code, and have compared the CSS between my application and the sample, they are completely identical.
Thanks for any help.
v 1.7.0
cause error on my project. It may not be circosJS
's problem though.
It appears that the package d3-tip
depends on d3
of the exact version 3.5.5
, which may cause compatibility issues. d3-tip
should have depended on ~3.5.5
to be compatible with newer versions. Author of d3-tip
hasn't done any update for a long time :)
abstract classes and inheritence
I use circos.js as a smaller part of a large SVG construction. I cannot get circos to draw to an <svg>
element despite the fact that <svg>
elements can contain more <svg>
elements. Since Circos.js is only looking for an "id" attribute, what is keeping it from using an <svg id="circos">
kind of tag as opposed to a <div>
?
Hi @nicgirault
A nice project. I used the circosJS in my project and will publish a paper. Could you please inform me the appropriate way to cite circosJS? Thanks!
its not possible to require/import circos ....
in circos.js, add this on the end:
module.exports = Circos;
this will allow to import like this:
import Circos from 'circos/dist/circos'
to allow direct inclussion add index.js directly in the circos folder with this content: (first change is still needed)
module.exports = require('./dist/circos');
now its possible to include like
import Circos from 'circos';
Hi,
Great project,
In my project I need to have the svg created in my code vs. in the circosJS;
Is there a way that I can bybass the creation of the svg in circosJS and append the created elements in an #id?
Thanks
May I increase input data set for heat map? Any restrict for it?
Hello.
I have a question about how different tracks can interact. For example if I need to change the color of the circular diagram sector after click on the corresponding text on the Text Track. Is it possible to change styles of different tracks via the block_id or in some another way?
Thank you in advance
I just noticed that the library is pretty big in size because it includes several other libraries. I am not sure how good of a practice this is. On one hand you get everything and you dont have to worry about anything else. On the other hand if a project already includes loadash or d3 it gets everything twice. Maybe a distribution that includes everything and one that does not?
What do other people think?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.