Skip to content

Latest commit

 

History

History
100 lines (70 loc) · 2.24 KB

README.md

File metadata and controls

100 lines (70 loc) · 2.24 KB
Raw

RNAplot

This package is deprecated and will not be updated!

However, development is continued here: https://github.com/ViennaRNA/fornac

Import the newest version of RNAplot from fornac like this:

var chart = fornac.rnaPlot()

Usage

For a live example, simply load the index.html file.

Otherwise, the following code will display an rna diagram of the structure ((..((....)).(((....))).)).

<!DOCTYPE html>
<meta charset="utf-8">
 <link rel='stylesheet' type='text/css' href='css/d3-rnaplot.css' />

This is an RNA container.
<div id='rna_ss'> </div>
This after the RNA container.

<script type='text/javascript' src='js/d3.js'></script>
<script type='text/javascript' src='js/d3-rnaplot.js'></script>
<script type='text/javascript'>

var svgWidth = 200;
var svgHeight = 200;

var rna1 = {'structure': '((..((....)).(((....))).))',
            'sequence': 'CGCUUCAUAUAAUCCUAAUGACCUAU'
};

var chart = rnaPlot()
.width(svgWidth)
.height(svgHeight)

var svg = d3.select('#rna_ss')
.append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight)


svg.selectAll('.rna')
.data([rna1])
.enter()
.append('g')
.classed('rna', true)
.call(chart);
</script>

Like this:

Screenshot of a simple rna-plot

Adding nucleotide number labels

var chart = rnaPlot()
.width(svgWidth)
.height(svgHeight)
.labelInterval(10);

Showing nucleotide numbers

Change the starting nucleotide number

Specify the number of the first nucleotide so that the labelling is changed accordingly.

var chart = rnaPlot()
.width(svgWidth)
.height(svgHeight)
.startNucleotideNumber(7)
.labelInterval(5)

Changed starting nucleotide number

Create a treemap with embedded RNA structures

We can use the RNA layout and embed it in different places, such as a treemap. The code for this example can be found under examples/rna-treemap.html

Treemap with embedded RNAs

Stupid Compiling

cat src/*.js > js/d3-rnaplot.js