# Installation

# NPM Module

  1. Install Phylocanvas.gl (opens new window) NPM package
npm install @phylocanvas/phylocanvas.gl
  1. Import the library
import PhylocanvasGL, { TreeTypes } from "@phylocanvas/phylocanvas.gl";
  1. Create a PhylocanvasGL tree instance
const tree = new PhylocanvasGL(
  document.querySelector("#demo"),
  {
    size: { width: 400, height: 300 },
    source: `(Bovine:0.69395,(Gibbon:0.36079,(Orangutan:0.33636,(Gorilla:0.17147,(Chimp:1.19268,Human:0.11927):0.08386):0.06124):0.15057):0.54939,Mouse:1.21460);`,
    type: TreeTypes.Rectangular,
  },
);

# Script Tag

Phylocanvas.gl also offers a standalone bundled version of the library - a native JavaScript scripting interface like that of d3.js. You can now use Phylocanvas.gl in prototype environments such as Codepen (opens new window), JSFiddle (opens new window), or Observable (opens new window).

To use Phylocanvas.gl in a scripting environment, include the standalone version in a script tag:

<script src="https://unpkg.com/@phylocanvas/phylocanvas.gl@latest/dist/bundle.min.js"></script>

The standalone bundled exposes one global object named phylocanvas. Any exports from the PhylocanvasGL can be accessed by phylocanvas.*:

<script>
  const tree = new phylocanvas.PhylocanvasGL(
  document.querySelector("#demo"),
    {
      size: { width: 400, height: 300 },
      source: `(Bovine:0.69395,(Gibbon:0.36079,(Orangutan:0.33636,(Gorilla:0.17147,(Chimp:1.19268,Human:0.11927):0.08386):0.06124):0.15057):0.54939,Mouse:1.21460);`,
      type: phylocanvas.TreeTypes.Rectangular,
    },
  );
</script>

Check our codepen showcase (opens new window) for examples.