2c:null 2d:["$","title",null,{"children":"Treeview example | Unipept | Observable"}] 32:T435,{ const treeviewElement = tooltipDiv; const ranks = [ "no rank", "superkingdom", "kingdom", "subkingdom", "superphylum", "phylum", "subphylum", "superclass", "class", "subclass", "infraclass", "superorder", "order", "suborder", "infraorder", "parvorder", "superfamily", "family", "subfamily", "tribe", "subtribe", "genus", "subgenus", "species group", "species subgroup", "species", "subspecies", "varietas", "forma" ]; const treeview = new uv.Treeview(treeviewElement, taxonomy, { getTooltipText: (d) => { let numberFormat = d3.format(",d"); return ( numberFormat(!d.selfCount ? "0" : d.selfCount) + (d.selfCount && d.selfCount === 1 ? " sequence" : " sequences") + " specific to this level
" + numberFormat(!d.count ? "0" : d.count) + (d.count && d.count === 1 ? " sequence" : " sequences") + " specific to this level or lower" ); }, width: 900, height: 300 }); }33:[] 30:{"id":"d22e50ab8e9378c0","slug":"treeview-example","title":"Treeview example","thumbnail":"6c848e83212ec4ad963b596866a955540760a4c87df9a12728c271efd6ef4ec4","access_level":"public","create_time":"$D2021-04-29T06:23:04.401Z","update_time":"$D2025-12-10T08:08:50.656Z","view_time":null,"first_public_time":"$D2021-04-30T10:50:22.203Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"b6b2224d81e53dcf","login":"unipept","name":"Unipept","avatar_url":"https://avatars-next.observableusercontent.com/9dc38cab10c826a7bf8bf91117bd02401b33ef1bb631e40cdf21e57f4dface88","tier":"starter_2024"},"version":263,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4f7e937e6467f2e0","login":"unipept","name":"Unipept","avatar_url":"https://avatars-next.observableusercontent.com/9dc38cab10c826a7bf8bf91117bd02401b33ef1bb631e40cdf21e57f4dface88","tier":null}],"members":[{"type":"individual","id":"4f7e937e6467f2e0","login":"unipept","name":"Unipept","avatar_url":"https://avatars-next.observableusercontent.com/9dc38cab10c826a7bf8bf91117bd02401b33ef1bb631e40cdf21e57f4dface88","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"6c1c3e7cfc013776","slug":"unipept-visualizations","title":"Unipept Visualizations","owner":{"id":"b6b2224d81e53dcf","login":"unipept","name":"Unipept"}},"type":"notebook","body":{"titling":"auto","title":"Treeview example","cells":[{"id":0,"value":"md`# Treeview example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`This notebook shows how the Treeview from the Unipept Visualization library can be used. More information about this library can be found [on GitHub](https://github.com/unipept/unipept-visualizations). Be sure to check out [the wiki](https://github.com/unipept/unipept-visualizations/wiki) containing our documentation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`The cells in this notebook are interactive. For some, the code associated with the cell is shown explicitly, for others, it is hidden. You can click in the sidebar to show those hidden cells. You can also live edit the cells to play around with the settings. Don't worry, your changes are only visible to you.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`## The data\nThe Treeview, Treemap and Sunburst visualisations all use the same hierarchical data format. It consists of a single root object containing an id and optionally a list of children each having a similar format. Below you can see a small example containing a *family*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"family","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"JSON.stringify(family, null, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`In this notebook, this dataset was assigned to the \\`family\\` variable. In your own project, you probably will want to load the data from a file or the internet. I will assume you know how to do this and have your data ready inside a variable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`## The setup\nNext to the Unipept Visualization library itself, you only need to include d3 version 6 or higher. If you are working with a npm or yarn in your project, you can easily add those packages by running one of these commands:\n\\`\\`\\` bash\n$ npm install d3 unipept-visualizations\n# or\n$ yard add d3 unipept-visualizations\n\\`\\`\\`\n\nIf you only have a single HTML file, it's easier to directly include the necessary files using a cdn by adding this to your file:\n\\`\\`\\`\n\n\\`\\`\\`\n\nIn a notebook, you can simply require both libraries which I'll assign to the \\`d3\\` and \\`uv\\` variables:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"uv = require(\"unipept-visualizations@2.1.1\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`## A simple tree\nAs a first example, I will visualize the \\`family\\` dataset using the default settings. The only thing we need in addition to the data is a place to draw the tree. This can be any html element that must be passed to the constructor.\n\nOn an html page, you probably want to include an empty \\`div\\` element on your page such as\n\\`\\`\\`html\n

\n\\`\\`\\`\nwhich you can then select and assign to a variable using \n\\`\\`\\`javascript\nconst simpleTree = document.selectElementById(\"simpleTree\");\n\\`\\`\\`\n\nIn a notebook, you can generate an element or reference another cell.\n\nNext, simply call the Treeview constructor with the html element and the data:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"{\n const treeviewElement = simpleTree; // or something like document.selectElementById(\"simpleTree\");\n new uv.Treeview(treeviewElement, family);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"simpleTree = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`This tree is interactive: you can scroll to zoom, drag to pan and click on nodes to collapse or expand them. If you \\`shift + click\\` the root node, all nodes will expand.\n\nNext to the tree structure, you will also notice that some nodes are bigger than others and that internal nodes have a pie chart-like appearance. By default, the size of the nodes is set by looking at the \\`count\\` attribute of the nodes in the data object. A segment of the circle is colored according to the \\`selfCount\\` attribute. If we look at the family variable below, we see that \\`count\\` is indeed set to 15 and \\`selfCount\\` to 1, thus a segment corresponding to 1 fifteenth of the root node is filled in.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"family","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"md`Sizing the nodes doesn't make a lot of sense for our simple dataset, but does come in handy when visualizing biological data.\n\nThis tree was just an example using the default settings. When creating a new treeview, you can also pass along an options object allowing to customize almost every aspect of the visualization.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md`## A more complex tree\nThe previous example generated a treeview using the default settings which is ok to get started, but the Unipept Visualizations library also provides a lot of customization options. These options can be set by passing along an options object with the constructor. A full list of options can be found on [our documentation](https://github.com/unipept/unipept-visualizations/wiki/Treeview#treeviewsettings).\n\nThese options range from disabling features such as the tooltip, labels and click behaviour to visual settings such as the width and height.\n\n### Tooltip settings\nIn the example below, we have explicitely changed the text that's rendered as part of the tooltip. This tooltip is shown whenever the user hoovers over a node. The default tooltip styling is still being used, but the text is changed so that it shows the count and selfCount of a node. The \\`getTooltipText\\` option expects a function to which an object that represents the active node is always passed as the first argument. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"tooltipDiv = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`\n### Changing colors\nA default color palette is used for the visualization by default. You can, however, alter both the fill and stroke color of nodes, as well as the color for the links between different nodes. In this example, we decided to change the color of each node depending on it's associated count value. All options related to changing the color of a node or link require a function. Everytime the visualization needs to decide on what color to use for a specific node, the corresponding function is called with the current node as the first argument. A \\`d3.HierarchyPointLink\\` is passed along as the first argument for the \\`nodeStrokeColor\\` option.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"colorDiv = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"{\n const treeviewElement = colorDiv;\n const ranks = [\n \"no rank\",\n \"superkingdom\",\n \"kingdom\",\n \"subkingdom\",\n \"superphylum\",\n \"phylum\",\n \"subphylum\",\n \"superclass\",\n \"class\",\n \"subclass\",\n \"infraclass\",\n \"superorder\",\n \"order\",\n \"suborder\",\n \"infraorder\",\n \"parvorder\",\n \"superfamily\",\n \"family\",\n \"subfamily\",\n \"tribe\",\n \"subtribe\",\n \"genus\",\n \"subgenus\",\n \"species group\",\n \"species subgroup\",\n \"species\",\n \"subspecies\",\n \"varietas\",\n \"forma\"\n ];\n const treeview = new uv.Treeview(treeviewElement, taxonomy, {\n nodeStrokeColor: (d) => \"orange\",\n nodeFillColor: (d) => \"#FF0000\",\n linkStrokeColor: (l) => {\n // The stroke color of the link depends on the depth of the target node.\n const depth = ranks.indexOf(l.target.data.extra.rank);\n return [\"#FF0000\", \"#00FF00\", \"#0000FF\"][depth % 3];\n },\n width: 900,\n height: 300\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"md`\n### Controlling expansion and placement of nodes\nThe treeview visualization has been configured in such a way that it renders the placements of all nodes as good as possible by default. We do, however, also offer a heuristic that will automatically expand the paths that could be of great interest to the users (this is the \\`enableAutoExpand\\` option). The extent to which branches are expanded can be controlled by the \\`autoExpandValue\\`. Setting this parameter to a higher value leads to more branches that will be expanded.\n\nIn the example below, we have changed the horizontal spacing between nodes by setting the \\`nodeDistance\\` option to \\`300\\` and we enabled the auto expand metric with an \\`autoExpandValue\\` of \\`0.9\\`, which is rather high and should expand most branches of the tree by default.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"placementDiv = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"{\n const treeviewElement = placementDiv;\n const ranks = [\n \"no rank\",\n \"superkingdom\",\n \"kingdom\",\n \"subkingdom\",\n \"superphylum\",\n \"phylum\",\n \"subphylum\",\n \"superclass\",\n \"class\",\n \"subclass\",\n \"infraclass\",\n \"superorder\",\n \"order\",\n \"suborder\",\n \"infraorder\",\n \"parvorder\",\n \"superfamily\",\n \"family\",\n \"subfamily\",\n \"tribe\",\n \"subtribe\",\n \"genus\",\n \"subgenus\",\n \"species group\",\n \"species subgroup\",\n \"species\",\n \"subspecies\",\n \"varietas\",\n \"forma\"\n ];\n const treeview = new uv.Treeview(treeviewElement, taxonomy, {\n nodeDistance: 300,\n enableAutoExpand: true,\n autoExpandValue: 0.9,\n width: 900,\n height: 600\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`## Imports\nBelow are a few imports to make the notebook work. You can safely ignore them.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import {family, taxonomy} from \"@unipept/datasets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"