Quantitative track

A QuantitativeTrack shows a single BigWig or bedGraph signal; a MultiQuantitativeTrack holds several of them in one display. Both draw through LinearWiggleDisplay, so the scale, color and layout settings below apply to either, through displayDefaults.

Config file

Goes in the tracks array of config.json. See Tracks.

{
  "type": "QuantitativeTrack",
  "trackId": "my_wiggle_track",
  "name": "My Wiggle Track",
  "assemblyNames": ["hg19"],
  "adapter": {
    "type": "BigWigAdapter",
    "uri": "https://yourhost/file.bw"
  },
  "displayDefaults": {
    "mark": "line",
    "encoding": { "y": { "scale": { "type": "log" } } }
  }
}

CLI (add-track)

jbrowse add-track https://yourhost/file.bw \
  --trackId my_wiggle_track \
  --name "My Wiggle Track" \
  --assemblyNames hg19 \
  --displayDefaults '{"mark":"line","encoding":{"y":{"scale":{"type":"log"}}}}'

In the app

In JBrowse Desktop, or in any running JBrowse Web session, open a view on this track’s assembly, then File → Open track..., choose Add track from pasted JSON, and paste:

{
  "type": "QuantitativeTrack",
  "trackId": "my_wiggle_track",
  "name": "My Wiggle Track",
  "assemblyNames": ["hg19"],
  "adapter": {
    "type": "BigWigAdapter",
    "uri": "https://yourhost/file.bw"
  },
  "displayDefaults": {
    "mark": "line",
    "encoding": { "y": { "scale": { "type": "log" } } }
  }
}

Display options

The axis is one object, encoding.y, the color is one object, encoding.color, and rows decides the layout; all three are LinearWiggleDisplay slots and all three go through displayDefaults.

mark picks bar, point, line or span, what a signal is drawn as; rows sets how many rows there are, so the two can be set independently.

A line's mark.interpolate is step or linear: "mark": { "type": "line", "interpolate": "linear" }.

Reference lines belong to the axis object too. encoding.y.rules draws a dashed line across the plot at each value, a bare number or { value, color, label }, in every row of a track on rows:

Config file

Goes in the tracks array of config.json. See Tracks.

{
  "trackId": "tumor_depth",
  "name": "Tumor depth",
  "uri": "https://yourhost/tumor_depth.bw",
  "assemblyNames": ["hg19"],
  "displayDefaults": {
    "encoding": { "y": { "rules": [{ "value": 30, "label": "2 copies" }, 15] } }
  }
}

CLI (add-track)

jbrowse add-track https://yourhost/tumor_depth.bw \
  --trackId tumor_depth \
  --name "Tumor depth" \
  --assemblyNames hg19 \
  --displayDefaults '{"encoding":{"y":{"rules":[{"value":30,"label":"2 copies"},15]}}}'

In the app

In JBrowse Desktop, or in any running JBrowse Web session, open a view on this track’s assembly, then File → Open track..., choose Add track from pasted JSON, and paste:

{
  "trackId": "tumor_depth",
  "name": "Tumor depth",
  "uri": "https://yourhost/tumor_depth.bw",
  "assemblyNames": ["hg19"],
  "displayDefaults": {
    "encoding": { "y": { "rules": [{ "value": 30, "label": "2 copies" }, 15] } }
  }
}

An autoscaled end of the axis widens to keep every rule on it, so a rule stays drawn over a deletion the coverage never climbs out of, and a pinned domainMin or domainMax that excludes a rule drops it. A label is free text: JBrowse assumes no ploidy, so "2 copies" is the author's claim. The density rendering draws no rules, having no axis to rule.

A reader adds the same lines without a config file: Reference lines in the track menu's Y axis... panel writes this list.

Colors

encoding.color is a constant { "value": … }, or a scale the score reads through:

