Jorrit

• Flip: kind of funny
• Bipartite: selection workflow is kind of weird
  • not clear how to update after selecting from dropdowns
• I understand the intent but looks like the tool is still under development

Marie

• like simplicity & visual aspect of card view
• not what i expected when you say a food web tool
  • expected messy knots of string where you can see from a diatom up to a fish, bigger fish etc.
• like functionality, very visual, very clean, nice snapshot
• have to provide context, esp. for high school students
  • better to provide a curated experience rather than an open, messy one
  • start with a well-chosen sample data set
• Network page:
  • likes card views etc on the left for context
  • the references:
    • not clear what the balloons are
    • what does 9 observations mean?
      ie. in that study? in that study by that source?
  • would like to see an explanation somewhere of what it means
    • e.g. click the balloons to go to a citation
  • like to have ability to dig into species to get more information
• Bipartite:
  • unclear what's going on
  • what's different about it?
  • why that visualization? seems a little more obscure
  • little circles on top and bottom not identified?
  • likes the way you can choose it based on the geographic box
  • needs more explanation re how to use it and what the potential is
• Overall:
  • demonstrating the value of it will make it more tangible
  • find a high school curriculum online to find something this tool could help with
    • evidence for the need for this tool
  • cleanup and simplify
  • documentation

Jeff

• provide some organization to the result
  • complicated names
  • how do bony fishes relate to crustaceans etc.
    • would be nice to have a tree like structure available
      • maybe to start with
  • alphabetical would be nice if searching for something
• need a curricular use case: what are students trying to accomplish
• Arrows: ecologists prefer arrows follow flow of energy from resource to consumer
• Map page: nice to preserve the type & direction of the interaction
• Bipartite: ordering is useful but not clear here
• Overall:
  • focus on a specific educational goal & use case
    • likes when students can construct things
    • so e.g. building a food web: use tool to find the interactions
      • not necessarily building the food web in the tool
    • help with where there's good data coverage
  • focus on an activity students could do with 1 or 2 pieces of the tool
    • make sure labels, documentation, workflow are as straightforward as possible

Jen

• some order would be helpful, but not convinced taxonomic order would be suitable
• would want things with most content, or at least an image, float to the top
• often Network link fails to find any interactions
  • will report case on github issues
  • seems to be blue wildebeest & mosquito
• Bipartite: the data is convoluted
  • needs lightweight documentation
    • a few hints, not full paragraphs
• get information wherever you can to pick a more specific use case
• beautiful presentation of the data that presents the complexity well
  • taking a slice of it would be a useful exercise
    • to appeal to educators

Since this grew out of a prototype, there are no consistent naming standards, for example:

taxon
sourceTaxon
name
taxonName
sourceTaxonName
targetName
interaction
interactionType

This makes it difficult to maintain or add new features. A naming convention should be decided for each "domain object" and everything be made consistent to the naming convention.

The black on purple paragraphs are difficult to read, use this color safe site for font color suggestions that would go better with the purple. It might be helpful to make the font size a little bigger as well. For example

color: #E4F1FE;
font-size: 17px;

For the subheadings, consider color #FEFEFE

When user hovers over any link, change the style (thicker width?, change cursor pointer) so user is aware they can interact with it.

When user clicks on any link, somewhere on the page show a "dock" component with:

• source and target taxons (maybe the cards?)
• study name with link to study details where the interaction was observed.
• if there's lat/lng data available, build link to map view

Additional http calls will be required to fetch this data. For example card data (image and common name comes from the image api). The study and lat/lng comes from interaction api where both source and target are specified.

To get all this data in, change layout to container-fluid and 3/6/3 columns.

When a given interaction is selected in the network graph, show a map with all the lat/lng where this interaction was observed. Basically, move the code from the map view/controller over to network.

If there are no lat/lng observations, then do not show the map.

Likes

• The interface is simple and easy to use.
• The application is informative, it's interesting to discover organisms
  -The Flip effect on the cards.
• Love the Network animations, very informative and intuitive.

Areas of Confusion

• I don't understand what the map does, why are there some random waypoints? (no longer relevant)
• What is up with this play section, seems completely irrelevant? (no longer relevant)
  -Some cards do not have pictures of the animals, however the space for the picture is still there. Maybe add a generic placeholder (picture not available).
• In the Network sections when an animal does not have any interactions, the blank area for the network seems unnecessary, remove it not being used
• In the Network Area, if a different type of interaction is clicked, nothing happens. Why can other interactions be clicked if nothing happens?
• In the Network area, it was unclear what the colors and shapes mean. All the lines can get confusing when there are linkbacks.
• The bipartite Graph area of the project seems incomplete and in a state of disarray at the moment.

