Usage - Basic

Step 1 - Declare the plasmid

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 <plasmid> tag.

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.

{{code.usage1}}

Step 2 - Add some styling

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.

{{code.usage2}}

Step 3 - Add a track

A <plasmidtrack> represents a circular backbone that will hold other features for the plamid. Within a <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 often are fill and stroke. In this case, we're styling the track with a light gray background and a darker gray border.

{{code.usage3}}

Step 4 - Add some scales

A <trackscale> can be used to decorate a track with tickmarks and labels. By using the <interval> property, a <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.

{{code.usage4}}

Step 5 - Add some features

A <trackmarker> can be added to a <plasmidtrack> to designate some specific feature on the plasmid. A <trackmarker> inherits display properties from their corresponding track and work with the sequence provided in the parent <plasmid> element.

Let's add a feature that starts at position 50 and goes until position 250 of the plasmid.

{{code.usage5}}

Step 6 - Add some labels

A marker can have a number of <markerlabel> elements which can be styled independently relative to the <trackmarker> 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.

{{code.usage6}}