phyloGraph/index.html at master · tomarashish/phyloGraph · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>

<head>
  <title>PhyloGram : Phylogenomic data visualization</title>

  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

  <!-- using local jquery, bootstrap and d3 libs -->
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/d3.v3.min.js"></script>
  <script src="js/dendogram.js"></script>
  <script src="js/newickTree.js"></script>
  <script src="js/app.js"></script>

  <!-- usingbootstrap, fontawesome and custome css -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>
  <!   -- header-->
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <!--img src="image/phylogram.png" height="75px" width="150px"-->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>

        <a class="navbar-brand" href="#">PhyloGram.js Examples</a>
      </div>
      <div class="navbar-collapse">
        <ul id="menu" class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <footer class="footer">
    <div class="container">
      <p>Under development
        <a href="https://github.com/biographika/phylogenomics-viz" target="_blank"><i class="icon-github icon-large"></i>&nbsp;&nbsp;@ Github</a>
      </p>
    </div>
  </footer>

  <!-- Showing visualization -->
  <div class="container-fluid">
    <div class="row row-no-padding" id="samplerow">

      <div class="col-md-12">
        <div class="chart-wrapper">

          <div class="chart-title dropdown">Dendrogram Options</div>
          <div id="optionButton" class="chart-area">
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="dendrogram()">Linear Dendrogram</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="linkWeight()">Dendrogram link Weight</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="nodeSize()">Dendrogram With node size </button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="linkValue()">Dendrogram With link value</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="subTree()">Dendrogram Sub Tree</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="showImage()">Dendrogram with image</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="heatmap()">Dendrogram with Heatmap</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="heatmapWC()">Heatmap with circle</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="punchCard()">Heatmap with punchcard</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="domainChart()">Dendrogram with domain</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="geneChart()">Dendrogram with gene structure</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="pieData()">Dendrogram with pie</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="sunCircle()">Dendrogram With sunburst </button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="barData()">Dendrogram with bar chart </button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="stackedBarChart()">Dendrogram with stack bar</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="radialTree()">Circular Dendogram</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="alignmentChart()">alignment with color</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="alignment1Chart()">alignment w/o color</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="compareTree()">Compare Tree</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="compareTree()">density Tree</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="compareTree()">Color Gradient Tree</button>
            <button type="btn btn-raised" class="btn btn-default btn-raised btn-responsive" onclick="nexusTree()">Nexus Tree</button>
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <div class="chart-wrapper">

          <div class="chart-title dropdown">
            Phylogenetic Tree
            <button type="btn btn-raised" class="btn btn-default btn-raised dropdown-toggle" data-toggle="dropdown"><span class="fa fa-list"></span></button>
            <ul class="dropdown-menu dropdown-menu-right">
              <li><button id="saveDendogram" type="btn btn-raised" class="btn btn-default btn-raised btn-responsive"><b>Save <span class="icon-download icon-medium"></span></b></button></li>
              <li><label id="show-length" class="btn btn-default btn-raised btn-responsive">
                        <input type="checkbox"> Show branch length
                    </label></li>
            </ul>
          </div>

          <div class="col-md-12 chart-wrapper">
            <div id="dendogram" class="chart-area"></div>
          </div>
          <div class="col-md-6 chart-wrapper">
            <div id="comparetree" class="chart-area"></div>
          </div>
        </div>

      </div>


      <script>
        init();

      </script>
    </div>

  </div>
</body>