A better sequence logo visualization
JavaScript HTML CSS
Latest commit 6c88e8a Jun 29, 2016 @eamonnmag eamonnmag committed on GitHub fixed typo in amino acid list
Closes #3
Permalink
Failed to load latest commit information.
assets
data
.gitignore
README.md
index.html

README.md


Last Updated 14 May 2014

Using the Sequence Logo

To use the sequence logo, include the 'assets' found in the repository in your code base. This means a link to css/popup.css, js/lib/*, and SequenceLogo.js. Then, to run, include this JavaScript to generate the sequence logo with 1 or more files.

    SequenceLogo.rendering.createSequenceLogo(
            {
                files: ["data/panel-a.txt", "data/panel-b.txt"],
                placement: "visualization",
                width: 1000,
                height: 500,
                glyph_strategy: "only_differences",
                height_algorithm: "frequency",
                type:"amino_acids",
                highlight_conserved: false,
                draw_consensus: true
            }
    );

Protein Support

Display by frequency rather than entropy

This example also shows the detail on demand view to give the actual number of samples found with a particular residue at that position.

DNA Support

Configurability

Highlight Conserved Regions

    SequenceLogo.rendering.createSequenceLogo(
            {
                files: ["data/panel-a.txt", "data/panel-b.txt"],
                placement: "visualization",
                width: 1000,
                height: 500,
                glyph_strategy: "only_differences",
                height_algorithm: "entropy",
                type:"amino_acids",
                highlight_conserved: true,
                draw_consensus: false
            }
    );

Show Consensus Sequence

    SequenceLogo.rendering.createSequenceLogo(
            {
                files: ["data/panel-a.txt", "data/panel-b.txt"],
                placement: "visualization",
                width: 1000,
                height: 500,
                glyph_strategy: "only_differences",
                height_algorithm: "entropy",
                type:"amino_acids",
                highlight_conserved: false,
                draw_consensus: true
            }
    );

Show Glyphs Only when Differences Occur

    SequenceLogo.rendering.createSequenceLogo(
            {
                files: ["data/panel-a.txt", "data/panel-b.txt"],
                placement: "visualization",
                width: 1000,
                height: 500,
                glyph_strategy: "only_differences", or "all"
                height_algorithm: "entropy",
                type:"amino_acids",
                highlight_conserved: false,
                draw_consensus: true
            }
    );

Cite this work

E. Maguire, P. Rocca-Serra, S.-A. Sansone, and M. Chen, Redesigning the sequence logo with glyph-based approaches to aid interpretation, In Proceedings of EuroVis 2014, Short Paper (2014)