Lines and Colour

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

Here, we show how to draw line plots. Let's add a diogonal line to the upper scatter plot and fitted curves for both drugs to the bottom one. We also use colour to indicate the samples, where curvefitting wasn't succesfull. Red dots on the correlation scatterplots show cell lines with bad fitting for at least one of the two selected drugs.

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()
...
  .place( "#heatmap" );

var get_curve = function( drug, cellLine, x ){
  var max = inputData.RTG[drug][cellLine].max,
    min = inputData.RTG[drug][cellLine].min,
    IC50 = inputData.RTG[drug][cellLine].IC50,
    slope = inputData.RTG[drug][cellLine].Slope,
    minConc = inputData.RTG[drug][cellLine].minConc;

  return min + (max - min)/ 
    (1 + Math.pow(10, -(x - Math.log10(IC50/minConc)) * slope));
}

var scatterplot = lc.scatter()
...
  .aspectRatio( 1 )
  .colourValue( function ( k ) {
    var res = 0;
    for( var x = 0; x < 5; x++ )
      for( var l = 0; l < 2; l++ )
        res += Math.pow( get_curve( selDrugs[l], k, x ) - 
                    inputData.RTG[selDrugs[l]][k]["D" + (x + 1)], 2 );
    res = Math.sqrt( res );
    return res;
  })
  .palette( ["green", "yellow","red"] )
  .colourDomain([0, 30]);
lc.xLine("line", scatterplot)
  .lineFun( function( x ){
    return x;
  })
  .place( "#scatterplot" );

var curveFit = lc.scatter( "points" )
...
  .nelements( 10 )
  .x( function( k ) {
    return k % 5;
  } )
  .y( function( k ) {
    var ind = Math.floor( k / 5 );
    return inputData.RTG[selDrugs[ind]][selCellLine]["D" + (k % 5 + 1)];
  })
  .colour( function( k ) {
    return k > 4 ? "red" : "blue";
  } );
lc.xLine("lines", curveFit)
  .nelements(2)
  .lineFun( function( x, k ) {
    return get_curve( selDrugs[k], selCellLine, x );
  })
  .colour(function( k ){
    return k == 0 ? "blue" : "red";
  })
  .place( "#scatterplot" );
...

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

Some lines of code, that have been already described in the previous examples, were omitted for the sake of simplicity. At the bottom of the page you can find the complete code.

The heatmap is set exactly as it was done in the previous example. So here, all its properties were omitted for the sake of simplisity

In this dataset for each sample we have all the parameters of the fitted sigmoid curve: the lower asymptote (min), the upper asymptote (max), the growth rate (slope) and the inflection point (IC50). Using these parameters, here we define the get_curve function that returns the value of the fitted curve at point x. All drugs were tested at five different concentrations, each 10 times higher than the previous one. On the scatter plot x-values are numbers from 0 to 4, which correspond to log10 of each concentration divided by minimal tested concentration.

Now both scatter plots are parts of charts that have several layers. Note, that setting an ID for a layer is optional. For instance, the ID of scatter plot layer on the first plot will be automatically set to layer0

Here, we fix the aspect ratio for x and y axes to 1.

Besides defining colours for each point directly (using colour property), one can set colours by providing a value for each data point, so that points with the same colour value will have the same colour. Numeric colour values will generate a continuous colour scale, while strings will define a categorical colour scale.

Here, for each point we calculate the squared root of sum of squared residuals for the selected cell line and both selected drug and use this value to define colours.

The default set of colours for a continuous colour scale is d3.schemeSpectral, which goes from red to blue through yellow. You can change that, setting the palette property to any other d3.interpolator or any d3.scale that will transform some numeric range or a set of strings into a set of colours. Another option is to provide this property with an array of colours as it is shown here. This array will be used as a range for the colourScale. We want "bad" examples to be coloured red, "nice" to be green, suspicious - yellow.

By default the domain of the colourScale is defined as the range that encompasses all the colour values of the data points. So even if for a certain pair of drugs there is no badly fitted samples, some of the dots still will be coloured red. To address this we can manually defined the domain that will be fixed for all drugs. Now all the points with colour values close to zero will be green, while all with values around 30 and higher - red.

xLine is another basic type of plots that are implemented in the linked-charts library. It can display one or several lines, defined as y = f(x) functions. Scatter plots and lines can not be put on one layer, so if you want to have them both on one chart, you need create several layers.

Here, we add a diagonal line to the plot.

Here, we add add fitted curves for both drugs to the plot.

Each line in xLine charts should be defined as y = f(x) function. This is done by setting lineFun property. This should be a function with two arguements: the first one is an x value, the second is an ID of the line. The function should return the corresponding y value.

Here, we have only one line y = x and thus the second argument is omitted.

The place function inserts the object into the web page. The argument is a CSS selector, here selecting the table elements that were marked with id attributes as the places to take up the charts.

Each plot is placed into a separate div element, so one can place several charts into one element. Here, both scatterplots are placed into a single table cell.

Here, place is used after all the layers are defined. This is the recomended way to do it. Another option is to use the placeLayer method for each layer added after place has been called. Note, that calling place function twice will result in creating multiple instances.

