Skip to main content

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 last two read a BED of read pairs and a set of copy-number BigWigs. 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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_bars-LinearMarkDisplay",
      "marks": [{ "mark": "bar", "encoding": { "y": "milliDiv" } }]
    }
  ]
}
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"
  },
  "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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_bars-LinearMarkDisplay",
      "marks": [{ "mark": "bar", "encoding": { "y": "milliDiv" } }]
    }
  ]
}

Open this track in JBrowse Web ↗

Open this track in JBrowse Desktop ↗ (JBrowse Desktop 5.0+)

One bar per Alu copy over 30 kb of 1q21, its height the copy's divergence from its consensus. Open this view in JBrowse ↗

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or 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%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%7B%22trackId%22%3A%22alu_bars%22%2C%22type%22%3A%22LinearMarkDisplay%22%2C%22height%22%3A160%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+mark_display_examples%2Fbars

With your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one).This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu divergence”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

Open this view in JBrowse Web ↗

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genome in your JBrowse Web's config.json: jbrowse add-assembly adds it.This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu divergence”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

A figure adds its tracks to one session. The jbrowse CLI writes the same tracks into a config.json instead, where every session that opens it has them: add-track where flags cover the whole track, add-track-json where they do not.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_bars-LinearMarkDisplay",
      "marks": [
        {
          "mark": "bar",
          "encoding": {
            "y": "milliDiv"
          }
        }
      ]
    }
  ]
}'

Run these where the config.json is, or add --out <dir>, and point each uri at your own file. The config needs hg38 already — jbrowse add-assembly adds yours. The location and the settings the steps carry are session state rather than track config — that half is the Spec tab, or jbrowse set-default-session.

This session spec draws the figure from https://jbrowse.org/demos/gene_density/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "alu_bars",
      "name": "Alu divergence",
      "assemblyNames": [
        "hg38"
      ],
      "adapter": {
        "type": "BedTabixAdapter",
        "uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz"
      },
      "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": [
        {
          "trackId": "alu_bars",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own 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"
            },
            "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": [
                {
                    "trackId": "alu_bars",
                    "type": "LinearMarkDisplay",
                    "height": 160
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

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"
    },
    "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 \
  --tracks tracks.json \
  --assembly hg38 --loc chr1:151,000,000-151,030,000 \
  --track alu_bars display:LinearMarkDisplay '{"height":160}' \
  --width 1500 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "alu_bars",
      "name": "Alu divergence",
      "assemblyNames": [
        "hg38"
      ],
      "adapter": {
        "type": "BedTabixAdapter",
        "uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz"
      },
      "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": [
        {
          "trackId": "alu_bars",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/gene_density/config.json \
  --width 1500 --height 370 \
  --session session.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

Points, coloured and shaped by a category

x2: "start" stands each point at one position whatever the copy's length. The colour and the shape each take a categorical scale over strand, whose values are 1 and -1, so domain names the levels and labels 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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_points-LinearMarkDisplay",
      "marks": [
        {
          "mark": "point",
          "size": 8,
          "encoding": {
            "x2": "start",
            "y": "milliDiv",
            "color": {
              "field": "strand",
              "domain": ["1", "-1"],
              "labels": ["+", "-"],
              "title": "Strand"
            },
            "shape": {
              "field": "strand",
              "domain": ["1", "-1"],
              "range": ["circle", "triangle-down"],
              "labels": ["+", "-"],
              "title": ""
            }
          }
        }
      ]
    }
  ]
}
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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_points-LinearMarkDisplay",
      "marks": [
        {
          "mark": "point",
          "size": 8,
          "encoding": {
            "x2": "start",
            "y": "milliDiv",
            "color": {
              "field": "strand",
              "domain": ["1", "-1"],
              "labels": ["+", "-"],
              "title": "Strand"
            },
            "shape": {
              "field": "strand",
              "domain": ["1", "-1"],
              "range": ["circle", "triangle-down"],
              "labels": ["+", "-"],
              "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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_points-LinearMarkDisplay",
      "marks": [
        {
          "mark": "point",
          "size": 8,
          "encoding": {
            "x2": "start",
            "y": "milliDiv",
            "color": {
              "field": "strand",
              "domain": ["1", "-1"],
              "labels": ["+", "-"],
              "title": "Strand"
            },
            "shape": {
              "field": "strand",
              "domain": ["1", "-1"],
              "range": ["circle", "triangle-down"],
              "labels": ["+", "-"],
              "title": ""
            }
          }
        }
      ]
    }
  ]
}

Open this track in JBrowse Web ↗

Open this track in JBrowse Desktop ↗ (JBrowse Desktop 5.0+)

The same copies as points, plus-strand copies as red circles and minus-strand copies as blue triangles. Open this view in JBrowse ↗

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or 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%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%22size%22%3A8%2C%22encoding%22%3A%7B%22x2%22%3A%22start%22%2C%22y%22%3A%22milliDiv%22%2C%22color%22%3A%7B%22field%22%3A%22strand%22%2C%22domain%22%3A%5B%221%22%2C%22-1%22%5D%2C%22labels%22%3A%5B%22%2B%22%2C%22-%22%5D%2C%22title%22%3A%22Strand%22%7D%2C%22shape%22%3A%7B%22field%22%3A%22strand%22%2C%22domain%22%3A%5B%221%22%2C%22-1%22%5D%2C%22range%22%3A%5B%22circle%22%2C%22triangle-down%22%5D%2C%22labels%22%3A%5B%22%2B%22%2C%22-%22%5D%2C%22title%22%3A%22%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%7B%22trackId%22%3A%22alu_points%22%2C%22type%22%3A%22LinearMarkDisplay%22%2C%22height%22%3A160%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+mark_display_examples%2Fpoints

With your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one).This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu divergence by strand”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

Open this view in JBrowse Web ↗

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genome in your JBrowse Web's config.json: jbrowse add-assembly adds it.This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu divergence by strand”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

A figure adds its tracks to one session. The jbrowse CLI writes the same tracks into a config.json instead, where every session that opens it has them: add-track where flags cover the whole track, add-track-json where they do not.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_points-LinearMarkDisplay",
      "marks": [
        {
          "mark": "point",
          "size": 8,
          "encoding": {
            "x2": "start",
            "y": "milliDiv",
            "color": {
              "field": "strand",
              "domain": [
                "1",
                "-1"
              ],
              "labels": [
                "+",
                "-"
              ],
              "title": "Strand"
            },
            "shape": {
              "field": "strand",
              "domain": [
                "1",
                "-1"
              ],
              "range": [
                "circle",
                "triangle-down"
              ],
              "labels": [
                "+",
                "-"
              ],
              "title": ""
            }
          }
        }
      ]
    }
  ]
}'

Run these where the config.json is, or add --out <dir>, and point each uri at your own file. The config needs hg38 already — jbrowse add-assembly adds yours. The location and the settings the steps carry are session state rather than track config — that half is the Spec tab, or jbrowse set-default-session.

This session spec draws the figure from https://jbrowse.org/demos/gene_density/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "sessionTracks": [
    {
      "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"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_points-LinearMarkDisplay",
          "marks": [
            {
              "mark": "point",
              "size": 8,
              "encoding": {
                "x2": "start",
                "y": "milliDiv",
                "color": {
                  "field": "strand",
                  "domain": [
                    "1",
                    "-1"
                  ],
                  "labels": [
                    "+",
                    "-"
                  ],
                  "title": "Strand"
                },
                "shape": {
                  "field": "strand",
                  "domain": [
                    "1",
                    "-1"
                  ],
                  "range": [
                    "circle",
                    "triangle-down"
                  ],
                  "labels": [
                    "+",
                    "-"
                  ],
                  "title": ""
                }
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:151,000,000-151,030,000",
      "tracks": [
        {
          "trackId": "alu_points",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own 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"
            },
            "displays": [
                {
                    "type": "LinearMarkDisplay",
                    "displayId": "alu_points-LinearMarkDisplay",
                    "marks": [
                        {
                            "mark": "point",
                            "size": 8,
                            "encoding": {
                                "x2": "start",
                                "y": "milliDiv",
                                "color": {
                                    "field": "strand",
                                    "domain": [
                                        "1",
                                        "-1"
                                    ],
                                    "labels": [
                                        "+",
                                        "-"
                                    ],
                                    "title": "Strand"
                                },
                                "shape": {
                                    "field": "strand",
                                    "domain": [
                                        "1",
                                        "-1"
                                    ],
                                    "range": [
                                        "circle",
                                        "triangle-down"
                                    ],
                                    "labels": [
                                        "+",
                                        "-"
                                    ],
                                    "title": ""
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ],
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "hg38",
            "loc": "chr1:151,000,000-151,030,000",
            "tracks": [
                {
                    "trackId": "alu_points",
                    "type": "LinearMarkDisplay",
                    "height": 160
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

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"
    },
    "displays": [
      {
        "type": "LinearMarkDisplay",
        "displayId": "alu_points-LinearMarkDisplay",
        "marks": [
          {
            "mark": "point",
            "size": 8,
            "encoding": {
              "x2": "start",
              "y": "milliDiv",
              "color": {
                "field": "strand",
                "domain": [
                  "1",
                  "-1"
                ],
                "labels": [
                  "+",
                  "-"
                ],
                "title": "Strand"
              },
              "shape": {
                "field": "strand",
                "domain": [
                  "1",
                  "-1"
                ],
                "range": [
                  "circle",
                  "triangle-down"
                ],
                "labels": [
                  "+",
                  "-"
                ],
                "title": ""
              }
            }
          }
        ]
      }
    ]
  }
]
JSON

npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
  --tracks tracks.json \
  --assembly hg38 --loc chr1:151,000,000-151,030,000 \
  --track alu_points display:LinearMarkDisplay '{"height":160}' \
  --width 1500 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "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"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_points-LinearMarkDisplay",
          "marks": [
            {
              "mark": "point",
              "size": 8,
              "encoding": {
                "x2": "start",
                "y": "milliDiv",
                "color": {
                  "field": "strand",
                  "domain": [
                    "1",
                    "-1"
                  ],
                  "labels": [
                    "+",
                    "-"
                  ],
                  "title": "Strand"
                },
                "shape": {
                  "field": "strand",
                  "domain": [
                    "1",
                    "-1"
                  ],
                  "range": [
                    "circle",
                    "triangle-down"
                  ],
                  "labels": [
                    "+",
                    "-"
                  ],
                  "title": ""
                }
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:151,000,000-151,030,000",
      "tracks": [
        {
          "trackId": "alu_points",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/gene_density/config.json \
  --width 1500 --height 370 \
  --session session.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

A colour ramp

A linear scale over the plotted column, pinned at both ends so the colours mean the same in every window. 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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_ramp-LinearMarkDisplay",
      "marks": [
        {
          "mark": "bar",
          "encoding": {
            "y": "milliDiv",
            "color": {
              "field": "milliDiv",
              "scale": "linear",
              "scheme": "viridis",
              "domainMin": 0,
              "domainMax": 300,
              "title": "Divergence"
            }
          }
        }
      ]
    }
  ]
}
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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_ramp-LinearMarkDisplay",
      "marks": [
        {
          "mark": "bar",
          "encoding": {
            "y": "milliDiv",
            "color": {
              "field": "milliDiv",
              "scale": "linear",
              "scheme": "viridis",
              "domainMin": 0,
              "domainMax": 300,
              "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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_ramp-LinearMarkDisplay",
      "marks": [
        {
          "mark": "bar",
          "encoding": {
            "y": "milliDiv",
            "color": {
              "field": "milliDiv",
              "scale": "linear",
              "scheme": "viridis",
              "domainMin": 0,
              "domainMax": 300,
              "title": "Divergence"
            }
          }
        }
      ]
    }
  ]
}

Open this track in JBrowse Web ↗

Open this track in JBrowse Desktop ↗ (JBrowse Desktop 5.0+)

Each bar coloured by its own height through viridis, pinned from 0 to 300, with the ramp as the key. Open this view in JBrowse ↗

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or 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%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%22linear%22%2C%22scheme%22%3A%22viridis%22%2C%22domainMin%22%3A0%2C%22domainMax%22%3A300%2C%22title%22%3A%22Divergence%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%7B%22trackId%22%3A%22alu_ramp%22%2C%22type%22%3A%22LinearMarkDisplay%22%2C%22height%22%3A160%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+mark_display_examples%2Framp

With your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one).This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu divergence, viridis”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

Open this view in JBrowse Web ↗

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genome in your JBrowse Web's config.json: jbrowse add-assembly adds it.This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu divergence, viridis”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

A figure adds its tracks to one session. The jbrowse CLI writes the same tracks into a config.json instead, where every session that opens it has them: add-track where flags cover the whole track, add-track-json where they do not.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_ramp-LinearMarkDisplay",
      "marks": [
        {
          "mark": "bar",
          "encoding": {
            "y": "milliDiv",
            "color": {
              "field": "milliDiv",
              "scale": "linear",
              "scheme": "viridis",
              "domainMin": 0,
              "domainMax": 300,
              "title": "Divergence"
            }
          }
        }
      ]
    }
  ]
}'

Run these where the config.json is, or add --out <dir>, and point each uri at your own file. The config needs hg38 already — jbrowse add-assembly adds yours. The location and the settings the steps carry are session state rather than track config — that half is the Spec tab, or jbrowse set-default-session.

This session spec draws the figure from https://jbrowse.org/demos/gene_density/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "alu_ramp",
      "name": "Alu divergence, viridis",
      "assemblyNames": [
        "hg38"
      ],
      "adapter": {
        "type": "BedTabixAdapter",
        "uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_ramp-LinearMarkDisplay",
          "marks": [
            {
              "mark": "bar",
              "encoding": {
                "y": "milliDiv",
                "color": {
                  "field": "milliDiv",
                  "scale": "linear",
                  "scheme": "viridis",
                  "domainMin": 0,
                  "domainMax": 300,
                  "title": "Divergence"
                }
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:151,000,000-151,030,000",
      "tracks": [
        {
          "trackId": "alu_ramp",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own 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"
            },
            "displays": [
                {
                    "type": "LinearMarkDisplay",
                    "displayId": "alu_ramp-LinearMarkDisplay",
                    "marks": [
                        {
                            "mark": "bar",
                            "encoding": {
                                "y": "milliDiv",
                                "color": {
                                    "field": "milliDiv",
                                    "scale": "linear",
                                    "scheme": "viridis",
                                    "domainMin": 0,
                                    "domainMax": 300,
                                    "title": "Divergence"
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ],
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "hg38",
            "loc": "chr1:151,000,000-151,030,000",
            "tracks": [
                {
                    "trackId": "alu_ramp",
                    "type": "LinearMarkDisplay",
                    "height": 160
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

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"
    },
    "displays": [
      {
        "type": "LinearMarkDisplay",
        "displayId": "alu_ramp-LinearMarkDisplay",
        "marks": [
          {
            "mark": "bar",
            "encoding": {
              "y": "milliDiv",
              "color": {
                "field": "milliDiv",
                "scale": "linear",
                "scheme": "viridis",
                "domainMin": 0,
                "domainMax": 300,
                "title": "Divergence"
              }
            }
          }
        ]
      }
    ]
  }
]
JSON

npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
  --tracks tracks.json \
  --assembly hg38 --loc chr1:151,000,000-151,030,000 \
  --track alu_ramp display:LinearMarkDisplay '{"height":160}' \
  --width 1500 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "alu_ramp",
      "name": "Alu divergence, viridis",
      "assemblyNames": [
        "hg38"
      ],
      "adapter": {
        "type": "BedTabixAdapter",
        "uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_ramp-LinearMarkDisplay",
          "marks": [
            {
              "mark": "bar",
              "encoding": {
                "y": "milliDiv",
                "color": {
                  "field": "milliDiv",
                  "scale": "linear",
                  "scheme": "viridis",
                  "domainMin": 0,
                  "domainMax": 300,
                  "title": "Divergence"
                }
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:151,000,000-151,030,000",
      "tracks": [
        {
          "trackId": "alu_ramp",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/gene_density/config.json \
  --width 1500 --height 370 \
  --session session.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

A colour per interval

A threshold scale cuts the column at the values in domain and paints one range colour 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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_threshold-LinearMarkDisplay",
      "marks": [
        {
          "mark": "bar",
          "encoding": {
            "y": "milliDiv",
            "color": {
              "field": "milliDiv",
              "scale": "threshold",
              "domain": [80, 150],
              "range": ["#d73027", "#fdae61", "#4575b4"],
              "title": "Divergence"
            }
          }
        }
      ]
    }
  ]
}
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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_threshold-LinearMarkDisplay",
      "marks": [
        {
          "mark": "bar",
          "encoding": {
            "y": "milliDiv",
            "color": {
              "field": "milliDiv",
              "scale": "threshold",
              "domain": [80, 150],
              "range": ["#d73027", "#fdae61", "#4575b4"],
              "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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_threshold-LinearMarkDisplay",
      "marks": [
        {
          "mark": "bar",
          "encoding": {
            "y": "milliDiv",
            "color": {
              "field": "milliDiv",
              "scale": "threshold",
              "domain": [80, 150],
              "range": ["#d73027", "#fdae61", "#4575b4"],
              "title": "Divergence"
            }
          }
        }
      ]
    }
  ]
}

Open this track in JBrowse Web ↗

Open this track in JBrowse Desktop ↗ (JBrowse Desktop 5.0+)

Bars under 80 in red, 80 to 150 in orange and 150 and over in blue, with the three intervals in the key. Open this view in JBrowse ↗

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or 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%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%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%2C%22title%22%3A%22Divergence%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%7B%22trackId%22%3A%22alu_threshold%22%2C%22type%22%3A%22LinearMarkDisplay%22%2C%22height%22%3A160%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+mark_display_examples%2Fthreshold

With your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one).This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu age classes”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

Open this view in JBrowse Web ↗

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genome in your JBrowse Web's config.json: jbrowse add-assembly adds it.This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu age classes”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

A figure adds its tracks to one session. The jbrowse CLI writes the same tracks into a config.json instead, where every session that opens it has them: add-track where flags cover the whole track, add-track-json where they do not.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_threshold-LinearMarkDisplay",
      "marks": [
        {
          "mark": "bar",
          "encoding": {
            "y": "milliDiv",
            "color": {
              "field": "milliDiv",
              "scale": "threshold",
              "domain": [
                80,
                150
              ],
              "range": [
                "#d73027",
                "#fdae61",
                "#4575b4"
              ],
              "title": "Divergence"
            }
          }
        }
      ]
    }
  ]
}'

Run these where the config.json is, or add --out <dir>, and point each uri at your own file. The config needs hg38 already — jbrowse add-assembly adds yours. The location and the settings the steps carry are session state rather than track config — that half is the Spec tab, or jbrowse set-default-session.

This session spec draws the figure from https://jbrowse.org/demos/gene_density/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "alu_threshold",
      "name": "Alu age classes",
      "assemblyNames": [
        "hg38"
      ],
      "adapter": {
        "type": "BedTabixAdapter",
        "uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_threshold-LinearMarkDisplay",
          "marks": [
            {
              "mark": "bar",
              "encoding": {
                "y": "milliDiv",
                "color": {
                  "field": "milliDiv",
                  "scale": "threshold",
                  "domain": [
                    80,
                    150
                  ],
                  "range": [
                    "#d73027",
                    "#fdae61",
                    "#4575b4"
                  ],
                  "title": "Divergence"
                }
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:151,000,000-151,030,000",
      "tracks": [
        {
          "trackId": "alu_threshold",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own 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"
            },
            "displays": [
                {
                    "type": "LinearMarkDisplay",
                    "displayId": "alu_threshold-LinearMarkDisplay",
                    "marks": [
                        {
                            "mark": "bar",
                            "encoding": {
                                "y": "milliDiv",
                                "color": {
                                    "field": "milliDiv",
                                    "scale": "threshold",
                                    "domain": [
                                        80,
                                        150
                                    ],
                                    "range": [
                                        "#d73027",
                                        "#fdae61",
                                        "#4575b4"
                                    ],
                                    "title": "Divergence"
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ],
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "hg38",
            "loc": "chr1:151,000,000-151,030,000",
            "tracks": [
                {
                    "trackId": "alu_threshold",
                    "type": "LinearMarkDisplay",
                    "height": 160
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

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"
    },
    "displays": [
      {
        "type": "LinearMarkDisplay",
        "displayId": "alu_threshold-LinearMarkDisplay",
        "marks": [
          {
            "mark": "bar",
            "encoding": {
              "y": "milliDiv",
              "color": {
                "field": "milliDiv",
                "scale": "threshold",
                "domain": [
                  80,
                  150
                ],
                "range": [
                  "#d73027",
                  "#fdae61",
                  "#4575b4"
                ],
                "title": "Divergence"
              }
            }
          }
        ]
      }
    ]
  }
]
JSON

npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
  --tracks tracks.json \
  --assembly hg38 --loc chr1:151,000,000-151,030,000 \
  --track alu_threshold display:LinearMarkDisplay '{"height":160}' \
  --width 1500 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "alu_threshold",
      "name": "Alu age classes",
      "assemblyNames": [
        "hg38"
      ],
      "adapter": {
        "type": "BedTabixAdapter",
        "uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_threshold-LinearMarkDisplay",
          "marks": [
            {
              "mark": "bar",
              "encoding": {
                "y": "milliDiv",
                "color": {
                  "field": "milliDiv",
                  "scale": "threshold",
                  "domain": [
                    80,
                    150
                  ],
                  "range": [
                    "#d73027",
                    "#fdae61",
                    "#4575b4"
                  ],
                  "title": "Divergence"
                }
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:151,000,000-151,030,000",
      "tracks": [
        {
          "trackId": "alu_threshold",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/gene_density/config.json \
  --width 1500 --height 370 \
  --session session.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_histogram-LinearMarkDisplay",
      "scales": { "y": { "title": "Copies per bin" } },
      "marks": [
        {
          "mark": "bar",
          "transform": [
            { "type": "bin", "step": "auto" },
            { "type": "aggregate", "ops": [{ "op": "count" }] }
          ],
          "encoding": { "color": "#7f7f7f" }
        }
      ]
    }
  ]
}
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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_histogram-LinearMarkDisplay",
      "scales": { "y": { "title": "Copies per bin" } },
      "marks": [
        {
          "mark": "bar",
          "transform": [
            { "type": "bin", "step": "auto" },
            { "type": "aggregate", "ops": [{ "op": "count" }] }
          ],
          "encoding": { "color": "#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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_histogram-LinearMarkDisplay",
      "scales": { "y": { "title": "Copies per bin" } },
      "marks": [
        {
          "mark": "bar",
          "transform": [
            { "type": "bin", "step": "auto" },
            { "type": "aggregate", "ops": [{ "op": "count" }] }
          ],
          "encoding": { "color": "#7f7f7f" }
        }
      ]
    }
  ]
}

Open this track in JBrowse Web ↗

Open this track in JBrowse Desktop ↗ (JBrowse Desktop 5.0+)

Alu copies per bin across 3 Mb of 1q21, one grey bar per bin. Open this view in JBrowse ↗

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or 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%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22alu_histogram-LinearMarkDisplay%22%2C%22scales%22%3A%7B%22y%22%3A%7B%22title%22%3A%22Copies+per+bin%22%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%22%237f7f7f%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%3A150%2C000%2C000-153%2C000%2C000%22%2C%22tracks%22%3A%5B%7B%22trackId%22%3A%22alu_histogram%22%2C%22type%22%3A%22LinearMarkDisplay%22%2C%22height%22%3A160%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+mark_display_examples%2Fhistogram

With your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one).This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu copies per bin”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:150,000,000-153,000,000.

Open this view in JBrowse Web ↗

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genome in your JBrowse Web's config.json: jbrowse add-assembly adds it.This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu copies per bin”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:150,000,000-153,000,000.

A figure adds its tracks to one session. The jbrowse CLI writes the same tracks into a config.json instead, where every session that opens it has them: add-track where flags cover the whole track, add-track-json where they do not.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_histogram-LinearMarkDisplay",
      "scales": {
        "y": {
          "title": "Copies per bin"
        }
      },
      "marks": [
        {
          "mark": "bar",
          "transform": [
            {
              "type": "bin",
              "step": "auto"
            },
            {
              "type": "aggregate",
              "ops": [
                {
                  "op": "count"
                }
              ]
            }
          ],
          "encoding": {
            "color": "#7f7f7f"
          }
        }
      ]
    }
  ]
}'

Run these where the config.json is, or add --out <dir>, and point each uri at your own file. The config needs hg38 already — jbrowse add-assembly adds yours. The location and the settings the steps carry are session state rather than track config — that half is the Spec tab, or jbrowse set-default-session.

This session spec draws the figure from https://jbrowse.org/demos/gene_density/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "sessionTracks": [
    {
      "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"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_histogram-LinearMarkDisplay",
          "scales": {
            "y": {
              "title": "Copies per bin"
            }
          },
          "marks": [
            {
              "mark": "bar",
              "transform": [
                {
                  "type": "bin",
                  "step": "auto"
                },
                {
                  "type": "aggregate",
                  "ops": [
                    {
                      "op": "count"
                    }
                  ]
                }
              ],
              "encoding": {
                "color": "#7f7f7f"
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:150,000,000-153,000,000",
      "tracks": [
        {
          "trackId": "alu_histogram",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own 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"
            },
            "displays": [
                {
                    "type": "LinearMarkDisplay",
                    "displayId": "alu_histogram-LinearMarkDisplay",
                    "scales": {
                        "y": {
                            "title": "Copies per bin"
                        }
                    },
                    "marks": [
                        {
                            "mark": "bar",
                            "transform": [
                                {
                                    "type": "bin",
                                    "step": "auto"
                                },
                                {
                                    "type": "aggregate",
                                    "ops": [
                                        {
                                            "op": "count"
                                        }
                                    ]
                                }
                            ],
                            "encoding": {
                                "color": "#7f7f7f"
                            }
                        }
                    ]
                }
            ]
        }
    ],
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "hg38",
            "loc": "chr1:150,000,000-153,000,000",
            "tracks": [
                {
                    "trackId": "alu_histogram",
                    "type": "LinearMarkDisplay",
                    "height": 160
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

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"
    },
    "displays": [
      {
        "type": "LinearMarkDisplay",
        "displayId": "alu_histogram-LinearMarkDisplay",
        "scales": {
          "y": {
            "title": "Copies per bin"
          }
        },
        "marks": [
          {
            "mark": "bar",
            "transform": [
              {
                "type": "bin",
                "step": "auto"
              },
              {
                "type": "aggregate",
                "ops": [
                  {
                    "op": "count"
                  }
                ]
              }
            ],
            "encoding": {
              "color": "#7f7f7f"
            }
          }
        ]
      }
    ]
  }
]
JSON

npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
  --tracks tracks.json \
  --assembly hg38 --loc chr1:150,000,000-153,000,000 \
  --track alu_histogram display:LinearMarkDisplay '{"height":160}' \
  --width 1500 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "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"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_histogram-LinearMarkDisplay",
          "scales": {
            "y": {
              "title": "Copies per bin"
            }
          },
          "marks": [
            {
              "mark": "bar",
              "transform": [
                {
                  "type": "bin",
                  "step": "auto"
                },
                {
                  "type": "aggregate",
                  "ops": [
                    {
                      "op": "count"
                    }
                  ]
                }
              ],
              "encoding": {
                "color": "#7f7f7f"
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:150,000,000-153,000,000",
      "tracks": [
        {
          "trackId": "alu_histogram",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/gene_density/config.json \
  --width 1500 --height 370 \
  --session session.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

A summary per bin

The same bins, with 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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_mean-LinearMarkDisplay",
      "scales": { "y": { "title": "Mean divergence" } },
      "marks": [
        {
          "mark": "bar",
          "transform": [
            { "type": "bin", "step": "auto" },
            {
              "type": "aggregate",
              "ops": [{ "op": "mean", "field": "milliDiv" }]
            }
          ],
          "encoding": { "color": "#7f7f7f" }
        }
      ]
    }
  ]
}
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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_mean-LinearMarkDisplay",
      "scales": { "y": { "title": "Mean divergence" } },
      "marks": [
        {
          "mark": "bar",
          "transform": [
            { "type": "bin", "step": "auto" },
            {
              "type": "aggregate",
              "ops": [{ "op": "mean", "field": "milliDiv" }]
            }
          ],
          "encoding": { "color": "#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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_mean-LinearMarkDisplay",
      "scales": { "y": { "title": "Mean divergence" } },
      "marks": [
        {
          "mark": "bar",
          "transform": [
            { "type": "bin", "step": "auto" },
            {
              "type": "aggregate",
              "ops": [{ "op": "mean", "field": "milliDiv" }]
            }
          ],
          "encoding": { "color": "#7f7f7f" }
        }
      ]
    }
  ]
}

Open this track in JBrowse Web ↗

Open this track in JBrowse Desktop ↗ (JBrowse Desktop 5.0+)

The mean divergence of the copies in each bin across the same 3 Mb. Open this view in JBrowse ↗

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or 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%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22alu_mean-LinearMarkDisplay%22%2C%22scales%22%3A%7B%22y%22%3A%7B%22title%22%3A%22Mean+divergence%22%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%22%237f7f7f%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%3A150%2C000%2C000-153%2C000%2C000%22%2C%22tracks%22%3A%5B%7B%22trackId%22%3A%22alu_mean%22%2C%22type%22%3A%22LinearMarkDisplay%22%2C%22height%22%3A160%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+mark_display_examples%2Fmean

With your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one).This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Mean Alu divergence per bin”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:150,000,000-153,000,000.

Open this view in JBrowse Web ↗

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genome in your JBrowse Web's config.json: jbrowse add-assembly adds it.This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Mean Alu divergence per bin”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:150,000,000-153,000,000.

A figure adds its tracks to one session. The jbrowse CLI writes the same tracks into a config.json instead, where every session that opens it has them: add-track where flags cover the whole track, add-track-json where they do not.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_mean-LinearMarkDisplay",
      "scales": {
        "y": {
          "title": "Mean divergence"
        }
      },
      "marks": [
        {
          "mark": "bar",
          "transform": [
            {
              "type": "bin",
              "step": "auto"
            },
            {
              "type": "aggregate",
              "ops": [
                {
                  "op": "mean",
                  "field": "milliDiv"
                }
              ]
            }
          ],
          "encoding": {
            "color": "#7f7f7f"
          }
        }
      ]
    }
  ]
}'

Run these where the config.json is, or add --out <dir>, and point each uri at your own file. The config needs hg38 already — jbrowse add-assembly adds yours. The location and the settings the steps carry are session state rather than track config — that half is the Spec tab, or jbrowse set-default-session.

This session spec draws the figure from https://jbrowse.org/demos/gene_density/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "sessionTracks": [
    {
      "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"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_mean-LinearMarkDisplay",
          "scales": {
            "y": {
              "title": "Mean divergence"
            }
          },
          "marks": [
            {
              "mark": "bar",
              "transform": [
                {
                  "type": "bin",
                  "step": "auto"
                },
                {
                  "type": "aggregate",
                  "ops": [
                    {
                      "op": "mean",
                      "field": "milliDiv"
                    }
                  ]
                }
              ],
              "encoding": {
                "color": "#7f7f7f"
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:150,000,000-153,000,000",
      "tracks": [
        {
          "trackId": "alu_mean",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own 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"
            },
            "displays": [
                {
                    "type": "LinearMarkDisplay",
                    "displayId": "alu_mean-LinearMarkDisplay",
                    "scales": {
                        "y": {
                            "title": "Mean divergence"
                        }
                    },
                    "marks": [
                        {
                            "mark": "bar",
                            "transform": [
                                {
                                    "type": "bin",
                                    "step": "auto"
                                },
                                {
                                    "type": "aggregate",
                                    "ops": [
                                        {
                                            "op": "mean",
                                            "field": "milliDiv"
                                        }
                                    ]
                                }
                            ],
                            "encoding": {
                                "color": "#7f7f7f"
                            }
                        }
                    ]
                }
            ]
        }
    ],
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "hg38",
            "loc": "chr1:150,000,000-153,000,000",
            "tracks": [
                {
                    "trackId": "alu_mean",
                    "type": "LinearMarkDisplay",
                    "height": 160
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

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"
    },
    "displays": [
      {
        "type": "LinearMarkDisplay",
        "displayId": "alu_mean-LinearMarkDisplay",
        "scales": {
          "y": {
            "title": "Mean divergence"
          }
        },
        "marks": [
          {
            "mark": "bar",
            "transform": [
              {
                "type": "bin",
                "step": "auto"
              },
              {
                "type": "aggregate",
                "ops": [
                  {
                    "op": "mean",
                    "field": "milliDiv"
                  }
                ]
              }
            ],
            "encoding": {
              "color": "#7f7f7f"
            }
          }
        ]
      }
    ]
  }
]
JSON

npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
  --tracks tracks.json \
  --assembly hg38 --loc chr1:150,000,000-153,000,000 \
  --track alu_mean display:LinearMarkDisplay '{"height":160}' \
  --width 1500 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "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"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_mean-LinearMarkDisplay",
          "scales": {
            "y": {
              "title": "Mean divergence"
            }
          },
          "marks": [
            {
              "mark": "bar",
              "transform": [
                {
                  "type": "bin",
                  "step": "auto"
                },
                {
                  "type": "aggregate",
                  "ops": [
                    {
                      "op": "mean",
                      "field": "milliDiv"
                    }
                  ]
                }
              ],
              "encoding": {
                "color": "#7f7f7f"
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:150,000,000-153,000,000",
      "tracks": [
        {
          "trackId": "alu_mean",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/gene_density/config.json \
  --width 1500 --height 370 \
  --session session.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

A pileup

A pileup step writes each copy's row in a first-fit packing, and a span draws the packing, coloured 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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_pileup-LinearMarkDisplay",
      "marks": [
        {
          "mark": "span",
          "transform": [{ "type": "pileup", "padding": 200 }],
          "encoding": {
            "color": {
              "field": "strand",
              "domain": ["1", "-1"],
              "labels": ["+", "-"],
              "title": "Strand"
            }
          }
        }
      ]
    }
  ]
}
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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_pileup-LinearMarkDisplay",
      "marks": [
        {
          "mark": "span",
          "transform": [{ "type": "pileup", "padding": 200 }],
          "encoding": {
            "color": {
              "field": "strand",
              "domain": ["1", "-1"],
              "labels": ["+", "-"],
              "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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_pileup-LinearMarkDisplay",
      "marks": [
        {
          "mark": "span",
          "transform": [{ "type": "pileup", "padding": 200 }],
          "encoding": {
            "color": {
              "field": "strand",
              "domain": ["1", "-1"],
              "labels": ["+", "-"],
              "title": "Strand"
            }
          }
        }
      ]
    }
  ]
}

Open this track in JBrowse Web ↗

Open this track in JBrowse Desktop ↗ (JBrowse Desktop 5.0+)

The copies stacked into rows with 200 bp between neighbours, plus strand in red and minus strand in blue. Open this view in JBrowse ↗

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or 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%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%22span%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%22domain%22%3A%5B%221%22%2C%22-1%22%5D%2C%22labels%22%3A%5B%22%2B%22%2C%22-%22%5D%2C%22title%22%3A%22Strand%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%7B%22trackId%22%3A%22alu_pileup%22%2C%22type%22%3A%22LinearMarkDisplay%22%2C%22height%22%3A160%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+mark_display_examples%2Fpileup

With your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one).This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu copies, packed”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

Open this view in JBrowse Web ↗

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genome in your JBrowse Web's config.json: jbrowse add-assembly adds it.This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu copies, packed”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

A figure adds its tracks to one session. The jbrowse CLI writes the same tracks into a config.json instead, where every session that opens it has them: add-track where flags cover the whole track, add-track-json where they do not.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_pileup-LinearMarkDisplay",
      "marks": [
        {
          "mark": "span",
          "transform": [
            {
              "type": "pileup",
              "padding": 200
            }
          ],
          "encoding": {
            "color": {
              "field": "strand",
              "domain": [
                "1",
                "-1"
              ],
              "labels": [
                "+",
                "-"
              ],
              "title": "Strand"
            }
          }
        }
      ]
    }
  ]
}'

Run these where the config.json is, or add --out <dir>, and point each uri at your own file. The config needs hg38 already — jbrowse add-assembly adds yours. The location and the settings the steps carry are session state rather than track config — that half is the Spec tab, or jbrowse set-default-session.

This session spec draws the figure from https://jbrowse.org/demos/gene_density/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "alu_pileup",
      "name": "Alu copies, packed",
      "assemblyNames": [
        "hg38"
      ],
      "adapter": {
        "type": "BedTabixAdapter",
        "uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_pileup-LinearMarkDisplay",
          "marks": [
            {
              "mark": "span",
              "transform": [
                {
                  "type": "pileup",
                  "padding": 200
                }
              ],
              "encoding": {
                "color": {
                  "field": "strand",
                  "domain": [
                    "1",
                    "-1"
                  ],
                  "labels": [
                    "+",
                    "-"
                  ],
                  "title": "Strand"
                }
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:151,000,000-151,030,000",
      "tracks": [
        {
          "trackId": "alu_pileup",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own 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"
            },
            "displays": [
                {
                    "type": "LinearMarkDisplay",
                    "displayId": "alu_pileup-LinearMarkDisplay",
                    "marks": [
                        {
                            "mark": "span",
                            "transform": [
                                {
                                    "type": "pileup",
                                    "padding": 200
                                }
                            ],
                            "encoding": {
                                "color": {
                                    "field": "strand",
                                    "domain": [
                                        "1",
                                        "-1"
                                    ],
                                    "labels": [
                                        "+",
                                        "-"
                                    ],
                                    "title": "Strand"
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ],
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "hg38",
            "loc": "chr1:151,000,000-151,030,000",
            "tracks": [
                {
                    "trackId": "alu_pileup",
                    "type": "LinearMarkDisplay",
                    "height": 160
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

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"
    },
    "displays": [
      {
        "type": "LinearMarkDisplay",
        "displayId": "alu_pileup-LinearMarkDisplay",
        "marks": [
          {
            "mark": "span",
            "transform": [
              {
                "type": "pileup",
                "padding": 200
              }
            ],
            "encoding": {
              "color": {
                "field": "strand",
                "domain": [
                  "1",
                  "-1"
                ],
                "labels": [
                  "+",
                  "-"
                ],
                "title": "Strand"
              }
            }
          }
        ]
      }
    ]
  }
]
JSON

npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
  --tracks tracks.json \
  --assembly hg38 --loc chr1:151,000,000-151,030,000 \
  --track alu_pileup display:LinearMarkDisplay '{"height":160}' \
  --width 1500 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "alu_pileup",
      "name": "Alu copies, packed",
      "assemblyNames": [
        "hg38"
      ],
      "adapter": {
        "type": "BedTabixAdapter",
        "uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_pileup-LinearMarkDisplay",
          "marks": [
            {
              "mark": "span",
              "transform": [
                {
                  "type": "pileup",
                  "padding": 200
                }
              ],
              "encoding": {
                "color": {
                  "field": "strand",
                  "domain": [
                    "1",
                    "-1"
                  ],
                  "labels": [
                    "+",
                    "-"
                  ],
                  "title": "Strand"
                }
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:151,000,000-151,030,000",
      "tracks": [
        {
          "trackId": "alu_pileup",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/gene_density/config.json \
  --width 1500 --height 370 \
  --session session.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

A facet

facet splits the copies on a field and stacks one section per value under a chip. A pileup in the facet's own transform packs each section on its own.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_facet-LinearMarkDisplay",
      "facet": { "field": "strand", "transform": [{ "type": "pileup" }] },
      "marks": [{ "mark": "span", "encoding": { "color": "#4575b4" } }]
    }
  ]
}
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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_facet-LinearMarkDisplay",
      "facet": { "field": "strand", "transform": [{ "type": "pileup" }] },
      "marks": [{ "mark": "span", "encoding": { "color": "#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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_facet-LinearMarkDisplay",
      "facet": { "field": "strand", "transform": [{ "type": "pileup" }] },
      "marks": [{ "mark": "span", "encoding": { "color": "#4575b4" } }]
    }
  ]
}

Open this track in JBrowse Web ↗

Open this track in JBrowse Desktop ↗ (JBrowse Desktop 5.0+)

Plus-strand copies packed in one section and minus-strand copies in another, each under a chip naming its strand. Open this view in JBrowse ↗

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or 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%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%22span%22%2C%22encoding%22%3A%7B%22color%22%3A%22%234575b4%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%7B%22trackId%22%3A%22alu_facet%22%2C%22type%22%3A%22LinearMarkDisplay%22%2C%22height%22%3A200%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+mark_display_examples%2Ffacet

With your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one).This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu copies by strand”.
    1. Drag the bar at the bottom edge of the track to resize it (200px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

Open this view in JBrowse Web ↗

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genome in your JBrowse Web's config.json: jbrowse add-assembly adds it.This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu copies by strand”.
    1. Drag the bar at the bottom edge of the track to resize it (200px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

A figure adds its tracks to one session. The jbrowse CLI writes the same tracks into a config.json instead, where every session that opens it has them: add-track where flags cover the whole track, add-track-json where they do not.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_facet-LinearMarkDisplay",
      "facet": {
        "field": "strand",
        "transform": [
          {
            "type": "pileup"
          }
        ]
      },
      "marks": [
        {
          "mark": "span",
          "encoding": {
            "color": "#4575b4"
          }
        }
      ]
    }
  ]
}'

Run these where the config.json is, or add --out <dir>, and point each uri at your own file. The config needs hg38 already — jbrowse add-assembly adds yours. The location and the settings the steps carry are session state rather than track config — that half is the Spec tab, or jbrowse set-default-session.

This session spec draws the figure from https://jbrowse.org/demos/gene_density/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "sessionTracks": [
    {
      "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"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_facet-LinearMarkDisplay",
          "facet": {
            "field": "strand",
            "transform": [
              {
                "type": "pileup"
              }
            ]
          },
          "marks": [
            {
              "mark": "span",
              "encoding": {
                "color": "#4575b4"
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:151,000,000-151,030,000",
      "tracks": [
        {
          "trackId": "alu_facet",
          "type": "LinearMarkDisplay",
          "height": 200
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own 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"
            },
            "displays": [
                {
                    "type": "LinearMarkDisplay",
                    "displayId": "alu_facet-LinearMarkDisplay",
                    "facet": {
                        "field": "strand",
                        "transform": [
                            {
                                "type": "pileup"
                            }
                        ]
                    },
                    "marks": [
                        {
                            "mark": "span",
                            "encoding": {
                                "color": "#4575b4"
                            }
                        }
                    ]
                }
            ]
        }
    ],
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "hg38",
            "loc": "chr1:151,000,000-151,030,000",
            "tracks": [
                {
                    "trackId": "alu_facet",
                    "type": "LinearMarkDisplay",
                    "height": 200
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

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"
    },
    "displays": [
      {
        "type": "LinearMarkDisplay",
        "displayId": "alu_facet-LinearMarkDisplay",
        "facet": {
          "field": "strand",
          "transform": [
            {
              "type": "pileup"
            }
          ]
        },
        "marks": [
          {
            "mark": "span",
            "encoding": {
              "color": "#4575b4"
            }
          }
        ]
      }
    ]
  }
]
JSON

npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
  --tracks tracks.json \
  --assembly hg38 --loc chr1:151,000,000-151,030,000 \
  --track alu_facet display:LinearMarkDisplay '{"height":200}' \
  --width 1500 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "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"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_facet-LinearMarkDisplay",
          "facet": {
            "field": "strand",
            "transform": [
              {
                "type": "pileup"
              }
            ]
          },
          "marks": [
            {
              "mark": "span",
              "encoding": {
                "color": "#4575b4"
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:151,000,000-151,030,000",
      "tracks": [
        {
          "trackId": "alu_facet",
          "type": "LinearMarkDisplay",
          "height": 200
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/gene_density/config.json \
  --width 1500 --height 410 \
  --session session.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_labels-LinearMarkDisplay",
      "marks": [
        { "mark": "bar", "encoding": { "y": "milliDiv", "color": "#c8d8ee" } },
        {
          "mark": "text",
          "encoding": { "y": "milliDiv", "text": "name" },
          "maxBpPerPx": 50
        }
      ]
    }
  ]
}
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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_labels-LinearMarkDisplay",
      "marks": [
        { "mark": "bar", "encoding": { "y": "milliDiv", "color": "#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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_labels-LinearMarkDisplay",
      "marks": [
        { "mark": "bar", "encoding": { "y": "milliDiv", "color": "#c8d8ee" } },
        {
          "mark": "text",
          "encoding": { "y": "milliDiv", "text": "name" },
          "maxBpPerPx": 50
        }
      ]
    }
  ]
}

Open this track in JBrowse Web ↗

Open this track in JBrowse Desktop ↗ (JBrowse Desktop 5.0+)

Each bar with its subfamily name over it, the names that would overlap a neighbour left out. Open this view in JBrowse ↗

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or 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%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%22%23c8d8ee%22%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%7B%22trackId%22%3A%22alu_labels%22%2C%22type%22%3A%22LinearMarkDisplay%22%2C%22height%22%3A160%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+mark_display_examples%2Flabels

With your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one).This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu divergence, labelled”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

Open this view in JBrowse Web ↗

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genome in your JBrowse Web's config.json: jbrowse add-assembly adds it.This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu divergence, labelled”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

A figure adds its tracks to one session. The jbrowse CLI writes the same tracks into a config.json instead, where every session that opens it has them: add-track where flags cover the whole track, add-track-json where they do not.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_labels-LinearMarkDisplay",
      "marks": [
        {
          "mark": "bar",
          "encoding": {
            "y": "milliDiv",
            "color": "#c8d8ee"
          }
        },
        {
          "mark": "text",
          "encoding": {
            "y": "milliDiv",
            "text": "name"
          },
          "maxBpPerPx": 50
        }
      ]
    }
  ]
}'

Run these where the config.json is, or add --out <dir>, and point each uri at your own file. The config needs hg38 already — jbrowse add-assembly adds yours. The location and the settings the steps carry are session state rather than track config — that half is the Spec tab, or jbrowse set-default-session.

This session spec draws the figure from https://jbrowse.org/demos/gene_density/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "alu_labels",
      "name": "Alu divergence, labelled",
      "assemblyNames": [
        "hg38"
      ],
      "adapter": {
        "type": "BedTabixAdapter",
        "uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_labels-LinearMarkDisplay",
          "marks": [
            {
              "mark": "bar",
              "encoding": {
                "y": "milliDiv",
                "color": "#c8d8ee"
              }
            },
            {
              "mark": "text",
              "encoding": {
                "y": "milliDiv",
                "text": "name"
              },
              "maxBpPerPx": 50
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:151,000,000-151,030,000",
      "tracks": [
        {
          "trackId": "alu_labels",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own 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"
            },
            "displays": [
                {
                    "type": "LinearMarkDisplay",
                    "displayId": "alu_labels-LinearMarkDisplay",
                    "marks": [
                        {
                            "mark": "bar",
                            "encoding": {
                                "y": "milliDiv",
                                "color": "#c8d8ee"
                            }
                        },
                        {
                            "mark": "text",
                            "encoding": {
                                "y": "milliDiv",
                                "text": "name"
                            },
                            "maxBpPerPx": 50
                        }
                    ]
                }
            ]
        }
    ],
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "hg38",
            "loc": "chr1:151,000,000-151,030,000",
            "tracks": [
                {
                    "trackId": "alu_labels",
                    "type": "LinearMarkDisplay",
                    "height": 160
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

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"
    },
    "displays": [
      {
        "type": "LinearMarkDisplay",
        "displayId": "alu_labels-LinearMarkDisplay",
        "marks": [
          {
            "mark": "bar",
            "encoding": {
              "y": "milliDiv",
              "color": "#c8d8ee"
            }
          },
          {
            "mark": "text",
            "encoding": {
              "y": "milliDiv",
              "text": "name"
            },
            "maxBpPerPx": 50
          }
        ]
      }
    ]
  }
]
JSON

npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
  --tracks tracks.json \
  --assembly hg38 --loc chr1:151,000,000-151,030,000 \
  --track alu_labels display:LinearMarkDisplay '{"height":160}' \
  --width 1500 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "alu_labels",
      "name": "Alu divergence, labelled",
      "assemblyNames": [
        "hg38"
      ],
      "adapter": {
        "type": "BedTabixAdapter",
        "uri": "https://jbrowse.org/demos/gene_density/Alu.bed.gz"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_labels-LinearMarkDisplay",
          "marks": [
            {
              "mark": "bar",
              "encoding": {
                "y": "milliDiv",
                "color": "#c8d8ee"
              }
            },
            {
              "mark": "text",
              "encoding": {
                "y": "milliDiv",
                "text": "name"
              },
              "maxBpPerPx": 50
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:151,000,000-151,030,000",
      "tracks": [
        {
          "trackId": "alu_labels",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/gene_density/config.json \
  --width 1500 --height 370 \
  --session session.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

Reference lines and an axis title

scales.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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_rules-LinearMarkDisplay",
      "scales": {
        "y": {
          "title": "Divergence, per mille",
          "rules": [{ "value": 80, "color": "#d73027", "label": "young" }, 150]
        }
      },
      "marks": [{ "mark": "bar", "encoding": { "y": "milliDiv" } }]
    }
  ]
}
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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_rules-LinearMarkDisplay",
      "scales": {
        "y": {
          "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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_rules-LinearMarkDisplay",
      "scales": {
        "y": {
          "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 this track in JBrowse Desktop ↗ (JBrowse Desktop 5.0+)

The bars under a labelled red rule at 80 and a grey one at 150, with the axis captioned. Open this view in JBrowse ↗

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or 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%7D%2C%22displays%22%3A%5B%7B%22type%22%3A%22LinearMarkDisplay%22%2C%22displayId%22%3A%22alu_rules-LinearMarkDisplay%22%2C%22scales%22%3A%7B%22y%22%3A%7B%22title%22%3A%22Divergence%2C+per+mille%22%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%7B%22trackId%22%3A%22alu_rules%22%2C%22type%22%3A%22LinearMarkDisplay%22%2C%22height%22%3A160%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+mark_display_examples%2Frules

With your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one).This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu divergence, with rules”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

Open this view in JBrowse Web ↗

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genome in your JBrowse Web's config.json: jbrowse add-assembly adds it.This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “Alu divergence, with rules”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr1:151,000,000-151,030,000.

A figure adds its tracks to one session. The jbrowse CLI writes the same tracks into a config.json instead, where every session that opens it has them: add-track where flags cover the whole track, add-track-json where they do not.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "alu_rules-LinearMarkDisplay",
      "scales": {
        "y": {
          "title": "Divergence, per mille",
          "rules": [
            {
              "value": 80,
              "color": "#d73027",
              "label": "young"
            },
            150
          ]
        }
      },
      "marks": [
        {
          "mark": "bar",
          "encoding": {
            "y": "milliDiv"
          }
        }
      ]
    }
  ]
}'

Run these where the config.json is, or add --out <dir>, and point each uri at your own file. The config needs hg38 already — jbrowse add-assembly adds yours. The location and the settings the steps carry are session state rather than track config — that half is the Spec tab, or jbrowse set-default-session.

This session spec draws the figure from https://jbrowse.org/demos/gene_density/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "sessionTracks": [
    {
      "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"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_rules-LinearMarkDisplay",
          "scales": {
            "y": {
              "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": [
        {
          "trackId": "alu_rules",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own 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"
            },
            "displays": [
                {
                    "type": "LinearMarkDisplay",
                    "displayId": "alu_rules-LinearMarkDisplay",
                    "scales": {
                        "y": {
                            "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": [
                {
                    "trackId": "alu_rules",
                    "type": "LinearMarkDisplay",
                    "height": 160
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

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"
    },
    "displays": [
      {
        "type": "LinearMarkDisplay",
        "displayId": "alu_rules-LinearMarkDisplay",
        "scales": {
          "y": {
            "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 \
  --tracks tracks.json \
  --assembly hg38 --loc chr1:151,000,000-151,030,000 \
  --track alu_rules display:LinearMarkDisplay '{"height":160}' \
  --width 1500 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "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"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "alu_rules-LinearMarkDisplay",
          "scales": {
            "y": {
              "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": [
        {
          "trackId": "alu_rules",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/gene_density/config.json \
  --width 1500 --height 370 \
  --session session.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "pair_links-LinearMarkDisplay",
      "marks": [
        {
          "mark": "link",
          "transform": [
            { "type": "filter", "expr": "jexl:feature.tlen < 20000" }
          ],
          "encoding": {
            "color": {
              "field": "score",
              "scale": "linear",
              "domainMin": 0,
              "domainMax": 60,
              "range": ["#bdbdbd", "#1f4e9a"],
              "title": "Mapping quality"
            }
          }
        }
      ]
    }
  ]
}
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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "pair_links-LinearMarkDisplay",
      "marks": [
        {
          "mark": "link",
          "transform": [
            { "type": "filter", "expr": "jexl:feature.tlen < 20000" }
          ],
          "encoding": {
            "color": {
              "field": "score",
              "scale": "linear",
              "domainMin": 0,
              "domainMax": 60,
              "range": ["#bdbdbd", "#1f4e9a"],
              "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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "pair_links-LinearMarkDisplay",
      "marks": [
        {
          "mark": "link",
          "transform": [
            { "type": "filter", "expr": "jexl:feature.tlen < 20000" }
          ],
          "encoding": {
            "color": {
              "field": "score",
              "scale": "linear",
              "domainMin": 0,
              "domainMax": 60,
              "range": ["#bdbdbd", "#1f4e9a"],
              "title": "Mapping quality"
            }
          }
        }
      ]
    }
  ]
}

Open this track in JBrowse Web ↗

Open this track in JBrowse Desktop ↗ (JBrowse Desktop 5.0+)

The pairs across a deletion on chromosome 20, each an arc from its leftmost read to the end of its insert, stroked by its mapping quality. Open this view in JBrowse ↗

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or 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%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%22linear%22%2C%22domainMin%22%3A0%2C%22domainMax%22%3A60%2C%22range%22%3A%5B%22%23bdbdbd%22%2C%22%231f4e9a%22%5D%2C%22title%22%3A%22Mapping+quality%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%22chr20%3A32%2C925%2C000-32%2C955%2C000%22%2C%22tracks%22%3A%5B%7B%22trackId%22%3A%22pair_links%22%2C%22type%22%3A%22LinearMarkDisplay%22%2C%22height%22%3A160%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+mark_display_examples%2Flinks

With your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one).This figure uses hg38, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “NA12878 pairs over 1 kb, as arcs”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr20:32,925,000-32,955,000.

Open this view in JBrowse Web ↗

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genome in your JBrowse Web's config.json: jbrowse add-assembly adds it.This figure uses hg38, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “NA12878 pairs over 1 kb, as arcs”.
    1. Drag the bar at the bottom edge of the track to resize it (160px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr20:32,925,000-32,955,000.

A figure adds its tracks to one session. The jbrowse CLI writes the same tracks into a config.json instead, where every session that opens it has them: add-track where flags cover the whole track, add-track-json where they do not.

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"
  },
  "displays": [
    {
      "type": "LinearMarkDisplay",
      "displayId": "pair_links-LinearMarkDisplay",
      "marks": [
        {
          "mark": "link",
          "transform": [
            {
              "type": "filter",
              "expr": "jexl:feature.tlen < 20000"
            }
          ],
          "encoding": {
            "color": {
              "field": "score",
              "scale": "linear",
              "domainMin": 0,
              "domainMax": 60,
              "range": [
                "#bdbdbd",
                "#1f4e9a"
              ],
              "title": "Mapping quality"
            }
          }
        }
      ]
    }
  ]
}'

Run these where the config.json is, or add --out <dir>, and point each uri at your own file. The config needs hg38 already — jbrowse add-assembly adds yours. The location and the settings the steps carry are session state rather than track config — that half is the Spec tab, or jbrowse set-default-session.

This session spec draws the figure from https://jbrowse.org/demos/read_marks/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "sessionTracks": [
    {
      "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"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "pair_links-LinearMarkDisplay",
          "marks": [
            {
              "mark": "link",
              "transform": [
                {
                  "type": "filter",
                  "expr": "jexl:feature.tlen < 20000"
                }
              ],
              "encoding": {
                "color": {
                  "field": "score",
                  "scale": "linear",
                  "domainMin": 0,
                  "domainMax": 60,
                  "range": [
                    "#bdbdbd",
                    "#1f4e9a"
                  ],
                  "title": "Mapping quality"
                }
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr20:32,925,000-32,955,000",
      "tracks": [
        {
          "trackId": "pair_links",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own 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"
            },
            "displays": [
                {
                    "type": "LinearMarkDisplay",
                    "displayId": "pair_links-LinearMarkDisplay",
                    "marks": [
                        {
                            "mark": "link",
                            "transform": [
                                {
                                    "type": "filter",
                                    "expr": "jexl:feature.tlen < 20000"
                                }
                            ],
                            "encoding": {
                                "color": {
                                    "field": "score",
                                    "scale": "linear",
                                    "domainMin": 0,
                                    "domainMax": 60,
                                    "range": [
                                        "#bdbdbd",
                                        "#1f4e9a"
                                    ],
                                    "title": "Mapping quality"
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ],
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "hg38",
            "loc": "chr20:32,925,000-32,955,000",
            "tracks": [
                {
                    "trackId": "pair_links",
                    "type": "LinearMarkDisplay",
                    "height": 160
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

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"
    },
    "displays": [
      {
        "type": "LinearMarkDisplay",
        "displayId": "pair_links-LinearMarkDisplay",
        "marks": [
          {
            "mark": "link",
            "transform": [
              {
                "type": "filter",
                "expr": "jexl:feature.tlen < 20000"
              }
            ],
            "encoding": {
              "color": {
                "field": "score",
                "scale": "linear",
                "domainMin": 0,
                "domainMax": 60,
                "range": [
                  "#bdbdbd",
                  "#1f4e9a"
                ],
                "title": "Mapping quality"
              }
            }
          }
        ]
      }
    ]
  }
]
JSON

npx @jbrowse/img --config https://jbrowse.org/demos/read_marks/config.json \
  --tracks tracks.json \
  --assembly hg38 --loc chr20:32,925,000-32,955,000 \
  --track pair_links display:LinearMarkDisplay '{"height":160}' \
  --width 1500 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "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"
      },
      "displays": [
        {
          "type": "LinearMarkDisplay",
          "displayId": "pair_links-LinearMarkDisplay",
          "marks": [
            {
              "mark": "link",
              "transform": [
                {
                  "type": "filter",
                  "expr": "jexl:feature.tlen < 20000"
                }
              ],
              "encoding": {
                "color": {
                  "field": "score",
                  "scale": "linear",
                  "domainMin": 0,
                  "domainMax": 60,
                  "range": [
                    "#bdbdbd",
                    "#1f4e9a"
                  ],
                  "title": "Mapping quality"
                }
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr20:32,925,000-32,955,000",
      "tracks": [
        {
          "trackId": "pair_links",
          "type": "LinearMarkDisplay",
          "height": 160
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/read_marks/config.json \
  --width 1500 --height 370 \
  --session session.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

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",
      "scales": { "y": { "domainMin": 0, "domainMax": 10, "title": "Copies" } },
      "marks": [
        { "mark": "bar", "encoding": { "y": "score", "color": "#4575b4" } }
      ]
    }
  ]
}
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",
      "scales": { "y": { "domainMin": 0, "domainMax": 10, "title": "Copies" } },
      "marks": [
        { "mark": "bar", "encoding": { "y": "score", "color": "#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",
      "scales": { "y": { "domainMin": 0, "domainMax": 10, "title": "Copies" } },
      "marks": [
        { "mark": "bar", "encoding": { "y": "score", "color": "#4575b4" } }
      ]
    }
  ]
}

Open this track in JBrowse Web ↗

Open this track in JBrowse Desktop ↗ (JBrowse Desktop 5.0+)

Six individuals' copy number over CCL3L1, one row per file on a shared axis, stepping down from the top row to the bottom. Open this view in JBrowse ↗

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or 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%22scales%22%3A%7B%22y%22%3A%7B%22domainMin%22%3A0%2C%22domainMax%22%3A10%2C%22title%22%3A%22Copies%22%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%22%234575b4%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%22chr17%3A36%2C193%2C000-36%2C198%2C000%22%2C%22tracks%22%3A%5B%7B%22trackId%22%3A%22pur_cnv_rows%22%2C%22type%22%3A%22LinearMarkDisplay%22%2C%22height%22%3A300%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+mark_display_examples%2Frows

With your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one).This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file.This figure uses “Copy number, six PUR individuals”.
    1. Drag the bar at the bottom edge of the track to resize it (300px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr17:36,193,000-36,198,000.

Open this view in JBrowse Web ↗

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genome in your JBrowse Web's config.json: jbrowse add-assembly adds it.This figure uses hg38, loaded from a .2bit genome.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file.This figure uses “Copy number, six PUR individuals”.
    1. Drag the bar at the bottom edge of the track to resize it (300px here).
  3. Type your region of interest into the location box and press Enter.This figure is at chr17:36,193,000-36,198,000.

A figure adds its tracks to one session. The jbrowse CLI writes the same tracks into a config.json instead, where every session that opens it has them: add-track where flags cover the whole track, add-track-json where they do not.

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",
      "scales": {
        "y": {
          "domainMin": 0,
          "domainMax": 10,
          "title": "Copies"
        }
      },
      "marks": [
        {
          "mark": "bar",
          "encoding": {
            "y": "score",
            "color": "#4575b4"
          }
        }
      ]
    }
  ]
}'

Run these where the config.json is, or add --out <dir>, and point each uri at your own file. The config needs hg38 already — jbrowse add-assembly adds yours. The location and the settings the steps carry are session state rather than track config — that half is the Spec tab, or jbrowse set-default-session.

This session spec draws the figure from https://jbrowse.org/demos/gene_density/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "sessionTracks": [
    {
      "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",
          "scales": {
            "y": {
              "domainMin": 0,
              "domainMax": 10,
              "title": "Copies"
            }
          },
          "marks": [
            {
              "mark": "bar",
              "encoding": {
                "y": "score",
                "color": "#4575b4"
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr17:36,193,000-36,198,000",
      "tracks": [
        {
          "trackId": "pur_cnv_rows",
          "type": "LinearMarkDisplay",
          "height": 300
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own 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",
                    "scales": {
                        "y": {
                            "domainMin": 0,
                            "domainMax": 10,
                            "title": "Copies"
                        }
                    },
                    "marks": [
                        {
                            "mark": "bar",
                            "encoding": {
                                "y": "score",
                                "color": "#4575b4"
                            }
                        }
                    ]
                }
            ]
        }
    ],
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "hg38",
            "loc": "chr17:36,193,000-36,198,000",
            "tracks": [
                {
                    "trackId": "pur_cnv_rows",
                    "type": "LinearMarkDisplay",
                    "height": 300
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

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",
        "scales": {
          "y": {
            "domainMin": 0,
            "domainMax": 10,
            "title": "Copies"
          }
        },
        "marks": [
          {
            "mark": "bar",
            "encoding": {
              "y": "score",
              "color": "#4575b4"
            }
          }
        ]
      }
    ]
  }
]
JSON

npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
  --tracks tracks.json \
  --assembly hg38 --loc chr17:36,193,000-36,198,000 \
  --track pur_cnv_rows display:LinearMarkDisplay '{"height":300}' \
  --width 1500 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "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",
          "scales": {
            "y": {
              "domainMin": 0,
              "domainMax": 10,
              "title": "Copies"
            }
          },
          "marks": [
            {
              "mark": "bar",
              "encoding": {
                "y": "score",
                "color": "#4575b4"
              }
            }
          ]
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr17:36,193,000-36,198,000",
      "tracks": [
        {
          "trackId": "pur_cnv_rows",
          "type": "LinearMarkDisplay",
          "height": 300
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/gene_density/config.json \
  --width 1500 --height 510 \
  --session session.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

More

Mark display shows a density and the raw features in one track across zooms, a facet over a BAM's haplotype tag, and a density sidecar past the fetch budget; A grammar of graphics over a BED (RepeatMasker Alu age) and A grammar of graphics over a BAM (NA12878 insert size) each take one file through a question.