interactivity and other features

[timelyportfolio]

@pommedeterresautee Since Issue #7 began as a discussion about CRAN integration, I thought it would be good to start this new thread that isolates and tracks the discussion about additional features, primarily interactivity. I hope this is ok.

Does anyone know if in Shiny it's possible to collapse a branch of a generated tree? (like you click on a node and the branch after the node are collapsed)

Very little of the first round of mermaid.js development (parsing and rendering) has focused on interactivity, but there is support for callbacks within its markdown-like spec that we could use.

With mermaid.js, we already have d3 to help us, and there are quite a few collapsible, pan-zoom examples to use. Two pre-mermaid and pre-DiagrammeR for reference from R with a rpart that I had done http://bl.ocks.org/timelyportfolio/d49cb07923eff7a75886 http://rcharts.io/viewer/?adc2dfee7aef48ce5485

[pommedeterresautee]

Thanks for these pointers. This one seems similar but a bit shorter : http://bl.ocks.org/d3noob/8375092

In the example I posted I just need to generate which is just a little JSON

var treeData = [
  {
    "name": "Top Level",
    "parent": "null",
    "children": [
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of A",
            "parent": "Level 2: A"
          },
          {
            "name": "Daughter of A",
            "parent": "Level 2: A"
          }
        ]
      },
      {
        "name": "Level 2: B",
        "parent": "Top Level"
      }
    ]
  }
];

And find a way to push it to D3 running in Shiny server (with the code of the link) from R and I am done, isn't it?

My question is... why not use the code from all these examples instead of Mermaid? I have no knowledge of JS so may be I am missing something!

Kind regards, Michaël

[timelyportfolio]

primary benefit of mermaid.js is its simple markdown-like spec syntax. For more full featured and interactive network graphs (for now), you might want to also look at networkD3.

[pommedeterresautee]

I just had a look to networkD3, it's an awesome library but according to the examples, it doesn't seem possible to close a branch. Am I wrong?

[pommedeterresautee]

Looking at the example of Diagramme in the readme I just realised it doesn't make sense to offer a possibility to close a node. For example, in the first image of the readme, B go to D and C go to D. What should happen to D if C is closed? May be E is hidden and the link to D disappear but for this kind of Diagramme it doesn't look natural to act that way.

[timelyportfolio]

In terms of networkD3 collapsible, you might be correct that it is not yet implemented. I thought it was but will dig deeper.

You are right collapsible only applies to special cases of networks, primarily trees. Not sure how to handle but will leave this open to explore.

[pommedeterresautee]

May be it helped, it s a blog entry explaining how to make a tree collapsable. I just read it rapidly but it seems pretty clear... http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html

[pommedeterresautee]

After some search I didn't find any lib able to have both collapsible nodes AND able to have several trees in the same document (the code above can't for example).

[pommedeterresautee]

I am wondering how to add a collapse feature to Mermaid. Basically, if you click on a node, all other nodes which are pointed by only closed nodes should be closed and hidden. And it would work as a propagation accross the network of nodes. It should not be that hard to implement. I need to check how the representation of the network is done in JS. What do you think? Of course, to be closable, a node should have some property in its declaration in the kind of markdown declaration.

Kind regards, Michaël

Edit: finally, interactive trees and it can have multiple trees on the same page

[rich-iannone]

I'm doing some research right now on interactivity and animation. I'm very interested in getting smooth transitions between diagram states into the package. This would be useful for periodically displaying the results of streaming data, where revised data create the graph specification through a combination of preprocessing and templating.

Anyway, I found that svg.js and svg.easing.js might do the trick. The easing animation looks quite nice. Demo here:

http://svgjs.com/test/

I'll do some tests with real SVG output from grViz and see if it could be implemented.

@timelyportfolio do you have any other leads on this sort of thing?

[timelyportfolio]

I have been dying to do this. Would look at snap or d3 rather than svg.js. Really hope I can find some time this week to do something. Do you want just basic interactivity or animation?

[rich-iannone]

I think that the animated transition between states would prove to be more immediately useful. I can think of interesting visualization types that would be great for dynamic visualizations. Like cycling between/through graphs, updating the graph with new data. The transition would help a lot. It could show which nodes are common or new between states.

[rich-iannone]

I'm currently all over this page:

https://github.com/mbostock/d3/wiki/Transitions

[happyshows]

@rich-iannone Hi Rich, is there any progress on this improvement? I can think of a couple use cases for interaction: something like technology tree in games (to highlight project dependency) integration with shiny to click a node and jump to a specific application | highlight a chart / markdown on the same page

[happyshows]

@rich-iannone Is there any progress on user interactivity? Sorry I lost track after 0.6.... My use case is: I'd like to click on the diagram and fetch value to grab the node/edge info for further action. rAmCharts did very well on this piece, check this https://github.com/DataKnowledge/rAmCharts/search?utf8=%E2%9C%93&q=addlistener

[stevepowell99]

hi, wondering if animation is still on the roadmap? something like render_animated_graph_from_graph_series?

[stevepowell99]

In the meantime, here is a hack to animate a graph series (ugly, no nice transitions) within Shiny: https://gist.github.com/stevepowell99/0e32008b6d96e2085dbe3c2be21874ba

[rich-iannone]

@stevepowell99 Animation is still a thing that would be a great feature. And, yeah! the graph series would be the ideal data structure for holding keyframes/states of the animation. When I was experimenting with animation (a long time ago) I believe I used d3. Perhaps a better way is to use SVG animations.

Thanks for sharing that gist. I will have a look! Let's keep this conversation going (the issue is re-opened) and perhaps we'll get enough ideas/examples to get us to a workable animation function.

[stevepowell99]

Perhaps a better way is to use SVG animations.

you mean to do a whole animation in a single svg file? Or to use css or something just to smooth transitions between frames? Both sound like a lot of work? Perhaps the simplest aid would just be to enable some kind of slight fade between frames just to make the whole sequence seem less jerky.

[flyaflya]

Using this JS library: https://github.com/magjac/d3-graphviz

I can create a pretty awesome transition animation between .dot graphs. See here for an example: https://jsfiddle.net/x9kgu2cv/2/

Maybe this type of thing could help? I would love to see it in DiagrammeR and tried to get it working in RStudio using the r2d3 package, but got stuck.