# Sequence Map
Maps that have a sequence provided have two main benefits: 1) when zoomed in far enough
you will be able to see the sequence on the map; and 2) additional tracks can be easily
created with plots (e.g. GC Skew, GC Content) or features (e.g. start/stop codons, ORFs)
extracted directly from the sequence.
## Create a new [Viewer](../api/Viewer.html) ##
In this example we will provide a random sequence using the [Sequence#random](../api/Sequence.html#random) method.
```js
// The first argument is the id of the container that will hold the viewer.
cgv = new CGV.Viewer('#my-viewer', {
height: 500,
width: 500,
sequence: {
// Provide the sequence.
seq: CGV.Sequence.random(10000)
}
});
```
## Create a [Track](../api/Track.html) with ORFs extracted from the sequence ##
```js
cgv.addTracks({
// Name for the track.
name: 'ORFs',
// Draw the features separated into 1 or more slots.
// Options:
// - 'none': 1 slot for all features.
// - 'strand': 2 slots (one for each strand).
// - 'readingFrame: 6 slots (one for each reading frame).
separateFeaturesBy: 'readingFrame',
// Where to draw the track in relation to the backbone.
// Options: 'inside', 'outside', 'both'.
position: 'both',
// The data* properties describe what features or plot will be in the track.
// Type of track. Options: 'feature', 'plot'
// The type is set automatically when extracting from the sequence.
dataType: 'feature',
// Methods used to extract the features/plot. Options:
// - 'source' : the source property of the features/plots will be used for selection
// - 'sequence' : the features/plot will be generated from the sequence
dataMethod: 'sequence',
// Key values used to extract the features/plot.
// For 'source', the dataKeys can be a single value or an array of values.
// For 'sequence', the dataKeys can be one of the following:
// 'orfs', 'start-stop-codons', 'gc-skew', 'gc-content'
// e.g. In this example, the ORF features will be extracted from the sequence.
dataKeys: 'orfs',
// Additional options may be passed to the data extractor
// The following are the default options
dataOptions: {
start: 'ATG',
stop: 'TAA,TAG,TGA',
minORFLength: 100
}
});
```
## Create a [Track](../api/Track.html) with a GC Skew plot extracted from the sequence ##
```js
cgv.addTracks({
name: 'GC Skew',
position: 'inside',
dataType: 'feature',
dataMethod: 'sequence',
// e.g. In this example, GC Skew plot will be extracted from the sequence.
dataKeys: 'gc-skew',
// By default, the step and window values are calculated based on the sequence length,
// but they can be overridden here.
dataOptions: {
step: 1,
window: 100
}
});
```
## Create a [Track](../api/Track.html) with a GC Content plot extracted from the sequence ##
```js
cgv.addTracks({
name: 'GC Content',
position: 'inside',
dataType: 'feature',
dataMethod: 'sequence',
// e.g. In this example, GC Content plot will be extracted from the sequence.
dataKeys: 'gc-content',
// By default, the step and window values are calculated based on the sequence length,
// but they can be overridden here.
dataOptions: {
step: 1,
window: 100
}
});
```
## TODO
* Have image of map and parts (e.g. track, slot, caption, ruler, etc)
## Draw the Map ##
```js
cgv.draw();
```
The resulting Viewer (id='my-viewer') is below. You can move the map around by clicking and dragging.
You can zoom, using your mouse scroll wheel. The Legend colors can be changed by clicking on the swatches in the Legend.
If you want to play around with the viewer object, open your browser web inspector. In the console, you can access the viewer as *cgv*.