Recalculate correlation values

This is the last of the series of examples, where we step by step introduce new chart properties for the same set of charts.

Here, we utilise another aspect of in-built interactive functionality in the linked-charts library. In the instrument panel, one can find a "Select elements" button. If it is pressed, then the user can select or deselect cells or points by clicking and brushing. A double click will deselect all the elements. You can also use this mode just keepint the Shift key pressed. Just like clicking, selecting or - in the linked-charts terms, marking - the elements, can trigger various actions. Let's, for example, allow user to define, what cell lines to use for correlation calculations, by marking them on the correlation scatter plot. Try to mark several points on the top right plot and see how the heatmap changes. By the way, don't forget that you can recluster rows or columns after the correlation values have been recalculated. Use the instrument panel for this.

The data used here are generated in a drug-screening experiment. 50 drugs at 5 different concentrations were tested against 21 pancreatic cancer cell lines. The heatmap shows drug-drug correlation. Like in the previous example, a click on a cell of the heatmap reveals the underlying statistics by demonstrating on the scatter plot (right upper corner) the values of avarage inhibition for all tested cell lines and the two selected drugs. By clicking on a data point one can select a cell line, and thus change the third plot (right bottom corner) that demonstrates individual inhibition percent values for the two selected drugs and the selected cell line.

The code for the example

A user of our framework can create apps with very little code. Bellow we show the part of the code that hasn't been explained in previous examples. You can find the complete code at the bottom of the page.

...
var heatmap = lc.heatmap()
  .value( function( rowId, colId ) {
    var selCL = [];
    if(scatterplot)
      selCL = scatterplot.get_marked()
        .filter( function( e ) { return e[0] == "layer0"} )
        .map( function( e ) { return e[1] } );
    if( selCL.length < 2 ) selCL = cellLines;

    var rowValues = selCL.map(function( e ) {
        return inputData.RTG[rowId][e].avInh;
      }),
      colValues = selCL.map(function( e ) {
        return inputData.RTG[colId][e].avInh;
      });
    return lc.pearsonCorr( rowValues, colValues );
   })
...
  .place( "#heatmap" );

var heatmapSlider = lc.colourSlider()
...
  .place( "#heatmap" );
...
var scatterplot = lc.scatter()
...
lc.xLine( "line", scatterplot )
...
  .markedUpdated( heatmap.updateCellColour )
  .place( "#scatterplot" );
...
var scatterSlider = lc.colourSlider()
...
  .place( "#scatterplot" );
...
var curveFit = lc.scatter( "points" )
...
lc.xLine( "lines", curveFit )
...
  .place( "#scatterplot" );
...

Click on all the yellow bubbles (), going from top to bottom, to see explanations of the code.


In this example all of the charts are defined almost the same way as in the previous example. So here, we omit most of the properties of all other charts. The full code you can find at the bottom of the page.

Here, our callback function that returns values for each cell will now use information from another chart (the correlation scatter plot). In this case the both charts can depending on each other.

get_marked returns an array with IDs of all currently marked elements. In case of a chart with layers the IDs are paired with the corresponding layer ID. So here we first filter for only those that belong to out scatter plot layer (leaving the diagonal line out) and then get the IDs of the points.

If none of points is marked or the user marked only one point and therefore it's impossible to calculate the correlation values, we will calculate correlations using all the cell lines.

Now in the selCL variable we have a list of all the selected cell lines and so we can use it instead of list of all the cell lines as it has been done previously. For each selected cell line, we get an array of all the scores against the two drugs and calculate Pearson correlation between the two.

Similar to the on_click property, the function provided to the markedUpated is called every time any element is selected or deselected. Here, we just update colour of all the cells of the heatmap.

In the selCL variable we will store a list of all the currently selected cell lines.

The first time this function is used will be when the heatmap is placed. An by that time the scatterplot will have not yet been defined. Therefore here we make sure that we use its methods only if the scatterplot exists. Otherwise we assume that there are no marked points.

Show/hide full code