> For the complete documentation index, see [llms.txt](https://b-hub.gitbook.io/faze/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://b-hub.gitbook.io/faze/concept/tree-render.md).

# Tree Rendering

### Introduction

![](https://218903290-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MdM8iXEiSa6vIC3EFqT%2F-MdMs710fcX6bfI2u82N%2F-MdMzkROL-JS9RI1JYyh%2FSquareTreeMapping-TreeFlattening.png?alt=media\&token=0243a1af-10d6-406c-9eb2-9d7a00cb4404)

The goal of a Tree Renderer is to produce an image given some hierarchical data. These are already used in data visualisation in the form of [tree mapping](https://en.wikipedia.org/wiki/Treemapping). If you are unfamiliar with tree mapping, there are some great interactive examples on Observable:

{% embed url="<https://observablehq.com/@d3/treemap>" %}

### Types of visualisation

* [Circle packing](https://observablehq.com/@d3/circle-packing) (circular treemaps)
* [Voronoi Treemaps](https://www.jasondavies.com/voronoi-treemap/)
* [Dendrogram](https://observablehq.com/@d3/cluster-dendrogram)
* [Partition](https://observablehq.com/@d3/icicle)
* [Sunburst](https://observablehq.com/@d3/sunburst)

You could come up with any visual representation you wanted. It could be as simple as printing the total number of nodes or it could even be 3D.

For the purposes of Faze, you would want to utilise all the space in the image and accessing any part of the tree by zooming in.