the picture	the value
one solid color	`{ "value": "#8b0000" }`
a color each side of a cut	`{ "scale": { "type": "threshold", "domain": [5], "range": ["#aaa", "#f00"] } }`
a ramp, which density fades through	`{ "scale": { "type": "linear", "scheme": "viridis" } }`

A threshold with an empty scale.domain cuts at origin, the value the bars also grow from. A ramp takes a named scale.scheme or a scale.range of CSS stops, runs straight across the y domain unless scale.domainMid places its middle stop, and with one color runs from white to it. The cookbook has worked recipes.

encoding.color reads score alone. A color per source is the row's: rowColor names each source's color as scale.domain/scale.range pairs, and several sources sharing one plot box with no encoding.color set take palette colors by name unprompted, except under span, where the score ramp is the whole color.

Adapters

BigWigAdapter, BedGraphTabixAdapter (bgzip plus tabix, for large data) and BedGraphAdapter (a small plain .bedGraph) all take the uri shorthand; supported file types lists them with their config pages.

Any numeric column of a feature file

The wiggle display also draws on a FeatureTrack: name it in the track's displays, and encoding.y.field picks the column it plots, as a mark's encoding.y does. The default score reads the BED score column, or whatever the adapter's scoreColumn rewrote it to; an explicit field name reaches a raw column of the file instead, so a BED with a coverage column plots as a signal without a conversion to bedGraph:

Config file

Goes in the tracks array of config.json. See Tracks.

{
  "type": "FeatureTrack",
  "trackId": "coverage_bed",
  "name": "Coverage",
  "assemblyNames": ["hg19"],
  "adapter": {
    "type": "BedTabixAdapter",
    "uri": "https://yourhost/coverage.bed.gz"
  },
  "displays": [
    { "type": "LinearWiggleDisplay", "encoding": { "y": "coverage" } }
  ]
}

CLI (add-track-json)

jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "coverage_bed",
  "name": "Coverage",
  "assemblyNames": ["hg19"],
  "adapter": {
    "type": "BedTabixAdapter",
    "uri": "https://yourhost/coverage.bed.gz"
  },
  "displays": [
    { "type": "LinearWiggleDisplay", "encoding": { "y": "coverage" } }
  ]
}'

In the app

In JBrowse Desktop, or in any running JBrowse Web session, open a view on this track’s assembly, then File → Open track..., choose Add track from pasted JSON, and paste:

{
  "type": "FeatureTrack",
  "trackId": "coverage_bed",
  "name": "Coverage",
  "assemblyNames": ["hg19"],
  "adapter": {
    "type": "BedTabixAdapter",
    "uri": "https://yourhost/coverage.bed.gz"
  },
  "displays": [
    { "type": "LinearWiggleDisplay", "encoding": { "y": "coverage" } }
  ]
}

A FeatureTrack also offers the Manhattan plot under the track menu's Display types; the GWAS track guide covers it.

Many signals in one track

A MultiQuantitativeTrack puts many BigWig/bedGraph signals in one display. Use the bigWigs array for a plain list of URLs, or subadapters when you need per-subtrack color, group, and source.

Config file

Goes in the tracks array of config.json. See Tracks.

{
  "type": "MultiQuantitativeTrack",
  "trackId": "microarray_multi",
  "name": "MultiWig",
  "category": ["ENCODE bigWigs"],
  "assemblyNames": ["hg19"],
  "adapter": {
    "type": "MultiWiggleAdapter",
    "bigWigs": [
      "https://www.encodeproject.org/files/ENCFF055ZII/@@download/ENCFF055ZII.bigWig",
      "https://www.encodeproject.org/files/ENCFF826HEW/@@download/ENCFF826HEW.bigWig",
      "https://www.encodeproject.org/files/ENCFF858LIM/@@download/ENCFF858LIM.bigWig",
      "https://www.encodeproject.org/files/ENCFF425TNW/@@download/ENCFF425TNW.bigWig"
    ]
  }
}

CLI (add-track-json)

