# What kind of visualization do I need?

**URL:** <https://talk.observablehq.com/t/what-kind-of-visualization-do-i-need/9297>\
**Category:** Help\
**Created:** [May 21, 2024, 11:02am UTC](https://talk.observablehq.com/t/what-kind-of-visualization-do-i-need/9297 "2024-05-21T11:02:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fum](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fum/32/8903_2.png) [@Fum](https://talk.observablehq.com/u/Fum)\
**Post date:** [May 21, 2024, 11:02am UTC](https://talk.observablehq.com/t/what-kind-of-visualization-do-i-need/9297/1 "2024-05-21T11:02:01Z")

</div>

Hello. I am working on a project where I must show how some documents branch to other documents and how the combination of two or more of them generates other documents. This is what I have in mind:

 ![IMG_4131](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/e/e747e2175c69b8a0ecc20c303794f1abaed9195b.jpeg)

I must show that:

- documents branch to multiple other documents
- two or more documents in any branch and level can be combined into a “context”, that generates other documents
- there’s some hierarchy

What kind of visualization that can include those functionalities do you recommend?

Thanks!

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [May 21, 2024, 1:27pm UTC](https://talk.observablehq.com/t/what-kind-of-visualization-do-i-need/9297/2 "2024-05-21T13:27:59Z")

</div>

Graphviz would likely be a solid choice.

Observable notebooks directly expose an older version of Graphviz ([0.2.1 at the time of this writing](https://github.com/observablehq/stdlib/blob/746ca2e69135df6178e4f3a17244def35d8d6b20/src/dependencies.js#L5)) through the [`dot` template function](https://observablehq.com/documentation/misc/standard-library#graphviz-and-the-dot-template).

Here is an example:

https://observablehq.com/embed/bb596f5ab870928d@156?cells=viewof+showLabels%2Cgraph

Alternatively you could consider git graphs, e.g. via Mermaid:

> **[Gitgraph Diagrams | Mermaid](https://mermaid.js.org/syntax/gitgraph.html)**
>
> Create diagrams and visualizations using text and code.

---

<div class="post-metadata">

**Author:** ![Fum](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fum/32/8903_2.png) [@Fum](https://talk.observablehq.com/u/Fum)\
**Post date:** [May 21, 2024, 6:41pm UTC](https://talk.observablehq.com/t/what-kind-of-visualization-do-i-need/9297/3 "2024-05-21T18:41:08Z")

</div>

Thank you so much @mootari ! That looks perfect! You did much more than I could have expected.  
I’ll try to implement Graphviz right away into my solution.  
Thanks again!

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [May 21, 2024, 7:45pm UTC](https://talk.observablehq.com/t/what-kind-of-visualization-do-i-need/9297/4 "2024-05-21T19:45:30Z")

</div>

If you decide to explore the git graphs as well (or learn some interesting hacks while implementing the subgraphs) please be sure to share your results here! 🙂