tnt.tree/web-components/simple/tnt-tree.html

TnT tree display

<!-- TODO : Load via html-imports to ensure dedup -->
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<link rel="stylesheet" href="../../build/index.css" type="text/css" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="../../build/tnt.tree.js"></script>
<script src="theme.js"></script>

<polymer-element name="tnt-tree" attributes="newick scale">
  <template>
    <style>
      :host {
      background : white;
      }
      #mytree {
      background : blue;
      }
    </style>
    <div id="mytree"></div>
  </template>

  <script>
    Polymer({
      ready : function() {
        var tree_vis = tnt_tree()
          .data(tnt_tree.parse_newick(this.attributes.newick.value));
        var theme = tnt_theme()
          .scale(this.attributes.scale.value);
        theme(tree_vis, this.shadowRoot.getElementById("mytree"));
      }
    });
  </script>
</polymer-element>