# Basic Map CGView Maps consist of [features](../api/Feature.html) and/or [plots](../api/Plot.html). How the features and plots are organized on the map is through the viewer [Layout](../api/Layout.html). The [Layout](../api/Layout.html) consists of one or more [Tracks](../api/Track.html) where each Track describes which features/plots it consists of and how they should be displayed. Tracks are drawn as one or more [Slots](../api/Slot.html) on the map. Each Slot represents a single ring on the map. For example a Track can draw Features separated by strand as two Slots or combined as a single Slot. ## Create a new [Viewer](../api/Viewer.html) ## The *Viewer* is the main object in CGView.js. While many options can be provided when creating the viewer, the most important is the sequence option. For the sequence, you can provide the length or the sequence itself. In this example, we will simply use the length. See the [Sequence Map](tutorial-sequence.html) tutorial to see the benefits of using the sequence. ```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: { // The length of the sequence length: 1000 } }); ``` ## Create a [Feature](../api/Feature.html) on the forward strand. ## ```js // The addFeatures() method can accept an array of objects or a single object of data // that will be used to initialize new Features. cgv.addFeatures({ // Feature type. Used to determine how the feature is drawn (e.g. arrow or arc). // If a FeatureType with this name does not exist, a new FeatureType will be // created with this name and the default settings // (e.g. the decoration will be an 'arc'). type: 'CDS', // Name of the feature. name: 'Feature', // Beginning of the feature in bp. Must be <= stop. start: 100, // End of the feature in bp. Must be >= start. stop: 250, // Which strand is the feature on. 1: forward strand; -1: reverse strand. strand: 1, // Used to group features into a track. source: 'genome-features', // Name of LegendItem to associate with the feature. // If a LegendItem with this text does not exist, a new LegendItem will be created // with this text and the default settings (e.g. the color will be 'black'). legend: 'CDS' }); ``` ## Create a [Feature](../api/Feature.html) on the reverse strand. ## ```js cgv.addFeatures({ type: 'CDS', name: 'Another Feature', start: 400, stop: 750, strand: -1, source: 'genome-features', legend: 'CDS' }); ``` ## Change the color and decoration of the Features The [color](../api/Color.html) and decoration of features is altered through the [LegendItem](../api/LegendItem.html). When a feature is created, the _legend_ attribute is used to find any previously created LegendItem with the same name. If no LegendItem is found, one will be created with the default settings. Here we find the generated LegendItem and change it's color and decoration. ```js // Find the legend item // FIXME: CGArray: uses id but CDS is the name // var legendItem = cgv.legend.items('CDS'); var legendItem = cgv.legend.items(1); // Change the color. The color can be a color name, RGB, or RGBA. legendItem.color = 'green'; // Change the decoration. Options: 'arc', 'arrow', 'none' legendItem.decoration = 'arrow'; ``` ## Create a [Plot](../api/Plot.html). ## Now we'll create a plot. Plots consist of an array of positions (in bp) and a matching array of scores with values between 0 and 1. An optional baseline can be provided (default 0.5). Values above the baseline are positive and values below the baseline are negative. ```js var plot = new CGV.Plot(cgv, { positions: [50, 200, 400, 500, 600, 800], scores: [0.4, 0.75, 0.25, 0.5, 0.6, 0.1], baseline: 0.5, source: 'genome-plot', // Values above the baseline wil be blue legendPositive: new CGV.LegendItem(cgv.legend, {swatchColor: 'blue', name: 'Plot +'}), // Values below will be red legendNegative: new CGV.LegendItem(cgv.legend, {swatchColor: 'red', name: 'Plot -'}) }); ``` ## Create a [Track](../api/Track.html) for the features. ## Each Track can contain one or more Features or a single Plot. ```js // The addTracks() method can accept an array of objects or a single object of data // that will be used to initialize new Tracks. cgv.addTracks({ // Name for the track. name: 'My Feature Track', // 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: 'strand', // 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: 'source', // 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 all features with a source of 'genome-features' will be used dataKeys: 'genome-features' }); ``` ## Create a [Track](../api/Track.html) for the plot. ## ```js // Add Plot Track cgv.addTracks({ // Name for the track. name: 'My Plot Track', // Note, that the readingFrame and strand options are ignores for plots. // Where to draw the track in relation to the backbone. // Options: 'inside', 'outside', 'both'. position: 'inside', // The data* properties describe what plot will be in the track. dataType: 'plot', dataMethod: 'source', // In this example the first plot with a source of 'genome-plot' will be used dataKeys: 'genome-plot' }); ``` ## Draw the Map ## ```js cgv.draw(); ```