jbrowse add-track-json '{
  "type": "MultiQuantitativeTrack",
  "trackId": "microarray_multi",
  "name": "MultiWig",
  "category": ["ENCODE bigWigs"],
  "assemblyNames": ["hg19"],
  "adapter": {
    "type": "MultiWiggleAdapter",
    "bigWigs": [
      "https://www.encodeproject.org/files/ENCFF055ZII/@@download/ENCFF055ZII.bigWig",
      "https://www.encodeproject.org/files/ENCFF826HEW/@@download/ENCFF826HEW.bigWig",
      "https://www.encodeproject.org/files/ENCFF858LIM/@@download/ENCFF858LIM.bigWig",
      "https://www.encodeproject.org/files/ENCFF425TNW/@@download/ENCFF425TNW.bigWig"
    ]
  }
}'

In the app

In JBrowse Desktop, or in any running JBrowse Web session, open a view on this track’s assembly, then File → Open track..., choose Add track from pasted JSON, and paste:

{
  "type": "MultiQuantitativeTrack",
  "trackId": "microarray_multi",
  "name": "MultiWig",
  "category": ["ENCODE bigWigs"],
  "assemblyNames": ["hg19"],
  "adapter": {
    "type": "MultiWiggleAdapter",
    "bigWigs": [
      "https://www.encodeproject.org/files/ENCFF055ZII/@@download/ENCFF055ZII.bigWig",
      "https://www.encodeproject.org/files/ENCFF826HEW/@@download/ENCFF826HEW.bigWig",
      "https://www.encodeproject.org/files/ENCFF858LIM/@@download/ENCFF858LIM.bigWig",
      "https://www.encodeproject.org/files/ENCFF425TNW/@@download/ENCFF425TNW.bigWig"
    ]
  }
}

The track type defaults its display to rows: "source", extent: "none" and a 200px height, so it opens as one row per source without saying so. rows: "" puts every source back in one shared plot box, and rows: { "field": "source", "sort": […] } names the sources that lead the row order. The same object takes labels, a label per source by name, and rowColor gives each source a color. Edit colors/arrangement... in the track menu writes both, as settings a reader can undo or reset, and choosing Each row there also writes the color below, since a color per subtrack is the two together.

The subadapters form

Each subtrack has a source: its label in the UI, and feature.source in a jexl color callback (jexl:feature.source=='k1'?'red':'blue'). bigWigs derives it from the file name; subadapters sets it explicitly (name is an alias, and source wins when both are set), plus a default color and a group label (MultiWiggleAdapter):

Config file

Goes in the tracks array of config.json. See Tracks.

{
  "type": "MultiQuantitativeTrack",
  "trackId": "microarray_multi_groups",
  "name": "MultiWig (groups)",
  "category": ["ENCODE bigWigs"],
  "assemblyNames": ["hg19"],
  "adapter": {
    "type": "MultiWiggleAdapter",
    "subadapters": [
      {
        "type": "BigWigAdapter",
        "source": "k1",
        "color": "red",
        "uri": "https://www.encodeproject.org/files/ENCFF055ZII/@@download/ENCFF055ZII.bigWig",
        "group": "group1"
      },
      {
        "type": "BigWigAdapter",
        "source": "k2",
        "color": "blue",
        "uri": "https://www.encodeproject.org/files/ENCFF826HEW/@@download/ENCFF826HEW.bigWig",
        "group": "group2"
      }
    ]
  }
}

CLI (add-track-json)

jbrowse add-track-json '{
  "type": "MultiQuantitativeTrack",
  "trackId": "microarray_multi_groups",
  "name": "MultiWig (groups)",
  "category": ["ENCODE bigWigs"],
  "assemblyNames": ["hg19"],
  "adapter": {
    "type": "MultiWiggleAdapter",
    "subadapters": [
      {
        "type": "BigWigAdapter",
        "source": "k1",
        "color": "red",
        "uri": "https://www.encodeproject.org/files/ENCFF055ZII/@@download/ENCFF055ZII.bigWig",
        "group": "group1"
      },
      {
        "type": "BigWigAdapter",
        "source": "k2",
        "color": "blue",
        "uri": "https://www.encodeproject.org/files/ENCFF826HEW/@@download/ENCFF826HEW.bigWig",
        "group": "group2"
      }
    ]
  }
}'

