diff --git a/src/index.html b/src/examples/genome-browser/index.html
similarity index 55%
rename from src/index.html
rename to src/examples/genome-browser/index.html
index d7ff50ecf79b64118727c0513a7c82f57d925dae..3a411025272b2ede306dad1be6e351a53299c2b9 100644
--- a/src/index.html
+++ b/src/examples/genome-browser/index.html
@@ -1,7 +1,6 @@
-
-
+
@@ -10,7 +9,7 @@
-
+
\ No newline at end of file
diff --git a/src/scripts/main-genome-browser.ts b/src/examples/genome-browser/main.ts
similarity index 94%
rename from src/scripts/main-genome-browser.ts
rename to src/examples/genome-browser/main.ts
index 013b8fa8f6e3a5bd66d016ee737de3afb0322be7..07fe997070f35b6b43764e1ef9911b0a157ba581 100644
--- a/src/scripts/main-genome-browser.ts
+++ b/src/examples/genome-browser/main.ts
@@ -1,7 +1,7 @@
-import { GeneData, GenomeBrowserData, GenomeBrowserState } from "./types";
+import { GeneData, GenomeBrowserData, GenomeBrowserState } from "../../scripts/types";
import { select, event } from "d3-selection";
-import GenomeBrowser from "./component/genome-browser";
-import genomeBrowserLayout from "./layout/genome-browser";
+import GenomeBrowser from "../../scripts/component/genome-browser";
+import genomeBrowserLayout from "../../scripts/layout/genome-browser";
const width = 1500;
diff --git a/src/style/genome-browser.css b/src/examples/genome-browser/style.css
similarity index 100%
rename from src/style/genome-browser.css
rename to src/examples/genome-browser/style.css
diff --git a/src/examples/phylotree/index.html b/src/examples/phylotree/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..7644fa51af21b03f8fbf50f478fd03b803fa930a
--- /dev/null
+++ b/src/examples/phylotree/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/examples/phylotree/main.ts b/src/examples/phylotree/main.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1817f90642c10403e32d88fc5343b0b60d3856cf
--- /dev/null
+++ b/src/examples/phylotree/main.ts
@@ -0,0 +1,122 @@
+import Phylotree from "../../scripts/layout/phylotree";
+import { tree, hierarchy, HierarchyPointNode } from "d3-hierarchy";
+import { RawPhyloTreeNode, PhyloTreeNode } from "../../scripts/types";
+import { select } from "d3-selection";
+
+const treeLayout = tree();
+const data: RawPhyloTreeNode = {
+ "name": "Eve",
+ branchLength: 0,
+ "children": [
+ {
+ "name": "Cain",
+ branchLength: 0.8,
+ },
+ {
+ "name": "Seth",
+ branchLength: 0.6,
+ "children": [
+ {
+ "name": "Enos",
+ branchLength: 0.3
+ },
+ {
+ "name": "Noam",
+ branchLength: 0.1
+ }
+ ]
+ }
+ ]
+};
+const root = hierarchy(data);
+const myTree = treeLayout(root);
+// myTree.eachBefore(n => console.log("d3 ", n.data.name, ' - ', n.x, ', ', n.y))
+// console.log(myTree);
+// draw(myTree);
+const width = 900;
+const height = 400;
+const size: [number, number] = [height - 10, width - 50];
+const phylotreeLayout = Phylotree()
+ // .nodeSize([50, 200]);
+ .size(size);
+const phylotreeData = phylotreeLayout(data);
+draw(phylotreeData);
+console.log(phylotreeData.links());
+
+
+function draw(source: HierarchyPointNode) {
+ const phylotree = select("svg")
+ .attr("width", width)
+ .attr("height", height)
+ .append("g")
+ .attr("transform", "translate(" + 10 + ',0)')
+ .classed("phylotree", true);
+
+
+ const node = phylotree
+ .selectAll[]>("g.node")
+ .data(source.descendants().reverse());
+
+
+ // ENTER
+ const nodeE = node
+ .enter()
+ .append("g")
+ .classed("node", true);
+
+ nodeE.append("circle")
+ .attr("r", 2.5)
+ .attr("fill", d => d.children ? "#555" : "#999")
+ .attr("stroke-width", 10);
+
+ nodeE.append("text")
+ .attr("dy", "0.31em")
+ .attr("x", 6)
+ // .attr("x",d => d.children ? -6 : 6)
+ // .attr("text-anchor", d => d.children ? "end" : "start")
+ .text(d => d.data.name)
+ .clone(true).lower()
+ .attr("stroke-linejoin", "round")
+ .attr("stroke-width", 3)
+ .attr("stroke", "white");
+
+ // Update
+ const nodeU = node
+ .merge(nodeE)
+ .attr("transform", d => {
+ console.log(d.data.name, '-', d.x);
+ return `translate(${d.y},${d.x})`
+ })
+ .attr("fill-opacity", 1)
+ .attr("stroke-opacity", 1);
+
+
+ // Transition exiting nodes to the parent's new position.
+ const nodeExit = node
+ .exit()
+ .remove();
+
+
+ // Update the links…
+ // const link = gLink.selectAll("path")
+ // .data(links, d => d.target.id);
+
+ // // Enter any new links at the parent's previous position.
+ // const linkEnter = link.enter().append("path")
+ // .attr("d", d => {
+ // const o = { x: source.x0, y: source.y0 };
+ // return diagonal({ source: o, target: o });
+ // });
+
+ // // Transition links to their new position.
+ // link.merge(linkEnter).transition(transition)
+ // .attr("d", diagonal);
+
+ // // Transition exiting nodes to the parent's new position.
+ // link.exit().transition(transition).remove()
+ // .attr("d", d => {
+ // const o = { x: source.x, y: source.y };
+ // return diagonal({ source: o, target: o });
+ // });
+
+}
\ No newline at end of file