Simple, Shareable, Online RNA Secondary Structure Diagrams

July 11th, 2015

Dublin, Ireland

Peter Kerpedjiev
Institute for Theoretical Chemistry (University of Vienna)

What's an RNA Secondary Structure Diagram?

DNA

  GTCGTAGAGCTTCTTCCTTTAGTGGGGTCATCGGCTTTACGCG
  CAGCATCTCGAAGAAGGAAATCACCCCAGTAGCCGAAATGCGA
                

RNA

  • What are we trying to show?
    • Ascii-formatted secondary structure
    • Secondary structure within tertiary structure
    • Complex visualizations involving RNA
  • Why would we make secondary structure diagrams?
    • To See
    • To Simplify
    • To Share
  • How can we make secondary structure diagrams?

What do this sequence and secondary structure represent?

  >2TRA_A
  UCCGUGAUAGUUUAAUGGUCAGAAUGGGCGCUUGUCGCGUGCCAGAUCGGGGUUCAAUUCCCCGUCGCGGAGC
  (((((((..(((..........))).(((((.......)))))....(((((.......))))))))))))..
                
2TRA secondary structure

Why do we make secondary structure diagrams?

2TRA secondary structure

To see patterns that are otherwise hard to perceive.

How can we make this image?

Using fornac:

                  <script type='text/javascript'>
                      var container = new FornaContainer("#rna_ss_2tra",
                          {'applyForce': false, 'allowPanningAndZooming': true});
                      var options = {'structure': '(((((((..(((.....[....))).(((((.......)))))....(((((.]....))))))))))))..', 
                      'sequence': 'uCCGUGAUAGUUuAAuGguCAGAAUGGGCGCuUgucgCGUGCCAGAUcGGGGuCAAUUCCCCGUCGCGGAgC'
                      };
                      container.addRNA(options.structure, options);
                  </script>
                

What does this represent?

1GID 3D Model 1GID secondary structure

Why do we make secondary structure diagrams?

1GID 3D Model 1GID secondary structure

To simplify information by removing extraneous or overwhelming detail.

How did we make the previous diagram?

Using forna - an online tool for generating RNA secondary structure diagrams

What can we learn from this image?

C/D box RNA

Why do we make secondary structure diagrams?

C/D box RNA

To share information with others in a concise, directed manner.

How did we make this?



                    var colorText = "0 0 0 0 0 0 0.6 0.5 0.8 0.6 0.4 0.8 0.8 0.6 0 0 0 0 0.6 0.5 0.8 0 0 0 0.95 0.95 0.1 0.95 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0.95 0.2 0.95 0.95 0 0 0 0 0 0.95 0.95 0.2 0.95 0.7 0 0 0 0 0 0 0 0 0 0 0 0 0 0.95 0.1 0.95 0.95 0 0.8 0.5 0.6 0.6 0.8 0.8 0.4 0.6 0 0 0 0.8 0.5 0.6 0 0 0 0 0 0"
                    var cs =  new ColorScheme();
                    container.addCustomColors(cs.colorsJson);
                    container.changeColorScheme('custom');
                    

More Complex Applications

Using d3.js and the rnaPlot layout.

Summary

Forna (http://rna.tbi.univie.ac.at/forna) is a web application which allows you to easily and interactively make effective secondary structure diagrams in order to see patterns, simplify all-atom 3D structures and share relevant information.

Features

  • Flexible force-directed layout
  • Interactive structure editing
  • 3D to 2D conversion and display
  • Simple coloring
  • Meta-data overlay (i.e. conservation, probing...)
  • Circular RNA support
  • Layout reuse and sharing using JSON objects
  • PNG/SVG/JSON export

Summary

Fornac (github.com/pkerpedjiev/fornac) is a container that can be easily instantiated to create zoomable, interactive RNA secondary structure diagrams

Features

  • Zooming
  • Force-directed interaction
  • Custom coloring

Summary

The rnaplot layout for d3.js, which allows for the integration of RNA structure in more complex visualizations.

Summary of the Summary

  • forna - Quickly and interactively draw an RNA diagram online
  • fornac - Embed a secondary structure diagram in a web page
  • rnaplot - Use rna diagrams in complex visualizations using d3.js

Huge thanks to

  • Stefan Hammer
    • Web Interface Development
    • Bug Fixes
    • General Knowledge and Advice with Anything Web Related
  • Ronny Lorenz
    • RNAplot interface
    • RNAfold integration
  • Stefan Badelt
    • Feature Suggestions
    • Testing and Proselytizing
  • Sarah Berkemer
    • The C/D-Box RNA Sequence, Structure and Conservation
  • Ivo Hofacker
    • Advice and Suggestions
  • Everybody at the TBI
    • Great work atomsphere
  • Ya'll
    • Listening and Feedback

Contact

Email: pkerp@tbi.univie.ac.at

Twitter: @pkerpedjiev

GitHub: github.com/pkerpedjiev