Suggestions

• One can click Go on the Explore Tab without typing the name of an organism and nothing happens however, it would be nice to have an alert box tell you type in the name of an organism, after all children are the target audience.
• Add the GloBi logo icon to the Project's webpage icon, in order to easily distinguish the tab.
• Add picture not available notice when the card has no organism picture available.
• Style Bipartite Graph Area, make it more intuitive, currently it's messy. Have the graph update with any interaction in the map or the drop downs.
• Fill in About section.

Start up the page fresh, or hit Clear then reload the page. A card will appear in the source position, with links but no image or title. After a couple of seconds, it will disappear.

Sometimes the GloBI API responses can take several seconds or more to return. The ngProgress doesn't seem to indicate this accurately. We should add spinning loaders to all areas of the views that are waiting on ajax data to load so its more clear to the user that something is being loaded.

Likes

• "flip" function of the cards
• graphics (animal pictures)

Doesn't Like

• the "naked" aspect of the page
• not clear what the connections between the fields is

Suggestions

• show tutorial - maybe gif-like animation on the front page
• background with pictures on the front page
• clean up the text representation (e.g. "eatenBy" to "eaten by")
• pagination of the interaction results
• group interaction cards by kingdom on the results

This will address #27 (feedback from Sean) and #30 (confusion about what clicking Network from a search result card does).

Remove Network link from cards.

Instead in the Explore Dock, after a species is selected AND interaction results are found, then the dock should show either a link or action button with some text such as "View Network".

Clicking the action button should transition to the Network view (we have code that does this already in main.js, except that it responds to an event emitted from the card, instead, it should be an explicit function available on the scope).

Using 3/6/3 column layout, the Map tab should show:

• Interaction type, for example "Eats network of the Tuna.."
• Interaction cards
• List of studies with links to the study urls
• Map with lat/lng markers if available

Also rename the tab to Interaction

The column network graph is laid our horizontally given the width of the graph vis area and a max number of levels. However, the max is not actually enforced so user could keep clicking and generating nodes that go off the visible area.

Add some logic, in the network controller that receives the node click events to check the level of the node that was just clicked, if it exceeds max level, display some explanatory message.

In Chrome on x64 Windows 8.1 I'm seeing unexpected vertical lines in the Network tab. They're colored like the edges/links/arrows in the network tab, and don't appear in IE or FF, which also don't have the edges, so I expect they're somehow related to the network edges.

Documenting all the feedback from my colleague here, then will split this up into issues as time permits and after some team discussion:

Overall

• Feels like a series of disconnected tools
• It's confusing having Network and Map on same level as Explore, really, these are child actions. i.e. there should be an Action hierarchy where user first Explores, picks a species and interaction they're interested in, and only then Network/Map become available, pre-populated with the subject species and interaction user picked.
• The action hierarchy concept could be implemented by having different versions of the nav bar, in the main/home view, only Explore is available. But after user picks a species, then the Nav changes to show the current species and interaction type, then exposes other actions such as Network
• Map is too confusing as a view in and of itself, move it to Network view, perhaps under the graph. Such that every time user clicks on an edge, the map is updated with the observations/studies for that interaction

Explore

• Redesign the form so it flows left to right to match the expected user interaction, for example
• Select an animal (then render the found animal card directly below the dorpdown), then beside that select interaction, then the grid below

Cards

• Not clear that "flip" will turn the card over
• Kind of annoying that user must click first to flip card and then can interact with it, would prefer to see all interactions on same view (not useful to have them hidden on the back)
• Confusing to have "eats" and "eaten by" clickable on the card, when there is already a dropdown to pick the interaction. Generally confusing that there is more than one way to perform the same action
• Instead of 'map' and 'network' links on the card, would be better that clicking on a card from search results makes that the new "subject", and user can start a new search and pick a new interaction type

Network Graph

• Position arrows and edges below text so they don't block it (z-index)
• Reduce opacity of arrows and edges so they don't obscure the text and nodes
• The de-emphasized text needs to be less chunky (stroke/fill combo is making it bold)

Map

• Use leaflet fitBounds api to auto zoom/center map around the observations, calc min/max lat/lng and pass to fitBounds api

Styling changes to improve the card layout.

in the less file it's like this:

background-image: url("/images/about-back-fish.jpg");

And it works in dev and optimized mode locally, but for gh-pages, needs to be

background-image: url("../images/about-back-fish.jpg");

Based on #27 , modify the nav bar shown on views as follows:

