Labels and legend

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 wfurther fine tune our plots, to make them more easy to read. We add titles to axes and plots, and rename axes ticks. One could have already noticed that setting the colourValue property automatically generates a legend. Here, we will show how to manipulate this legend and how to create them manually.

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()
...
  .title( "Drug-drug correlation" )
  .palette( function( val ) { return d3.interpolateRdBu( 1 - val ); } )
  .place( "#heatmap" );
...

var scatterplot = lc.scatter()
...
  .axisTitleX(function() {return selDrugs[0]})
  .axisTitleY(function() {return selDrugs[1]})
  .title( "Average inhibition" )
  .colourLegendTitle( "Total curvefitting error" )
  .domainX([-10, 50])
  .domainY([-10, 50]);
lc.xLine( "line", scatterplot )
...
  .place( "#scatterplot" );
var curveFit = lc.scatter( "points" )
...
  .title(function() {return selCellLine;})
  .axisTitleX( "Drug concentration" )
  .axisTitleY( "Inhibition" )
  .domainY([-25, 100])
  .ticksX(function() {
    var ticks = [d3.range(5),
      d3.range(5).map(function(e) {
        return inputData.RTG[selDrugs[0]][selCellLine].minConc *
                Math.pow(10, e)
      }),
      d3.range(5).map(function(e) {
        return inputData.RTG[selDrugs[1]][selCellLine].minConc *
                Math.pow(10, e)
      })];
    ticks.colour = ["blue", "red"];
    return ticks;
  });
lc.xLine("lines", curveFit)
...
  .place( "#scatterplot" );
curveFit.legend.add_block(function() {return [selDrugs, ["blue", "red"]];},
                      "colour", "Drugs");
...

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


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

Here, we define a title of the plot. In this example, two plots has fixed titles, while the title of the curvefitting plot changes, indicating what cell line has been selected. So, as any interactively changing property, this title as defined via a callback function, otherwise only the current value of the selCellLine variable will be saved as the title.

As a palette for heatmaps one can use not only d3.interpolators, but any other function that takes values from 0 to 1 as arguments and returns colours. So here we define our own function based on a d3.interpolator to make our heatmap more traditionally looking. Now we want high correlations to be shown as red and low correlations to be blue.

Initializing and placing a all the scatter plots with all their layers.

Here, we set titles for X and Y axes.

By default, the title of the legend that is generated after setting the colourValue property is colour_layerID. Here, we change the default title into a more meaningful one.

Here, we fix domains for X and Y axes. By default, domains are defined to fit the current data, but if we want to compare different sets of data, it may be useful to fix scales to encompass all available data. Note, that fixing the domain doesn't prohibit zooming in and out.

Here, we set the tick labels to be used instead of default ones, generated by d3.axis. The value passed to this property should be a set of arrays, where the first array should be a set of ticks to be displayed and all others are the labels to use for these values.

Here, we define a variable to set the ticks. In this example, we used integer values from 0 to 4 to as indeces for the five tested concentrations. Now we want to replace this values with the actual concentrations. We know that all the drugs were tested at five concentrations, each 10 times higher than the previous one. But the minimal tested concentration may differ from drug to drug, so it's not enough to have just one set of labels. The linked-charts library supports having multiple sets of lables (try to find a pair of drugs with different concentrations to see how it works).

If we have several sets of labels, we would like to have an easy way to indicate what drug this label corresponds to. To this end, here we are adding an optional colour property to the ticks object. This should be an array of colours. Now labels for the first drug are blue, and for the second one are red.

For each chart a legend is stored in as chart.legend. By default it's empty. One can add an unlimited number of blocks to be displayed using the add_block method of the legend object. This method has 4 arguments. Alternatively, one may use addLegendBlock method of a selected layer. This method is almost identical to the add_block of the legend, but with a predefined optional argument layer.

scale defines the correspondence between colour, size or shape of objects and names or numerical values. This argument can be a d3.scale or it can be just two arrays with, for example, names and corresponding colours, as it is demonstrated here.

type is a type of the scale. The supported types are "colour", "size", "symbol", "dash".

name is a title and an ID for the legend block. Since this is used as the ID, all the titles should be unique. You still can have non-unique title if you set them using the title property of the legend.

layer is an optional parameter to bind a block with a specific layer. A layer-specific block is updated with the corresponding layer and is automatically removed, when the layer is removed.

Show/hide full code