31:[] 2f:{"title":"Treemap example","cells":[{"id":0,"value":"md`# Treemap example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`This notebook shows how the Treemap 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"},{"id":9,"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"},{"id":13,"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"},{"id":16,"value":"family","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"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"},{"id":27,"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"},{"id":30,"value":"d3 = require(\"d3@6\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"uv = require(\"unipept-visualizations@2.1.1\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`\n## A simple treemap\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 render the treemap. 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 Treemap constructor with the html element and the data:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"{\n const treemapElement = simpleTree; // or something like document.selectElementById(\"simpleTree\");\n new uv.Treemap(treemapElement, family);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"simpleTree = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`\nThis treemap is interactive: you can click on any node to change to focus on a specific part of the tree and explore it more in-depth. Click the desired level in the top breadcrumb bar to move back to a higher level of the visualization.\n\nNext to the map-like structure of the visualization, you will also notice that some nodes are bigger than others. By default, the size of the nodes is set by looking at the count attribute of the nodes in the data object.\n\nThis treemap was just an example using the default settings. When creating a new treemap, you can also pass along an options object allowing to customize almost every aspect of the visualization.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`\n## A more complex treemap\nThe previous example generated a treemap 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/Treemap).\n\nThese options range from disabling features such as the tooltip and labels to visual settings such as the width and height of the visualization.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`\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"},{"id":49,"value":"tooltipDiv = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"{\n const treemapElement = tooltipDiv;\n const treemap = new uv.Treemap(treemapElement, JSON.parse(JSON.stringify(taxonomy)), {\n getTooltipText: (d) => {\n let numberFormat = d3.format(\",d\");\n return (\n numberFormat(!d.selfCount ? \"0\" : d.selfCount) +\n (d.selfCount && d.selfCount === 1 ? \" sequence\" : \" sequences\") +\n \" specific to this level
\" +\n numberFormat(!d.count ? \"0\" : d.count) +\n (d.count && d.count === 1 ? \" sequence\" : \" sequences\") +\n \" specific to this level or lower\"\n );\n },\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`\n### Changing colors\nA default color palette is used for the visualization by default. We can, however, change these colors with the \\`colorRoot\\` and \\`colorLeaf\\` options. The color of a node depends on it's depth in the hierarchy that's being visualized. \\`colorRoot\\` determines the color of the node that's situated at the top level in the hierarchy. \\`colorLeaf\\` corresponds with the color for nodes that are situated at the deepest level in the hierarchy. The color of all other nodes will gradually shift from \\`colorRoot\\` to \\`colorLeaf\\`, depending on their depth in the taxonomy.\n\nIn the example below, we have updated the color for \\`colorRoot\\` to red and the color for the leaves to yellow.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"colorDiv = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"{\n const treemapElement = colorDiv;\n const treemap = new uv.Treemap(treemapElement, JSON.parse(JSON.stringify(taxonomy)), {\n colorRoot: \"#d32f2f\",\n colorLeaf: \"#fff176\"\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`## Imports\nBelow are a few imports to make the notebook work. You can safely ignore them.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {family, taxonomy} from \"@unipept/datasets\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}