7 ms·

Show HN: Interactive graphs in Rerun with a Rust port of D3-force

65 points by nikonp 2y ago

Rerun 0.21 comes with a new graph viewer that's written in Rust and runs in the browser via wasm. It's powered by a new force based layout engine that is a port of much of d3-force to Rust. (The release also contains some other cool stuff like undo/redo implemented on top of a timeseries DB.) We built this with applications in robotics and spatial computing in mind but would love to hear feedback from folks that would see this as useful in other domains as well.

jgoertler 2y ago
Hi, Jochen from Rerun here (@grtlr on GitHub)! I implemented most of the graph view, including Fjädra [0], our Rust port of the excellent d3-force [1]. Happy to answer any questions! [0](https://github.com/grtlr/fjadra https://github.com/grtlr/fjadra) [1](https://d3js.org/d3-force https://d3js.org/d3-force)
- troelsSteegin 2y ago
  Is there a public way to add custom Blueprints (https://rerun.io/docs/concepts/blueprint https://rerun.io/docs/concepts/blueprint) and Visualizers (https://rerun.io/docs/concepts/visualizers-and-overrides https://rerun.io/docs/concepts/visualizers-and-overrides)? It looks like yes for Blueprints, reading through https://rerun.io/examples https://rerun.io/examples. I am guessing "not yet" for Visualizers? For example, I'd like to be able to render a Sankey diagram from a "dataflows" Blueprint through the Viewer (https://rerun.io/viewer https://rerun.io/viewer). I realize that non-spatial is not Rerun's focus.
  - jgoertler 2y ago
    Custom visualizers are also supported—in fact the graph view started out as an external visualizer. Here is a tutorial: https://rerun.io/docs/howto/visualization/extend-ui#custom-views-classes https://rerun.io/docs/howto/visualization/extend-ui#custom-v... And here is the corresponding code example: https://github.com/rerun-io/rerun/tree/main/examples/rust/custom_view https://github.com/rerun-io/rerun/tree/main/examples/rust/cu... To write your own graph visualization, you can look into the implementation of our graph view: https://github.com/rerun-io/rerun/tree/main/crates/viewer/re_view_graph https://github.com/rerun-io/rerun/tree/main/crates/viewer/re... In the future we want to provide more types of layouts, dataflow is high up on that list. May I ask what kind of data you want to visualize? Since you mentioned Sankeys, in your case does the structure of the Sankey change as well, or do you only expect the edges to grow/shrink over time?
    - troelsSteegin 2y ago
      Thank you for your reply. I am thinking about variable dataflows through a fixed set of nodes -- so, the latter, growing and shrinking edges. The application would be visualizing system dynamics. The stages in the Sankey would be organized by degree of distance from an "intervention" node.
      - jgoertler 2y ago
        That's very interesting! We're currently working on the plumbing to be able to assign attributes to edges as well—right now it's only possible to style/configure the nodes. Once we have that though, there is another approach that you can take before you go down the path of writing your own visualizer/view: you can also log custom positions for each node. Since the node positions don't change in your case that might get you quite far by statically logging the nodes with a Sankey layout computed by your application.
- rendaw 2y ago
  What makes d3-force so excellent that you'd want to port it? Do force layouts have a lot of subtlety?
  - jgoertler 2y ago
    For us it was a mixture of multiple things: It’s a very mature library that has been stable over the last years and became the de facto standard in web-based visualizations, where—just as in Rerun—interactivity plays an important role. The predefined forces that ship with it make it very flexible and are easily extensible. Finally, having worked with it a fair amount in the past, personal preferences surely played their part as well.
  - infinityobject 2y ago
    I’m such a D3 fan that I wish I could follow the creator his current project Observable, but D3 just interests me way more.
rcarmo 2y ago
This is pretty awesome. I especially liked replaying the graph layout. I do wonder what kind of native GUI toolkits whis would work with (since I don’t really care much for web UIs and browser overhead).
- nikonp 2y ago
  There is a native version as well: https://rerun.io/docs/getting-started/installing-viewer https://rerun.io/docs/getting-started/installing-viewer You can for instance install and open the viewer natively with just: > pip install rerun-sdk > rerun
burningion 2y ago
Have been playing with rerun since the early days, and the team has built a ton of amazing features for visualizing your robotics datasets. I used it on a bicyclist safety system to ingest raw data for playback and analysis later. I especially like that they're also building an (amazing) Rust version of imgui called egui, and open sourcing all the work for the ecosystem: https://github.com/emilk/egui https://github.com/emilk/egui
simgt 2y ago
I've been using rerun for a while to visualize the content of inference pipelines, it's nothing short of amazing! I really wanted live views of my gstreamer pipelines, so I've started to write a tool with egui [0]. Looks like rerun's GraphView doesn't support subgraphs and horizontal layouts yet, but I'm sure I'll soon be able to just have a gstreamer tracer that pushes reruns logs. That's better than having to find the motivation to go through my todo list! Yeah! [0] https://github.com/simgt/glitch https://github.com/simgt/glitch
- jgoertler 2y ago
  Thank you for linking your project—that looks really cool! I saw you also implemented a pan-and-zoom area. We are currently working on moving Rerun's implementation to egui [0], so maybe keep an eye on that. It would be super cool to have layered graph drawing in (Sugiyama-style) in Rerun too. The tricky–but super interesting–challenge that we face is that our layout implementations need to be consistent across timestamps if the underlying structure of the graph changes, which is why we initially chose a force-based layout approach. There, the time-varying aspect is handled naturally by the simulation. The very interactive nature of Rerun also poses more restrictions on the implementation of our algorithms: re-layouts ideally need to be fast, to produce visualizations quickly, especially when scrubbing the timeline. I still hope we can rid you of some of the todos ;). [0](https://github.com/emilk/egui/pull/5505 https://github.com/emilk/egui/pull/5505)

65 points by nikonp 2y ago

jgoertler 2y ago

Hi, Jochen from Rerun here (@grtlr on GitHub)! I implemented most of the graph view, including Fjädra [0], our Rust port of the excellent d3-force [1]. Happy to answer any questions! [0](https://github.com/grtlr/fjadra https://github.com/grtlr/fjadra) [1](https://d3js.org/d3-force https://d3js.org/d3-force)

troelsSteegin 2y ago
Is there a public way to add custom Blueprints (https://rerun.io/docs/concepts/blueprint https://rerun.io/docs/concepts/blueprint) and Visualizers (https://rerun.io/docs/concepts/visualizers-and-overrides https://rerun.io/docs/concepts/visualizers-and-overrides)? It looks like yes for Blueprints, reading through https://rerun.io/examples https://rerun.io/examples. I am guessing "not yet" for Visualizers? For example, I'd like to be able to render a Sankey diagram from a "dataflows" Blueprint through the Viewer (https://rerun.io/viewer https://rerun.io/viewer). I realize that non-spatial is not Rerun's focus.
- jgoertler 2y ago
  Custom visualizers are also supported—in fact the graph view started out as an external visualizer. Here is a tutorial: https://rerun.io/docs/howto/visualization/extend-ui#custom-views-classes https://rerun.io/docs/howto/visualization/extend-ui#custom-v... And here is the corresponding code example: https://github.com/rerun-io/rerun/tree/main/examples/rust/custom_view https://github.com/rerun-io/rerun/tree/main/examples/rust/cu... To write your own graph visualization, you can look into the implementation of our graph view: https://github.com/rerun-io/rerun/tree/main/crates/viewer/re_view_graph https://github.com/rerun-io/rerun/tree/main/crates/viewer/re... In the future we want to provide more types of layouts, dataflow is high up on that list. May I ask what kind of data you want to visualize? Since you mentioned Sankeys, in your case does the structure of the Sankey change as well, or do you only expect the edges to grow/shrink over time?
  - troelsSteegin 2y ago
    Thank you for your reply. I am thinking about variable dataflows through a fixed set of nodes -- so, the latter, growing and shrinking edges. The application would be visualizing system dynamics. The stages in the Sankey would be organized by degree of distance from an "intervention" node.
    - jgoertler 2y ago
      That's very interesting! We're currently working on the plumbing to be able to assign attributes to edges as well—right now it's only possible to style/configure the nodes. Once we have that though, there is another approach that you can take before you go down the path of writing your own visualizer/view: you can also log custom positions for each node. Since the node positions don't change in your case that might get you quite far by statically logging the nodes with a Sankey layout computed by your application.
rendaw 2y ago
What makes d3-force so excellent that you'd want to port it? Do force layouts have a lot of subtlety?
- jgoertler 2y ago
  For us it was a mixture of multiple things: It’s a very mature library that has been stable over the last years and became the de facto standard in web-based visualizations, where—just as in Rerun—interactivity plays an important role. The predefined forces that ship with it make it very flexible and are easily extensible. Finally, having worked with it a fair amount in the past, personal preferences surely played their part as well.
- infinityobject 2y ago
  I’m such a D3 fan that I wish I could follow the creator his current project Observable, but D3 just interests me way more.

rcarmo 2y ago

This is pretty awesome. I especially liked replaying the graph layout. I do wonder what kind of native GUI toolkits whis would work with (since I don’t really care much for web UIs and browser overhead).

nikonp 2y ago
There is a native version as well: https://rerun.io/docs/getting-started/installing-viewer https://rerun.io/docs/getting-started/installing-viewer You can for instance install and open the viewer natively with just: > pip install rerun-sdk > rerun

burningion 2y ago

Have been playing with rerun since the early days, and the team has built a ton of amazing features for visualizing your robotics datasets. I used it on a bicyclist safety system to ingest raw data for playback and analysis later. I especially like that they're also building an (amazing) Rust version of imgui called egui, and open sourcing all the work for the ecosystem: https://github.com/emilk/egui https://github.com/emilk/egui

simgt 2y ago

I've been using rerun for a while to visualize the content of inference pipelines, it's nothing short of amazing! I really wanted live views of my gstreamer pipelines, so I've started to write a tool with egui [0]. Looks like rerun's GraphView doesn't support subgraphs and horizontal layouts yet, but I'm sure I'll soon be able to just have a gstreamer tracer that pushes reruns logs. That's better than having to find the motivation to go through my todo list! Yeah! [0] https://github.com/simgt/glitch https://github.com/simgt/glitch

jgoertler 2y ago
Thank you for linking your project—that looks really cool! I saw you also implemented a pan-and-zoom area. We are currently working on moving Rerun's implementation to egui [0], so maybe keep an eye on that. It would be super cool to have layered graph drawing in (Sugiyama-style) in Rerun too. The tricky–but super interesting–challenge that we face is that our layout implementations need to be consistent across timestamps if the underlying structure of the graph changes, which is why we initially chose a force-based layout approach. There, the time-varying aspect is handled naturally by the simulation. The very interactive nature of Rerun also poses more restrictions on the implementation of our algorithms: re-layouts ideally need to be fast, to produce visualizations quickly, especially when scrubbing the timeline. I still hope we can rid you of some of the todos ;). [0](https://github.com/emilk/egui/pull/5505 https://github.com/emilk/egui/pull/5505)