# 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 CGView.Viewer('#my-viewer', {
height: 500,
width: 500,
sequence: {
// Provide the sequence.
seq: CGView.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
}
});
```
## Draw the Map ##
```js
cgv.draw();
```
The Viewer (id="my-viewer") is shown below.
You can move the map by clicking and dragging, and zoom using your mouse scroll wheel.
Legend colors can be changed by clicking the swatches in the Legend.
If you’d like to experiment with the viewer object, open your browser’s web inspector.
In the console, the viewer is available as *cgv*.