Learning Tree Layout Techniques The expert webinar on tree layouts and their use
The "Graph Layouts in yFiles" webinar series explores advanced techniques and best practices for effective graph visualization.
This fifth episode offers valuable insights into the yFiles tree layout, an essential method for organizing hierarchical data. The webinar covers its applications and distinct characteristics, illustrated with practical examples. Learn how to evaluate if the tree layout fits your data, along with the basics of configuring and using this layout in HTML to meet specific requirements.
The session is led by Dr. Benjamin Niedermann, a Senior Algorithm Engineer in the Layout Team at yWorks, bringing his expertise in graph algorithms and visualization techniques to the discussion.
Build intuitive structures with the tree layout
Whether you're creating "interactive decision trees," "hierarchical data structures," or "organizational charts," yFiles offers the ideal solution for visualizing tree-based data. Our free trial gives you full access to advanced tree layout algorithms, allowing you to create clear, navigable diagrams that effectively represent parent-child relationships and hierarchical structures. Whether you're working on visualizing family trees, taxonomies, or decision processes, yFiles supports a wide range of use cases across platforms like Web, Java, and .NET.
With our trial, you'll also receive expert support from our core developers, ensuring you have the assistance you need to overcome any challenges. Whether you're starting a new project or refining existing tree structures, yFiles provides the powerful tools you need to bring your data to life.
Start creating "interactive and structured visualizations" with yFiles' tree layout today!
Thank you!
Your message has been sent.
We'll get back to you as soon as possible.
Thank you!
Your message has been sent.
We'll get back to you as soon as possible.
Watch the full webinar episode
Watch the full episode below to gain a comprehensive understanding of the tree layout in yFiles. Dr. Benjamin Niedermann introduces the core concepts and provides ample practical demonstrations.
About yFiles: The graph visualization SDK
yFiles is your go-to SDK for crafting advanced graph visualizations, whether you're working with Web, Java, or .NET technologies. Its unmatched flexibility and scalability enable you to convert complex data into clear, actionable visuals, fitting for both enterprise and startup needs.
With yFiles, you're equipped for the future—supporting any data source while maintaining strong data security. Getting started is seamless, thanks to over 300 source-code demos, thorough documentation, and direct access to core developer support. These resources are available even during your free trial.
Backed by 25 years of graph drawing expertise, yFiles is trusted by top companies worldwide for their most critical visualization tasks.
11 reasons to build your next graph app with yFiles!
Key topics covered in this webinar
- Overview of the yFiles tree layout
- Applications and characteristics of the tree layout
- Examples of the tree layout in use, including decision trees
- Basics of coding a tree layout in HTML
- Advanced techniques for configuring tree layouts, including node placement, subtree order, interaction, and tree reduction
Detailed breakdown of this episode
- 00:00 Introduction: Overview of the webinar series and objectives of this episode.
- 02:34 Tree Layout | Use Cases: Introduction to various use cases for the tree layout.
- 07:50 The Dungeons & Dragons Decision Tree Example: Example showcasing the decision tree layout in the context of Dungeons & Dragons.
- 10:30 Tree Layout | When to Use?: Discussion on when it is appropriate to use the tree layout.
- 11:10 Tree Layout | Principles: Core principles guiding the tree layout.
- 21:21 Coding a Tree Layout with HTML (Basic Setup): Basic setup and implementation of a tree layout in HTML.
- 25:31 Coding - Node Placer: Techniques for placing nodes within the tree layout.
- 39:22 Coding - Order of Subtrees: Methods for ordering subtrees in the layout.
- 43:28 Coding - Interaction: Techniques for enhancing interaction within the tree layout.
- 48:48 Coding - Tree Reduction: Strategies for reducing the complexity of the tree layout.
- 55:10 Conclusion & Questions: Summary of key takeaways and a Q&A session.
graph.nodeDefaults.size = [70, 70];
graph.nodeDefaults.style = new ShapeNodeStyle({
shape: ShapeNodeShape.ELLIPSE,
cssClass: "node",
});
graph.nodeDefaults.labels.style = new LabelStyle({
shape: LabelShape.PILL,
backgroundFill: "white",
backgroundStroke: "1px solid #6A8293",
font: "15px poppins",
textFill: "#6A8293",
});
graph.edgeDefaults.labels.style = new LabelStyle({
shape: LabelShape.PILL,
backgroundFill: "#6A8293",
backgroundStroke: "1px solid white",
font: "15px poppins",
textFill: "white",
});
graphComponent.fitGraphBounds()
Additional episode resources
- Decision Tree Demo: Explore a demo showcasing a decision tree layout.
- Dungeons & Dragons Decision Tree Demo: View the Dungeons & Dragons decision tree demo.
- All Interactive yFiles Demos: See a variety of interactive demos using yFiles.
- Learn more about yFiles: Discover more about the capabilities of yFiles.
- Evaluate yFiles for Free: Get hands-on with yFiles by evaluating it for free.
Choose your next steps
Get connected
Connect with our Customer Success Team regarding your ideas or projects.
Download yFiles
Try yFiles free of charge.
