Sequence object

seq = {
  "sequence"  : string,     // REQUIRED, main sequence.
  "seqcolors" : {
    "data"    : string,     // Comma-separated data set, ex: "C,C,C,C,C,H,H,H,H,H,C,...".
                            // Each element is used to assign specific background color to a residue.
    "colors"  : {
      string     : string   // Colors assigned to specific data values, e.g. "C" : "red".
    }
  },
  "ftracks"    : [ FTrack ],   // Array of feature tracks.
  "qtracks"    : [ QTrack ],   // Array of quantitative tracks.
  "markers"    : [ Marker ],   // Array of markers.
  "bridges"    : [ Bridge ],   // Array of bridges.
  "alignments" : [ Alignment], // Array of aligned sequences.
};
              

"properties" = {
  string  : string    // name:value pairs
};

Example:
    "properties" : {
      "pdbid"  : "1bo4"
    };

"dbxrefs" = {
  string:string       // name:value pairs
};

Example:
    "dbxrefs": {
      "Protael website": "http://protael.org"
    };
              

Feature track

FTrack =  {
    "label"        : string,     // Track label, shown on the left-hand side of the view.
    "display"      : string,     // Defines how the feature will be drawn.
                                 // "block"(default) will render a rectangle and a label inside
                                 // "line" will render a line and a label above it.
    "showLine"     : boolean,    // Whether or not show center line; DEFAULT = TRUE.
    "allowOverlap" : boolean,    // Whether or nor allow overlapping sequences.
    "clazz"        : string,     // CSS class name.
    "features"     : [ Feature ] // Array of features in this track.
}

Feature = {
    "id"          : string,
    "label"       : string,    // REQUIRED, Label will be displayed on feature drawing.
    "start"       : integer,   // REQUIRED, start position of the feature.
    "end"         : integer,   // REQUIRED, end position of the feature.
    "clazz"       : string,    // CSS class name.
    "description" : string,    // Short description, will be shown in tooltip.
    
    "properties"  : Object,    // Additional properties.
    "dbxrefs"     : Object     // Links to external resources.
}           

Quantitative track

QTrack = {
  "label"        : string,              // Track label.
  "color"        : string || [string],  // HTML color string. Could be single color, or
                                        // array of 2 or 3 colors for gradient fill. DEFAULT="orange"
  "type"         : string,              // chart type, area/area-spline(default)/line/spline/column.
  "values"       : [double] || string,  // REQUIRED, either array of values or,
                                        // for single-digit data, string containing 1 digit per residue
                                        // e.g. "012345654321".
  "displayScale" : boolean,             // When TRUE will display min and max values for the chart
  "displayMax"   : number,              // Max value to display on scale. DEFAULT = chart max value
  "displayMin"   : number,              // Min value to display on scale. DEFAULT = chart min value
  "transform"    : string,              // Transformation function name, possible values: "log" | "log2" | "log10" | "exp"
  "properties"   : Object,              // Additional properties.
  "dbxrefs"      : Object               // Links to external resources.
}
              

Marker and bridge

Marker = {
  "type"        : string    // REQUIRED, determines the shape of the marker.
                            // possible values: "gap" || "stick" || "glycan" || "oliglycan" || "unknownglycan" || "pin".
  "x"           : number,   // REQUIRED, if value is integer the marker will be placed in the center of the corresponding residue,
                            // if fractional (10.5) - between two residues, useful for example to mark gaps.
  "label"       : string,   // marker label
  "color"       : string,   // HTML color string.
  "position"    : string,   // position of the marker relative to the main sequence, DEFAULT: "top"
                            // "top" || "bottom"
  "properties"  : Object,   // Additional properties
  "dbxrefs"     : Object    // Links to external resources
}

Bridge = {
  "start"       : integer,  // REQUIRED. Bridge start.
  "end"         : integer,  // REQUIRED. Bridge end.
  "type"        : string,   // Bridge label (displayed in th middle of the bridge).
  "startlabel"  : string,   // Label for start position.
  "endlabel"    : string,   // Label for end position.
  "color"       : string,   // HTML color string.
  "properties"  : Object,   // Additional properties
  "dbxrefs"     : Object    // Links to external resources
}
              

Sequence alignment

Alignment = {
  "sequence"    : string,   // REQUIRED.
  "CS"          : string,   // Name of the coloring schema for this sequence,
                            // by default 'ALI' is used (gray background for aligned regions).
  "id"          : string,   // Sequence id
  "label"       : string,   // Label for tooltip (will be used in case "properties" is not set, see below).
  "start"       : integer,  // Start position of the alignment.
  "properties"  : Object,   // Additional properties
  "dbxrefs"     : Object    // Links to external resources
}
              

Background

// This will change background color to 'black' and fill color for sequence text
// and markers/bridges (without JSON-specified color) to 'white'
containerId svg{
  background: black;
  fill: white;
}              

Grid lines

Features

Quantitative tracks

Other elements