The main view (aka Explore) will only have an About tab.
If user clicks on Network, then they're taken to Network view which should have a different nav that shows:

• The taxon name they selected, which if they click on it, should take them back to Explore tab with that taxon as the subject of search result
• A link to Explore more species, which would go back to the empty Explore view
• About tab (same as main view)

To distinguish between regular forward links, and back links (dashed)

While I'm at it building legends, also build the color level legend.

Use similar approach as #9 with D3 being used to draw on the vis, so the legend symbols are consistent with the vis.

In IE11 on Windows 8.1, the lines/edges linking nodes in the Network tab aren't appearing. The arrowheads do appear and the node shapes animate, just not the arrow tails.

First node is wasting too much horizontal space which makes last level go off the visible graph area.

Consider a dropdown for the interaction types

Hello!

I love the explorer -> network connection but I'm not quite sure what happens in some cases when I use it.

Starting at http://danielabar.github.io/globi-proto/#/main?name=Thunnus%20albacares&interaction=hasParasite and selecting the first parasite, Nasicola klawei, I get no network results.

I have a theory, that the default network shown takes the interaction type in the explore window and propagates it to any organisms "receiving" the relationship received by the network focus (Nasicola klawei) from the original explore focus (Yellowfin tuna). That works pretty well for eats or preys on, but not for host-parasite, host-pathogen, vector-pathogen, symbiont, interacts, or pollinator-plant. possibly other visualizations would be more useful for these cases. The bipartite graph would be good for the ones where there are two clear pools of partners, but no further layers; like host-pathogen, plant-pollinator, etc.

I still think in layered cases, like eats or preys on, the network display should be backed up one level, since there is always an "eats" interaction involving the focus taxon available to display. For instance, selecting Manatee grass from http://danielabar.github.io/globi-proto/#/main?name=Chelonia%20mydas&interaction=eats could start at the Green turtle and show all the "sister food items", since there's nothing to show in the "Manatee grass eats X" direction.

To avoid overloading the api with requests. See Angular docs on $http

Any view change or list repeater should be animated/transitioned in, using a fade or other appropriate effect. This will make the view changes more pleasing.

Need some copy and maybe a couple images (clickable to the actual app page that implements them) showing examples of what you can do with the app.

Should also contain link to project on github, then we can get rid of the "fork me" ribbon.

On the Network tab, the card interactions should work, but should stay on the Network tab. E.g. you should be able to replace the current network with the starting point of a different interaction for the same organism. I guess ideally the Network link would be replaced with an Explore link that took you back to the Explore tab, much as the Explore page's Network links currently go to the Network tab.

Render a legend that maps each node's kingdom to a shape.
The kingdom's can be links to the appropriate wiki entries.

The overall kingdom reference is here

The Animalia/Animal entry in the legend could link here
and so on for each entry in the legend.

Suppose user is on level 4 of the analysis. If they click on a node in any previous level, for example 2, then all the nodes in levels 3 and 4 (and their attached edges) should be removed, putting user back into the level 2 state.

The breadcrumb should also be updated.

On Windows 7 it does
On mac it looks fine.

Now that #12 is implemented, sometimes clicking on a link renders no interaction details. It could be that the api response returned empty results or an error. In either case, the user should be informed that either nothing could be found or an error occurred.

Documenting all the feedback from my colleague here, then will split this up into issues as time permits and after some team discussion:

Overall

• Doesn't seem to convey insight as to biotic interactions: how things are interconnected, scope of interaction networks, etc.
• Try to support learning, e.g. by tracking the path people take and supporting backtracking.
• Looks like a database browser for a specific domain, in which case, include more metadata at each step.
• Consolidate the network view into the cards view

Explore

• Simplify the dropdown.
  • Consolidate into a handful of categories, then use different visual encodings to show specific relationships within one view (cards/network/etc)
• Flip isn't useful
• Put everything on the front
• use 'i' for info instead of globe icon for 'Site'
• just use icons, to get a few onto the front
• avoid dropdowns
• Include more metadata:
  • Categorize species. e.g. is it plant, animal, marine, etc.
    • group cards
  • what interactions does it participate in?
    • how many things does tuna eat?
    • how many things eat tuna?
    • how many parasites does it have?
• show links between multiple items.
  • perhaps a compare mode where you check off several cards & click to get their network
  • or integrate the network view into this view

Network Graph

• Doesn't seem like the right viz for the goals
• Color needs to encode something; horizontal space is already encoding the levels
• Network is really weird
• Maybe draw the back arrows for the leaf nodes?
• Crustacea
  • Looks like a category a child of a species (tuna)
  • If it is a category, how many items in the category?