In the app

In JBrowse Desktop, or in any running JBrowse Web session, open a view on this track’s assembly, then File → Open track..., choose Add track from pasted JSON, and paste:

{
  "type": "MultiQuantitativeTrack",
  "trackId": "microarray_multi_groups",
  "name": "MultiWig (groups)",
  "category": ["ENCODE bigWigs"],
  "assemblyNames": ["hg19"],
  "adapter": {
    "type": "MultiWiggleAdapter",
    "subadapters": [
      {
        "type": "BigWigAdapter",
        "source": "k1",
        "color": "red",
        "uri": "https://www.encodeproject.org/files/ENCFF055ZII/@@download/ENCFF055ZII.bigWig",
        "group": "group1"
      },
      {
        "type": "BigWigAdapter",
        "source": "k2",
        "color": "blue",
        "uri": "https://www.encodeproject.org/files/ENCFF826HEW/@@download/ENCFF826HEW.bigWig",
        "group": "group2"
      }
    ]
  }
}

subadapters is an array of objects, so it templates from a samplesheet such as an RNA-seq timecourse:

// rows: [{ timepoint: '0h', bigwig: 's3://.../t0.bw' }, ...]
const track = {
  type: 'MultiQuantitativeTrack',
  trackId: 'rnaseq-timecourse', // keep this stable across rebuilds
  name: 'RNA-seq timecourse',
  assemblyNames: ['hg38'],
  adapter: {
    type: 'MultiWiggleAdapter',
    subadapters: rows.map(row => ({
      type: 'BigWigAdapter',
      source: row.timepoint,
      uri: row.bigwig,
    })),
  },
}

Deploying JBrowse Web generates a whole config.json this way in a CI/CD pipeline.

Loading bedMethyl as a multi-quantitative track

A bedMethyl from modkit pileup reports the methylation fraction at each CpG, one row per modification type. Bgzipped and tabix-indexed (the methylation tutorial has the commands), it loads through BedTabixAdapter as a MultiQuantitativeTrack with one subtrack per modification type; a .bedmethyl.gz also auto-detects as this in the Add track form:

Config file

Goes in the tracks array of config.json. See Tracks.

{
  "trackId": "sample_modkit",
  "name": "CpG methylation (modkit)",
  "uri": "https://yourhost/sample_modkit.bedmethyl.gz",
  "assemblyNames": ["hg38"]
}

CLI (add-track)

jbrowse add-track https://yourhost/sample_modkit.bedmethyl.gz \
  --trackId sample_modkit \
  --name "CpG methylation (modkit)" \
  --assemblyNames hg38

In the app

In JBrowse Desktop, or in any running JBrowse Web session, open a view on this track’s assembly, then File → Open track... and, in Add a track from file or URL, enter:

Main file: https://yourhost/sample_modkit.bedmethyl.gz

Click Next. JBrowse reads the adapter and track type off the file name. Then fill in:

Track name: CpG methylation (modkit)
Assembly: hg38

Click Add.

JBrowse reads two columns: score (column 11), the percent methylation from 0 to 100, and name (column 4), the modification code (m for 5mC, h for 5hmC) used as the subtrack label.

Quantitative track

Display options#

Colors#

Adapters#

Any numeric column of a feature file#

Many signals in one track#

The subadapters form#

Loading bedMethyl as a multi-quantitative track#

See also#

Display options

Colors

Adapters

Any numeric column of a feature file

Many signals in one track

The subadapters form

Loading bedMethyl as a multi-quantitative track

See also