We'll start with a blank page. Create an HTML document that looks like the below and save it somewhere in a folder. The AngularPlasmid script should also
be in the same directory as the HTML file. Start by declaring the plasmid using the
One of the important properties of a plasmid is indicating how long the plasmid is, in other words, the number of nucleotides (A, C, T, G) that make up the whole plasmid. When you create features for a plasmid, those features will use the plasmid's sequence length to display things appropriately.
If you don't provide an explicit width or a height, the plasmid automatically assumes a height and width of 300px. In this step, you won't see anything in the result because there isn't any styling information associated with the plasmid yet. The plasmid is the drawing space that all of the features will go into.
To make it easier to see, let's start creating some styles so we can see each of the features as they're being made, in this case, a solid border around the plasmid. Normally, we'd put this into an external stylesheet file, but for the sake of example, we'll put style information in the main page for now.
<plasmidtrack> represents a circular backbone that will hold other features for the plamid.
<plasmid>, you can have multiple
<plasmidtrack> entities. All components that
go within a
<plasmidtrack> inherit certain features of the the track, specifically, it's width. We'll see how
shortly. For now, let's declare a track and style it appropriately. If no radius or width are provided, the track defaults to 100
and 25 pixels respectively.
Also note that because AngularPlasmid is using SVG, SVG styles should be indicated as demonstrated below. The SVG styles that you'll use most
stroke. In this case, we're styling the track with a light gray background and a darker gray border.
<trackscale> can be used to decorate a track with tickmarks and labels. By using the
<trackscale> will use the plasmid's sequence length to determine how many ticks marks it should create. Any number of
scales can be added to a track and styled individually.
Let's add two scales, one for the minor scale, which should be represented as a set of tick marks after every 10 nucleotides. Let's also add a major scale, using red tickmarks, with an interval of 50, and showing text lables.
We can go even further, by adding another major scale to the interior of the track using dark gray tickmarks and another property of a scale called
direction. When set to
"in", the tick marks and labels will appear on the inside of the track.
<trackmarker> can be added to a
<plasmidtrack> to designate some specific feature on the plasmid.
<trackmarker> inherits display properties from their corresponding track and work with the sequence provided in the parent
Let's add a feature that starts at position 50 and goes until position 250 of the plasmid.
A marker can have a number of
<markerlabel> elements which can be styled independently relative to the
element it is contained within. There are number of options for lables, including positional attributes and additional decorators (ie. line segments).
Let's add a marker label that follows the path of the marker in additional to two markers that are located both inside and outside the track. Positional adjustment and
alignment of labels are also supported through different properties. In the below, the
vadjust property indicates some vertical adjustment of the
label relative to its marker.