No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
doc/img
examples
js
src
Makefile
README.md
index.html

README.md

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