Play

• What is Play?
• Looks promising

As part of #12 the map was moved out of its own view and into the network view, under the graph.

Now the map is no longer centering and zooming properly every time a new interaction is chosen.

Consider #27 : Use leaflet fitBounds api to auto zoom/center map around the observations, calc min/max lat/lng and pass to fitBounds api

The Show Network button on Explore Dock is a dark-ish grey and kind of looks disabled.

Can it be made to look a little more active?

Issue is map view expects an interaction between source and target, but the first taxon in explore view is only the source, has no target.

Consider a few possible solutions such as:

• if no target specified, try to search for source interacts with source (eg: some species eat themselves)
• arbitrarily pick the first target (if user has some results already) and query based on that
• don't show a map link at all (card could have conditional behaviour)
• try to query for ANY interaction from that source

Ideally, the cards and the "Do" dropdown should only offer interactions for which the current taxon actually has hits. From #28 , If there are hits for a given interaction, it might be nice to show the count of hits right in the link; otherwise, replace it with the best available interaction (front), grey it out (back) or remove it altogether ("Do" dropdown).

This is an idealistic, pie in the sky, requirement, because at the moment I believe its not feasible with the API. It might require some sort of index structure in the underlying database.

Add google generated script for GA to index.html

Currently, study_title is used to indicate who reported a specific interaction. For historic reasons, the study_title is used more like a unique id rather than a human readable citation. If you'd like to include human readable citations for sources, I'd like to suggest to include study_citation and study_source_citation in the fields. The first is a citation of the observation and the second is the citation of the data provider.

For example, the image below has a citation that includes both study_citation (before Provider:) and the study_source_citation (after Provider:).

I hope this helps tidy up the references that are included in the app.

Bacteria symbol is now a simple x mark, but should be a star according to original legend we got from Stefan. This is implemented with d3extension.js to support custom shapes. The path needs to be updated so it draws a star.

Changing it just once here should update it in the graph and the legend.

Currently there are some in 'maxApiResults' and some in 'columnGraphValues'.
Furthermore, the column graph uses the max api results, but we may want to control max api results for column graph separately than the explore tab (which shows the cards in a grid layout) for optimal vis effects.

I think the navigation tool looks very nice already: I was able to browse around the interaction webs quite easily.

I did find something strange. When selecting a "eats" and Homo sapiens, I found that humans eat salmon (Salmonidae). After clicking on salmon and selecting "eatenBy", I found that salmon was eaten by bald eagles only. I would expect humans to be in the list also.

Underlying GloBI (see http://globalbioticinteractions.org) api call like:
http://api.globalbioticinteractions.org/taxon/Homo%20sapiens/eats
or
http://api.globalbioticinteractions.org/interaction?sourceTaxon=Homo%20sapiens&interactionType=eats

and

http://api.globalbioticinteractions.org/taxon/Salmonidae/eatenBy
or
http://api.globalbioticinteractions.org/interaction?sourceTaxon=Salmonidae&interactionType=eatenBy

did include humans in consumers of salmon.

@danielabar Could you share how you are building up the api calls? Perhaps I can help solve the problem.

To distinguish them from regular links.

There are a variety of GloBI API calls used, some of which do the same or nearly the same thing, but in different ways. This is an artefact of this project having started off as a prototype, where everything was an experiment.

Now all the calls should be consolidated, so that there is only one way to retrieve any given type of information.

It may make sense to tackle this at the same time as #76 or at least to consider them together.

The graph text svg elements currently have a fill and stroke. Remove the stroke because that's making them look bold and difficult to read.

As part of this #IVMOOC 2015 Globi project, @ritec has built an interactive visualization of species interactions using geo co-ordinates bounding box, together with a map drag & drop style interaction, that generate a bipartite graph.

Incorporate @ritec 's vis into this project. The "quick & dirty" way, as suggested by @psmacmur will be to add a view in this project that simply contains an iframe that loads the gh-pages deployed version which is here. Depending on how polished the bipartite graph is, the new view could be labeled "Labs" or "Experiments" to make it clear if this is not a finished product.

Another possibility is to link to it from either the Network or Explore view, something like "click here to explore an alternate visualization etc."

The more long term solution would be to "angularize" the bipartite vis, separating it into controller, service and directive similar to the column network graph, but this could be a future enhancement.

Change mouse cursor as user hovers over nodes so its more obvious that they're clickable.

Add some text/help tips so user knows that they can:

• Click a node to expand the graph
• Click an edge to get interaction details

Could be tricky in the case where nothing is found and there is no graph...

Change all occurrences of "Globi" to "GloBI"