nicgirault / circosjs Goto Github PK

View Code? Open in Web Editor NEW

505.0 28.0 117.0 7.43 MB

d3 library to build circular graphs

License: MIT License

JavaScript 87.00% CSS 0.25% CoffeeScript 12.75%

d3js circos circos-graphs javascript circular bioinformatics bioinformatics-data big-data bigdata

circosjs's People

Contributors

Stargazers

Watchers

Forkers

urdinblu lttp ultrageek adomore microdou kouroshparsa iandreyev derekkramer oldtimestj wrigh3tl mjlst pollen8 zhengjiewhu jaeschrich uros-r tianyangbest rafatahmed dsurujon lijielife timespacecloud quantartist stevehenderson dashmaker mayur8890 ruema qypapple zhangkunpanda hyungoo-kang-kmucs wjdghk russellbits hechenfon nileshku sisov hfshen kennethbruskiewicz biovisual rocathq yingwang2 dictybase-playground zmitry ajk-dev kidsbenkid alhamka symptomatic nemochina2008 gtqite rambo2015 coolio-so ramesh8v 13911105584 metaphoric xidaow ervivekmahajan git-ashish shivaalz amanw hncshp mtwichan fotisz roelnoten dillalabs achandru ozcev thetoke yoeshi pandinosaurus yiyuan1840 wuddrum sam217pa amonkoth stead99 ciyer emeraldjava leeryeosoo alisaei witium jhwarlock yuanqiying ederzz geoness gauriachalare123 dankomong biolchen solo7773 kchennen dudals8937 300000kms odnodn luomei308 chaixingzhi sgnaguib lanzatech bliptrip keshavd yiducn bidossessih rolaropok parinaznasr le-chang samsplunks

circosjs's Issues

Add a text track type

http://circos.ca/documentation/tutorials/quick_start/text/

Some problems about stack of CircosJS

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 .

Compatibility with d3 > 3.5.5

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 :)

Question for ability to accept data set

May I increase input data set for heat map? Any restrict for it?

importing for Angular2

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?

Embedded demos not showing up

The embedded demos are not showing up. Sometimes there are Fiddles or similar one can click to see them, but sometimes there are not.

I tried Firefox and Chrome with the same results.

Two examples (from here and here):

Heatmap data

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?

Something about line

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.

Add a connector track type

http://circos.ca/documentation/tutorials/2d_tracks/connectors/

legend for heatmap

Hi nicgirault,

I really like your circosJS.
Do you have any plans to add legend feature for the heatmap plot in CircosJS?

Thanks,

Documentation request: Example in ES6.

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.

I can't test functions using lodash

Zooming in CircosJS

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!

Import only a part of lodash

library bundle

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?

SVG container

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

RawGit js file CDN url?

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

Resize Chart - Responsiveness

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.

Control the radius of chords tracks

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.

Error in rendering Chords - end of chords messed up

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?

Error: <path> attribute d: Expected number, "….43564672524005LNaN,NaNZ"

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&amp;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.

Is there a way to set the `g.all` transform parameters through configuration?

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?

Errors from canvas example

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

Problem instantiating Circos in ES6

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.

Documentation error in gitbook

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);

Update track performance

When you re-render a track with only one configuration parameter that change, you should not re-render all the track

empty page with chord.js

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

Label edge values of source or target chords

At the moment if you turn labels on, it just displays a 0. I would like it to display a tick for each outgoing or ingoing chord. Is this possible?

How to cite circosJS?

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!

question about the input

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

onClick callback for tracks to return Datum objects

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

changing chords text labels orientation

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

Label orientation in text.js example

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

How to import and instantiate a new circos in ES6?

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.

SVG Text in Chrome

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.

Stack track does not work when you don't specify rules...

Questions about heatmap color configuration

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"

chords plot relationship file format.

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

Documentation request: multiple layouts or lengths?

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.

Accessibility from one track to another

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

Configuration setting for closing margins

This is the current illustration that I am working on, and I am wondering what the setting is to remove these "longitudinal" margins between the wedges of data. I tried setting 'radialMargin' to 0 but that does not appear to help.

npm WARN enoent ENOENT: no such file or directory, open '/circos/package.json'

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.

Documentation Update: Track Data Formatting

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.

Tracks should share more code

abstract classes and inheritence

Swap <div> for <svg>?

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>?

allow es6 import/require

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';

Vertical lines on axes inline with layoyt ticks in Scatter chart

Hi,

Is there a way to show vertical lines on axes connecting to center of the chart inline with ticks on the layout. I attached the pic as an example.

Please let me know. Thanks.

We can see datum details in a tooltip on mouse hover

Documentation update request

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.

Labels on Scatter Chart Axes

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.

nicgirault / circosjs Goto Github PK

circosjs's People

Contributors

Stargazers

Watchers

Forkers

circosjs's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs