vibbits / phyd3 Goto Github PK

View Code? Open in Web Editor NEW

55.0 5.0 18.0 3.08 MB

Phylogenetic tree viewer based on D3.js

Home Page: https://phyd3.bioinformatics-core.sites.vib.be

License: MIT License

CSS 4.49% HTML 15.05% JavaScript 56.72% PHP 21.91% TypeScript 1.82%

visualization d3js phylogenetic-trees

phyd3's Issues

Add option to "ladderise" a tree

Reference: https://rdrr.io/cran/ape/man/ladderize.html

Apparently this is mentioned in the paper so may already be present, if so this is a documentation bug.

Users should optionally have full control over node drawing and access to node data fields

Each node contains metadata fields parsed from the serialised input. All of these fields should be made available to a render() function and the user should be able to provide a render() function.

An example use case:

User wishes to specify a URL in leaves to be rendered as a link.

Licensing for phyd3 in v2.0.0-alpha

Noticed that the GPL license.txt file seems to be removed from phyd3 in v2.0.0-alpha. Is there a plan for this and subsequent releases to be made under a different license (e.g., MIT, LGPL)?

update jquery script

jquery-2.2.4.min.js not found

npmjs.com publication?

Hello,

I'd like to know if you want to publish this project on npmjs.com. Thus users can install it by:

npm install phyd3

The instruction can be found at: https://www.npmjs.com/package/phyd3

Domain cut in SVG

Hi,

First thank for this pretty scalable tool in D3.

At the load of the graph the domains are cut like that...

...

Of course in the page it's not a problem (you can move the graph as you want) but it is one for the export in svg or png format.

HTML code

    <head>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <link rel="stylesheet" href="{% static 'css/phyd3/phyd3.min.css' %}" />
        <script src="{% static 'js/phyd3/phyd3.min.js' %}"></script>


        <script>

               var opts = {
               domainWidth:20,
                    margin:20,
                    dynamicHide: true,
                    height: 2000,
                    invertColors: false,
                    lineupNodes: true,
                    showDomains: true,
                    showDomainNames: false,
                    showDomainColors: true,
                    showGraphs: true,
                    showGraphLegend: true,
                    showSupportValues: false,
                    maxDecimalsSupportValues: 1,
                    showLengthValues: false,
                    maxDecimalsLengthValues: 3,
                    showLength: false,
                    showNodeNames: true,
                    showNodesType: "all",
                    showPhylogram: false,
                    showTaxonomy: true,
                    showFullTaxonomy: true,
                    showSequences: false,
                    showTaxonomyColors: true,
                    backgroundColor: "#f5f5f5",
                    foregroundColor: "#000000",
                };


                function load() {
                    d3.xml("{% static 'test.xml' %}", function(xml) {
                        var tree = phyd3.phyloxml.parse(xml);
                        phyd3.phylogram.build("#phyd3", tree, opts);
                    });
                };
        </script>
    </head>

    <body onload="load()">



<div id="phyd3">
        </div>


           <div class="row">
                Download as:
                <button class="btn btn-primary" id="linkSVG">SVG</button>
                <button class="btn btn-primary" id="linkPNG">PNG</button>
                <a href="submissions/91162629d258a876ee994e9233b2ad87" class="btn btn-primary" id="linkXML" download >XML</a>
            </div>

    </body>

Thank in advance for any help.

Optionally display a tree scale at the top or bottom of the figure

D3 V5

This is a great project. Thanks!

Just a question: Do you have plans / thoughts about moving to D3 v5 ?

Cannot set color of clade in phyloXML files

I am using phyd3 javascript lib to display files in phyloXML format. I would like to color clades in specific colors and I use the color tag according to phyloXML documentation, E.g.

<phyloxml>
  <phylogeny rooted="true">
    <clade>
      <name>N95</name>
      <branch_length>0.0483218</branch_length>
      <color>
        <red>0</red>
        <green>0</green>
        <blue>255</blue>
      </color>
    </clade>
  </phylogeny>
</phyloxml>

The clade does not get colored blue.

I also tried modifying the tag to <color type="rgb" property="clade">

Notes by @MaybeJustJames
I tried several combinations of this on https://phyd3.bits.vib.be. The colour node is parsed correctly but the colour of nodes in the resulting SVG are not set. From the documentation here only colouring of domains and taxonomies.

Potential features

See: https://4va.github.io/biodatasci/r-ggtree.html

Option to set color for NaN

In the heatmap if have a number of missing values, which result into blanks in the pyloxml file. These are now rendered as black cells in the heatmap. Is there a way to specify the color for undefined values or could this be implemented. A complete blank area (no border) would be even better to visually distinguish between cells with and without a value.

       <values for="128431">
          <value>0.6519588984865536</value>
          <value>0.4649132014791207</value>
          <value>0.3776271345321803</value>
          <value></value>
          <value>1.0</value>
          <value></value>
        </values>

Custom markers for tree labels

Use case:

Many users also ask for tree labels being printed in italics and to add the letter "T" in superscript after certain species names if these are so called type strains. Would such formatting be possible and what would be the easiest way to accomplish this?

There should be a generic mechanism to achieve this and other customisations.

vibbits / phyd3 Goto Github PK

phyd3's Issues

Add option to "ladderise" a tree

Users should optionally have full control over node drawing and access to node data fields

Licensing for phyd3 in v2.0.0-alpha

update jquery script

npmjs.com publication?

Domain cut in SVG

HTML code

Optionally display a tree scale at the top or bottom of the figure

D3 V5

Cannot set color of clade in phyloXML files

Potential features

Option to set color for NaN

Custom markers for tree labels

Use case:

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent