Phylos Data Visualization

Welcome to the documentation for embedding Phylos data visualizations on your web site.

Seal

iFrame embed -- the easy way, quick for individual samples

To add an embed to your page, copy and paste the following HTML where you'd like it to appear.

Closest Relatives

For developers who need to include lots of samples or customize:

To add an embed to your page, copy and paste the following HTML where you'd like it to appear.

If you need to include lots of samples programmatically:

Include jQuery, d3, and the script that will generate the visualization you're interested in.


<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.js"></script>
<script src="https://phylos.bio/dataviz/build/bundle.js"></script>

Add an SVG element with a unique selector where you'd like the visualization to appear.

Include the ID of the center node as the kitID option.

let options = {
  "kitID": string,
  "selector": string,
  "size": integer,
  "showMenu": boolean,
};

After setting the options, call:
Phylos.closestRelatives(options);

You can set the style of svg elements as you would other HTML elements.