Zulip Chat Archive

Stream: general

Topic: graphs


view this post on Zulip Johan Commelin (May 28 2020 at 08:50):

A long time ago, I have played with d3.js. But by now d3 has a new versions out and I've lost all my muscle memory. Is there anyone with experience with d3.js? It would be great if we could enhance our new community website with

  • interactive import graphs
  • interactive graph of the algebraic hierarchy

I can look into this myself, but wouldn't mind capitalising on expert knowledge in this fascinating community :stuck_out_tongue_wink: :grinning_face_with_smiling_eyes:

view this post on Zulip Bryan Gin-ge Chen (May 28 2020 at 08:55):

I have some experience with newer versions of D3. If you describe what you want (and help set up suitable JSON data for it) I can give it a shot.

view this post on Zulip Johan Commelin (May 28 2020 at 08:57):

Cool! I think we should add a json export to leanproject import-graph.

view this post on Zulip Johan Commelin (May 28 2020 at 08:58):

Besides that... I guess we should start with a simple force layout

view this post on Zulip Johan Commelin (May 28 2020 at 08:59):

But then, we probably want to be able to filter the graph to show subgraphs, similar to --from and --to.

view this post on Zulip Bryan Gin-ge Chen (May 28 2020 at 08:59):

That sounds pretty doable.

view this post on Zulip Johan Commelin (May 28 2020 at 08:59):

Maybe the option to fix a certain node to the center?

view this post on Zulip Johan Commelin (May 28 2020 at 09:00):

Generating a graph of the type class hierarchy should be similar, accept that we cannot simply reuse work on the leanproject side

view this post on Zulip Johan Commelin (May 28 2020 at 09:01):

Also, the type class hierarchy should probably not be a force layout, but a d3.hierarchy?

view this post on Zulip Johan Commelin (May 28 2020 at 09:02):

We could show the priority of instances along the edges of the graph.

view this post on Zulip Bryan Gin-ge Chen (May 28 2020 at 09:03):

These collections might be useful for inspiration: https://observablehq.com/collection/@d3/d3-hierarchy https://observablehq.com/collection/@d3/d3-force

view this post on Zulip Johan Commelin (May 28 2020 at 09:10):

The force directed tree looks nice: https://observablehq.com/@d3/force-directed-tree?collection=@d3/d3-force But I'm not sure if we can automatically decide what the clusters should be.

view this post on Zulip Johan Commelin (May 28 2020 at 09:10):

Also... the import graph is not a tree.

view this post on Zulip Johan Commelin (May 28 2020 at 09:10):

I guess that's the biggest problem

view this post on Zulip Johan Commelin (May 28 2020 at 09:11):

A treemap of the directory structure might also be a nice UI on top of the docs.

view this post on Zulip Kenny Lau (May 28 2020 at 09:11):

@Kevin Buzzard what's the graph in NNG?

view this post on Zulip Kevin Buzzard (May 28 2020 at 09:11):

No idea

view this post on Zulip Johan Commelin (May 28 2020 at 09:12):

It's also D3

view this post on Zulip Kenny Lau (May 28 2020 at 09:12):

cheers

view this post on Zulip Bryan Gin-ge Chen (May 28 2020 at 09:13):

There are notebooks where people play around with visualizing DAGs as well: https://observablehq.com/@peatroot/interacting-with-directed-acyclic-graphs https://observablehq.com/@nitaku/tangled-tree-visualization-ii https://observablehq.com/@erikbrinkman/d3-dag-sugiyama

view this post on Zulip Kevin Buzzard (May 28 2020 at 09:13):

@Mohammad Pedramfar did all that stuff for NNG

view this post on Zulip Johan Commelin (May 28 2020 at 09:20):

The layout above took 151 milliseconds to compute.

(From the third link of Bryan's post above. And that's with 21 nodes... :sad: )

view this post on Zulip Johan Commelin (May 28 2020 at 09:21):

@Bryan Gin-ge Chen I really like the first one! Where you can collapse part of the DAG, but you get dashed edges for remaining transitive dependencies.

view this post on Zulip Patrick Massot (May 28 2020 at 09:40):

I'm working on a similar problem for the sphere eversion project and I found that https://github.com/magjac/d3-graphviz is promising

view this post on Zulip Patrick Massot (May 28 2020 at 09:41):

I really hate those observablehq demo. I never know how to get from there to code I could copy-paste.

view this post on Zulip Johan Commelin (May 28 2020 at 09:47):

@Patrick Massot That seems a very useful library. I remember searching for things like that 2 years ago, but not finding anything

view this post on Zulip Bryan Gin-ge Chen (May 28 2020 at 09:47):

Yeah, you can click on the left to see the code, but it's all tangled together with the notebook runtime. Anyways, all I wanted to demonstrate was that the sky's the limit.

view this post on Zulip Mohammad Pedramfar (May 28 2020 at 15:53):

NNG uses a very simple implementation of force-directed directed acyclic graphs with d3. I haven't worked with d3 too much, but it seems to be quite powerful.


Last updated: May 08 2021 at 19:11 UTC