Home | Help
See the help page

Your Model Logo

Alphabet
AA
Number of Sequences
8
Length
161
Created
Mon Jul 1 10:52:15 2013

Try another search

Alignment Processing
Fragment Handling
Letter Height

Download

download .png
PNG file

A static image of the logo.

download .svg
SVG file

A vector image of the logo.

download .hmm
HMM

The HMM file used to calculate this logo.

download .json
JSON

Raw data for the logo formatted in JavaScript Object Notation.

download tab delimited
Tabular Text

Raw data for the logo in a tab delimited text file.

Using the logo elsewhere

  • Step 1 Download the javascript and css.

  • Step 2 Get a copy of jQuery (version 1.8+)

    The best place to get this is from the jQuery website. We have tested with version 1.8.2 but newer versions should also work.

  • Step 3 Get the JSON for your logo.

    If you have already run the search, then you should be able to download the JSON from the Download section above.

  • Step 4 Insert the following markup into your page.

    /* set css rules for styling the logo */
<link rel="stylesheet" type="text/css" href="hmm_logo.min.css">

/* make sure jQuery has been loaded */
<script src="jquery-1.8.2.min.js"></script>

/* load in the hmm_logo code */
<script src="hmm_logo.min.js"></script>

/* At the location where you want the logo to appear in your page */
<div id="logo" class="logo" data-logo="YOUR LOGO JSON"></div>

/* finally run the call to render the logo on page load */
<script>
  $(document).ready(function () {
    $('#logo').hmm_logo();
  });
</script>

Options

There are a number of ways to change the initial display of the logo. These options are passed to the logo code when calling the hmm_logo() function.

Name Description
column_width

The maximum width of each column in the logo when zoom is set to 1.

$('#logo').hmm_logo({column_width: '30px'});
Default: 34px
Range: 30px - 40px
height_toggle

Enables or disables the "Toggle Scale" button, which allows one to toggle between maximum observed and maximum theoretical scales.

$('#logo').hmm_logo({height_toggle: true});
Default: null
zoom

Sets the initial zoom level that the logo will use.

$('#logo').hmm_logo({zoom: 1});
Default: 0.4
Range: 0.1 - 1
column_info

Passing this option enables the onclick display of information for individual columns. If specified, this will tell the code where to display a table of the scores for each residue in a selected column. The value passed should be the id of the element where the table is to be inserted.

$('#logo').hmm_logo({column_info: "#col_info"});
Default: null

See the help pages for more information.

  1. Thanks for checking out the example logo...

    We have put together a tour that will guide you through all the information provided by a logo and the various ways the logo can be manipulated.

    To end the tour hit the 'x' at the top of any popup or the [esc] key.

  2. This is an HMM logo.

    It can be scrolled by holding down your mouse button over it and dragging from side to side.

  3. Model Position

    The position in the model.

  4. Information Content

    Talk about the numbers.

  5. Zoom

    The default zoom level of the logo is set to try and fit as many columns on the screen at once whilst maintaining legibility of the letters. This zoom level can be adjusted to fit more columns on the page which will cause the letters to become color blocks. Zooming in the other direction will expand the columns making the residue letters larger.

    Double clicking on the logo will cause the zoom level to change between maximum width and a very narrow width. It will attempt to remain centered around the column under the mouse pointer when space allows.

  6. Jump to a specific column

    Useful for large logos. If you are interested in a specific column, you can enter the column number here and the logo will scroll until it is as close to centered on the page as it can be. Try looking for column 75.

  7. Changing the scale

    In order to allow for comparisons between logos, we have created a button to toggle between the observed maximum score and the theoretical maximum score for a logo. When compairing logos the theoretical maximum score will render the logos at the same scale. The observed maximum score is useful when you want to maximise the amount of information in an individual logo.

  8. Meta Data

    This information is pulled from the hmm that we generate before building the logo. It will tell you about the length, number and type of sequences.

  9. Download the data.

    We have provided a number of different ways to download a logo and the information used to generate it.

  10. PNG Download

    This is a static version of the logo in PNG format. It is set to show the letters at the maximum width and the information content is scaled to the theoretical maximum.

  11. SVG Download

    This is a vector version of the logo in SVG format. It is set to show the letters at the maximum width and the information content is scaled to the theoretical maximum.

  12. HMM Download

    This is the HMM file we use to generate the logo. It is only available for model logos.

  13. JSON Download

    This json object can be used to generate the dynamic logo via javascript. It is also a convenient way to get the data if you wish to parse it with some custom analysis software.

  14. Tabular Text Download

    If you want to see the data in a tab delimited table that can be imported into Excel, then you should download this version of the logo data.

  15. Would you like to have the logo on your own site?

    This section will show you how to use the logo in other sites or export it for publications.

  16. That's It.

    Thanks for taking the tour. You can use this form to generate your first logo from a sequence alignment or a profile HMM.

    Alternatively, head over to the home page and start there.