2c:null 2d:["$","title",null,{"children":"Introduction to figtree.js | JT McCrone | Observable"}] 32:T5a6,md ` Now we can make the figtree object and draw the tree! The figtree class constructor takes in a number of optional arguments that be be set later if not provided up front. A figtree object needs an svg, margins, and a tree. Top draw the tree, we need to add a layout function. The layout function takes a tree and returns vertices and edges that represent the nodes and branches of the tree. Below is simple tree. Like most methods the the layout method is both a setter and getter. If you don't supply an argument it will return the current layout. If you supply an argument it will set that attribute and return the class instance. In this case the figtree. A figree figure is optionally made up of nodes, branches, node backgrounds and features. Nodes are drawn using the vertices provided by the layout. Branches are drawn using the edges, and features are objects that don't map directly to nodes and branches but are related to the tree (e.g. axis, legends, ect.) Nodes and branches set using the .nodes() and .branches() setter getters. These take a comma separated list of baubles to hang on the tree. Each bauble has filter, attr, and interaction setter getters. Filter filters the vertices and edges that will get this bauble. Attr sets an svg attribute of the bauble. The library provides helper functions that return buables to be fed into the node() and branches(). That's quite a bit to unpack, hopefully the examples help. `33:T5bb,md `## Adding interativity _Interactions that change the tree rotate and reroot don't seem to be working in the observable notebook. Check out the demos in https://rambaut.github.io/figtree.js/ for working examples._ The function on() is at the base of all interactivity. It takes an event-listener string and a function that will be passed (d,i,n) like all functions in d3. d is the vertex or node, i in the index of vertex or node in the array and n is all vertexes or nodes. Node baubles have a few helper functions ### Nodes __highlightOnHover(r)__ This takes an new radius and updates the size of the circle when hovered. It also changes the class of the node-shape group to hovered. Below, this is used on external node to change the color. __annotateOnHover("key")__ annotates the node with boolean attribute "key" as true. This is useful for linking interactions between figures with the same tree. __rotateOnClick(recursive="false")__ rotate the tree on click __annotateOnClick(key)__ Same as annotate on hover, but driven by a click. ### Branches __hilightOnHover(stroke-width)__ update the stroke-width on hover __reRootOnClick(distanceMethod="x")__ reroot the tree where clicked. Distance method is an optional string parameter that determines how far into a branch to put the root. The default is x, which just measures the distance in the x direction. The other option is "euclidian", which is useful for equal angle trees. `34:[] 30:{"id":"3e56c55b82f2f2ba","slug":"introduction-to-figtree-js","title":"Introduction to figtree.js","thumbnail":"c8904ad5c441947bb09aeb67d92bbbd0d69a95d5e2ef3bbb1f1cc38919202b88","access_level":"public","create_time":"$D2019-10-30T10:08:48.775Z","update_time":"$D2020-09-18T11:45:16.199Z","view_time":null,"first_public_time":"$D2019-10-30T15:12:01.885Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"3800e1e175aef818","login":"jtmccr1","name":"JT McCrone","avatar_url":"https://avatars-next.observableusercontent.com/576c91e5885cf3eb97e629abccc219cea3b1518d73c5bf46dfebcda63a4bd7ba","tier":"starter_2024"},"version":566,"publish_version":566,"role":null,"authored":false,"authors":[{"type":"individual","id":"4deab1691aa12820","login":"jtmccr1","name":"JT McCrone","avatar_url":"https://avatars-next.observableusercontent.com/576c91e5885cf3eb97e629abccc219cea3b1518d73c5bf46dfebcda63a4bd7ba","tier":null}],"members":[{"type":"individual","id":"4deab1691aa12820","login":"jtmccr1","name":"JT McCrone","avatar_url":"https://avatars-next.observableusercontent.com/576c91e5885cf3eb97e629abccc219cea3b1518d73c5bf46dfebcda63a4bd7ba","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"350815f195c41ebf","slug":"figreejs","title":"figreejs","owner":{"id":"3800e1e175aef818","login":"jtmccr1","name":"JT McCrone"}},"type":"notebook","body":{"titling":"auto","title":"Introduction to figtree.js","cells":[{"id":180,"value":"md`# Introduction to figtree.js \ndocumentation at https://rambaut.github.io/figtree.js/doc/index.html`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`\n## Simple tree\nWe'll start with a simple newick tree and walk through how to make a basic figure with the defualt settings. _Figtree.js has been imported as ft at the bottom of the page. Each class/function can also be imported by itself._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"newickString = \n '((((((virus1:0.1,virus2:0.12)0.95:0.08,(virus3:0.011,virus4:0.0087)1.0:0.15)0.65:0.03,virus5:0.21)1.0:0.2,(virus6:0.45,virus7:0.4)0.51:0.02)1.0:0.1,virus8:0.4)1.0:0.1,(virus9:0.04,virus10:0.03)1.0:0.6);';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md ` We can use the Tree.parseNewick function to read the newick string and create a tree object. You can expand the tree object to see all of its attributes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"simpleTree = ft.Tree.parseNewick(newickString)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"md`Figtree js also provides a parse Nexus function that reads in a nexus sting and returns an array of trees`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md `Before we make the figure we need an svg to draw on and margins so we don't run off the page. The tree will not be drawn beyond the margins but other things like axis and scale bars can.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"html `