Gene density and transposon density along a chromosome

The short route: open the view in JBrowse Web, where File → Open track... adds your own files beside its hosted genome and tracks.

From scratch 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). For JBrowse Web, jbrowse add-assembly puts it in your config.json.This figure uses hg38, loaded from a .2bit genome.
2. Add a track: check one your config has in the track selector, or File → Open track... to paste a URL or choose a local file. This one needs a BigWig file (.bw).This figure uses “RefSeq genes per kb”.
3. Add the next track the same way. This one needs a BigWig file (.bw).This figure uses “Alu per kb”.
4. Add the next track the same way. This one needs a BigWig file (.bw).This figure uses “L1 per kb”.
5. Add the next track the same way. This one needs a BigWig file (.bw).This figure uses “Simple repeats per kb”.
6. Type your region of interest into the location box and press Enter.This figure is at chr1.

This session spec draws the figure. It goes after &session=spec- on a JBrowse Web link that loads https://jbrowse.org/demos/gene_density/config.json, which is what the Web button above opens.

{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1",
      "tracks": [
        "hg38_genes_density",
        "hg38_Alu_density",
        "hg38_L1_density",
        "hg38_Simple_repeat_density"
      ]
    }
  ]
}

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", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "hg38",
            "loc": "chr1",
            "tracks": [
                "hg38_genes_density",
                "hg38_Alu_density",
                "hg38_L1_density",
                "hg38_Simple_repeat_density"
            ]
        }
    ],
)
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: a data file opens as the track its name says.

npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
  --assembly hg38 --loc chr1 \
  --track hg38_genes_density \
  --track hg38_Alu_density \
  --track hg38_L1_density \
  --track hg38_Simple_repeat_density \
  --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: change the location or a track's settings, or add your own track under sessionTracks, and rerun.

cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1",
      "tracks": [
        "hg38_genes_density",
        "hg38_Alu_density",
        "hg38_L1_density",
        "hg38_Simple_repeat_density"
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/gene_density/config.json \
  --width 1500 --height 800 \
  --spec 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.

The short route: open the view in JBrowse Web, where File → Open track... adds your own files beside its hosted genome and tracks.

From scratch 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). For JBrowse Web, jbrowse add-assembly puts it in your config.json.This figure uses hg38, loaded from a .2bit genome.
2. Add a track: check one your config has in the track selector, or File → Open track... to paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi).This figure uses “RefSeq curated genes”.
3. Add the next track the same way. This one needs a BigWig file (.bw).This figure uses “Alu per kb”.
4. Add the next track the same way. This one needs a BigWig file (.bw).This figure uses “L1 per kb”.
5. Type your region of interest into the location box and press Enter.This figure is at chr1:150,000,000-160,000,000.

This session spec draws the figure. It goes after &session=spec- on a JBrowse Web link that loads https://jbrowse.org/demos/gene_density/config.json, which is what the Web button above opens.

{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:150,000,000-160,000,000",
      "tracks": [
        "hg38_genes",
        "hg38_Alu_density",
        "hg38_L1_density"
      ]
    }
  ]
}

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", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "hg38",
            "loc": "chr1:150,000,000-160,000,000",
            "tracks": [
                "hg38_genes",
                "hg38_Alu_density",
                "hg38_L1_density"
            ]
        }
    ],
)
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: a data file opens as the track its name says.

npx @jbrowse/img --config https://jbrowse.org/demos/gene_density/config.json \
  --assembly hg38 --loc chr1:150,000,000-160,000,000 \
  --track hg38_genes \
  --track hg38_Alu_density \
  --track hg38_L1_density \
  --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: change the location or a track's settings, or add your own track under sessionTracks, and rerun.

cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "hg38",
      "loc": "chr1:150,000,000-160,000,000",
      "tracks": [
        "hg38_genes",
        "hg38_Alu_density",
        "hg38_L1_density"
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/gene_density/config.json \
  --width 1500 --height 620 \
  --spec 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.