Creating heatmaps using SWT XY Graph

I just discovered a brilliant library SWT XYGraph to create heatmaps. The following image is an example of a chromatogram heatmap. Mass spectrometric chromatograms are three-dimensional data sets containing scans (Y), mass fragments (X) and intensities (Z).

Chromatogram Heatmap

This is a short example of how to use the SWT XYGraph library. Get the libraries and include them in your project:

org.csstudio.swt.widgets_2.0.1.201207141617.jar
org.csstudio.swt.xygraph_2.0.1.201207141617.jar

The libraries are published under the EPL v1.0 license.

This is the code I’ve used to create a chromatogram heatmap:

LightweightSystem lightweightSystem = new LightweightSystem(canvas);
lightweightSystem.getRootFigure().setBackgroundColor(display.getSystemColor(SWT.COLOR_WHITE));
IntensityGraphFigure intensityGraphFigure = new IntensityGraphFigure();
intensityGraphFigure.setForegroundColor(display.getSystemColor(SWT.COLOR_BLACK));
intensityGraphFigure.getXAxis().setTitle("m/z");
intensityGraphFigure.getYAxis().setTitle("scan");
...
int dataHeight = stopScan - startScan + 1; // y -> scans
int dataWidth = stopIon - startIon + 1; // x -> m/z values
/**
 * Parse the data
 */
float maxIntensity = 0;
float[] heatmapData = new float[dataWidth * dataHeight * 2];
/**
 * Y-Axis: Scans
 */
for(int scan = startScan; scan <= stopScan; scan++) {
	int xScan = scan - startScan; // xScan is zero based, scan maybe not
	IExtractedIonSignal extractedIonSignal;
	try {
		extractedIonSignal = extractedIonSignals.getExtractedIonSignal(scan);
		for(int ion = startIon; ion <= stopIon; ion++) {
			/**
			 * X-Axis: m/z intensities
			 */
			int xIon = ion - startIon; // xIon is zero based, ion maybe not
			float abundance = extractedIonSignal.getAbundance(ion);
			if(abundance > maxIntensity) {
				maxIntensity = abundance;
			}
			heatmapData[xScan * dataWidth + xIon] = abundance;
		}
	} catch(NoExtractedIonSignalStoredException e) {
		logger.warn(e);
	}
}
/**
 * Set the ranges and min/max values.
 */
intensityGraphFigure.getXAxis().setRange(new Range(startIon, stopIon));
intensityGraphFigure.getYAxis().setRange(new Range(stopScan, startScan));
intensityGraphFigure.setMin(0); // Intensity
intensityGraphFigure.setMax(maxIntensity / 1000.0d); // Intensity
intensityGraphFigure.setDataHeight(dataHeight);
intensityGraphFigure.setDataWidth(dataWidth);
intensityGraphFigure.setColorMap(new ColorMap(PredefinedColorMap.JET, true, true));
/**
 * Set the heatmap data
 */
lightweightSystem.setContents(intensityGraphFigure);
intensityGraphFigure.setDataArray(heatmapData);

The chromatogram heatmap feature will be available in the next OpenChrom release, version 0.7.0 “Nernst”, scheduled for end of October 2012.

EclipseCon Europe 2012

Advertisements

About Philip Wenig

Founder of OpenChrom
This entry was posted in Uncategorized. Bookmark the permalink.

3 Responses to Creating heatmaps using SWT XY Graph

  1. Mic says:

    Hi,
    Do you know how to do it with SWTChart ( http://www.swtchart.org )?

    Thank you in advance.

    • eselmeister says:

      Hi Mic,

      OpenChrom utilizes also SWTChart to draw chromatograms and mass spectra, a marvelous library. But to create heatmaps, SWT XY Graph seems to be more appropriate.

  2. Steve says:

    I have not found the Intensity Graph example distributed with the swt-xy-graph project (now part of Nebula Visualization Widgets) nor its Javadoc to be very useful in determining the format of the data array passed to the graph. You have successfully used this graph type. Could you provide your understanding of the array format and any normalization required before passing the data to the graph?

    Thank you for providing this example.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s