Fork me on GitHub

Examples

For some events that occur during the interaction with the cluster heatmap, callback functions can be defined.

Available events are:

  • row_onclick - invoked when heatmap row is clicked, called with object_ids and event parameters
  • row_onmouseover - invoked when the cursor moves over heatmap row, called with object_ids and event parameters
  • row_onmouseout - invoked when the cursor leaves heatmap row, called with event parameter
  • dendrogram_node_onclick - invoked when dendrogram node is clicked (selected), called with object_ids, node_id and event parameters
  • dendrogram_node_highlight - invoked when dendrogram node is highlighted, called with object_ids, node_id and event parameters
  • dendrogram_node_unhighlight - invoked when dendrogram node is unhighlighted, called with object_ids, node_id and event parameters
  • on_zoom - invoked when zoom icon is clicked, called with object_ids and node_id parameters
  • on_unzoom - invoked when unzoom icon is clicked, called with node_id parameter
  • column_dendrogram_node_onclick - invoked when column dendrogram node is clicked (selected), called with column_indexes, node_id and event parameters
  • column_dendrogram_node_highlight - invoked when column dendrogram node is highlighted, called with column_indexes, node_id and event parameters
  • column_dendrogram_node_unhighlight - invoked when column dendrogram node is unhighlighted, called with column_indexes, node_id and event parameters
  • on_columns_zoom - invoked when column zoom icon is clicked, called with column_indexes and node_id parameters
  • on_columns_unzoom - invoked when unzoom icon is clicked, called with node_id parameter
  • on_refresh - invoked when refresh icon is clicked
  • empty_space_onclick - invoked when inactive (empty) space in the cluster heatmap visualization is clicked (e.g., space around heatmap), called with event parameter
  • heatmap_onmouseout - invoked when the cursor leaves the heatmap area, called with event parameter

In the example below row_onclick and dendrogram_node_onclick functions are defined. When dendrogram node or heatmap row is clicked, these functions are called with the array of object IDs (sorted by their order in the heatmap - from top to bottom) and the event as the parameters. In this example, the functions are identical - they take the array of object IDs array and insert it as text to the HTML element with id attribute object_ids (the grayed box above the cluster heatmap).

Common use of event callback functions is to connect the visualization with external sources. In such case, the list of row IDs is send to additional data analysis or visualization packages, as demonstrated in the section Use cases.

Example code
window.inchlib = InCHlib({ //instantiate InCHlib with given settings target:"dendrogram", count_column: true }); //define function for row_onclick event inchlib.events.row_onclick = function(object_ids, evt){ $("#object_ids").text(object_ids); //insert object IDs to element with ID object_ids }; //define function for dendrogram_node_onclick event inchlib.events.dendrogram_node_onclick = function(object_ids, node_id, evt){ $("#object_ids").text(object_ids); //insert object IDs to element with ID object_ids }; inchlib.read_data(json_data); //read data inchlib.draw(); //draw visualization
Example settings
Example data
The activities of several ligands measured at three different concentrations. Data are clustered using Euclidean distance and Ward's linkage. Show data >>
Object IDs: