Mark display examples
Each section below is one complete track config for LinearMarkDisplay, the
picture it draws over a hosted file, and a link that opens the same view live.
The first ten read one file, UCSC's RepeatMasker Alu rows for hg38, whose
milliDiv column is a copy's divergence from its consensus; the rest read a BED
of read pairs, a set of copy-number BigWigs and a PAF of genome alignments. Copy
the config whose shape matches your file and change the field names.
Mark display explains each slot.
Bars from a column
y names the column, and the axis autoscales to what is on screen.
Goes in the tracks array of config.json. See Tracks.
{
"type": "FeatureTrack",
"trackId": "alu_bars",
"name": "Alu divergence",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_bars-LinearMarkDisplay",
"marks": [{ "mark": "bar", "encoding": { "y": "milliDiv" } }]
}
]
}Edits config.json in the current folder. See JBrowse CLI with Desktop.
jbrowse add-track-json '{
"type": "FeatureTrack",
"trackId": "alu_bars",
"name": "Alu divergence",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_bars-LinearMarkDisplay",
"marks": [{ "mark": "bar", "encoding": { "y": "milliDiv" } }]
}
]
}'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": "alu_bars",
"name": "Alu divergence",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_bars-LinearMarkDisplay",
"marks": [{ "mark": "bar", "encoding": { "y": "milliDiv" } }]
}
]
}Open this track in JBrowse Web ↗
Open in JBrowse Desktop ↗
Needs JBrowse Desktop 5.0 or newer. If nothing opens, copy the link and paste it into Desktop's Open JBrowse Web link..., on the start screen or under File → Session.
https://jbrowse.org/code/jb2/main/?config=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2Fconfig.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22FeatureTrack%22%2C%22trackId%22%3A%22alu_bars%22%2C%22name%22%3A%22Alu+divergence%22%2C%22assemblyNames%22%3A%5B%22hg38%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22BedTabixAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2FAlu.bed.gz%22%2C%22csi%22%3Atrue%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22alu_bars-LinearMarkDisplay%22%2C%22marks%22%3A%5B%7B%22mark%22%3A%22bar%22%2C%22encoding%22%3A%7B%22y%22%3A%22milliDiv%22%7D%7D%5D%7D%5D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22hg38%22%2C%22loc%22%3A%22chr1%3A151%2C000%2C000-151%2C030%2C000%22%2C%22tracks%22%3A%5B%22alu_bars%22%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+Alu+divergenceThis view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.
from jbrowse_anywidget import JBrowseApp, fetch_hub
config = fetch_hub("https://jbrowse.org/demos/gene_density/config.json")
app = JBrowseApp(
assemblies=config["assemblies"],
tracks=config.get("tracks", []) + [
{
"type": "FeatureTrack",
"trackId": "alu_bars",
"name": "Alu divergence",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": True
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_bars-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv"
}
}
]
}
]
}
],
views=[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_bars"
]
}
],
)
app # display the widgetThis view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.
import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
const configUrl = "https://jbrowse.org/demos/gene_density/config.json"
const configPromise = fetch(configUrl)
.then(res => res.json())
.then(config => {
addRelativeUris(config, new URL(configUrl))
return config
})
export default function Figure() {
const config = use(configPromise)
return (
<JBrowse
assemblies={config.assemblies}
tracks={[...(config.tracks ?? []), ...[
{
"type": "FeatureTrack",
"trackId": "alu_bars",
"name": "Alu divergence",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_bars-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv"
}
}
]
}
]
}
]]}
aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
configuration={config.configuration}
views={[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_bars"
]
}
]}
/>
)
}jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.
cat > tracks.json <<'JSON'
[
{
"type": "FeatureTrack",
"trackId": "alu_bars",
"name": "Alu divergence",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_bars-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv"
}
}
]
}
]
}
]
JSON
npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
--trackConfigs tracks.json \
--assembly hg38 --loc chr1:151,000,000-151,030,000 \
--track alu_bars \
--out figure.svgFor a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).
Points, colored and shaped by a category
Each point stands at the middle of its copy. The color and the shape each take a
categorical scale over strand, whose values are 1 and -1, so
scale.domain names the levels and scale.names what the key calls them.
Goes in the tracks array of config.json. See Tracks.
{
"type": "FeatureTrack",
"trackId": "alu_points",
"name": "Alu divergence by strand",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_points-LinearMarkDisplay",
"marks": [
{
"mark": "point",
"encoding": {
"y": "milliDiv",
"size": 8,
"color": {
"field": "strand",
"scale": { "domain": ["1", "-1"], "names": ["+", "-"] },
"legend": { "title": "Strand" }
},
"shape": {
"field": "strand",
"scale": {
"domain": ["1", "-1"],
"range": ["circle", "triangle-down"],
"names": ["+", "-"]
},
"legend": { "title": "" }
}
}
}
]
}
]
}Edits config.json in the current folder. See JBrowse CLI with Desktop.
jbrowse add-track-json '{
"type": "FeatureTrack",
"trackId": "alu_points",
"name": "Alu divergence by strand",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_points-LinearMarkDisplay",
"marks": [
{
"mark": "point",
"encoding": {
"y": "milliDiv",
"size": 8,
"color": {
"field": "strand",
"scale": { "domain": ["1", "-1"], "names": ["+", "-"] },
"legend": { "title": "Strand" }
},
"shape": {
"field": "strand",
"scale": {
"domain": ["1", "-1"],
"range": ["circle", "triangle-down"],
"names": ["+", "-"]
},
"legend": { "title": "" }
}
}
}
]
}
]
}'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": "alu_points",
"name": "Alu divergence by strand",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_points-LinearMarkDisplay",
"marks": [
{
"mark": "point",
"encoding": {
"y": "milliDiv",
"size": 8,
"color": {
"field": "strand",
"scale": { "domain": ["1", "-1"], "names": ["+", "-"] },
"legend": { "title": "Strand" }
},
"shape": {
"field": "strand",
"scale": {
"domain": ["1", "-1"],
"range": ["circle", "triangle-down"],
"names": ["+", "-"]
},
"legend": { "title": "" }
}
}
}
]
}
]
}Open this track in JBrowse Web ↗
Open in JBrowse Desktop ↗
Needs JBrowse Desktop 5.0 or newer. If nothing opens, copy the link and paste it into Desktop's Open JBrowse Web link..., on the start screen or under File → Session.
https://jbrowse.org/code/jb2/main/?config=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2Fconfig.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22FeatureTrack%22%2C%22trackId%22%3A%22alu_points%22%2C%22name%22%3A%22Alu+divergence+by+strand%22%2C%22assemblyNames%22%3A%5B%22hg38%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22BedTabixAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2FAlu.bed.gz%22%2C%22csi%22%3Atrue%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22alu_points-LinearMarkDisplay%22%2C%22marks%22%3A%5B%7B%22mark%22%3A%22point%22%2C%22encoding%22%3A%7B%22y%22%3A%22milliDiv%22%2C%22size%22%3A8%2C%22color%22%3A%7B%22field%22%3A%22strand%22%2C%22scale%22%3A%7B%22domain%22%3A%5B%221%22%2C%22-1%22%5D%2C%22names%22%3A%5B%22%2B%22%2C%22-%22%5D%7D%2C%22legend%22%3A%7B%22title%22%3A%22Strand%22%7D%7D%2C%22shape%22%3A%7B%22field%22%3A%22strand%22%2C%22scale%22%3A%7B%22domain%22%3A%5B%221%22%2C%22-1%22%5D%2C%22range%22%3A%5B%22circle%22%2C%22triangle-down%22%5D%2C%22names%22%3A%5B%22%2B%22%2C%22-%22%5D%7D%2C%22legend%22%3A%7B%22title%22%3A%22%22%7D%7D%7D%7D%5D%7D%5D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22hg38%22%2C%22loc%22%3A%22chr1%3A151%2C000%2C000-151%2C030%2C000%22%2C%22tracks%22%3A%5B%22alu_points%22%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+Alu+divergence+by+strandThis view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.
from jbrowse_anywidget import JBrowseApp, fetch_hub
config = fetch_hub("https://jbrowse.org/demos/gene_density/config.json")
app = JBrowseApp(
assemblies=config["assemblies"],
tracks=config.get("tracks", []) + [
{
"type": "FeatureTrack",
"trackId": "alu_points",
"name": "Alu divergence by strand",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": True
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_points-LinearMarkDisplay",
"marks": [
{
"mark": "point",
"encoding": {
"y": "milliDiv",
"size": 8,
"color": {
"field": "strand",
"scale": {
"domain": [
"1",
"-1"
],
"names": [
"+",
"-"
]
},
"legend": {
"title": "Strand"
}
},
"shape": {
"field": "strand",
"scale": {
"domain": [
"1",
"-1"
],
"range": [
"circle",
"triangle-down"
],
"names": [
"+",
"-"
]
},
"legend": {
"title": ""
}
}
}
}
]
}
]
}
],
views=[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_points"
]
}
],
)
app # display the widgetThis view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.
import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
const configUrl = "https://jbrowse.org/demos/gene_density/config.json"
const configPromise = fetch(configUrl)
.then(res => res.json())
.then(config => {
addRelativeUris(config, new URL(configUrl))
return config
})
export default function Figure() {
const config = use(configPromise)
return (
<JBrowse
assemblies={config.assemblies}
tracks={[...(config.tracks ?? []), ...[
{
"type": "FeatureTrack",
"trackId": "alu_points",
"name": "Alu divergence by strand",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_points-LinearMarkDisplay",
"marks": [
{
"mark": "point",
"encoding": {
"y": "milliDiv",
"size": 8,
"color": {
"field": "strand",
"scale": {
"domain": [
"1",
"-1"
],
"names": [
"+",
"-"
]
},
"legend": {
"title": "Strand"
}
},
"shape": {
"field": "strand",
"scale": {
"domain": [
"1",
"-1"
],
"range": [
"circle",
"triangle-down"
],
"names": [
"+",
"-"
]
},
"legend": {
"title": ""
}
}
}
}
]
}
]
}
]]}
aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
configuration={config.configuration}
views={[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_points"
]
}
]}
/>
)
}jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.
cat > tracks.json <<'JSON'
[
{
"type": "FeatureTrack",
"trackId": "alu_points",
"name": "Alu divergence by strand",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_points-LinearMarkDisplay",
"marks": [
{
"mark": "point",
"encoding": {
"y": "milliDiv",
"size": 8,
"color": {
"field": "strand",
"scale": {
"domain": [
"1",
"-1"
],
"names": [
"+",
"-"
]
},
"legend": {
"title": "Strand"
}
},
"shape": {
"field": "strand",
"scale": {
"domain": [
"1",
"-1"
],
"range": [
"circle",
"triangle-down"
],
"names": [
"+",
"-"
]
},
"legend": {
"title": ""
}
}
}
}
]
}
]
}
]
JSON
npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
--trackConfigs tracks.json \
--assembly hg38 --loc chr1:151,000,000-151,030,000 \
--track alu_points \
--out figure.svgFor a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).
A color ramp
A linear scale over the plotted column, pinned at both ends so the colors mean
the same in every window. scale.scheme names the ramp.
Goes in the tracks array of config.json. See Tracks.
{
"type": "FeatureTrack",
"trackId": "alu_ramp",
"name": "Alu divergence, viridis",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_ramp-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"field": "milliDiv",
"scale": {
"type": "linear",
"scheme": "viridis",
"domainMin": 0,
"domainMax": 300
},
"legend": { "title": "Divergence" }
}
}
}
]
}
]
}Edits config.json in the current folder. See JBrowse CLI with Desktop.
jbrowse add-track-json '{
"type": "FeatureTrack",
"trackId": "alu_ramp",
"name": "Alu divergence, viridis",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_ramp-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"field": "milliDiv",
"scale": {
"type": "linear",
"scheme": "viridis",
"domainMin": 0,
"domainMax": 300
},
"legend": { "title": "Divergence" }
}
}
}
]
}
]
}'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": "alu_ramp",
"name": "Alu divergence, viridis",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_ramp-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"field": "milliDiv",
"scale": {
"type": "linear",
"scheme": "viridis",
"domainMin": 0,
"domainMax": 300
},
"legend": { "title": "Divergence" }
}
}
}
]
}
]
}Open this track in JBrowse Web ↗
Open in JBrowse Desktop ↗
Needs JBrowse Desktop 5.0 or newer. If nothing opens, copy the link and paste it into Desktop's Open JBrowse Web link..., on the start screen or under File → Session.
https://jbrowse.org/code/jb2/main/?config=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2Fconfig.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22FeatureTrack%22%2C%22trackId%22%3A%22alu_ramp%22%2C%22name%22%3A%22Alu+divergence%2C+viridis%22%2C%22assemblyNames%22%3A%5B%22hg38%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22BedTabixAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2FAlu.bed.gz%22%2C%22csi%22%3Atrue%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22alu_ramp-LinearMarkDisplay%22%2C%22marks%22%3A%5B%7B%22mark%22%3A%22bar%22%2C%22encoding%22%3A%7B%22y%22%3A%22milliDiv%22%2C%22color%22%3A%7B%22field%22%3A%22milliDiv%22%2C%22scale%22%3A%7B%22type%22%3A%22linear%22%2C%22scheme%22%3A%22viridis%22%2C%22domainMin%22%3A0%2C%22domainMax%22%3A300%7D%2C%22legend%22%3A%7B%22title%22%3A%22Divergence%22%7D%7D%7D%7D%5D%7D%5D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22hg38%22%2C%22loc%22%3A%22chr1%3A151%2C000%2C000-151%2C030%2C000%22%2C%22tracks%22%3A%5B%22alu_ramp%22%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+Alu+divergence%2C+viridisThis view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.
from jbrowse_anywidget import JBrowseApp, fetch_hub
config = fetch_hub("https://jbrowse.org/demos/gene_density/config.json")
app = JBrowseApp(
assemblies=config["assemblies"],
tracks=config.get("tracks", []) + [
{
"type": "FeatureTrack",
"trackId": "alu_ramp",
"name": "Alu divergence, viridis",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": True
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_ramp-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"field": "milliDiv",
"scale": {
"type": "linear",
"scheme": "viridis",
"domainMin": 0,
"domainMax": 300
},
"legend": {
"title": "Divergence"
}
}
}
}
]
}
]
}
],
views=[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_ramp"
]
}
],
)
app # display the widgetThis view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.
import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
const configUrl = "https://jbrowse.org/demos/gene_density/config.json"
const configPromise = fetch(configUrl)
.then(res => res.json())
.then(config => {
addRelativeUris(config, new URL(configUrl))
return config
})
export default function Figure() {
const config = use(configPromise)
return (
<JBrowse
assemblies={config.assemblies}
tracks={[...(config.tracks ?? []), ...[
{
"type": "FeatureTrack",
"trackId": "alu_ramp",
"name": "Alu divergence, viridis",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_ramp-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"field": "milliDiv",
"scale": {
"type": "linear",
"scheme": "viridis",
"domainMin": 0,
"domainMax": 300
},
"legend": {
"title": "Divergence"
}
}
}
}
]
}
]
}
]]}
aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
configuration={config.configuration}
views={[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_ramp"
]
}
]}
/>
)
}jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.
cat > tracks.json <<'JSON'
[
{
"type": "FeatureTrack",
"trackId": "alu_ramp",
"name": "Alu divergence, viridis",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_ramp-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"field": "milliDiv",
"scale": {
"type": "linear",
"scheme": "viridis",
"domainMin": 0,
"domainMax": 300
},
"legend": {
"title": "Divergence"
}
}
}
}
]
}
]
}
]
JSON
npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
--trackConfigs tracks.json \
--assembly hg38 --loc chr1:151,000,000-151,030,000 \
--track alu_ramp \
--out figure.svgFor a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).
A color per interval
A threshold scale cuts the column at the values in scale.domain and paints
one scale.range color per interval, so a divergence reads as young, middle or
old.
Goes in the tracks array of config.json. See Tracks.
{
"type": "FeatureTrack",
"trackId": "alu_threshold",
"name": "Alu age classes",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_threshold-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"field": "milliDiv",
"scale": {
"type": "threshold",
"domain": [80, 150],
"range": ["#d73027", "#fdae61", "#4575b4"]
},
"legend": { "title": "Divergence" }
}
}
}
]
}
]
}Edits config.json in the current folder. See JBrowse CLI with Desktop.
jbrowse add-track-json '{
"type": "FeatureTrack",
"trackId": "alu_threshold",
"name": "Alu age classes",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_threshold-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"field": "milliDiv",
"scale": {
"type": "threshold",
"domain": [80, 150],
"range": ["#d73027", "#fdae61", "#4575b4"]
},
"legend": { "title": "Divergence" }
}
}
}
]
}
]
}'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": "alu_threshold",
"name": "Alu age classes",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_threshold-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"field": "milliDiv",
"scale": {
"type": "threshold",
"domain": [80, 150],
"range": ["#d73027", "#fdae61", "#4575b4"]
},
"legend": { "title": "Divergence" }
}
}
}
]
}
]
}Open this track in JBrowse Web ↗
Open in JBrowse Desktop ↗
Needs JBrowse Desktop 5.0 or newer. If nothing opens, copy the link and paste it into Desktop's Open JBrowse Web link..., on the start screen or under File → Session.
https://jbrowse.org/code/jb2/main/?config=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2Fconfig.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22FeatureTrack%22%2C%22trackId%22%3A%22alu_threshold%22%2C%22name%22%3A%22Alu+age+classes%22%2C%22assemblyNames%22%3A%5B%22hg38%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22BedTabixAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2FAlu.bed.gz%22%2C%22csi%22%3Atrue%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22alu_threshold-LinearMarkDisplay%22%2C%22marks%22%3A%5B%7B%22mark%22%3A%22bar%22%2C%22encoding%22%3A%7B%22y%22%3A%22milliDiv%22%2C%22color%22%3A%7B%22field%22%3A%22milliDiv%22%2C%22scale%22%3A%7B%22type%22%3A%22threshold%22%2C%22domain%22%3A%5B80%2C150%5D%2C%22range%22%3A%5B%22%23d73027%22%2C%22%23fdae61%22%2C%22%234575b4%22%5D%7D%2C%22legend%22%3A%7B%22title%22%3A%22Divergence%22%7D%7D%7D%7D%5D%7D%5D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22hg38%22%2C%22loc%22%3A%22chr1%3A151%2C000%2C000-151%2C030%2C000%22%2C%22tracks%22%3A%5B%22alu_threshold%22%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+Alu+age+classesThis view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.
from jbrowse_anywidget import JBrowseApp, fetch_hub
config = fetch_hub("https://jbrowse.org/demos/gene_density/config.json")
app = JBrowseApp(
assemblies=config["assemblies"],
tracks=config.get("tracks", []) + [
{
"type": "FeatureTrack",
"trackId": "alu_threshold",
"name": "Alu age classes",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": True
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_threshold-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"field": "milliDiv",
"scale": {
"type": "threshold",
"domain": [
80,
150
],
"range": [
"#d73027",
"#fdae61",
"#4575b4"
]
},
"legend": {
"title": "Divergence"
}
}
}
}
]
}
]
}
],
views=[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_threshold"
]
}
],
)
app # display the widgetThis view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.
import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
const configUrl = "https://jbrowse.org/demos/gene_density/config.json"
const configPromise = fetch(configUrl)
.then(res => res.json())
.then(config => {
addRelativeUris(config, new URL(configUrl))
return config
})
export default function Figure() {
const config = use(configPromise)
return (
<JBrowse
assemblies={config.assemblies}
tracks={[...(config.tracks ?? []), ...[
{
"type": "FeatureTrack",
"trackId": "alu_threshold",
"name": "Alu age classes",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_threshold-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"field": "milliDiv",
"scale": {
"type": "threshold",
"domain": [
80,
150
],
"range": [
"#d73027",
"#fdae61",
"#4575b4"
]
},
"legend": {
"title": "Divergence"
}
}
}
}
]
}
]
}
]]}
aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
configuration={config.configuration}
views={[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_threshold"
]
}
]}
/>
)
}jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.
cat > tracks.json <<'JSON'
[
{
"type": "FeatureTrack",
"trackId": "alu_threshold",
"name": "Alu age classes",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_threshold-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"field": "milliDiv",
"scale": {
"type": "threshold",
"domain": [
80,
150
],
"range": [
"#d73027",
"#fdae61",
"#4575b4"
]
},
"legend": {
"title": "Divergence"
}
}
}
}
]
}
]
}
]
JSON
npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
--trackConfigs tracks.json \
--assembly hg38 --loc chr1:151,000,000-151,030,000 \
--track alu_threshold \
--out figure.svgFor a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).
A histogram
A bin step snaps each copy to a bin four pixels wide at any zoom, and an
aggregate counts the copies in each. The bar plots the count without naming
it.
Goes in the tracks array of config.json. See Tracks.
{
"type": "FeatureTrack",
"trackId": "alu_histogram",
"name": "Alu copies per bin",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_histogram-LinearMarkDisplay",
"encoding": { "y": { "axis": { "title": "Copies per bin" } } },
"marks": [
{
"mark": "bar",
"transform": [
{ "type": "bin", "step": "auto" },
{ "type": "aggregate", "ops": [{ "op": "count" }] }
],
"encoding": { "color": { "value": "#7f7f7f" } }
}
]
}
]
}Edits config.json in the current folder. See JBrowse CLI with Desktop.
jbrowse add-track-json '{
"type": "FeatureTrack",
"trackId": "alu_histogram",
"name": "Alu copies per bin",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_histogram-LinearMarkDisplay",
"encoding": { "y": { "axis": { "title": "Copies per bin" } } },
"marks": [
{
"mark": "bar",
"transform": [
{ "type": "bin", "step": "auto" },
{ "type": "aggregate", "ops": [{ "op": "count" }] }
],
"encoding": { "color": { "value": "#7f7f7f" } }
}
]
}
]
}'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": "alu_histogram",
"name": "Alu copies per bin",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_histogram-LinearMarkDisplay",
"encoding": { "y": { "axis": { "title": "Copies per bin" } } },
"marks": [
{
"mark": "bar",
"transform": [
{ "type": "bin", "step": "auto" },
{ "type": "aggregate", "ops": [{ "op": "count" }] }
],
"encoding": { "color": { "value": "#7f7f7f" } }
}
]
}
]
}Open this track in JBrowse Web ↗
Open in JBrowse Desktop ↗
Needs JBrowse Desktop 5.0 or newer. If nothing opens, copy the link and paste it into Desktop's Open JBrowse Web link..., on the start screen or under File → Session.
https://jbrowse.org/code/jb2/main/?config=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2Fconfig.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22FeatureTrack%22%2C%22trackId%22%3A%22alu_histogram%22%2C%22name%22%3A%22Alu+copies+per+bin%22%2C%22assemblyNames%22%3A%5B%22hg38%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22BedTabixAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2FAlu.bed.gz%22%2C%22csi%22%3Atrue%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22alu_histogram-LinearMarkDisplay%22%2C%22encoding%22%3A%7B%22y%22%3A%7B%22axis%22%3A%7B%22title%22%3A%22Copies+per+bin%22%7D%7D%7D%2C%22marks%22%3A%5B%7B%22mark%22%3A%22bar%22%2C%22transform%22%3A%5B%7B%22type%22%3A%22bin%22%2C%22step%22%3A%22auto%22%7D%2C%7B%22type%22%3A%22aggregate%22%2C%22ops%22%3A%5B%7B%22op%22%3A%22count%22%7D%5D%7D%5D%2C%22encoding%22%3A%7B%22color%22%3A%7B%22value%22%3A%22%237f7f7f%22%7D%7D%7D%5D%7D%5D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22hg38%22%2C%22loc%22%3A%22chr1%3A150%2C000%2C000-153%2C000%2C000%22%2C%22tracks%22%3A%5B%22alu_histogram%22%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+Alu+copies+per+binThis view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.
from jbrowse_anywidget import JBrowseApp, fetch_hub
config = fetch_hub("https://jbrowse.org/demos/gene_density/config.json")
app = JBrowseApp(
assemblies=config["assemblies"],
tracks=config.get("tracks", []) + [
{
"type": "FeatureTrack",
"trackId": "alu_histogram",
"name": "Alu copies per bin",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": True
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_histogram-LinearMarkDisplay",
"encoding": {
"y": {
"axis": {
"title": "Copies per bin"
}
}
},
"marks": [
{
"mark": "bar",
"transform": [
{
"type": "bin",
"step": "auto"
},
{
"type": "aggregate",
"ops": [
{
"op": "count"
}
]
}
],
"encoding": {
"color": {
"value": "#7f7f7f"
}
}
}
]
}
]
}
],
views=[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:150,000,000-153,000,000",
"tracks": [
"alu_histogram"
]
}
],
)
app # display the widgetThis view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.
import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
const configUrl = "https://jbrowse.org/demos/gene_density/config.json"
const configPromise = fetch(configUrl)
.then(res => res.json())
.then(config => {
addRelativeUris(config, new URL(configUrl))
return config
})
export default function Figure() {
const config = use(configPromise)
return (
<JBrowse
assemblies={config.assemblies}
tracks={[...(config.tracks ?? []), ...[
{
"type": "FeatureTrack",
"trackId": "alu_histogram",
"name": "Alu copies per bin",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_histogram-LinearMarkDisplay",
"encoding": {
"y": {
"axis": {
"title": "Copies per bin"
}
}
},
"marks": [
{
"mark": "bar",
"transform": [
{
"type": "bin",
"step": "auto"
},
{
"type": "aggregate",
"ops": [
{
"op": "count"
}
]
}
],
"encoding": {
"color": {
"value": "#7f7f7f"
}
}
}
]
}
]
}
]]}
aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
configuration={config.configuration}
views={[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:150,000,000-153,000,000",
"tracks": [
"alu_histogram"
]
}
]}
/>
)
}jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.
cat > tracks.json <<'JSON'
[
{
"type": "FeatureTrack",
"trackId": "alu_histogram",
"name": "Alu copies per bin",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_histogram-LinearMarkDisplay",
"encoding": {
"y": {
"axis": {
"title": "Copies per bin"
}
}
},
"marks": [
{
"mark": "bar",
"transform": [
{
"type": "bin",
"step": "auto"
},
{
"type": "aggregate",
"ops": [
{
"op": "count"
}
]
}
],
"encoding": {
"color": {
"value": "#7f7f7f"
}
}
}
]
}
]
}
]
JSON
npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
--trackConfigs tracks.json \
--assembly hg38 --loc chr1:150,000,000-153,000,000 \
--track alu_histogram \
--out figure.svgFor a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).
A summary per bin
The histogram's bins show mean over the column in place of the count.
Goes in the tracks array of config.json. See Tracks.
{
"type": "FeatureTrack",
"trackId": "alu_mean",
"name": "Mean Alu divergence per bin",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_mean-LinearMarkDisplay",
"encoding": { "y": { "axis": { "title": "Mean divergence" } } },
"marks": [
{
"mark": "bar",
"transform": [
{ "type": "bin", "step": "auto" },
{
"type": "aggregate",
"ops": [{ "op": "mean", "field": "milliDiv" }]
}
],
"encoding": { "color": { "value": "#7f7f7f" } }
}
]
}
]
}Edits config.json in the current folder. See JBrowse CLI with Desktop.
jbrowse add-track-json '{
"type": "FeatureTrack",
"trackId": "alu_mean",
"name": "Mean Alu divergence per bin",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_mean-LinearMarkDisplay",
"encoding": { "y": { "axis": { "title": "Mean divergence" } } },
"marks": [
{
"mark": "bar",
"transform": [
{ "type": "bin", "step": "auto" },
{
"type": "aggregate",
"ops": [{ "op": "mean", "field": "milliDiv" }]
}
],
"encoding": { "color": { "value": "#7f7f7f" } }
}
]
}
]
}'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": "alu_mean",
"name": "Mean Alu divergence per bin",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_mean-LinearMarkDisplay",
"encoding": { "y": { "axis": { "title": "Mean divergence" } } },
"marks": [
{
"mark": "bar",
"transform": [
{ "type": "bin", "step": "auto" },
{
"type": "aggregate",
"ops": [{ "op": "mean", "field": "milliDiv" }]
}
],
"encoding": { "color": { "value": "#7f7f7f" } }
}
]
}
]
}Open this track in JBrowse Web ↗
Open in JBrowse Desktop ↗
Needs JBrowse Desktop 5.0 or newer. If nothing opens, copy the link and paste it into Desktop's Open JBrowse Web link..., on the start screen or under File → Session.
https://jbrowse.org/code/jb2/main/?config=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2Fconfig.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22FeatureTrack%22%2C%22trackId%22%3A%22alu_mean%22%2C%22name%22%3A%22Mean+Alu+divergence+per+bin%22%2C%22assemblyNames%22%3A%5B%22hg38%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22BedTabixAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2FAlu.bed.gz%22%2C%22csi%22%3Atrue%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22alu_mean-LinearMarkDisplay%22%2C%22encoding%22%3A%7B%22y%22%3A%7B%22axis%22%3A%7B%22title%22%3A%22Mean+divergence%22%7D%7D%7D%2C%22marks%22%3A%5B%7B%22mark%22%3A%22bar%22%2C%22transform%22%3A%5B%7B%22type%22%3A%22bin%22%2C%22step%22%3A%22auto%22%7D%2C%7B%22type%22%3A%22aggregate%22%2C%22ops%22%3A%5B%7B%22op%22%3A%22mean%22%2C%22field%22%3A%22milliDiv%22%7D%5D%7D%5D%2C%22encoding%22%3A%7B%22color%22%3A%7B%22value%22%3A%22%237f7f7f%22%7D%7D%7D%5D%7D%5D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22hg38%22%2C%22loc%22%3A%22chr1%3A150%2C000%2C000-153%2C000%2C000%22%2C%22tracks%22%3A%5B%22alu_mean%22%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+Mean+Alu+divergence+per+binThis view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.
from jbrowse_anywidget import JBrowseApp, fetch_hub
config = fetch_hub("https://jbrowse.org/demos/gene_density/config.json")
app = JBrowseApp(
assemblies=config["assemblies"],
tracks=config.get("tracks", []) + [
{
"type": "FeatureTrack",
"trackId": "alu_mean",
"name": "Mean Alu divergence per bin",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": True
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_mean-LinearMarkDisplay",
"encoding": {
"y": {
"axis": {
"title": "Mean divergence"
}
}
},
"marks": [
{
"mark": "bar",
"transform": [
{
"type": "bin",
"step": "auto"
},
{
"type": "aggregate",
"ops": [
{
"op": "mean",
"field": "milliDiv"
}
]
}
],
"encoding": {
"color": {
"value": "#7f7f7f"
}
}
}
]
}
]
}
],
views=[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:150,000,000-153,000,000",
"tracks": [
"alu_mean"
]
}
],
)
app # display the widgetThis view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.
import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
const configUrl = "https://jbrowse.org/demos/gene_density/config.json"
const configPromise = fetch(configUrl)
.then(res => res.json())
.then(config => {
addRelativeUris(config, new URL(configUrl))
return config
})
export default function Figure() {
const config = use(configPromise)
return (
<JBrowse
assemblies={config.assemblies}
tracks={[...(config.tracks ?? []), ...[
{
"type": "FeatureTrack",
"trackId": "alu_mean",
"name": "Mean Alu divergence per bin",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_mean-LinearMarkDisplay",
"encoding": {
"y": {
"axis": {
"title": "Mean divergence"
}
}
},
"marks": [
{
"mark": "bar",
"transform": [
{
"type": "bin",
"step": "auto"
},
{
"type": "aggregate",
"ops": [
{
"op": "mean",
"field": "milliDiv"
}
]
}
],
"encoding": {
"color": {
"value": "#7f7f7f"
}
}
}
]
}
]
}
]]}
aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
configuration={config.configuration}
views={[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:150,000,000-153,000,000",
"tracks": [
"alu_mean"
]
}
]}
/>
)
}jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.
cat > tracks.json <<'JSON'
[
{
"type": "FeatureTrack",
"trackId": "alu_mean",
"name": "Mean Alu divergence per bin",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_mean-LinearMarkDisplay",
"encoding": {
"y": {
"axis": {
"title": "Mean divergence"
}
}
},
"marks": [
{
"mark": "bar",
"transform": [
{
"type": "bin",
"step": "auto"
},
{
"type": "aggregate",
"ops": [
{
"op": "mean",
"field": "milliDiv"
}
]
}
],
"encoding": {
"color": {
"value": "#7f7f7f"
}
}
}
]
}
]
}
]
JSON
npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
--trackConfigs tracks.json \
--assembly hg38 --loc chr1:150,000,000-153,000,000 \
--track alu_mean \
--out figure.svgFor a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).
A pileup
A pileup step writes each copy's row in a first-fit packing, and a rect
draws the packing, colored by strand.
Goes in the tracks array of config.json. See Tracks.
{
"type": "FeatureTrack",
"trackId": "alu_pileup",
"name": "Alu copies, packed",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_pileup-LinearMarkDisplay",
"marks": [
{
"mark": "rect",
"transform": [{ "type": "pileup", "padding": 200 }],
"encoding": {
"color": {
"field": "strand",
"scale": { "domain": ["1", "-1"], "names": ["+", "-"] },
"legend": { "title": "Strand" }
}
}
}
]
}
]
}Edits config.json in the current folder. See JBrowse CLI with Desktop.
jbrowse add-track-json '{
"type": "FeatureTrack",
"trackId": "alu_pileup",
"name": "Alu copies, packed",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_pileup-LinearMarkDisplay",
"marks": [
{
"mark": "rect",
"transform": [{ "type": "pileup", "padding": 200 }],
"encoding": {
"color": {
"field": "strand",
"scale": { "domain": ["1", "-1"], "names": ["+", "-"] },
"legend": { "title": "Strand" }
}
}
}
]
}
]
}'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": "alu_pileup",
"name": "Alu copies, packed",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_pileup-LinearMarkDisplay",
"marks": [
{
"mark": "rect",
"transform": [{ "type": "pileup", "padding": 200 }],
"encoding": {
"color": {
"field": "strand",
"scale": { "domain": ["1", "-1"], "names": ["+", "-"] },
"legend": { "title": "Strand" }
}
}
}
]
}
]
}Open this track in JBrowse Web ↗
Open in JBrowse Desktop ↗
Needs JBrowse Desktop 5.0 or newer. If nothing opens, copy the link and paste it into Desktop's Open JBrowse Web link..., on the start screen or under File → Session.
https://jbrowse.org/code/jb2/main/?config=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2Fconfig.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22FeatureTrack%22%2C%22trackId%22%3A%22alu_pileup%22%2C%22name%22%3A%22Alu+copies%2C+packed%22%2C%22assemblyNames%22%3A%5B%22hg38%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22BedTabixAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2FAlu.bed.gz%22%2C%22csi%22%3Atrue%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22alu_pileup-LinearMarkDisplay%22%2C%22marks%22%3A%5B%7B%22mark%22%3A%22rect%22%2C%22transform%22%3A%5B%7B%22type%22%3A%22pileup%22%2C%22padding%22%3A200%7D%5D%2C%22encoding%22%3A%7B%22color%22%3A%7B%22field%22%3A%22strand%22%2C%22scale%22%3A%7B%22domain%22%3A%5B%221%22%2C%22-1%22%5D%2C%22names%22%3A%5B%22%2B%22%2C%22-%22%5D%7D%2C%22legend%22%3A%7B%22title%22%3A%22Strand%22%7D%7D%7D%7D%5D%7D%5D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22hg38%22%2C%22loc%22%3A%22chr1%3A151%2C000%2C000-151%2C030%2C000%22%2C%22tracks%22%3A%5B%22alu_pileup%22%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+Alu+copies%2C+packedThis view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.
from jbrowse_anywidget import JBrowseApp, fetch_hub
config = fetch_hub("https://jbrowse.org/demos/gene_density/config.json")
app = JBrowseApp(
assemblies=config["assemblies"],
tracks=config.get("tracks", []) + [
{
"type": "FeatureTrack",
"trackId": "alu_pileup",
"name": "Alu copies, packed",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": True
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_pileup-LinearMarkDisplay",
"marks": [
{
"mark": "rect",
"transform": [
{
"type": "pileup",
"padding": 200
}
],
"encoding": {
"color": {
"field": "strand",
"scale": {
"domain": [
"1",
"-1"
],
"names": [
"+",
"-"
]
},
"legend": {
"title": "Strand"
}
}
}
}
]
}
]
}
],
views=[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_pileup"
]
}
],
)
app # display the widgetThis view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.
import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
const configUrl = "https://jbrowse.org/demos/gene_density/config.json"
const configPromise = fetch(configUrl)
.then(res => res.json())
.then(config => {
addRelativeUris(config, new URL(configUrl))
return config
})
export default function Figure() {
const config = use(configPromise)
return (
<JBrowse
assemblies={config.assemblies}
tracks={[...(config.tracks ?? []), ...[
{
"type": "FeatureTrack",
"trackId": "alu_pileup",
"name": "Alu copies, packed",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_pileup-LinearMarkDisplay",
"marks": [
{
"mark": "rect",
"transform": [
{
"type": "pileup",
"padding": 200
}
],
"encoding": {
"color": {
"field": "strand",
"scale": {
"domain": [
"1",
"-1"
],
"names": [
"+",
"-"
]
},
"legend": {
"title": "Strand"
}
}
}
}
]
}
]
}
]]}
aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
configuration={config.configuration}
views={[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_pileup"
]
}
]}
/>
)
}jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.
cat > tracks.json <<'JSON'
[
{
"type": "FeatureTrack",
"trackId": "alu_pileup",
"name": "Alu copies, packed",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_pileup-LinearMarkDisplay",
"marks": [
{
"mark": "rect",
"transform": [
{
"type": "pileup",
"padding": 200
}
],
"encoding": {
"color": {
"field": "strand",
"scale": {
"domain": [
"1",
"-1"
],
"names": [
"+",
"-"
]
},
"legend": {
"title": "Strand"
}
}
}
}
]
}
]
}
]
JSON
npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
--trackConfigs tracks.json \
--assembly hg38 --loc chr1:151,000,000-151,030,000 \
--track alu_pileup \
--out figure.svgFor a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).
A facet
facet splits the copies on a field and stacks one section per value under a
chip. A pileup in the facet's transform packs each section separately.
Goes in the tracks array of config.json. See Tracks.
{
"type": "FeatureTrack",
"trackId": "alu_facet",
"name": "Alu copies by strand",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_facet-LinearMarkDisplay",
"facet": { "field": "strand", "transform": [{ "type": "pileup" }] },
"marks": [
{ "mark": "rect", "encoding": { "color": { "value": "#4575b4" } } }
]
}
]
}Edits config.json in the current folder. See JBrowse CLI with Desktop.
jbrowse add-track-json '{
"type": "FeatureTrack",
"trackId": "alu_facet",
"name": "Alu copies by strand",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_facet-LinearMarkDisplay",
"facet": { "field": "strand", "transform": [{ "type": "pileup" }] },
"marks": [
{ "mark": "rect", "encoding": { "color": { "value": "#4575b4" } } }
]
}
]
}'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": "alu_facet",
"name": "Alu copies by strand",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_facet-LinearMarkDisplay",
"facet": { "field": "strand", "transform": [{ "type": "pileup" }] },
"marks": [
{ "mark": "rect", "encoding": { "color": { "value": "#4575b4" } } }
]
}
]
}Open this track in JBrowse Web ↗
Open in JBrowse Desktop ↗
Needs JBrowse Desktop 5.0 or newer. If nothing opens, copy the link and paste it into Desktop's Open JBrowse Web link..., on the start screen or under File → Session.
https://jbrowse.org/code/jb2/main/?config=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2Fconfig.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22FeatureTrack%22%2C%22trackId%22%3A%22alu_facet%22%2C%22name%22%3A%22Alu+copies+by+strand%22%2C%22assemblyNames%22%3A%5B%22hg38%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22BedTabixAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2FAlu.bed.gz%22%2C%22csi%22%3Atrue%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22alu_facet-LinearMarkDisplay%22%2C%22facet%22%3A%7B%22field%22%3A%22strand%22%2C%22transform%22%3A%5B%7B%22type%22%3A%22pileup%22%7D%5D%7D%2C%22marks%22%3A%5B%7B%22mark%22%3A%22rect%22%2C%22encoding%22%3A%7B%22color%22%3A%7B%22value%22%3A%22%234575b4%22%7D%7D%7D%5D%7D%5D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22hg38%22%2C%22loc%22%3A%22chr1%3A151%2C000%2C000-151%2C030%2C000%22%2C%22tracks%22%3A%5B%22alu_facet%22%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+Alu+copies+by+strandThis view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.
from jbrowse_anywidget import JBrowseApp, fetch_hub
config = fetch_hub("https://jbrowse.org/demos/gene_density/config.json")
app = JBrowseApp(
assemblies=config["assemblies"],
tracks=config.get("tracks", []) + [
{
"type": "FeatureTrack",
"trackId": "alu_facet",
"name": "Alu copies by strand",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": True
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_facet-LinearMarkDisplay",
"facet": {
"field": "strand",
"transform": [
{
"type": "pileup"
}
]
},
"marks": [
{
"mark": "rect",
"encoding": {
"color": {
"value": "#4575b4"
}
}
}
]
}
]
}
],
views=[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_facet"
]
}
],
)
app # display the widgetThis view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.
import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
const configUrl = "https://jbrowse.org/demos/gene_density/config.json"
const configPromise = fetch(configUrl)
.then(res => res.json())
.then(config => {
addRelativeUris(config, new URL(configUrl))
return config
})
export default function Figure() {
const config = use(configPromise)
return (
<JBrowse
assemblies={config.assemblies}
tracks={[...(config.tracks ?? []), ...[
{
"type": "FeatureTrack",
"trackId": "alu_facet",
"name": "Alu copies by strand",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_facet-LinearMarkDisplay",
"facet": {
"field": "strand",
"transform": [
{
"type": "pileup"
}
]
},
"marks": [
{
"mark": "rect",
"encoding": {
"color": {
"value": "#4575b4"
}
}
}
]
}
]
}
]]}
aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
configuration={config.configuration}
views={[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_facet"
]
}
]}
/>
)
}jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.
cat > tracks.json <<'JSON'
[
{
"type": "FeatureTrack",
"trackId": "alu_facet",
"name": "Alu copies by strand",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_facet-LinearMarkDisplay",
"facet": {
"field": "strand",
"transform": [
{
"type": "pileup"
}
]
},
"marks": [
{
"mark": "rect",
"encoding": {
"color": {
"value": "#4575b4"
}
}
}
]
}
]
}
]
JSON
npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
--trackConfigs tracks.json \
--assembly hg38 --loc chr1:151,000,000-151,030,000 \
--track alu_facet \
--out figure.svgFor a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).
Labels
A text mark prints a field over each feature, culled where two labels would
overlap. maxBpPerPx stops the labels once the view is too wide to read them.
Goes in the tracks array of config.json. See Tracks.
{
"type": "FeatureTrack",
"trackId": "alu_labels",
"name": "Alu divergence, labelled",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_labels-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": { "y": "milliDiv", "color": { "value": "#c8d8ee" } }
},
{
"mark": "text",
"encoding": { "y": "milliDiv", "text": "name" },
"maxBpPerPx": 50
}
]
}
]
}Edits config.json in the current folder. See JBrowse CLI with Desktop.
jbrowse add-track-json '{
"type": "FeatureTrack",
"trackId": "alu_labels",
"name": "Alu divergence, labelled",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_labels-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": { "y": "milliDiv", "color": { "value": "#c8d8ee" } }
},
{
"mark": "text",
"encoding": { "y": "milliDiv", "text": "name" },
"maxBpPerPx": 50
}
]
}
]
}'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": "alu_labels",
"name": "Alu divergence, labelled",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_labels-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": { "y": "milliDiv", "color": { "value": "#c8d8ee" } }
},
{
"mark": "text",
"encoding": { "y": "milliDiv", "text": "name" },
"maxBpPerPx": 50
}
]
}
]
}Open this track in JBrowse Web ↗
Open in JBrowse Desktop ↗
Needs JBrowse Desktop 5.0 or newer. If nothing opens, copy the link and paste it into Desktop's Open JBrowse Web link..., on the start screen or under File → Session.
https://jbrowse.org/code/jb2/main/?config=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2Fconfig.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22FeatureTrack%22%2C%22trackId%22%3A%22alu_labels%22%2C%22name%22%3A%22Alu+divergence%2C+labelled%22%2C%22assemblyNames%22%3A%5B%22hg38%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22BedTabixAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2FAlu.bed.gz%22%2C%22csi%22%3Atrue%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22alu_labels-LinearMarkDisplay%22%2C%22marks%22%3A%5B%7B%22mark%22%3A%22bar%22%2C%22encoding%22%3A%7B%22y%22%3A%22milliDiv%22%2C%22color%22%3A%7B%22value%22%3A%22%23c8d8ee%22%7D%7D%7D%2C%7B%22mark%22%3A%22text%22%2C%22encoding%22%3A%7B%22y%22%3A%22milliDiv%22%2C%22text%22%3A%22name%22%7D%2C%22maxBpPerPx%22%3A50%7D%5D%7D%5D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22hg38%22%2C%22loc%22%3A%22chr1%3A151%2C000%2C000-151%2C030%2C000%22%2C%22tracks%22%3A%5B%22alu_labels%22%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+Alu+divergence%2C+labelledThis view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.
from jbrowse_anywidget import JBrowseApp, fetch_hub
config = fetch_hub("https://jbrowse.org/demos/gene_density/config.json")
app = JBrowseApp(
assemblies=config["assemblies"],
tracks=config.get("tracks", []) + [
{
"type": "FeatureTrack",
"trackId": "alu_labels",
"name": "Alu divergence, labelled",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": True
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_labels-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"value": "#c8d8ee"
}
}
},
{
"mark": "text",
"encoding": {
"y": "milliDiv",
"text": "name"
},
"maxBpPerPx": 50
}
]
}
]
}
],
views=[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_labels"
]
}
],
)
app # display the widgetThis view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.
import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
const configUrl = "https://jbrowse.org/demos/gene_density/config.json"
const configPromise = fetch(configUrl)
.then(res => res.json())
.then(config => {
addRelativeUris(config, new URL(configUrl))
return config
})
export default function Figure() {
const config = use(configPromise)
return (
<JBrowse
assemblies={config.assemblies}
tracks={[...(config.tracks ?? []), ...[
{
"type": "FeatureTrack",
"trackId": "alu_labels",
"name": "Alu divergence, labelled",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_labels-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"value": "#c8d8ee"
}
}
},
{
"mark": "text",
"encoding": {
"y": "milliDiv",
"text": "name"
},
"maxBpPerPx": 50
}
]
}
]
}
]]}
aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
configuration={config.configuration}
views={[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_labels"
]
}
]}
/>
)
}jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.
cat > tracks.json <<'JSON'
[
{
"type": "FeatureTrack",
"trackId": "alu_labels",
"name": "Alu divergence, labelled",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_labels-LinearMarkDisplay",
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv",
"color": {
"value": "#c8d8ee"
}
}
},
{
"mark": "text",
"encoding": {
"y": "milliDiv",
"text": "name"
},
"maxBpPerPx": 50
}
]
}
]
}
]
JSON
npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
--trackConfigs tracks.json \
--assembly hg38 --loc chr1:151,000,000-151,030,000 \
--track alu_labels \
--out figure.svgFor a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).
Reference lines and an axis title
encoding.y holds the guides a reader checks a plot against: rules, lines at
chosen values, and title, the caption beside the axis.
Goes in the tracks array of config.json. See Tracks.
{
"type": "FeatureTrack",
"trackId": "alu_rules",
"name": "Alu divergence, with rules",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_rules-LinearMarkDisplay",
"encoding": {
"y": {
"axis": { "title": "Divergence, per mille" },
"rules": [{ "value": 80, "color": "#d73027", "label": "young" }, 150]
}
},
"marks": [{ "mark": "bar", "encoding": { "y": "milliDiv" } }]
}
]
}Edits config.json in the current folder. See JBrowse CLI with Desktop.
jbrowse add-track-json '{
"type": "FeatureTrack",
"trackId": "alu_rules",
"name": "Alu divergence, with rules",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_rules-LinearMarkDisplay",
"encoding": {
"y": {
"axis": { "title": "Divergence, per mille" },
"rules": [{ "value": 80, "color": "#d73027", "label": "young" }, 150]
}
},
"marks": [{ "mark": "bar", "encoding": { "y": "milliDiv" } }]
}
]
}'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": "alu_rules",
"name": "Alu divergence, with rules",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_rules-LinearMarkDisplay",
"encoding": {
"y": {
"axis": { "title": "Divergence, per mille" },
"rules": [{ "value": 80, "color": "#d73027", "label": "young" }, 150]
}
},
"marks": [{ "mark": "bar", "encoding": { "y": "milliDiv" } }]
}
]
}Open this track in JBrowse Web ↗
Open in JBrowse Desktop ↗
Needs JBrowse Desktop 5.0 or newer. If nothing opens, copy the link and paste it into Desktop's Open JBrowse Web link..., on the start screen or under File → Session.
https://jbrowse.org/code/jb2/main/?config=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2Fconfig.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22FeatureTrack%22%2C%22trackId%22%3A%22alu_rules%22%2C%22name%22%3A%22Alu+divergence%2C+with+rules%22%2C%22assemblyNames%22%3A%5B%22hg38%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22BedTabixAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2FAlu.bed.gz%22%2C%22csi%22%3Atrue%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22alu_rules-LinearMarkDisplay%22%2C%22encoding%22%3A%7B%22y%22%3A%7B%22axis%22%3A%7B%22title%22%3A%22Divergence%2C+per+mille%22%7D%2C%22rules%22%3A%5B%7B%22value%22%3A80%2C%22color%22%3A%22%23d73027%22%2C%22label%22%3A%22young%22%7D%2C150%5D%7D%7D%2C%22marks%22%3A%5B%7B%22mark%22%3A%22bar%22%2C%22encoding%22%3A%7B%22y%22%3A%22milliDiv%22%7D%7D%5D%7D%5D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22hg38%22%2C%22loc%22%3A%22chr1%3A151%2C000%2C000-151%2C030%2C000%22%2C%22tracks%22%3A%5B%22alu_rules%22%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+Alu+divergence%2C+with+rulesThis view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.
from jbrowse_anywidget import JBrowseApp, fetch_hub
config = fetch_hub("https://jbrowse.org/demos/gene_density/config.json")
app = JBrowseApp(
assemblies=config["assemblies"],
tracks=config.get("tracks", []) + [
{
"type": "FeatureTrack",
"trackId": "alu_rules",
"name": "Alu divergence, with rules",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": True
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_rules-LinearMarkDisplay",
"encoding": {
"y": {
"axis": {
"title": "Divergence, per mille"
},
"rules": [
{
"value": 80,
"color": "#d73027",
"label": "young"
},
150
]
}
},
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv"
}
}
]
}
]
}
],
views=[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_rules"
]
}
],
)
app # display the widgetThis view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.
import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
const configUrl = "https://jbrowse.org/demos/gene_density/config.json"
const configPromise = fetch(configUrl)
.then(res => res.json())
.then(config => {
addRelativeUris(config, new URL(configUrl))
return config
})
export default function Figure() {
const config = use(configPromise)
return (
<JBrowse
assemblies={config.assemblies}
tracks={[...(config.tracks ?? []), ...[
{
"type": "FeatureTrack",
"trackId": "alu_rules",
"name": "Alu divergence, with rules",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_rules-LinearMarkDisplay",
"encoding": {
"y": {
"axis": {
"title": "Divergence, per mille"
},
"rules": [
{
"value": 80,
"color": "#d73027",
"label": "young"
},
150
]
}
},
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv"
}
}
]
}
]
}
]]}
aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
configuration={config.configuration}
views={[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr1:151,000,000-151,030,000",
"tracks": [
"alu_rules"
]
}
]}
/>
)
}jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.
cat > tracks.json <<'JSON'
[
{
"type": "FeatureTrack",
"trackId": "alu_rules",
"name": "Alu divergence, with rules",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "alu_rules-LinearMarkDisplay",
"encoding": {
"y": {
"axis": {
"title": "Divergence, per mille"
},
"rules": [
{
"value": 80,
"color": "#d73027",
"label": "young"
},
150
]
}
},
"marks": [
{
"mark": "bar",
"encoding": {
"y": "milliDiv"
}
}
]
}
]
}
]
JSON
npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
--trackConfigs tracks.json \
--assembly hg38 --loc chr1:151,000,000-151,030,000 \
--track alu_rules \
--out figure.svgFor a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).
Links
A link draws a curve from x to x2. Over a BED of read pairs, each row
running from the leftmost read to the far end of its insert, that is one arc per
pair, stroked by its mapping quality.
Goes in the tracks array of config.json. See Tracks.
{
"type": "FeatureTrack",
"trackId": "pair_links",
"name": "NA12878 pairs over 1 kb, as arcs",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/read_marks/NA12878.chr20.discordant_pairs.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "pair_links-LinearMarkDisplay",
"marks": [
{
"mark": "link",
"transform": [
{ "type": "filter", "expr": "jexl:feature.tlen < 20000" }
],
"encoding": {
"color": {
"field": "score",
"scale": {
"type": "linear",
"domainMin": 0,
"domainMax": 60,
"range": ["#bdbdbd", "#1f4e9a"]
},
"legend": { "title": "Mapping quality" }
}
}
}
]
}
]
}Edits config.json in the current folder. See JBrowse CLI with Desktop.
jbrowse add-track-json '{
"type": "FeatureTrack",
"trackId": "pair_links",
"name": "NA12878 pairs over 1 kb, as arcs",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/read_marks/NA12878.chr20.discordant_pairs.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "pair_links-LinearMarkDisplay",
"marks": [
{
"mark": "link",
"transform": [
{ "type": "filter", "expr": "jexl:feature.tlen < 20000" }
],
"encoding": {
"color": {
"field": "score",
"scale": {
"type": "linear",
"domainMin": 0,
"domainMax": 60,
"range": ["#bdbdbd", "#1f4e9a"]
},
"legend": { "title": "Mapping quality" }
}
}
}
]
}
]
}'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": "pair_links",
"name": "NA12878 pairs over 1 kb, as arcs",
"assemblyNames": ["hg38"],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/read_marks/NA12878.chr20.discordant_pairs.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "pair_links-LinearMarkDisplay",
"marks": [
{
"mark": "link",
"transform": [
{ "type": "filter", "expr": "jexl:feature.tlen < 20000" }
],
"encoding": {
"color": {
"field": "score",
"scale": {
"type": "linear",
"domainMin": 0,
"domainMax": 60,
"range": ["#bdbdbd", "#1f4e9a"]
},
"legend": { "title": "Mapping quality" }
}
}
}
]
}
]
}Open this track in JBrowse Web ↗
Open in JBrowse Desktop ↗
Needs JBrowse Desktop 5.0 or newer. If nothing opens, copy the link and paste it into Desktop's Open JBrowse Web link..., on the start screen or under File → Session.
https://jbrowse.org/code/jb2/main/?config=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fread_marks%2Fconfig.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22FeatureTrack%22%2C%22trackId%22%3A%22pair_links%22%2C%22name%22%3A%22NA12878+pairs+over+1+kb%2C+as+arcs%22%2C%22assemblyNames%22%3A%5B%22hg38%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22BedTabixAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fread_marks%2FNA12878.chr20.discordant_pairs.bed.gz%22%2C%22csi%22%3Atrue%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22pair_links-LinearMarkDisplay%22%2C%22marks%22%3A%5B%7B%22mark%22%3A%22link%22%2C%22transform%22%3A%5B%7B%22type%22%3A%22filter%22%2C%22expr%22%3A%22jexl%3Afeature.tlen+%3C+20000%22%7D%5D%2C%22encoding%22%3A%7B%22color%22%3A%7B%22field%22%3A%22score%22%2C%22scale%22%3A%7B%22type%22%3A%22linear%22%2C%22domainMin%22%3A0%2C%22domainMax%22%3A60%2C%22range%22%3A%5B%22%23bdbdbd%22%2C%22%231f4e9a%22%5D%7D%2C%22legend%22%3A%7B%22title%22%3A%22Mapping+quality%22%7D%7D%7D%7D%5D%7D%5D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22hg38%22%2C%22loc%22%3A%22chr20%3A32%2C925%2C000-32%2C955%2C000%22%2C%22tracks%22%3A%5B%22pair_links%22%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+NA12878+pairs+over+1+kb%2C+as+arcsThis view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.
from jbrowse_anywidget import JBrowseApp, fetch_hub
config = fetch_hub("https://jbrowse.org/demos/read_marks/config.json")
app = JBrowseApp(
assemblies=config["assemblies"],
tracks=config.get("tracks", []) + [
{
"type": "FeatureTrack",
"trackId": "pair_links",
"name": "NA12878 pairs over 1 kb, as arcs",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/read_marks/NA12878.chr20.discordant_pairs.bed.gz",
"csi": True
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "pair_links-LinearMarkDisplay",
"marks": [
{
"mark": "link",
"transform": [
{
"type": "filter",
"expr": "jexl:feature.tlen < 20000"
}
],
"encoding": {
"color": {
"field": "score",
"scale": {
"type": "linear",
"domainMin": 0,
"domainMax": 60,
"range": [
"#bdbdbd",
"#1f4e9a"
]
},
"legend": {
"title": "Mapping quality"
}
}
}
}
]
}
]
}
],
views=[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr20:32,925,000-32,955,000",
"tracks": [
"pair_links"
]
}
],
)
app # display the widgetThis view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.
import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
const configUrl = "https://jbrowse.org/demos/read_marks/config.json"
const configPromise = fetch(configUrl)
.then(res => res.json())
.then(config => {
addRelativeUris(config, new URL(configUrl))
return config
})
export default function Figure() {
const config = use(configPromise)
return (
<JBrowse
assemblies={config.assemblies}
tracks={[...(config.tracks ?? []), ...[
{
"type": "FeatureTrack",
"trackId": "pair_links",
"name": "NA12878 pairs over 1 kb, as arcs",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/read_marks/NA12878.chr20.discordant_pairs.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "pair_links-LinearMarkDisplay",
"marks": [
{
"mark": "link",
"transform": [
{
"type": "filter",
"expr": "jexl:feature.tlen < 20000"
}
],
"encoding": {
"color": {
"field": "score",
"scale": {
"type": "linear",
"domainMin": 0,
"domainMax": 60,
"range": [
"#bdbdbd",
"#1f4e9a"
]
},
"legend": {
"title": "Mapping quality"
}
}
}
}
]
}
]
}
]]}
aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
configuration={config.configuration}
views={[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr20:32,925,000-32,955,000",
"tracks": [
"pair_links"
]
}
]}
/>
)
}jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.
cat > tracks.json <<'JSON'
[
{
"type": "FeatureTrack",
"trackId": "pair_links",
"name": "NA12878 pairs over 1 kb, as arcs",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "BedTabixAdapter",
"uri": "https://jbrowse.org/demos/read_marks/NA12878.chr20.discordant_pairs.bed.gz",
"csi": true
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "pair_links-LinearMarkDisplay",
"marks": [
{
"mark": "link",
"transform": [
{
"type": "filter",
"expr": "jexl:feature.tlen < 20000"
}
],
"encoding": {
"color": {
"field": "score",
"scale": {
"type": "linear",
"domainMin": 0,
"domainMax": 60,
"range": [
"#bdbdbd",
"#1f4e9a"
]
},
"legend": {
"title": "Mapping quality"
}
}
}
}
]
}
]
}
]
JSON
npx @jbrowse/img --config https://jbrowse.org/demos/read_marks/config.json \
--trackConfigs tracks.json \
--assembly hg38 --loc chr20:32,925,000-32,955,000 \
--track pair_links \
--out figure.svgFor a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).
One row per file
Over a multi-BigWig, rows: "source" gives each file a row on one shared axis,
with the row labels, Sort rows by value here and Cluster rows by
similarity... in the track menu.
Goes in the tracks array of config.json. See Tracks.
{
"type": "MultiQuantitativeTrack",
"trackId": "pur_cnv_rows",
"name": "Copy number, six PUR individuals",
"assemblyNames": ["hg38"],
"adapter": {
"type": "MultiWiggleAdapter",
"bigWigs": [
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01177.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01083.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01070.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01395.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG00731.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG00553.qm2.CN.1k.bw"
]
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "pur_cnv_rows-LinearMarkDisplay",
"rows": "source",
"encoding": {
"y": {
"scale": { "domainMin": 0, "domainMax": 10 },
"axis": { "title": "Copies" }
}
},
"marks": [
{
"mark": "bar",
"encoding": { "y": "score", "color": { "value": "#4575b4" } }
}
]
}
]
}Edits config.json in the current folder. See JBrowse CLI with Desktop.
jbrowse add-track-json '{
"type": "MultiQuantitativeTrack",
"trackId": "pur_cnv_rows",
"name": "Copy number, six PUR individuals",
"assemblyNames": ["hg38"],
"adapter": {
"type": "MultiWiggleAdapter",
"bigWigs": [
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01177.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01083.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01070.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01395.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG00731.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG00553.qm2.CN.1k.bw"
]
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "pur_cnv_rows-LinearMarkDisplay",
"rows": "source",
"encoding": {
"y": {
"scale": { "domainMin": 0, "domainMax": 10 },
"axis": { "title": "Copies" }
}
},
"marks": [
{
"mark": "bar",
"encoding": { "y": "score", "color": { "value": "#4575b4" } }
}
]
}
]
}'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": "pur_cnv_rows",
"name": "Copy number, six PUR individuals",
"assemblyNames": ["hg38"],
"adapter": {
"type": "MultiWiggleAdapter",
"bigWigs": [
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01177.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01083.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01070.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01395.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG00731.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG00553.qm2.CN.1k.bw"
]
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "pur_cnv_rows-LinearMarkDisplay",
"rows": "source",
"encoding": {
"y": {
"scale": { "domainMin": 0, "domainMax": 10 },
"axis": { "title": "Copies" }
}
},
"marks": [
{
"mark": "bar",
"encoding": { "y": "score", "color": { "value": "#4575b4" } }
}
]
}
]
}Open this track in JBrowse Web ↗
Open in JBrowse Desktop ↗
Needs JBrowse Desktop 5.0 or newer. If nothing opens, copy the link and paste it into Desktop's Open JBrowse Web link..., on the start screen or under File → Session.
https://jbrowse.org/code/jb2/main/?config=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fgene_density%2Fconfig.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22MultiQuantitativeTrack%22%2C%22trackId%22%3A%22pur_cnv_rows%22%2C%22name%22%3A%22Copy+number%2C+six+PUR+individuals%22%2C%22assemblyNames%22%3A%5B%22hg38%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22MultiWiggleAdapter%22%2C%22bigWigs%22%3A%5B%22https%3A%2F%2Fjbrowse.org%2Fgenomes%2FGRCh38%2F1000g%2Fkidd_lab_cnv%2FPUR%2FHG01177.qm2.CN.1k.bw%22%2C%22https%3A%2F%2Fjbrowse.org%2Fgenomes%2FGRCh38%2F1000g%2Fkidd_lab_cnv%2FPUR%2FHG01083.qm2.CN.1k.bw%22%2C%22https%3A%2F%2Fjbrowse.org%2Fgenomes%2FGRCh38%2F1000g%2Fkidd_lab_cnv%2FPUR%2FHG01070.qm2.CN.1k.bw%22%2C%22https%3A%2F%2Fjbrowse.org%2Fgenomes%2FGRCh38%2F1000g%2Fkidd_lab_cnv%2FPUR%2FHG01395.qm2.CN.1k.bw%22%2C%22https%3A%2F%2Fjbrowse.org%2Fgenomes%2FGRCh38%2F1000g%2Fkidd_lab_cnv%2FPUR%2FHG00731.qm2.CN.1k.bw%22%2C%22https%3A%2F%2Fjbrowse.org%2Fgenomes%2FGRCh38%2F1000g%2Fkidd_lab_cnv%2FPUR%2FHG00553.qm2.CN.1k.bw%22%5D%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22pur_cnv_rows-LinearMarkDisplay%22%2C%22rows%22%3A%22source%22%2C%22encoding%22%3A%7B%22y%22%3A%7B%22scale%22%3A%7B%22domainMin%22%3A0%2C%22domainMax%22%3A10%7D%2C%22axis%22%3A%7B%22title%22%3A%22Copies%22%7D%7D%7D%2C%22marks%22%3A%5B%7B%22mark%22%3A%22bar%22%2C%22encoding%22%3A%7B%22y%22%3A%22score%22%2C%22color%22%3A%7B%22value%22%3A%22%234575b4%22%7D%7D%7D%5D%7D%5D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22hg38%22%2C%22loc%22%3A%22chr17%3A36%2C193%2C000-36%2C198%2C000%22%2C%22tracks%22%3A%5B%22pur_cnv_rows%22%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+Copy+number%2C+six+PUR+individualsThis view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.
from jbrowse_anywidget import JBrowseApp, fetch_hub
config = fetch_hub("https://jbrowse.org/demos/gene_density/config.json")
app = JBrowseApp(
assemblies=config["assemblies"],
tracks=config.get("tracks", []) + [
{
"type": "MultiQuantitativeTrack",
"trackId": "pur_cnv_rows",
"name": "Copy number, six PUR individuals",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "MultiWiggleAdapter",
"bigWigs": [
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01177.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01083.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01070.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01395.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG00731.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG00553.qm2.CN.1k.bw"
]
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "pur_cnv_rows-LinearMarkDisplay",
"rows": "source",
"encoding": {
"y": {
"scale": {
"domainMin": 0,
"domainMax": 10
},
"axis": {
"title": "Copies"
}
}
},
"marks": [
{
"mark": "bar",
"encoding": {
"y": "score",
"color": {
"value": "#4575b4"
}
}
}
]
}
]
}
],
views=[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr17:36,193,000-36,198,000",
"tracks": [
"pur_cnv_rows"
]
}
],
)
app # display the widgetThis view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.
import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
const configUrl = "https://jbrowse.org/demos/gene_density/config.json"
const configPromise = fetch(configUrl)
.then(res => res.json())
.then(config => {
addRelativeUris(config, new URL(configUrl))
return config
})
export default function Figure() {
const config = use(configPromise)
return (
<JBrowse
assemblies={config.assemblies}
tracks={[...(config.tracks ?? []), ...[
{
"type": "MultiQuantitativeTrack",
"trackId": "pur_cnv_rows",
"name": "Copy number, six PUR individuals",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "MultiWiggleAdapter",
"bigWigs": [
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01177.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01083.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01070.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01395.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG00731.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG00553.qm2.CN.1k.bw"
]
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "pur_cnv_rows-LinearMarkDisplay",
"rows": "source",
"encoding": {
"y": {
"scale": {
"domainMin": 0,
"domainMax": 10
},
"axis": {
"title": "Copies"
}
}
},
"marks": [
{
"mark": "bar",
"encoding": {
"y": "score",
"color": {
"value": "#4575b4"
}
}
}
]
}
]
}
]]}
aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
configuration={config.configuration}
views={[
{
"type": "LinearGenomeView",
"assembly": "hg38",
"loc": "chr17:36,193,000-36,198,000",
"tracks": [
"pur_cnv_rows"
]
}
]}
/>
)
}jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.
cat > tracks.json <<'JSON'
[
{
"type": "MultiQuantitativeTrack",
"trackId": "pur_cnv_rows",
"name": "Copy number, six PUR individuals",
"assemblyNames": [
"hg38"
],
"adapter": {
"type": "MultiWiggleAdapter",
"bigWigs": [
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01177.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01083.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01070.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG01395.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG00731.qm2.CN.1k.bw",
"https://jbrowse.org/genomes/GRCh38/1000g/kidd_lab_cnv/PUR/HG00553.qm2.CN.1k.bw"
]
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "pur_cnv_rows-LinearMarkDisplay",
"rows": "source",
"encoding": {
"y": {
"scale": {
"domainMin": 0,
"domainMax": 10
},
"axis": {
"title": "Copies"
}
}
},
"marks": [
{
"mark": "bar",
"encoding": {
"y": "score",
"color": {
"value": "#4575b4"
}
}
}
]
}
]
}
]
JSON
npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
--trackConfigs tracks.json \
--assembly hg38 --loc chr17:36,193,000-36,198,000 \
--track pur_cnv_rows \
--out figure.svgFor a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).
Percent identity along an alignment
A PAF's SyntenyTrack takes the mark display too. Each alignment's identity
comes from minimap2's de divergence tag, or from its match count over its
alignment length in a PAF without one. A rule at that value across each
alignment is a percent identity plot, the picture
PipMaker drew for a pair of genomes.
Stretches with no rule are where nothing aligned. Coloring each rule by the same
value separates short alignments that overlap, and legend.show is off because
the axis already reads the color.
Goes in the tracks array of config.json. See Tracks.
{
"type": "SyntenyTrack",
"trackId": "hpylori_identity",
"name": "26695 against J99, percent identity",
"assemblyNames": ["GCF_000982695.1", "GCF_000307795.1"],
"adapter": {
"type": "PairwiseIndexedPAFAdapter",
"uri": "https://jbrowse.org/demos/hpylori/26695_vs_j99.pif.gz",
"assemblyNames": ["GCF_000982695.1", "GCF_000307795.1"]
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "hpylori_identity-LinearMarkDisplay",
"legend": { "show": false },
"encoding": {
"y": {
"scale": { "domainMin": 0.5, "domainMax": 1 },
"axis": { "title": "Identity" }
}
},
"marks": [
{
"mark": "rule",
"encoding": {
"y": "identity",
"strokeWidth": 4,
"color": {
"field": "identity",
"scale": {
"type": "linear",
"scheme": "viridis",
"domainMin": 0.7,
"domainMax": 1
},
"legend": { "title": "Identity" }
}
}
}
]
}
]
}Edits config.json in the current folder. See JBrowse CLI with Desktop.
jbrowse add-track-json '{
"type": "SyntenyTrack",
"trackId": "hpylori_identity",
"name": "26695 against J99, percent identity",
"assemblyNames": ["GCF_000982695.1", "GCF_000307795.1"],
"adapter": {
"type": "PairwiseIndexedPAFAdapter",
"uri": "https://jbrowse.org/demos/hpylori/26695_vs_j99.pif.gz",
"assemblyNames": ["GCF_000982695.1", "GCF_000307795.1"]
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "hpylori_identity-LinearMarkDisplay",
"legend": { "show": false },
"encoding": {
"y": {
"scale": { "domainMin": 0.5, "domainMax": 1 },
"axis": { "title": "Identity" }
}
},
"marks": [
{
"mark": "rule",
"encoding": {
"y": "identity",
"strokeWidth": 4,
"color": {
"field": "identity",
"scale": {
"type": "linear",
"scheme": "viridis",
"domainMin": 0.7,
"domainMax": 1
},
"legend": { "title": "Identity" }
}
}
}
]
}
]
}'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": "SyntenyTrack",
"trackId": "hpylori_identity",
"name": "26695 against J99, percent identity",
"assemblyNames": ["GCF_000982695.1", "GCF_000307795.1"],
"adapter": {
"type": "PairwiseIndexedPAFAdapter",
"uri": "https://jbrowse.org/demos/hpylori/26695_vs_j99.pif.gz",
"assemblyNames": ["GCF_000982695.1", "GCF_000307795.1"]
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "hpylori_identity-LinearMarkDisplay",
"legend": { "show": false },
"encoding": {
"y": {
"scale": { "domainMin": 0.5, "domainMax": 1 },
"axis": { "title": "Identity" }
}
},
"marks": [
{
"mark": "rule",
"encoding": {
"y": "identity",
"strokeWidth": 4,
"color": {
"field": "identity",
"scale": {
"type": "linear",
"scheme": "viridis",
"domainMin": 0.7,
"domainMax": 1
},
"legend": { "title": "Identity" }
}
}
}
]
}
]
}That shows it in the linear view. For the synteny view, open Add → Linear synteny view, pick the track under Quick start, and click Launch.
Open this track in JBrowse Web ↗
Open in JBrowse Desktop ↗
Needs JBrowse Desktop 5.0 or newer. If nothing opens, copy the link and paste it into Desktop's Open JBrowse Web link..., on the start screen or under File → Session.
https://jbrowse.org/code/jb2/main/?config=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fhpylori%2Fconfig.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22SyntenyTrack%22%2C%22trackId%22%3A%22hpylori_identity%22%2C%22name%22%3A%2226695+against+J99%2C+percent+identity%22%2C%22assemblyNames%22%3A%5B%22GCF_000982695.1%22%2C%22GCF_000307795.1%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22PairwiseIndexedPAFAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fhpylori%2F26695_vs_j99.pif.gz%22%2C%22assemblyNames%22%3A%5B%22GCF_000982695.1%22%2C%22GCF_000307795.1%22%5D%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22hpylori_identity-LinearMarkDisplay%22%2C%22legend%22%3A%7B%22show%22%3Afalse%7D%2C%22encoding%22%3A%7B%22y%22%3A%7B%22scale%22%3A%7B%22domainMin%22%3A0.5%2C%22domainMax%22%3A1%7D%2C%22axis%22%3A%7B%22title%22%3A%22Identity%22%7D%7D%7D%2C%22marks%22%3A%5B%7B%22mark%22%3A%22rule%22%2C%22encoding%22%3A%7B%22y%22%3A%22identity%22%2C%22strokeWidth%22%3A4%2C%22color%22%3A%7B%22field%22%3A%22identity%22%2C%22scale%22%3A%7B%22type%22%3A%22linear%22%2C%22scheme%22%3A%22viridis%22%2C%22domainMin%22%3A0.7%2C%22domainMax%22%3A1%7D%2C%22legend%22%3A%7B%22title%22%3A%22Identity%22%7D%7D%7D%7D%5D%7D%5D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22GCF_000982695.1%22%2C%22loc%22%3A%22NC_018939.1%3A330%2C000-560%2C000%22%2C%22tracks%22%3A%5B%22hpylori_identity%22%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+26695+against+J99%2C+percent+identityThis view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.
from jbrowse_anywidget import JBrowseApp, fetch_hub
config = fetch_hub("https://jbrowse.org/demos/hpylori/config.json")
app = JBrowseApp(
assemblies=config["assemblies"],
tracks=config.get("tracks", []) + [
{
"type": "SyntenyTrack",
"trackId": "hpylori_identity",
"name": "26695 against J99, percent identity",
"assemblyNames": [
"GCF_000982695.1",
"GCF_000307795.1"
],
"adapter": {
"type": "PairwiseIndexedPAFAdapter",
"uri": "https://jbrowse.org/demos/hpylori/26695_vs_j99.pif.gz",
"assemblyNames": [
"GCF_000982695.1",
"GCF_000307795.1"
]
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "hpylori_identity-LinearMarkDisplay",
"legend": {
"show": False
},
"encoding": {
"y": {
"scale": {
"domainMin": 0.5,
"domainMax": 1
},
"axis": {
"title": "Identity"
}
}
},
"marks": [
{
"mark": "rule",
"encoding": {
"y": "identity",
"strokeWidth": 4,
"color": {
"field": "identity",
"scale": {
"type": "linear",
"scheme": "viridis",
"domainMin": 0.7,
"domainMax": 1
},
"legend": {
"title": "Identity"
}
}
}
}
]
}
]
}
],
views=[
{
"type": "LinearGenomeView",
"assembly": "GCF_000982695.1",
"loc": "NC_018939.1:330,000-560,000",
"tracks": [
"hpylori_identity"
]
}
],
)
app # display the widgetThis view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.
import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
const configUrl = "https://jbrowse.org/demos/hpylori/config.json"
const configPromise = fetch(configUrl)
.then(res => res.json())
.then(config => {
addRelativeUris(config, new URL(configUrl))
return config
})
export default function Figure() {
const config = use(configPromise)
return (
<JBrowse
assemblies={config.assemblies}
tracks={[...(config.tracks ?? []), ...[
{
"type": "SyntenyTrack",
"trackId": "hpylori_identity",
"name": "26695 against J99, percent identity",
"assemblyNames": [
"GCF_000982695.1",
"GCF_000307795.1"
],
"adapter": {
"type": "PairwiseIndexedPAFAdapter",
"uri": "https://jbrowse.org/demos/hpylori/26695_vs_j99.pif.gz",
"assemblyNames": [
"GCF_000982695.1",
"GCF_000307795.1"
]
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "hpylori_identity-LinearMarkDisplay",
"legend": {
"show": false
},
"encoding": {
"y": {
"scale": {
"domainMin": 0.5,
"domainMax": 1
},
"axis": {
"title": "Identity"
}
}
},
"marks": [
{
"mark": "rule",
"encoding": {
"y": "identity",
"strokeWidth": 4,
"color": {
"field": "identity",
"scale": {
"type": "linear",
"scheme": "viridis",
"domainMin": 0.7,
"domainMax": 1
},
"legend": {
"title": "Identity"
}
}
}
}
]
}
]
}
]]}
aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
configuration={config.configuration}
views={[
{
"type": "LinearGenomeView",
"assembly": "GCF_000982695.1",
"loc": "NC_018939.1:330,000-560,000",
"tracks": [
"hpylori_identity"
]
}
]}
/>
)
}jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.
cat > tracks.json <<'JSON'
[
{
"type": "SyntenyTrack",
"trackId": "hpylori_identity",
"name": "26695 against J99, percent identity",
"assemblyNames": [
"GCF_000982695.1",
"GCF_000307795.1"
],
"adapter": {
"type": "PairwiseIndexedPAFAdapter",
"uri": "https://jbrowse.org/demos/hpylori/26695_vs_j99.pif.gz",
"assemblyNames": [
"GCF_000982695.1",
"GCF_000307795.1"
]
},
"displays": [
{
"type": "LinearMarkDisplay",
"displayId": "hpylori_identity-LinearMarkDisplay",
"legend": {
"show": false
},
"encoding": {
"y": {
"scale": {
"domainMin": 0.5,
"domainMax": 1
},
"axis": {
"title": "Identity"
}
}
},
"marks": [
{
"mark": "rule",
"encoding": {
"y": "identity",
"strokeWidth": 4,
"color": {
"field": "identity",
"scale": {
"type": "linear",
"scheme": "viridis",
"domainMin": 0.7,
"domainMax": 1
},
"legend": {
"title": "Identity"
}
}
}
}
]
}
]
}
]
JSON
npx @jbrowse/img --config https://jbrowse.org/demos/hpylori/config.json \
--trackConfigs tracks.json \
--assembly GCF_000982695.1 --loc NC_018939.1:330,000-560,000 \
--track hpylori_identity \
--out figure.svgFor a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).
A PAF line has one identity for the whole alignment, so a long alignment draws as one flat line however its identity varies along its length. An all-vs-all PAF gives one row per genome, which the all-vs-all synteny tutorial walks through.
More
Mark display shows a density and the raw features in one track across zooms and a facet over a BAM's haplotype tag; A grammar of graphics over a BED (RepeatMasker Alu age) and A grammar of graphics over a BAM (NA12878 insert size) each work through one file to answer one question.