Create GO-CAM v1.1+ landing page for end users

[lpalbou]

@goodb continuing discussion on GO explorable graph: as for D3 vs Cytoscape, I just fear that Cytoscape has way too much functionalities compared to what we want ? If a graph with collapsable nodes + zoom + basic pop-ups to explore GO annotations / models is sufficient, it can be written with ~ 200 lines of D3/js

[goodb]

If you are going to implement it, then I of course defer implementation details to you :). Having watched multiple past projects using both D3 and cytoscape.js get created in former lab, cytoscape.js resulted in much faster iterations of code and a better end product. But.. major caveat is that everyone involved was using each for the first time. So if you are a D3 guru results may be different. Philosophically I don't see why you wouldn't use a more complete package from the outset, but again, that is programmer preference. (And this is putting the cart before horse.. Need to produce a purpose-driven design first anyway. Perhaps a graph isn't actually the best solution to the real problems that the imagined users will be solving with the application.)

[lpalbou]

@goodb I would usually use a more high-level package to create those representations (for instance, I would not even think to create JS animations from scratch where there are already plenty of libs to do so), but in this case, if we just want to draw a graph, have some pop up and basic interactions.. I would say this is pretty basic for d3 (cf collapsable graph node example) and I fear cytoscape may be slow (to load the lib + to interact). But we'll have some time to test. There are also a few other libs of interest:

• ThreeJS 3D Graph: it's fun and fast, as a programmer I like that, as a user, I think 2D graph are better (simpler)
• SigmaJS: seems clean and fast but not very different from D3
• VivaGraphJS: seems very fast. Example of real-time graph based on youtube search. Example of large graph
• ArborJS: I would probably not use it but their user experience is unique: all their web navigation is done through their collapsable nodes

For future reference, here is a list of graph libraries compiled by Anvaka

Furthermore, I think there are two questions behind this "explorable graph" concept: 1) how to link and explore the GO-CAM models: let's say I am working on an annoton, and I want to explore where and how this annoton is used in other models 2) how to explore the ontology itself: collapsable nodes to reach a term of interest, then be able to browse the available annotations & models

As there is a sense of "flow of information" when exploring the ontology (at least the go-basic.owl), I was wondering if instead of graphs, we could use Sankey Diagram ? They are less powerful than graphs but I wonder if these flow diagrams would not be both cleaner & clearer ? For instance it's nice to get an instant sense of how a generic term actually divide and contribute to more specific terms

[goodb]

Cool, nice set of references. Sankey idea is interesting. We used it in one of the previous D3 apps https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4920125/figure/btw117-F1/ Sadly also offline today ;).

In terms of use cases, my understanding is that this particular issue is for end-users, not curators. Hence they wouldn't generally be thinking about annotatons or even the ontology really. They would be coming with some kind of a problem to solve related to their work. e.g. "What does this pattern of gene expression mean?" "What is interesting about it?" "What genes are related to apoptosis, and how are they connected?"

[goodb]

I guess I'm driving at something more than a 'landing page'. Perhaps it should be a separate issue. I'm very interested in figuring the analytical tools that can leverage go-cam.

[kltm]

I think "end users" is a bit of a problem. For a landing page, I'd be envisioning something a heavier on explanation for a general audience, with downloads, and some (optional and off-lineable) interactive/live display. As this would be the first landing spot for newbies and people looking to get and what they want, there would also be links to more specific use cases and groups. I'd worry about making this too heavy and/or too specific to certain communities. It might be worth splitting some of this out at some point.

[lpalbou]

@kltm yes, this "explorable graph" is probably not for the landing page, but more for a "Browse/Explore Data" page.

[gg4u]

Hi all, I jump into discussion and ref. to @goodb comment in https://github.com/geneontology/go-site/issues/558#issuecomment-372001289

This could be captured graphically in a Noctua-like network view or via other more tabular paradigms.

to share that for end-users and general audience, my choice is to focus much more on user experience. For graph layout, two important criteria is responsiveness , readability of layout for a daily use.

They may not necessarily meet by well performing libraries pitching, as an example, performance metrics of number of nodes in plotted graph layout interaction - they may better serve people with analytic skills in manipulating clustering, eigen-vector centrality and other features to explore graph topology (like Gephi).

I focused my works for general audiences on expanded-on-demand layout interactions, VS plotted graph interaction.

In a typical use case of end-users interacting with with expanded-on-demand graph layout, you will have a relatively simple graph topology to render, and you may focus on engaging people with tasks functional to content discovery, rather than graph layout representation.

I worked with 2d layout VS 3d layout : the latter may work well for an a-ha effect, but I found usability and readability may be a challenge for laypeople - like, imagine you want to introduce someone to genetics, and has also to learn how to interact with or "navigate" through your model (if opportunity arise, I would like to explore with Holo for that kind of thing).

I worked out tests with libraries that allow you a good trade-off between layout customisation and performance:

• sigma
• vivagraph
• ngraph
• D3.js.

My preference is for ngraph based rendering layout. I would like to test ThreeJS.

---

I share my work on genomics discovery.

It was built as MVP for genomics research in genes interactions and associations between genes expressions and diseases.

I authored also a cartography layout to handle hairballs ( densely connected networks ) :

• network layout (start your search from a disesase) : explore genes' associated to asthma
• cartography layout (discover suggestions of genes' interactions / genes-diseases associations in between of two queried diseases) : explore genomics interactions between two diseases: asthma and lung disease

I chose on purpose SVG.

Concerning webgl rendering option: I made use of it in another work addressing laypeople - invested more on look and feel rather than performance. Have a look on MVP to discover how to diversify your diet sustainably - it is a discovery platform of food recipes, paired with a sustainability index : Taste Discovery ( it is in italian language, try starting your search with "Mozzarella" and select a first recipe )

---

About http://geneontology.org

I would be much happy if you are interested in using my work for the consortium!

Please reach me out - as an example, for a landing page for end-users, one may want to add content to those genes :)

I designed discovery platforms with this purpose in mind, with possibility to associate content easily.

As an example, I share a third work designed to address end-users in factual knowledge discovery: I paired a entities of my factual knowledge network with article of Wikipedia - to provide brainstorming experiences: About genomics - an introduction to explore its context

If you think my work can be useful to help people with entry level knowledge in gene ontology or to contribute to research, I will be happy to collaborate with you to divulge science.

[kltm]

Aged out.