Early in 2012, Nuria Lopez-Bigas‘ Biomedical Genomics Group published a paper in Bioinformatics describing a very interesting tool for visualizing biological data in a spatial context called SVGmap. The basic idea behind SVGMap is (like most good ideas) quite straightforward – to plot numerical data on a pre-defined image to give biological context to the data in an easy-to-interpret visual form.
To do this, SVGmap takes as input an image in Scalable Vector Graphics (SVG) format where elements of the image are tagged with an identifier, plus a table of numerical data with values assigned to the same identifier as in the elements of the image. SVGMap then integrates these files using either a graphical user interface that runs in standard web browser or a command line interface application that runs in your terminal, allowing the user to display color-coded numerical data on the original image. The overall framework of SVGMap is shown below in an image taken from a post on the Biomedical Genomics Group blog.
We’ve been using SVGMap over the last year to visualize tissue-specific gene expression data in Drosophila melanogaster from the FlyAtlas project, which comes as one of the pre-configured “experiments” in the SVGMap web application.
More recently, we’ve been also using the source distribution of SVGMap to display information about the insertion preferences of transposable elements in a tissue-specific context, which as required installing and configuring a local instance of SVGMap and run it via the browser. The documentation for SVGMap is good enough to do this on your own, but it took a while for us to get a working instance the first time around. We ran into the same issues again the second time, so I thought I write up my notes for future reference and to help others get SVGMap up and running as fast as possible.
Install and Launch the SVGMap exectuable
Open a terminal and execute the following commands:
wget https://bitbucket.org/bbglab/svgmap/downloads/svgmap-server-1.5.0.zip unzip svgmap-server-1.5.0.zip cd svgmap-server sh run.sh &
This will install and launch the SVGMap executable which runs as a web application on your machine on port 8095.
Configure your “experiment”
The combination of an image and data source is considered an “experiment” in the SVGmap framework. Here we are going to use one of the SVG images (of the adult Dipteran body plan adapted from Creative Commons Licensed images in Wikipedia found here and here) provided by SVGmap plus a new data source from our transposable elment insertion site analysis as an example.
1) Type http://localhost:8095 into your web browser and click “Return”. You will now see a local version of SVGmap running on your machine which is identical to the version of SVGmap hosted at: http://bg.upf.edu/svgmap/ but with nodatasource installed.
2) Click “Browse” tab at top of page, which will take you to another page where you can “Select the experiment to browse”. Skip this for now, since we are still in the process of configuration.
3) Click “configure browser” in the upper right hand corner of the page. This will take you to the “Experiment configuration area”.
4) Log in with the following credentials and click “Accept”:
- Login: svgmap
- Password: svgmap
5) This will bring up an option to add a new source in the Experiment configuration area. Click “New Source”.
6) This will send you to the “Add new experiment page”, where you can enter name of the new Experiment (e.g. “Test Experiment”).
7) Next, select the test SVG file of the Dipteran body plan by clicking “Browse…” next to the “Search SVG file” box and navigating to the examples/Drosophila_expression/ directory in your svmap installation directory and selecting the file named “housefly_anatomy_bnw.svg”.
8) Next we need to load in the file containing the data you would like to visualize. The formatting specification of the datafile for SVGmap is documented here. In our simple test case, we only want to visualize a single set of numerical values over different Dipteran tissues using our test data file which you can obtain as follows:
To load this test datafile, click “Browse…” next to the “Data file” dialogue box, navigate to the location of the test data file you just downloaded and select it.
9) Finally, click “Save and configure.”
10) This will send you to the “Edit experiment configuration” page, where you can select how to display your numerical data. In our test case, select “ratio” for the “Image option values” (it’s the only option, but it needs to be selected) and “linear two sided” for the Scale option. Make sure image radio button is selected, then click “Accept”.
Visualize your Data
Your new experiment has now been loaded and configured and you are ready to browse your data in the context of your image.
1) Click the “Browse” tab at top of page.
2) Select the experiment you just created from drop down menu (e.g. “Test Experiment”) and click “view”.
3) Enter a “Keyword(probe)” for the data you want to visualize, which in our case is called “TE” and click “Search”. This should bring up an image of a fly, color-coded according to your data with a scale bar below indicating the color associated with a particular numerical value of your data.
4) You can now adjust the range and color code for your scale by clicking the “edit” button next to “linear two sided scale”. For example, if you want a symmetrical scale that brackets the full range of our test TE data, click the radio button for “” and set Min to -0.3 and Max to 0.3, scroll down to the bottom of the pop-up box and click “OK”. Then click “Search” again to update your image, and you should see something that looks like the following screenshot:
5) Finally, you can export the image by clicking “Export to file” in the bottom right hand corner of the page. This will export at zipfile of the entire experiment, including the original input SVG file and a slightly modified version of you data file, plus the labeled SVG file and scale bar as a separate JPG file.
There you have it. You’ve now successfully installed SVGmap and configured a customized experiment for visualizing biological data on a SVG image, in this case the Dipteran adult body plan. In the next post, I’ll give a run through of how to use SVGmap at the command line, and introduce a stripped down R implementation of the SVGmap approach, called FlyFig, we have developed in the Bergman Lab to visualize numerical data on the Dipteran body plan.