diff --git a/crates/viewer/re_view_graph/src/properties.rs b/crates/viewer/re_view_graph/src/properties.rs index 3a99d6c777f0..35ad81696095 100644 --- a/crates/viewer/re_view_graph/src/properties.rs +++ b/crates/viewer/re_view_graph/src/properties.rs @@ -55,7 +55,7 @@ impl TypedComponentFallbackProvider for GraphView { impl TypedComponentFallbackProvider for GraphView { fn fallback_for(&self, ctx: &re_viewer_context::QueryContext<'_>) -> ForceStrength { match ctx.archetype_name { - Some(name) if name == archetypes::ForceManyBody::name() => (-60.).into(), + Some(name) if name == archetypes::ForceManyBody::name() => (-60.0).into(), Some(name) if name == archetypes::ForcePosition::name() => (0.01).into(), _ => (1.0).into(), } diff --git a/examples/python/graph_lattice/README.md b/examples/python/graph_lattice/README.md index 8ffe2530634f..a44ec2eeab8d 100644 --- a/examples/python/graph_lattice/README.md +++ b/examples/python/graph_lattice/README.md @@ -3,7 +3,6 @@ title = "Graph lattice" tags = ["Graph", "Layout"] thumbnail = "https://static.rerun.io/graph_lattice/f9169da9c3f35b7260c9d74cd5be5fe710aec6a8/480w.png" thumbnail_dimensions = [480, 269] -channel = "main" --> This example shows different attributes that you can associate with nodes in a graph. diff --git a/examples/python/graphs/README.md b/examples/python/graphs/README.md index 245143a18cc0..e44df86d2547 100644 --- a/examples/python/graphs/README.md +++ b/examples/python/graphs/README.md @@ -1,29 +1,51 @@ -This example shows different attributes that you can associate with nodes in a graph. -Since no explicit positions are passed for the nodes, Rerun will layout the graph automatically. +This example shows different types of graphs (and layouts) that you can visualize using Rerun. - - - - - + + + + + +Rerun ships with an integrated engine to produce [force-based layouts](https://en.wikipedia.org/wiki/Force-directed_graph_drawing) to visualize graphs. +Force-directed layout approaches have to advantage that they are flexible and can therefore be used to create different kinds of visualizations. +This example shows different types of layouts: + +* Regular force-directed layouts of node-link diagrams +* Bubble charts, which are based on packing circles + ## Used Rerun types + [`GraphNodes`](https://www.rerun.io/docs/reference/types/archetypes/graph_nodes?speculative-link), [`GraphEdges`](https://www.rerun.io/docs/reference/types/archetypes/graph_edges?speculative-link) +## Force-based layouts + +To compute the graph layouts, Rerun implements a physics-simulation that is very similar to [`d3-force`](https://d3js.org/d3-force). In particular, we implement the following forces: + +* Centering force, which shifts the center of mass of the entire graph. +* Collision radius force, which resolves collisions between nodes in the graph, taking their radius into account. +* Many-Body force, which can be used to create attraction or repulsion between nodes. +* Link force, which acts like a spring between two connected nodes. +* Position force, which pull all nodes towards a given position, similar to gravity. + +If you want to learn more about these forces, we recommend looking at the [D3 documentation](https://d3js.org/d3-force) as well. + +The physics simulation that we implemented called _Fjädra_ and can be found on [GitHub](https://github.com/grtlr/fjadra) and on [`crates.io`](https://crates.io/crates/fjadra). + ## Run the code ```bash pip install -e examples/python/graphs python -m graphs ``` + diff --git a/examples/rust/graph_lattice/README.md b/examples/rust/graph_lattice/README.md index a4ebaa3a477f..0f3e4ea460f9 100644 --- a/examples/rust/graph_lattice/README.md +++ b/examples/rust/graph_lattice/README.md @@ -3,7 +3,6 @@ title = "Graph lattice" tags = ["Graph", "Layout"] thumbnail = "https://static.rerun.io/graph_lattice/f9169da9c3f35b7260c9d74cd5be5fe710aec6a8/480w.png" thumbnail_dimensions = [480, 269] -channel = "main" --> This example shows different attributes that you can associate with nodes in a graph.