Add tree-like visualisation of the taxonomy

[ffont]

It would be good to be able to explore the taxonomy with a tree-like visualisation as an alternative to the current list-based visualisation. Maybe user could chose which one to look at in a "tabbed" interface. Potential useful Javascript libraries for the tree-like structure:

• https://github.com/zgs225/easy-tree
• https://github.com/jaredly/treed
• https://github.com/wesnolte/jOrgChart

[jordipons]

I attach a tree-like visualization of the AudioSet Ontology: https://github.com/jordipons/AudioSetOntologyTree

Now we just need to decide some details about the visualization, specially the "color code" we aim to use.

[ffont]

Nice! To integrate it with Freesound Datasets you'll need to be able to run a local installation of it. Have docker up and running, etc...

The preprocessing step should not really be needed, as Freesound Dataset already has some routines to build a tree structure out of the ontology provided with the AudioSet format (a list). We should probably add a method in the Taxonomy class which formats the data as needed by the visualisation library, and then pass this to the template with your visualisation code. Alternatively we can also setup an endpoint which returns the JSON of the taxonomy formatted as needed, and then load this JSON from the html (closer to what you're actually doing in your example).

[ffont]

Current implementation from https://github.com/MTG/freesound-datasets/pull/22 has been deployed. Some small things that could be improved:

• Click on category name links to explore page for category (maybe we need an "external link" button or something similar as right now when clicking in the name it opens the corresponding part of the tree.
• User same red color for abstract or other types of non-normal classes as is used in the table version.

[xavierfav]

• Recently an event has been added for allowing to scroll on y-axis by mouse down & mouse move and allow easy navigation in the tree.

• The width of the container is not high enough for displaying the entire tree (e.g. with Mallet percussion).

• I propose to use popups similar to the one used in the annotation pages to display some informations about a category (Paths with links to category explore page, description, examples). A click on the [+] would open the tree, and a click on the name of a category would open the popup.

Once finished, peharps this tree could be great option for choosing a category to contribute to, since it is a nice way to navigate through all the categories of the AudioSet Ontology.

[aframires]

I have a simple suggestion to improve the navigation on the tree structure:

When you press a category, the tree navigator could automatically scroll on the y-axis to the position of the newly opened category.

I believe this would enable easier navigation, without having to resort to the mouse down & mouse move event.

[xavierfav]

I think it is a good idea and it should not be too complicated. The tree is in this file freesound-datasets/datasets/templates/datasets/ontology_tree.html.

When a node is clicked, the click function is called, which takes care of updating the D3 links:

function click(d) {
  if (d.children) {     // children nodes of the clicked node are already displayed
    d._children = d.children;
    d.children = null;
  } else {              // children nodes are not displayed
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

We could also scroll back to to the original node when it is closed. The position of a node can be accessed from its properties: d.x and d.y. It seems that y is the horizontal axis. So basically we need to scroll the tree container around the position of the (children or clicked) node. Something like:

document.getElementById('ontology_placeholder').scrollLeft = d.children[0].y 
                                                             - offset

or (depending on the case):

document.getElementById('ontology_placeholder').scrollLeft = d.y - offset

@aframires, if you want you can try to setup a development version of the website (I can help you on that but it should not be too complicated - We <3 Docker) Work in the branch iss4 (you should merge master into it to have it up to date), develop the proposed feature, create a pull request (referencing this issue #4 inside.