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()
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:
var chart = rnaPlot()
.width(svgWidth)
.height(svgHeight)
.labelInterval(10);
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)
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
cat src/*.js > js/d3-rnaplot.js