Opened 4 years ago

Closed 4 years ago

#19591 closed enhancement (fixed)

Zoom+move a Graph d3js representation

Reported by: ncohen Owned by:
Priority: major Milestone: sage-6.10
Component: graph theory Keywords:
Cc: chapoton, dcoudert Merged in:
Authors: Nathann Cohen Reviewers: Nico Van Cleemput
Report Upstream: N/A Work issues:
Branch: e8cf47f (Commits) Commit: e8cf47fc703ae0fccda1b21981215e904411b114
Dependencies: Stopgaps:


This branch adds a zoom+move feature to'js').

A graphical bug remains when moving the whole graph after moving a specific vertex, but I have no idea how to fix that and the feature is really useful, even like that :-/


Change History (14)

comment:1 Changed 4 years ago by ncohen

  • Branch set to public/19591
  • Commit set to ef54a760ab2cc9f7c86fe5b0cb527915a4b06750
  • Status changed from new to needs_review

New commits:

ef54a76trac #19591: Zoom+move a Graph d3js representation

comment:2 Changed 4 years ago by chapoton

hmm, how is it supposed to work ? I am not able to zoom.

comment:3 Changed 4 years ago by chapoton

ok, works. A bit rough, certainly. Jumps in strange ways. And the size of vertices grows with the zoom, as well as the width of the edges. So it is not very useful to see large graphs more clearly. Still interesting to have, I would say, but this really breaks the nice smoothness of the existing viewer.

By the way, may we close #13418, now that there is method='js' ?

comment:4 Changed 4 years ago by ncohen

I use it to visualize very large graphs. Some of them are a bit like that:

sage: g = Graph()
sage: g.add_cycle(range(1000))

As you can see, without a zoom this javascript visualization is totally useless.

The zoom, as you noticed, is a 'graphical' zoom and not a 'semantic' zoom. Another zoom that adapts the size of nodes may be doable (I don't know much about javascript), though perhaps 'zooming out' to visualize the whole graph (as you can don on the example I gave) would become useless, with too big vertices that would then hide the actual graph. I don't know.

By the way, may we close #13418, now that there is method='js' ?

+1 from me.


comment:5 Changed 4 years ago by git

  • Commit changed from ef54a760ab2cc9f7c86fe5b0cb527915a4b06750 to e8cf47fc703ae0fccda1b21981215e904411b114

Branch pushed to git repo; I updated commit sha1. New commits:

dff2500trac #19591: Merged with 6.10.beta6
e8cf47ftrac #19591: Change the default list of colors

comment:6 Changed 4 years ago by ncohen

Here is a very very small commit that changes the default list of colors used by d3js. We used to select "category20" but as you can see consecutive colors can be very close to each other, and it made visualization more difficult.

Now this looks better:

sage: graphs.PathGraph(10).show(method='js',vertex_partition=[[i] for i in range(10)])

comment:7 Changed 4 years ago by ncohen

It would be cool if somebody could review this. I keep reaplying it over and over each time I am done with my work on another branch, that's how useful this thing is to me.


comment:8 Changed 4 years ago by nvcleemp

How is the zoom supposed to work? I tried everything, but no change.

comment:9 Changed 4 years ago by nvcleemp

Nevermind, I forgot to rebuild Sage. :-/

comment:10 Changed 4 years ago by nvcleemp

OK, I got it working now. The added code is short and does what it advertises. For me this is OK, but it should probably be reapplied to the latest version. I actually have no immediate clue of how to reapply, so if you reapply it, I'll re-review it immediately.

comment:11 Changed 4 years ago by ncohen

Hellooooooo !

Thanks for having looked at this ticket.

What do you mean by 'reapply it to the latest version' ? The git branch is a bit old indeed but that file has not been touched since, and the fact that the branch's name appears in green in the ticket means that it is still compatible with the latest beta.

I can add a merge commit if you prefer, but that's technically useless.


comment:12 Changed 4 years ago by nvcleemp

  • Reviewers set to Nico Van Cleemput
  • Status changed from needs_review to positive_review

Hmm, it's been a long week with many early mornings and late evenings, and I guess I was half a sleep yesterday evening. Don't mind my gibberish. I had a new look at your code (since I don't trust my ability to make a good judgement yesterday), and the code looks OK.

Cheers Nico

comment:13 Changed 4 years ago by ncohen

Thaaaaaaaanks for the review !!! If this code is as useful to others as it is to me, I swear that it is a good addition :-)


comment:14 Changed 4 years ago by vbraun

  • Branch changed from public/19591 to e8cf47fc703ae0fccda1b21981215e904411b114
  • Resolution set to fixed
  • Status changed from positive_review to closed
Note: See TracTickets for help on using tickets.