Improve documentation

crates/viewer/re_view_graph/src/properties.rs

@@ -55,7 +55,7 @@ impl TypedComponentFallbackProvider<ForceDistance> for GraphView {
 impl TypedComponentFallbackProvider<ForceStrength> 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(),
         }

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.

examples/python/graphs/README.md

@@ -1,29 +1,51 @@
 <!--[metadata]
 title = "Graphs"
-tags = ["Graph", "Layout"]
-thumbnail = "https://static.rerun.io/graphs/19e6ca2e0752cdc7107c10b0cb79a4b7192d9e0b/480w.png"
+tags = ["Graph", "Layout", "Node-link diagrams", "Bubble charts"]
+thumbnail = "https://static.rerun.io/graphs/1b93c00867821ebf3286653f43a9e5eb993f59ff/480w.png"
 thumbnail_dimensions = [480, 399]
 channel = "main"
 -->
 
-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.
 
 <picture>
-  <img src="https://static.rerun.io/graphs/19e6ca2e0752cdc7107c10b0cb79a4b7192d9e0b/full.png" alt="">
-  <source media="(max-width: 480px)" srcset="https://static.rerun.io/graphs/19e6ca2e0752cdc7107c10b0cb79a4b7192d9e0b/480w.png">
-  <source media="(max-width: 768px)" srcset="https://static.rerun.io/graphs/19e6ca2e0752cdc7107c10b0cb79a4b7192d9e0b/768w.png">
-  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/graphs/19e6ca2e0752cdc7107c10b0cb79a4b7192d9e0b/1024w.png">
-  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/graphs/19e6ca2e0752cdc7107c10b0cb79a4b7192d9e0b/1200w.png">
+  <img src="https://static.rerun.io/graphs/1b93c00867821ebf3286653f43a9e5eb993f59ff/full.png" alt="">
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/graphs/1b93c00867821ebf3286653f43a9e5eb993f59ff/480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/graphs/1b93c00867821ebf3286653f43a9e5eb993f59ff/768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/graphs/1b93c00867821ebf3286653f43a9e5eb993f59ff/1024w.png">
+  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/graphs/1b93c00867821ebf3286653f43a9e5eb993f59ff/1200w.png">
 </picture>
 
+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
 ```
+

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.