<p>It sounds like you are looking for <strong>Tree drawing algorithms</strong>. Let me give a short overview:</p>

<p>In graph drawing, you can basically describe a drawing by three groups of properties:</p>

<ul>
<li><p>Your <strong>drawing conventions</strong>, i.e. how the <em>nodes</em> and <em>edges</em> are represented in your visualization. Possible choices are:</p>

<ul>
<li>Represent your nodes as <em>points</em>, your edges as non-intersecting <em>curves</em> between them.<br>
This might be specialized by e.g. requiring the points to be placed on a regular grid, on concentric circles around the root or something similar. Also, you could require the edges to be straight lines, circle args, ...<br>
This is probably what you first think of when you talk about tree visualizations.
<a href="https://i.stack.imgur.com/GdLYF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GdLYF.png" alt="straight-line drawing, from &quot;Trees with convex faces and optimal angles.&quot; J. Carlson and D. Eppstein. arXiv:cs.CG/0607113. 14th Int. Symp. Graph Drawing, Karlsruhe, Germany, 2006. Lecture Notes in Comp. Sci. 4372, 2007, pp. 77-88."></a></li>
<li>Represent your nodes as <em>rectangles</em>, your edges implicitly by nesting the rectangles. This is commonly known as a <em>tree map</em>
<a href="https://i.stack.imgur.com/jynEQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jynEQ.png" alt="tree map, from Wikipedia"></a></li>
</ul></li>
<li><p>Some <strong>aesthetics</strong> you want to optimize, i.e.</p>

<ul>
<li>Maximize angles between edges</li>
<li>Minimize the area the tree takes</li>
<li>Minimize the potential energy if you build a physical model based on the tree (see Wikipedia: <a href="https://en.wikipedia.org/wiki/Force-directed_graph_drawing" rel="nofollow noreferrer">Force-directed graph drawing</a>)<br>
...</li>
</ul></li>
<li><p>You might also place some <strong>constraints</strong> on your nodes or edges, e.g. fix certain nodes to a position, enforce certain edge lengths or similar ideas.</p></li>
</ul>

<p>Now that I've explained the basics, let me list some approaches:</p>

<ul>
<li>As you already showed, draw your tree in a circle-based fashion, either by placing the root at the center and the children in concentric circles around the root or aligning all subtrees of a node in circular fashion around it. These are implemented in the <a href="http://www.graphviz.org/" rel="nofollow noreferrer">GraphViz</a> tool as <code>circo</code> and <code>twopi</code></li>
<li>Use an <em>HV layout</em> similar to your tree view to mostly stick with horizontal and vertical edges, but allow for a bit more freedom in the subtree placement
<img src="https://i.stack.imgur.com/EgiI0.gif" alt="HV layout, from the goblin2 documentation"></li>
<li>Use any of the many straight-line drawing techniques that operate level-wise, i.e. the root is placed at the top, its children one level below, ...
<a href="https://i.stack.imgur.com/qtqlP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qtqlP.png" alt="level-wise graph drawing"></a></li>
<li>Represent your tree as a <em>tree map</em> similar to the example above.</li>
</ul>

<p>Most if not all of these techniques are described and visualized in the <a href="https://cs.brown.edu/~rt/gdhandbook/chapters/trees.pdf" rel="nofollow noreferrer">Tree-drawing chapter</a> of the <em>Handbook of Graph Drawing and Visualization</em> by Tassima et. al.</p>
Hierarchical structure representation on a WebPage
<p>I am working on some reseaech which subject is to find a proper way to represent a hierarchical structure on a simple web page.
Precision : It's a huge amount of data.</p>

<p>Let have some contextualisation first :
Let say you have a company which is composed departements which contains several employees...</p>

<p>What is commonly used : </p>

<p>Tree architecture :</p>

<p><a href="https://i.stack.imgur.com/gfTGj.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gfTGj.gif" alt="Tree architecture (example)"></a></p>

<p>But I don't like it because if you have a huge amount of data, expanding and collapsing if you are looking for several objects it might be tricky...</p>

<p>2 others approaches that might bring some flexibility :</p>

<p>Circles Mode : </p>

<p><a href="https://i.stack.imgur.com/e2gIb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e2gIb.jpg" alt="Circle Mode (example)"></a></p>

<p>and Nodes Mode :</p>

<p><a href="https://i.stack.imgur.com/CoLRT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CoLRT.png" alt="Nodes example"></a></p>

<p>One functionality that I think can help the final user is an Elastic Search bar, but the goal here is to bring some flexibility for the user to navigate through the structure.</p>

<p>I wants to use JSF but the technology doesn't really matter here, it'sa conceptual phase.</p>

<p>Please share your opinons, ideas, trails... ?</p>