[Discussion] Continued refinements to the Cytoscape visualization at https://publiclab.org/tags

[17sushmita]

This is the current Cytoscape visualization of the tags on PublicLab https://publiclab.org/stats/graph
Let's brainstorm some ideas to make some refinements.

cc @jywarren @cesswairimu @ebarry @RuthNjeri

[jywarren]

Just linking in the notes and links from our call today!

• Cytoscape - tag visualization of all tags #1502 original issue (whew, long one)
• https://publiclab.org/questions/bsugar/01-25-2018/how-was-the-tag-graph-visualization-made discussion ongoing
• https://github.com/publiclab/plots2/blob/master/app/views/tag/graph.html.erb#L40

Thank you!

[aliciapaz]

I love this discussion! I'm a big fan of the Cytoscape view 🤩

These are some ideas that I have:

Improve responsiveness

• Display a different number of nodes according to the size of the device. For instance, when I look it up on my phone, all I can see is a really dense cloud of words 😮 . Maybe this can be accomplished by displaying only the nodes with a certain "weight" and above on small devices.
• Improve the zoom feature on mobile (make it smoother, although I don't know how...maybe adding a visible zoom button?)

Improve interactiveness

• Highlight the node and links when hovering instead of tapping ( at least on desktop). I think this can be achieved by changing 'tapstart' to 'mouseover' (although if this will be a responsive behavior, a little more logic should be added)
• Add a filter option, search bar or similar
• It's not clear for everyone that when you click in a node, it takes you to the respective tag page. Maybe a visual prompt could help the user know this beforehand.

[17sushmita]

Thanks, @aliciapaz, really great points!! I'll start working on them.

[17sushmita]

Hi @jywarren @ebarry, In Cytoscape visualization, Do we need the directed graph or undirected should be fine? Currently, the graph is having directed edges although the direction is not visualized, but nodes have more than one edge to the same destination node. And there are so many edges that it just looks like a cloud of edges. What do you think? Are the directed edges relevant in our use case? or undirected should also work?

[jywarren]

Do you want to re-open this and keep working on it?

[jywarren]

Hi @jywarren @ebarry, In Cytoscape visualization, Do we need the directed graph or undirected should be fine? Currently, the graph is having directed edges although the direction is not visualized, but nodes have more than one edge to the same destination node. And there are so many edges that it just looks like a cloud of edges. What do you think? Are the directed edges relevant in our use case? or undirected should also work?

I guess i'm not sure what the directedness gives us. We just want to know how closely related they are, and it doesn't really matter the directionality of the link. So I think we can ignore it!

[jywarren]

What if we had a few other ways to use this -- like, if we double clicked, or something, what if it reorganized the graph around the node you clicked? Would that be useful at all?

[17sushmita]

What if we had a few other ways to use this -- like, if we double clicked, or something, what if it reorganized the graph around the node you clicked? Would that be useful at all?

Yes, that seems a great idea. I'm thinking upon different possibilities around this and will link them to some events listeners.

[ebarry]

The new updates that went live on the site look great! Seems like the "families" of related tags are more clearly color-coded and more effectively aiding visual recognition. The font is updated! Looks great - neat idea to use the color of the bubble as font outline to reinforce what label applies to what bubble. And maybe this was already done, but removing the powertags allows the topics to shine through much more clearly.

[17sushmita]

Changes done

• Implemented Filtering based on count of subscribers and Nodes
• Implemented Sorting by No. of Subscribers or No. of Nodes.
• Improved visual representation of the Cytoscape visualization.
• Implemented min and max zoom.

Changes need to be done-

• Searching Feature (Need more ideas about how to search)
• Quick tour of the graph page
• Further Enhancements (Discussion required)