Here, we want to make the same scatter with individual values of inhibition for both selected drugs and all the tested concentrations as in the previous example, but putting all the points on a single layer. So the number of points for each case will be 10.

Number of lines is set by the same property as number of points in scatter plots. And in the same manner, instead of setting the number of lines, one can define a set of all IDs via elementIds property.

Here, we add two curves (for both selected drugs) sumultaniously.

In the previous example, points, corresponding to each drug, were added separately, using two layers. Here, we show, how to do it in one layer. Now we have 10 points with IDs from 0 to 9. The first five (with IDs from 0 to 4) correspond to the first selected drug, while the second five - to the second selected drug. So we use remainder from devision of the index k by 5 as x value, and the floored value of k / 5 as an indicator, which of the two selected drugs we are looking at.

In the previous example we used the colour property to set one colour for all the points in the layer. Otherwise, the colour property can be defined by a callback function that takes an ID of the point returns colour (as name, RGB or HEX value). Note, that setting colours directly via colour option overrides colourValue and palette properties.

Here, if the ID k is greater than 4, the correspoding dot will be red, otherwise - blue.

Here, we use the previously defined function get_curve and use the current values of the global variables selDrugs and selCellLine to show the right curves.

Here, we just make the first line blue and the other - red.

Show/hide full code

Show/hide full code

<script src="linked-charts.min.js"></script> 
<link rel="stylesheet" type="text/css" href="linked-charts.css"> 

<script>
  inputData = [{"CellLine":"Pa16C","Drug":"Galunisertib","minConc":1, ...}, ... ];
</script>

<table><tr>
  <td id="heatmap" valign="top"></td>
  <td id="scatterplot" valign="top"></td>
</tr></table>

<script>
inputData = lc.separateBy(inputData, ["screen", "Drug", "CellLine"]);
var drugs = Object.keys(inputData.RTG),
  cellLines = Object.keys(inputData.RTG[drugs[0]]);

var selDrugs = [drugs[0], drugs[1]],
  selCellLine = cellLines[0];

var heatmap = lc.heatmap()
  .rowIds( drugs )
  .colIds( drugs )
  .colourDomain( [ -1, 1 ] )
  .palette( d3.interpolateRdBu )
  .margins({top: 50, left: 50, right: 100, bottom: 100})
  .value( function( rowId, colId ) {
    var rowValues = cellLines.map(function(e) {
        return inputData.RTG[rowId][e].avInh;
      }),
      colValues = cellLines.map(function(e) {
        return inputData.RTG[colId][e].avInh;
      });
    return lc.pearsonCorr( rowValues, colValues );
   })
  .cluster( "Row" )
  .cluster( "Col" )
  .on_click( function( rowId, colId ) {
     selDrugs = [rowId, colId];
     scatterplot.update();
     curveFit.update();
  })
  .place( "#heatmap" );

var get_curve = function( drug, cellLine, x ){
  var max = inputData.RTG[drug][cellLine].max,
    min = inputData.RTG[drug][cellLine].min,
    IC50 = inputData.RTG[drug][cellLine].IC50,
    slope = inputData.RTG[drug][cellLine].Slope,
    minConc = inputData.RTG[drug][cellLine].minConc;

  return min + (max - min)/ 
    (1 + Math.pow(10, -(x - Math.log10(IC50/minConc)) * slope));
}

var scatterplot = lc.scatter()
  .width( 300 )
  .height( 300 )
  .elementIds( cellLines )
  .x( function( k ) { return inputData.RTG[selDrugs[0]][k].avInh } )
  .y( function( k ) { return inputData.RTG[selDrugs[1]][k].avInh } )
  .on_click( function( k ) {
    selCellLine = k;
    curveFit.update();
  })
  .aspectRatio( 1 )
  .colourValue( function ( k ) {
    var res = 0;
    for( var x = 0; x < 5; x++ )
      for( var l = 0; l < 2; l++ )
        res += Math.pow( get_curve( selDrugs[l], k, x ) - 
                    inputData.RTG[selDrugs[l]][k]["D" + (x + 1)], 2 );
    res = Math.sqrt( res );
    return res;
  })
  .palette( ["green", "yellow","red"] )
  .colourDomain([0, 30]);
lc.xLine("line", scatterplot)
  .lineFun( function( x ){
    return x;
  })
  .place( "#scatterplot" );

var curveFit = lc.scatter( "points" )
  .width( 300 )
  .height( 200 )
  .nelements( 10 )
  .x( function( k ) {
    return k % 5;
  } )
  .y( function( k ) {
    var ind = Math.floor( k / 5 );
    return inputData.RTG[selDrugs[ind]][selCellLine]["D" + (k % 5 + 1)];
  })
  .colour( function( k ) {
    return k > 4 ? "red" : "blue";
  } );
lc.xLine("lines", curveFit)
  .nelements(2)
  .lineFun( function( x, k ) {
    return get_curve( selDrugs[k], selCellLine, x );
  })
  .colour(function( k ){
    return k == 0 ? "blue" : "red";
  })
  .place( "#scatterplot" );
</script>