geneviewer
0.3.11GitHub

Getting started ​

Every chart on this page is drawn live from the code below it. Use the switch at the top of the page to read this guide for JavaScript, R or Python: the code tabs and the names in the text follow it.

Installation ​

Install the released version of geneviewer from CRAN:

r
install.packages("geneviewer")

Or the development version from GitHub:

r
# install.packages("devtools")
devtools::install_github("nvelden/geneviewer")

The R code on this site is for version 0.3.0, which is in development.

Install geneviewer-py from PyPI, with the extra for where the charts are shown: jupyter for notebooks, shiny for Shiny for Python apps, or both.

sh
pip install "geneviewer-py[jupyter]"

The import name is geneviewer. The Python pages have more on notebooks, on Shiny, on reading files and on alignment.

Load geneviewer from a CDN, or install it from npm for a bundler such as Vite or webpack:

html
<script src="https://cdn.jsdelivr.net/npm/geneviewer-js@0.3/dist/geneviewer.min.js"></script>
html
<script type="module">
  import { newChart } from "https://cdn.jsdelivr.net/npm/geneviewer-js@0.3/dist/geneviewer.standalone.mjs";
</script>
sh
npm install geneviewer-js
sh
yarn add geneviewer-js
sh
pnpm add geneviewer-js

The script tag defines the global geneviewer and includes D3. With npm, import the functions you need. That build imports d3 from npm, so a project that already uses D3 loads it once:

js
import { newChart } from "geneviewer-js";

The library adds its styles to the page with the first chart, and TypeScript types are included.

Your first chart ​

GC_chart() draws a chart from a table of genes. This uses the ophA_clusters dataset of the package:

r
library(geneviewer)

ophA_cluster <- subset(ophA_clusters, cluster == "ophA")

GC_chart(ophA_cluster, group = "class", height = "150px")

GC() makes a chart from a table of genes, a pandas DataFrame. This uses the ophA_clusters dataset of the package:

python
from geneviewer import GC, datasets

ophA_clusters = datasets.load("ophA_clusters")
ophA_cluster = ophA_clusters[ophA_clusters["cluster"] == "ophA"]

GC(ophA_cluster, group="class", height="150px")

In a Jupyter notebook, a cell that ends with the chart draws it. In an app, a Shiny for Python output does.

A chart is drawn into an element, which sets its size, from a spec: the data and what to draw. Copy this into an HTML file and open it:

html
<div id="chart" style="height: 150px"></div>
<script src="https://cdn.jsdelivr.net/npm/geneviewer-js@0.3/dist/geneviewer.min.js"></script>
<script>
  const genes = [
    { name: "ophB1", start: 2522, end: 4276, class: "Monooxygenase" },
    { name: "ophC", start: 5286, end: 4718, class: "NTF2-like" },
    { name: "ophA", start: 9536, end: 10904, class: "Methyltransferase" },
    { name: "ophD", start: 12616, end: 11859, class: "O-acyltransferase" },
    { name: "ophB2", start: 13183, end: 15046, class: "Monooxygenase" },
    { name: "ophP", start: 19346, end: 16016, class: "Prolyloligopeptidase" },
    { name: "ophE", start: 20170, end: 21484, class: "F-box/RNHI-like" },
  ];

  const chart = geneviewer.newChart("#chart", {
    data: genes,
    fields: { group: "class" },
  });
</script>

Data and fields ​

data is the gene table: an array of rows, as above, or an object of columns ({ start: [...], end: [...] }). fields names the columns the chart uses:The first argument of GC_chart() is the gene table, a data frame. Its other arguments name the columns the chart uses:The first argument of GC() is the gene table, a pandas DataFrame. Its other arguments name the columns the chart uses:

  • start and end: the gene's positions (default: the columns start and end). A gene whose start is after its end is on the reverse strand.
  • cluster: which cluster a gene is in. Without it, all genes are one cluster.
  • group: colours the genes and fills the legend.
  • strand: 1, forward, + or sense; -1, 0, reverse, -, antisense or complement.

Other columns can be used in labels, tooltips and styles.

The charts below share three tables from the R package, the omphalotin gene clusters of two fungi. Add them to your page to run the code:

js
const ophAClusters = [
  {
  name: "ophB1",
  start: 2522,
  end: 4276,
  class: "Monooxygenase",
  cluster: "ophA",
},
  {
  name: "ophC",
  start: 5286,
  end: 4718,
  class: "NTF2-like",
  cluster: "ophA",
},
  {
  name: "ophA",
  start: 9536,
  end: 10904,
  class: "Methyltransferase",
  cluster: "ophA",
},
  {
  name: "ophD",
  start: 12616,
  end: 11859,
  class: "O-acyltransferase",
  cluster: "ophA",
},
  {
  name: "ophB2",
  start: 13183,
  end: 15046,
  class: "Monooxygenase",
  cluster: "ophA",
},
  {
  name: "ophP",
  start: 19346,
  end: 16016,
  class: "Prolyloligopeptidase",
  cluster: "ophA",
},
  {
  name: "ophE",
  start: 20170,
  end: 21484,
  class: "F-box/RNHI-like",
  cluster: "ophA",
},
  {
  name: "dbophB1",
  start: 40768,
  end: 43005,
  class: "Monooxygenase",
  cluster: "dbophA",
},
  {
  name: "dbophB2",
  start: 38089,
  end: 40469,
  class: "Monooxygenase",
  cluster: "dbophA",
},
  {
  name: "dbophC",
  start: 37262,
  end: 37791,
  class: "NTF2-like",
  cluster: "dbophA",
},
  {
  name: "dbophD1",
  start: 34955,
  end: 36331,
  class: "O-acyltransferase",
  cluster: "dbophA",
},
  {
  name: "dbophB3",
  start: 32392,
  end: 34679,
  class: "Monooxygenase",
  cluster: "dbophA",
},
  {
  name: "dbophA",
  start: 28937,
  end: 30516,
  class: "Methyltransferase",
  cluster: "dbophA",
},
  {
  name: "dbophD2",
  start: 27371,
  end: 28885,
  class: "O-acyltransferase",
  cluster: "dbophA",
},
  {
  name: "dbophB4",
  start: 25288,
  end: 27217,
  class: "Monooxygenase",
  cluster: "dbophA",
},
  {
  name: "dbophP",
  start: 21283,
  end: 24607,
  class: "Prolyloligopeptidase",
  cluster: "dbophA",
},
  {
  name: "dbophE",
  start: 19236,
  end: 20583,
  class: "F-box/RNHI-like",
  cluster: "dbophA",
},
];
const ophA = ophAClusters.filter((gene) => gene.cluster === "ophA");
const dbophA = ophAClusters.filter((gene) => gene.cluster === "dbophA");

The charts below use ophA_clusters, a dataset of the package: the omphalotin gene clusters of two fungi.

The charts below use ophA_clusters, a dataset of the package: the omphalotin gene clusters of two fungi. The code of the charts starts from these lines, and runs from top to bottom: a chart can use a table an earlier one made.

python
import pandas as pd

from geneviewer import GC, datasets

ophA_clusters = datasets.load("ophA_clusters")
human_hox_genes = datasets.load("human_hox_genes")
coronavirus_genomes = datasets.load("coronavirus_genomes")

Cluster visualization ​

Single gene cluster ​

The minimum is the start and end of each gene. A group column is used for the colours and the legend.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", { data: ophA, fields: { start: "start", end: "end", group: "class" } });
r
# Example data for a single Gene cluster
ophA_cluster <- subset(ophA_clusters, cluster == "ophA")

GC_chart(ophA_cluster, 
         start = "start", 
         end = "end", 
         group = "class", 
         height = "150px"
         )
python
# Example data for a single Gene cluster
ophA_cluster = ophA_clusters[ophA_clusters["cluster"] == "ophA"]

GC(ophA_cluster, start="start", end="end", group="class", height="150px")

Multiple gene clusters ​

For several clusters, name the column that tells them apart in fields.clusterclustercluster. Clusters share the height of the elementchartchart, so here each of the two gets 150px.

js
// <div id="chart" style="height: 300px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { start: "start", end: "end", cluster: "cluster", group: "class" },
});
r
# Example data for two Gene clusters
GC_chart(ophA_clusters, 
         start = "start", 
         end = "end", 
         group = "class", 
         cluster = "cluster", 
         height = "300px"
         )
python
# Example data for two Gene clusters
GC(
    ophA_clusters,
    start="start",
    end="end",
    group="class",
    cluster="cluster",
    height="300px",
)

Styling ​

The style keyThe style argument of GC_chart()The style argument of GC() takes CSS for the chart as a whole. The other parts of the chart each have their own options, shown below.

js
// <div id="chart" style="height: 200px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { start: "start", end: "end", cluster: "cluster", group: "class" },
  style: { border: "1px solid black", backgroundColor: "#FAEBD7" },
});
r
# Example data for two Gene clusters
GC_chart(ophA_clusters, 
         start = "start", 
         end = "end", 
         group = "class", 
         cluster = "cluster", 
         height = "200px",
         style = list(
           border = "1px solid black",
           backgroundColor = "#FAEBD7"
           # Any other CSS style
           )
         )
python
# Example data for two Gene clusters
GC(
    ophA_clusters,
    start="start",
    end="end",
    group="class",
    cluster="cluster",
    height="200px",
    style={"border": "1px solid black", "backgroundColor": "#FAEBD7"},
)

Updating ​

Each GC_ function returns the chart with its settings changed, so add another one to change a chart:

r
chart <- GC_chart(ophA_clusters, group = "class", cluster = "cluster", height = "300px")

chart %>%
  GC_title("OphA clusters") %>%
  GC_theme("dark")

Shiny ​

GC_chartOutput() and renderGC_chart() show charts in Shiny apps.

r
library(shiny)
library(geneviewer)

ui <- fluidPage(
  titlePanel("Omphalotin gene clusters"),
  mainPanel(GC_chartOutput("gcChart", width = "100%", height = "400px"))
)

server <- function(input, output) {
  output$gcChart <- renderGC_chart({
    GC_chart(ophA_clusters, cluster = "cluster", group = "class") %>%
      GC_clusterTitle(title = c("<i>O. olearius</i>", "<i>D. bispora</i>")) %>%
      GC_labels("name") %>%
      GC_legend(position = "bottom") %>%
      GC_scaleBar() %>%
      GC_clusterLabel(title = "ophA")
  })
}

shinyApp(ui = ui, server = server)

Each method returns a new chart with its settings changed, so call another one to change a chart:

python
chart = GC(ophA_clusters, group="class", cluster="cluster", height="300px")

chart.title("OphA clusters").theme("dark")

Shiny ​

output_geneviewer() and @render_geneviewer show charts in Shiny for Python apps. Save this as app.py and run shiny run app.py:

python
from shiny import App, ui

from geneviewer import GC, datasets
from geneviewer.shiny import output_geneviewer, render_geneviewer

ophA_clusters = datasets.load("ophA_clusters")

app_ui = ui.page_fluid(
    ui.panel_title("Omphalotin gene clusters"),
    output_geneviewer("chart", width="100%", height="400px"),
)


def server(input, output, session):
    @render_geneviewer
    def chart():
        return (
            GC(ophA_clusters, cluster="cluster", group="class")
            .cluster_title(title=["<i>O. olearius</i>", "<i>D. bispora</i>"])
            .labels("name")
            .legend(position="bottom")
            .scale_bar()
            .cluster_label(title="ophA")
        )


app = App(app_ui, server)

Shiny for Python has more.

update() merges a partial spec into the chart's spec and draws again. Tables (data, links.data) are replaced whole. setSpec() replaces the spec, and getSpec() returns it.

js
chart.update({ title: { title: "OphA clusters" }, theme: "dark" });
chart.update({ data: moreGenes });
const spec = chart.getSpec();

Call chart.resize() when the element changes size, and chart.destroy() to remove the chart and its listeners.

Events ​

Charts report what the mouse does when you ask for it with the events keyGC_events().events(). Each kind of interaction has its own optionargumentargument:

OptionArgumentArgumentWhat it does
clickReports a click to Shiny in input$<outputId>_click to Shiny in input.<id>_click(): the part of the chart ("genes", "labels", "links", "scale", "clusterTitle", ...), its cluster and the data of the clicked gene, link or legend group.
selectA click selects a gene, label, coordinate, legend label or marker, the scale, or the title or subtitle of a cluster title, footer or label, and outlines it. Shift-, Ctrl- or Cmd-click and a box drawn on empty space select several. A click elsewhere or Escape ends the selection. Reported in input$<outputId>_select (the element selected last) and input$<outputId>_selection (all of them). Reported in input.<id>_select() (the element selected last) and input.<id>_selection() (all of them).
dragElements can be moved with the mouse and the arrow keys, and moves undone. See Moving elements. Reported in input$<outputId>_drag and input$<outputId>_moves. Reported in input.<id>_drag() and input.<id>_moves().
zoomReports the window of the zoom slider in input$<outputId>_zoom in input.<id>_zoom(). See Zoom.
dblclickReports double-clicks in input$<outputId>_dblclick in input.<id>_dblclick(). Enter opens a selected element.
highlightOutlines the part of the chart under the mouse.
legendClicklegend_clicklegend_clickWhether clicks on the legend are reported. Hiding and showing groups in the legend always works.
renderedReports each finished draw.

The payload of a selected element also has style: how it is drawn (its colour, size, font, ...), for example to show the current values in an editor. In the app below a click on a gene shows its row of the data. Protein sequences (the translation and sequence columns) are left out of it, as they are not sent to the browser unless the chart shows them; click$data$rowID finds them in the data.

r
library(shiny)
library(geneviewer)

ui <- fluidPage(
  GC_chartOutput("gcChart", height = "300px"),
  verbatimTextOutput("clicked")
)

server <- function(input, output) {
  output$gcChart <- renderGC_chart({
    GC_chart(ophA_clusters, cluster = "cluster", group = "class") %>%
      GC_labels("name") %>%
      GC_events(click = TRUE, select = TRUE, highlight = TRUE)
  })
  output$clicked <- renderPrint({
    click <- input$gcChart_click
    req(click, click$component == "genes")
    str(click$data)
  })
}

shinyApp(ui = ui, server = server)

Selection also works outside Shiny, as a geneviewer:select event in the browser.

The payload of a selected element also has style: how it is drawn (its colour, size, font, ...), for example to show the current values in an editor. In the app below a click on a gene shows its row of the data. Protein sequences (the translation and sequence columns) are left out of it, as they are not sent to the browser unless the chart shows them; click["data"]["rowID"] finds them in the data.

python
import json

from shiny import App, render, ui

from geneviewer import GC, datasets
from geneviewer.shiny import output_geneviewer, render_geneviewer

ophA_clusters = datasets.load("ophA_clusters")

app_ui = ui.page_fluid(
    output_geneviewer("chart", height="300px"),
    ui.output_code("clicked"),
)


def server(input, output, session):
    @render_geneviewer
    def chart():
        return (
            GC(ophA_clusters, cluster="cluster", group="class")
            .labels("name")
            .events(click=True, select=True, highlight=True)
        )

    @render.code
    def clicked():
        click = input.chart_click()
        if not click or click["component"] != "genes":
            return "Click a gene"
        return json.dumps(click["data"], indent=1)


app = App(app_ui, server)

Listen with on(), which gives a function that stops listening. Each event is also a geneviewer:<name> DOM event on the element.

js
chart.update({ events: { click: true, select: true } });

const stop = chart.on("select", (event) => console.log(event.detail));

document.getElementById("chart")
  .addEventListener("geneviewer:click", (event) => console.log(event.detail));

Handlers that should also get the events of the first draw go in the options of newChart():

js
geneviewer.newChart("#chart", spec, {
  on: { rendered: (event) => console.log("drawn", event.detail) },
});

Select from code, and read the selection back. The detail of a selected element also has style: how it is drawn (its colour, size, font, ...), for example to show the current values in an editor.

js
chart.select([{ component: "genes", data: { rowID: 3 } }]);
const selected = chart.getSelection();

Click a gene, label or cluster title in this chart to select it:

js
// <div id="chart" style="height: 250px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  labels: { label: "name" },
  clusterLabel: { title: ["O. olearius", "D. bispora"] },
  events: { highlight: true, select: true },
});
r
GC_chart(ophA_clusters, cluster = "cluster", group = "class", height = "250px") %>%
  GC_labels("name") %>%
  GC_clusterLabel(title = c("O. olearius", "D. bispora")) %>%
  GC_events(select = TRUE, highlight = TRUE)
python
(
    GC(ophA_clusters, cluster="cluster", group="class", height="250px")
    .labels("name")
    .cluster_label(title=["O. olearius", "D. bispora"])
    .events(select=True, highlight=True)
)

Moving elements ​

With events: { drag: true }GC_events(drag = TRUE).events(drag=True) you can arrange a chart with the mouse, for example to move a label away from a gene or the legend to an empty corner before saving a figure. Gene labels, the chart title and subtitle, the titles, footers and labels of the clusters, the scale axis and scale bar (each as a whole) and the labels and markers of the legend (each on its own) can be moved. Try it in the chart below:

  • Drag an element to move it. A press without moving is still a click.
  • Shift-, Ctrl- or Cmd-click adds an element to the selection, or takes it out again. Drag on empty space to draw a box: the elements entirely inside it are selected, such as all items of the legend. Dragging one of the selected elements moves them all.
  • Arrow keys move the selected elements by a pixel, or 10 pixels with Shift.
  • Undo, redo and reset appear next to the download icon once something has moved. Reset moves everything back to where it was first drawn. After clicking the chart, Ctrl+Z (Cmd+Z on a Mac) undoes and Ctrl+Shift+Z or Ctrl+Y redoes, as do chart.undo() and chart.redo().
  • Escape cancels a drag, or ends the selection.
js
// <div id="chart" style="height: 350px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  title: { title: "ophA gene clusters", subtitle: "Drag me" },
  labels: { label: "name" },
  clusterLabel: { title: ["O. olearius", "D. bispora"] },
  scaleBar: {},
  events: { select: true, drag: true },
});
r
GC_chart(ophA_clusters, cluster = "cluster", group = "class", height = "350px") %>%
  GC_title("ophA gene clusters", subtitle = "Drag me") %>%
  GC_labels("name") %>%
  GC_clusterLabel(title = c("O. olearius", "D. bispora")) %>%
  GC_scaleBar() %>%
  GC_events(select = TRUE, drag = TRUE)
python
(
    GC(ophA_clusters, cluster="cluster", group="class", height="350px")
    .title("ophA gene clusters", subtitle="Drag me")
    .labels("name")
    .cluster_label(title=["O. olearius", "D. bispora"])
    .scale_bar()
    .events(select=True, drag=True)
)

Moved elements are part of the saved SVG and PNG. A move is kept until the page is loaded again. To keep it in the specin the chartin the chart, give its offset in pixels, moveX (right) and moveY (down), in elementStyleto GC_element_style()to .element_style(). Elements are identified as they are for styling: a gene label by its row, a cluster title, footer or label by its cluster and part, the scale and scale bar by their cluster, and a legend label or marker by its group and part.

js
// <div id="chart" style="height: 350px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  labels: { label: "name" },
  clusterLabel: { title: ["O. olearius", "D. bispora"] },
  scaleBar: {},
  elementStyle: [
    { component: "labels", rowID: 3, moveY: -12 },
    { component: "clusterLabel", moveX: 10, cluster: 2, part: "title" },
    { component: "scaleBar", moveX: -40, cluster: 1 },
    {
      component: "legend",
      moveY: 4,
      part: "marker",
      group: "Methyltransferase",
    },
  ],
  events: { select: true, drag: true },
});
r
GC_chart(ophA_clusters, cluster = "cluster", group = "class", height = "350px") %>%
  GC_labels("name") %>%
  GC_clusterLabel(title = c("O. olearius", "D. bispora")) %>%
  GC_scaleBar() %>%
  GC_element_style("labels", row_id = 3, moveY = -12) %>%
  GC_element_style("clusterLabel", cluster = 2, part = "title", moveX = 10) %>%
  GC_element_style("scaleBar", cluster = 1, moveX = -40) %>%
  GC_element_style("legend", group = "Methyltransferase", part = "marker", moveY = 4) %>%
  GC_events(select = TRUE, drag = TRUE)
python
(
    GC(ophA_clusters, cluster="cluster", group="class", height="350px")
    .labels("name")
    .cluster_label(title=["O. olearius", "D. bispora"])
    .scale_bar()
    .element_style("labels", row_id=3, move_y=-12)
    .element_style("clusterLabel", cluster=2, part="title", move_x=10)
    .element_style("scaleBar", cluster=1, move_x=-40)
    .element_style("legend", group="Methyltransferase", part="marker", move_y=4)
    .events(select=True, drag=True)
)

The drag event reportsIn Shiny, input$<outputId>_drag reportsIn Shiny, input.<id>_drag() reports each move of one element, with its new position (moveX and moveY) and the action ("drag", "nudge", "undo" or "redo"). A move of several elements at once, such as a reset, is reported once by movesinput$<outputId>_movesinput.<id>_moves(), with the action and a list of moves. Store these and add them to elementStyleGC_element_style().element_style() to keep the moves when the chart is drawn again.

r
library(shiny)
library(geneviewer)

ui <- fluidPage(
  checkboxInput("italic", "Italic labels"),
  GC_chartOutput("gcChart", height = "300px")
)

server <- function(input, output) {
  # The position of each moved label, by its row
  positions <- reactiveVal(list())
  keep <- function(moves) {
    all <- positions()
    for (move in moves) {
      if (move$component == "labels") all[[as.character(move$data$rowID)]] <- move$position
    }
    positions(all)
  }
  observeEvent(input$gcChart_drag, keep(list(input$gcChart_drag)))
  observeEvent(input$gcChart_moves, keep(input$gcChart_moves$moves))

  output$gcChart <- renderGC_chart({
    chart <- GC_chart(ophA_clusters, cluster = "cluster", group = "class") %>%
      GC_labels("name", fontStyle = if (input$italic) "italic" else "normal") %>%
      GC_events(select = TRUE, drag = TRUE)
    for (row in names(positions())) {
      chart <- GC_element_style(chart, "labels", row_id = as.numeric(row),
                                moveX = positions()[[row]]$moveX,
                                moveY = positions()[[row]]$moveY)
    }
    chart
  })
}

shinyApp(ui = ui, server = server)
python
from shiny import App, reactive, ui

from geneviewer import GC, datasets
from geneviewer.shiny import output_geneviewer, render_geneviewer

ophA_clusters = datasets.load("ophA_clusters")

app_ui = ui.page_fluid(
    ui.input_checkbox("italic", "Italic labels"),
    output_geneviewer("chart", height="300px"),
)


def server(input, output, session):
    # The position of each moved label, by its row
    positions = reactive.value({})

    def keep(moves):
        kept = dict(positions())
        for move in moves:
            if move["component"] == "labels":
                kept[move["data"]["rowID"]] = move["position"]
        positions.set(kept)

    @reactive.effect
    @reactive.event(input.chart_drag)
    def _():
        keep([input.chart_drag()])

    @reactive.effect
    @reactive.event(input.chart_moves)
    def _():
        keep(input.chart_moves()["moves"])

    @render_geneviewer
    def chart():
        chart = (
            GC(ophA_clusters, cluster="cluster", group="class")
            .labels("name", font_style="italic" if input.italic() else "normal")
            .events(select=True, drag=True)
        )
        for row, position in positions().items():
            chart = chart.element_style(
                "labels", row_id=row, move_x=position["moveX"], move_y=position["moveY"]
            )
        return chart


app = App(app_ui, server)

Toolbar ​

The undo, redo and reset icons, the reset zoom icon of the zoom slider and the save button make up the toolbar. The toolbar keyGC_toolbar().toolbar() sets when it shows ("hover", "always", for example for touch screens, or "never"), its corner, which buttons it has, the size and colours of its icons and the look of its tooltips. The icons are Font Awesome icons, by name, such as "camera", or by their classes for another style, such as "fa-regular fa-floppy-disk". The default icons need nothing. Custom icons need Font Awesome on the page, for example <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">.For custom icons, the R package adds Font Awesome to the page.Custom icons need Font Awesome on the page: see Toolbar icons.

js
// <div id="chart" style="height: 180px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  labels: { label: "name" },
  events: { select: true, drag: true },
  toolbar: {
    show: "always",
    position: "topleft",
    size: 16,
    color: "#9e9e9e",
    hoverColor: "#1f77b4",
    tooltipBackground: "#1f77b4",
    icons: {
      undo: "arrow-left",
      redo: "arrow-right",
      reset: "arrows-to-circle",
      save: "camera",
    },
  },
});
r
GC_chart(ophA_cluster, group = "class", height = "180px") %>%
  GC_labels("name") %>%
  GC_events(select = TRUE, drag = TRUE) %>%
  GC_toolbar(show = "always",
             position = "topleft",
             size = 16,
             color = "#9e9e9e",
             hoverColor = "#1f77b4",
             tooltipBackground = "#1f77b4",
             icons = list(undo = "arrow-left", redo = "arrow-right",
                          reset = "arrows-to-circle", save = "camera"))
python
(
    GC(ophA_cluster, group="class", height="180px")
    .labels("name")
    .events(select=True, drag=True)
    .toolbar(
        show="always",
        position="topleft",
        size=16,
        color="#9e9e9e",
        hover_color="#1f77b4",
        tooltip_background="#1f77b4",
        icons={
            "undo": "arrow-left",
            "redo": "arrow-right",
            "reset": "arrows-to-circle",
            "save": "camera",
        },
    )
)

The built-in themes style the toolbar to fit, and a theme of your own can set it as a component: theme: { toolbar: { color: "grey", hoverColor: "black" } }GC_theme(toolbar = list(color = "grey", hoverColor = "black")).theme(toolbar={"color": "grey", "hoverColor": "black"}). The toolbar keyGC_toolbar().toolbar() takes precedence over the theme.

Selections ​

Specific clusters ​

Options apply to all clusters of the chart by default. A part can also be an array of entries, and an entry with clusters applies only to those clusters.Most GC_ functions have a cluster argument that applies them only to those clusters.Most methods have a cluster argument that applies them only to those clusters. Name a cluster or give its number, starting at 1.

Here the labels of the first cluster are moved below the genes:

js
// <div id="chart" style="height: 350px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  title: { title: "ophA Gene Clusters" },
  labels: [
    { label: "name", clusters: ["ophA"], y: 18 },
    { label: "name", clusters: [2] },
  ],
});
r
GC_chart(ophA_clusters, cluster = "cluster", group = "class", height = "350px") %>%
  GC_title(title = "ophA Gene Clusters") %>%
  GC_labels(label = "name", cluster = "ophA", y = 18) %>%
  GC_labels(label = "name", cluster = 2)
python
(
    GC(ophA_clusters, cluster="cluster", group="class", height="350px")
    .title(title="ophA Gene Clusters")
    .labels(label="name", cluster="ophA", y=18)
    .labels(label="name", cluster=2)
)

Individual items ​

To style one item of a cluster, use itemStyle, a list with the index of the item and its styles. The index starts at 0.

Here the 3rd label of the ophA cluster is red and bold. In cluster 2 the 5th label is red and bold as well, and the 4th label is moved.

js
// <div id="chart" style="height: 300px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  title: { title: "ophA Gene Clusters", height: "30px" },
  labels: [
    {
      label: "name",
      clusters: ["ophA"],
      itemStyle: [{ index: 2, fill: "red", fontWeight: "bold" }],
    },
    {
      label: "name",
      clusters: [2],
      itemStyle: [
        { index: 4, fill: "red", fontWeight: "bold" },
        { index: 3, y: 10, x: -5 },
      ],
    },
  ],
});
r
GC_chart(ophA_clusters, cluster = "cluster", group = "class", height = "300px") %>%
  GC_title(title = "ophA Gene Clusters", height = "30px") %>%
  GC_labels(label = "name", 
            cluster = "ophA", 
            itemStyle = 
              list(
                list(index = 2, fill = "red", fontWeight = "bold")
                )
            ) %>%
  GC_labels(
    label = "name", 
    cluster = 2,
    itemStyle = 
              list(
                list(index = 4, fill = "red", fontWeight = "bold"),
                list(index = 3, y = 10, x = -5)
                )
    )
python
(
    GC(ophA_clusters, cluster="cluster", group="class", height="300px")
    .title(title="ophA Gene Clusters", height="30px")
    .labels(
        label="name",
        cluster="ophA",
        item_style=[{"index": 2, "fill": "red", "fontWeight": "bold"}],
    )
    .labels(
        label="name",
        cluster=2,
        item_style=[
            {"index": 4, "fill": "red", "fontWeight": "bold"},
            {"index": 3, "y": 10, "x": -5},
        ],
    )
)

elementStyleGC_element_style().element_style() styles one element at a time, without the index: a gene, label or coordinate by its row in the data (rowIDrow_id, the rowID column of the chartrow_id, the rowID column of the chart), or the title or subtitle of a cluster title, footer or label by its cluster and part. Its options add to the other styles of the chart. Legend labels and markers are styled by their group and part. These are the same names the selection events report, so an editor built on them can record its changes here.

js
// <div id="chart" style="height: 300px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  labels: { label: "name" },
  coordinates: {},
  clusterLabel: { title: ["O. olearius", "D. bispora"], subtitle: "ophA" },
  elementStyle: [
    { component: "genes", rowID: 3, fill: "red", markerHeight: 30 },
    { component: "labels", rowID: 3, text: "ophMA", fontWeight: "bold" },
    { component: "coordinates", rowID: 1, show: false, end: "start" },
    {
      component: "clusterLabel",
      text: "dbophA",
      fill: "grey",
      cluster: 2,
      part: "subtitle",
    },
  ],
});
r
GC_chart(ophA_clusters, cluster = "cluster", group = "class", height = "300px") %>%
  GC_labels("name") %>%
  GC_coordinates() %>%
  GC_clusterLabel(title = c("O. olearius", "D. bispora"), subtitle = "ophA") %>%
  GC_element_style("genes", row_id = 3, fill = "red", markerHeight = 30) %>%
  GC_element_style("labels", row_id = 3, text = "ophMA", fontWeight = "bold") %>%
  GC_element_style("coordinates", row_id = 1, end = "start", show = FALSE) %>%
  GC_element_style("clusterLabel", cluster = 2, part = "subtitle",
                   text = "dbophA", fill = "grey")
python
(
    GC(ophA_clusters, cluster="cluster", group="class", height="300px")
    .labels("name")
    .coordinates()
    .cluster_label(title=["O. olearius", "D. bispora"], subtitle="ophA")
    .element_style("genes", row_id=3, fill="red", marker_height=30)
    .element_style("labels", row_id=3, text="ophMA", font_weight="bold")
    .element_style("coordinates", row_id=1, end="start", show=False)
    .element_style(
        "clusterLabel", cluster=2, part="subtitle", text="dbophA", fill="grey"
    )
)

Layout ​

Cluster ​

The cluster keyGC_cluster().cluster() styles clusters and sets their margins. Here each cluster has its own background, and the left and right margins are 25px. The margins of the title and legend do not change. To change those too, use gridGC_grid().grid().

js
// <div id="chart" style="height: 300px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  title: { title: "Adjust margins of GC clusters", align: "left" },
  cluster: [
    { margin: { left: 25, right: 25 } },
    { clusters: [1], style: { backgroundColor: "green" } },
    { clusters: [2], style: { backgroundColor: "red" } },
  ],
});
r
GC_chart(
  ophA_clusters,
  group = "class",
  cluster = "cluster",
  height = "300px" 
  ) %>%
  GC_title("Adjust margins of GC clusters", align = "left") %>%
  GC_cluster(margin = list(left = 25, right = 25)) %>%
  GC_cluster(cluster = 1, style = list(backgroundColor = "green")) %>%
  GC_cluster(cluster = 2, style = list(backgroundColor = "red"))
python
(
    GC(ophA_clusters, group="class", cluster="cluster", height="300px")
    .title("Adjust margins of GC clusters", align="left")
    .cluster(margin={"left": 25, "right": 25})
    .cluster(cluster=1, style={"backgroundColor": "green"})
    .cluster(cluster=2, style={"backgroundColor": "red"})
)

Separate forward and reverse strands ​

Forward and reverse strands can go on separate tracks with separate_strands with separate_strands. strandSpacingstrand_spacingstrand_spacing sets the space between them.

js
// <div id="chart" style="height: 350px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "name" },
  labels: {},
  cluster: { separateStrands: true, strandSpacing: 3 },
  legend: { show: false },
});
r
GC_chart(
  ophA_clusters,
  group = "name",
  cluster = "cluster",
  height = "350px" 
  ) %>% 
  GC_labels() %>%
  GC_cluster(separate_strands = TRUE, strand_spacing = 3) %>%
  GC_legend(FALSE)
python
(
    GC(ophA_clusters, group="name", cluster="cluster", height="350px")
    .labels()
    .cluster(separate_strands=True, strand_spacing=3)
    .legend(False)
)

Prevent gene overlap ​

With preventGeneOverlap: trueprevent_gene_overlap = TRUEprevent_gene_overlap=True, genes that overlap go on separate tracks, below each other. A gene goes on the first track where it overlaps no gene placed before it, and overlapSpacingoverlap_spacingoverlap_spacing sets the space between the tracks. Here the overlapping HOX genes are 30 pixels apart. Setting both separateStrandsseparate_strandsseparate_strands and preventGeneOverlapprevent_gene_overlapprevent_gene_overlap is not supported at the moment.

js
// <div id="chart" style="height: 390px"></div>
const { data } = await fetch("https://nvelden.github.io/geneviewer-docs/charts/data/guide-prevent-gene-overlap.json")
  .then((response) => response.json());

const chart = geneviewer.newChart("#chart", {
  data,
  fields: { cluster: "cluster", group: "name" },
  labels: [
    { label: "name", adjustLabels: false },
    { label: "name", clusters: [2], itemStyle: [{ index: 5, x: 10 }] },
  ],
  cluster: { preventGeneOverlap: true, overlapSpacing: 30 },
  legend: { show: false },
});
r
GC_chart(
  subset(human_hox_genes, cluster %in% c("HOXA", "HOXB")),
  group = "name",
  cluster = "cluster",
  height = "390px" 
  ) %>% 
  GC_labels(label = "name", adjustLabels = FALSE) %>%
  GC_labels(label = "name", 
            cluster = 2, 
            itemStyle = list(list(index = 5, x=10))
            ) %>%
  GC_cluster(prevent_gene_overlap = TRUE, overlap_spacing = 30) %>%
  GC_legend(FALSE)
python
(
    GC(
        human_hox_genes[human_hox_genes["cluster"].isin(["HOXA", "HOXB"])],
        group="name",
        cluster="cluster",
        height="390px",
    )
    .labels(label="name", adjust_labels=False)
    .labels(label="name", cluster=2, item_style=[{"index": 5, "x": 10}])
    .cluster(prevent_gene_overlap=True, overlap_spacing=30)
    .legend(False)
)

With preventGeneOverlap: "nested"prevent_gene_overlap = "nested"prevent_gene_overlap="nested" only the genes that lie inside another gene, such as an ORF in another reading frame, go on the tracks below. All other genes stay on the first track, also where they overlap. styleBy: "geneTrack"style_by = "geneTrack"style_by="geneTrack" styles the genes of each track, here to draw the nested ORFs of SARS-CoV-2 smaller.

js
// <div id="chart" style="height: 380px"></div>
const { data } = await fetch("https://nvelden.github.io/geneviewer-docs/charts/data/guide-prevent-gene-overlap-2.json")
  .then((response) => response.json());

const chart = geneviewer.newChart("#chart", {
  data,
  fields: { cluster: "cluster", group: "category" },
  cluster: { preventGeneOverlap: "nested", overlapSpacing: 20 },
  genes: {
    groupStyle: {
      "2": { markerHeight: 8, arrowheadHeight: 8 },
      "3": { markerHeight: 8, arrowheadHeight: 8 },
    },
    styleBy: "geneTrack",
  },
  labels: { label: "gene" },
  zoom: { range: [0.83, 1] },
});
r
nested <- list(markerHeight = 8, arrowheadHeight = 8)

GC_chart(
  subset(coronavirus_genomes, cluster == "SARS-CoV-2"),
  group = "category",
  cluster = "cluster",
  height = "380px"
  ) %>%
  GC_cluster(prevent_gene_overlap = "nested", overlap_spacing = 20) %>%
  GC_genes(style_by = "geneTrack", groupStyle = list("2" = nested, "3" = nested)) %>%
  GC_labels("gene") %>%
  GC_zoom(range = c(0.83, 1))
python
nested = {"markerHeight": 8, "arrowheadHeight": 8}

(
    GC(
        coronavirus_genomes[coronavirus_genomes["cluster"] == "SARS-CoV-2"],
        group="category",
        cluster="cluster",
        height="380px",
    )
    .cluster(prevent_gene_overlap="nested", overlap_spacing=20)
    .genes(style_by="geneTrack", group_style={"2": nested, "3": nested})
    .labels("gene")
    .zoom(range=[0.83, 1])
)

Grid ​

The grid keyGC_grid().grid() sets the grid of the chart or of specific clusters. Here the top and bottom margins are larger, and the left and right margins go from the default 50px to 25px.

js
// <div id="chart" style="height: 300px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  style: { backgroundColor: "red" },
  title: {
    title: "Adjusting Margins of a GC_chart",
    style: { backgroundColor: "yellow", align: "left" },
    align: "left",
    y: 15,
  },
  cluster: { style: { backgroundColor: "green" } },
  legend: { style: { backgroundColor: "yellow" }, show: true },
  grid: { margin: { top: 50, bottom: 50, left: 25, right: 25 } },
});
r
GC_chart(ophA_clusters, group = "class", cluster = "cluster",
         style = list(backgroundColor = "red"),
         height = "300px"
         ) %>%
  GC_title(
    "Adjusting Margins of a GC_chart", 
    align = "left", 
    y = 15, 
    style = list(backgroundColor = "yellow", 
                 align = "left")
    ) %>%
  GC_cluster(style = list(backgroundColor = "green")) %>%
  GC_legend(TRUE, style = list(backgroundColor = "yellow")) %>%
  GC_grid(margin = list(top = 50, bottom = 50, left = 25, right = 25))
python
(
    GC(
        ophA_clusters,
        group="class",
        cluster="cluster",
        style={"backgroundColor": "red"},
        height="300px",
    )
    .title(
        "Adjusting Margins of a GC_chart",
        align="left",
        y=15,
        style={"backgroundColor": "yellow", "align": "left"},
    )
    .cluster(style={"backgroundColor": "green"})
    .legend(True, style={"backgroundColor": "yellow"})
    .grid(margin={"top": 50, "bottom": 50, "left": 25, "right": 25})
)

Clusters can be side by side with direction: "row"direction = "row"direction="row" and a width for each cluster.

js
// <div id="chart" style="height: 250px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  grid: [
    { margin: { left: 15, right: 15 }, direction: "row" },
    { width: "50%", height: "50%", clusters: [1, 2] },
  ],
  clusterTitle: { title: ["<i>Omphalotus Olearius</i>", "<i>Dendrothele Bisporus</i>"] },
  legend: { position: "top" },
});
r
GC_chart(ophA_clusters, group = "class", cluster = "cluster", height = "250px") %>%
  GC_grid(direction = "row", margin = list(left = 15, right = 15)) %>%
  GC_clusterTitle(c("<i>Omphalotus Olearius</i>", "<i>Dendrothele Bisporus</i>")) %>%
  GC_legend(position = "top") %>%
  GC_grid(
    cluster = c(1,2), 
    width = "50%",
    height = "50%"
  )
python
(
    GC(ophA_clusters, group="class", cluster="cluster", height="250px")
    .grid(direction="row", margin={"left": 15, "right": 15})
    .cluster_title(["<i>Omphalotus Olearius</i>", "<i>Dendrothele Bisporus</i>"])
    .legend(position="top")
    .grid(cluster=[1, 2], width="50%", height="50%")
)

Genes ​

The genes keyGC_genes().genes() styles the genes and takes any CSS style. The colours come from fields.groupthe group of GC_chart()the group of GC(). To change them, use the color keyGC_color().color(), which changes the genes and the legend together.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { cluster: "cluster", group: "class" },
  genes: { show: true, stroke: "grey", strokeWidth: 2 },
  color: { colorScheme: "schemeAccent" },
  legend: {},
});
r
GC_chart(ophA_cluster, cluster = "cluster", group = "class", height = "150px") %>%
  GC_genes(
    show = TRUE,
    stroke = "grey",
    strokeWidth = 2
    # Any other CSS style
  ) %>%
   GC_color(colorScheme = "schemeAccent") %>%
   GC_legend()
python
(
    GC(ophA_cluster, cluster="cluster", group="class", height="150px")
    .genes(show=True, stroke="grey", stroke_width=2)
    .color(color_scheme="schemeAccent")
    .legend()
)

Genes are arrows by default. Set marker to arrow, boxarrow, box, cbox or rbox, and markerSizemarker_sizemarker_size to small, medium (the default) or large.

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { cluster: "cluster", group: "class" },
  genes: { marker: "rbox", markerSize: "small" },
  clusterLabel: { title: "rbox" },
  legend: { show: false },
});
r
GC_chart(ophA_cluster, cluster = "cluster", group = "class", height = "100px") %>%
  GC_genes(marker = "rbox", marker_size = "small") %>%
  GC_clusterLabel("rbox") %>% 
  GC_legend(FALSE)
python
(
    GC(ophA_cluster, cluster="cluster", group="class", height="100px")
    .genes(marker="rbox", marker_size="small")
    .cluster_label("rbox")
    .legend(False)
)

For finer control, markerHeight overrides markerSizemarker_sizemarker_size, and x and y move the markers. The arrow and boxarrow markers also have arrowheadWidth and arrowheadHeight.

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { cluster: "cluster", group: "class" },
  genes: {
    marker: "arrow",
    y: 55,
    markerHeight: 10,
    arrowheadHeight: 15,
    arrowheadWidth: 15,
  },
  clusterLabel: { title: "customized arrows" },
  legend: { show: false },
});
r
GC_chart(ophA_cluster, cluster = "cluster", group = "class", height = "100px") %>%
  GC_genes(
    y = 55,
    marker = "arrow", 
    markerHeight = 10,
    arrowheadHeight = 15,
    arrowheadWidth = 15
    ) %>%
  GC_clusterLabel("customized arrows") %>%
  GC_legend(FALSE)
python
(
    GC(ophA_cluster, cluster="cluster", group="class", height="100px")
    .genes(
        y=55, marker="arrow", marker_height=10, arrowhead_height=15, arrowhead_width=15
    )
    .cluster_label("customized arrows")
    .legend(False)
)

groupStyle styles all genes of a group at once, with the same options as itemStyle.

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { cluster: "cluster", group: "class" },
  genes: {
    groupStyle: {
      Methyltransferase: { stroke: "black", strokeWidth: 2 },
      Prolyloligopeptidase: { markerHeight: 8, arrowheadHeight: 8 },
    },
  },
  legend: { show: false },
});
r
GC_chart(ophA_cluster, cluster = "cluster", group = "class", height = "100px") %>%
  GC_genes(
    groupStyle = list(
      Methyltransferase = list(stroke = "black", strokeWidth = 2),
      Prolyloligopeptidase = list(markerHeight = 8, arrowheadHeight = 8)
    )
  ) %>%
  GC_legend(FALSE)
python
(
    GC(ophA_cluster, cluster="cluster", group="class", height="100px")
    .genes(
        group_style={
            "Methyltransferase": {"stroke": "black", "strokeWidth": 2},
            "Prolyloligopeptidase": {"markerHeight": 8, "arrowheadHeight": 8},
        }
    )
    .legend(False)
)

Gene alignment ​

The align keyGC_align().align() aligns one gene across clusters: each cluster's scale is set so the gene is at the same place in every cluster. Name the column with the identifiers in idColumnid_columnid_column, and the gene in id. The identifier must be the same across clusters and unique within each.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  align: { idColumn: "class", id: "NTF2-like", align: "left" },
  legend: { show: true },
});
r
GC_chart(ophA_clusters, cluster = "cluster", group = "class", height = "150px") %>%
   GC_align(
     id_column = "class", 
     id = "NTF2-like",
     align = "left" # center / right
     ) %>%
   GC_legend(TRUE)
python
(
    GC(ophA_clusters, cluster="cluster", group="class", height="150px")
    .align(id_column="class", id="NTF2-like", align="left")
    .legend(True)
)

Transcripts ​

The transcript keyGC_transcript().transcript() draws transcripts. It needs a column with an ID for each transcript and a type column that says whether the feature is a UTR or an exon. A strand column sets the direction. Introns are worked out from the exon positions.

js
// <div id="chart" style="height: 200px"></div>
const { data } = await fetch("https://nvelden.github.io/geneviewer-docs/charts/data/guide-transcripts.json")
  .then((response) => response.json());

const chart = geneviewer.newChart("#chart", {
  data,
  fields: { start: "start", end: "end" },
  transcript: { transcript: "transcript", strand: "strand" },
});
r
transcript_data <- data.frame(
  transcript = c("transcript1", "transcript1", "transcript1", "transcript1",
                 "transcript2", "transcript2", "transcript2"),
  type = c("5_utr", "exon", "exon", "3_utr",
           "5_utr", "exon", "3_utr"),
  start = c(1, 101, 201, 301,
            1, 101, 301),
  end = c(50, 150, 250, 350,
          50, 150, 350),
  strand = rep("forward", 7)
)

GC_chart(
  transcript_data, 
  start = "start",
  end = "end",
  height = "200px") %>%
GC_transcript(
  transcript = "transcript", 
  strand = "strand", 
)
python
transcript_data = pd.DataFrame(
    {
        "transcript": [
            "transcript1",
            "transcript1",
            "transcript1",
            "transcript1",
            "transcript2",
            "transcript2",
            "transcript2",
        ],
        "type": ["5_utr", "exon", "exon", "3_utr", "5_utr", "exon", "3_utr"],
        "start": [1, 101, 201, 301, 1, 101, 301],
        "end": [50, 150, 250, 350, 50, 150, 350],
        "strand": ["forward"] * 7,
    }
)

GC(transcript_data, start="start", end="end", height="200px").transcript(
    transcript="transcript", strand="strand"
)

Group by type and use customColors to colour each kind of feature. Junctions can be added with the arc annotation.

js
// <div id="chart" style="height: 200px"></div>
const { data } = await fetch("https://nvelden.github.io/geneviewer-docs/charts/data/guide-transcripts-2.json")
  .then((response) => response.json());

const chart = geneviewer.newChart("#chart", {
  data,
  fields: { start: "start", end: "end" },
  transcript: {
    group: "type",
    customColors: { exon: "green", intron: "blue", "5_utr": "black", "3_utr": "grey" },
  },
});
r
GC_chart(
  transcript_data, 
  start = "start",
  end = "end",
  height = "200px"
  ) %>%
  GC_transcript(
    group = "type",
    customColors = 
      list(
        exon = "green",
        intron = "blue",
        `5_utr` = "black",
        `3_utr` = "grey"
      )
    )
python
GC(transcript_data, start="start", end="end", height="200px").transcript(
    group="type",
    custom_colors={
        "exon": "green",
        "intron": "blue",
        "5_utr": "black",
        "3_utr": "grey",
    },
)

Introns, exons, UTRs and labels are styled with styleIntrons, styleExons, styleUTRs and labelOptions.

js
// <div id="chart" style="height: 200px"></div>
const { data } = await fetch("https://nvelden.github.io/geneviewer-docs/charts/data/guide-transcripts-3.json")
  .then((response) => response.json());

const chart = geneviewer.newChart("#chart", {
  data,
  transcript: {
    styleExons: { markerSize: "small", fill: "none", strokeWidth: 2, stroke: "red" },
    styleIntrons: { strokeWidth: 2, markerHeight: 60 },
    styleUTRs: { marker: "boxarrow", markerSize: "small", fill: "green" },
    labelOptions: {
      show: true,
      xOffset: 0,
      yOffset: 0,
      fontSize: "10px",
      fontWeight: "bold",
    },
  },
});
r
GC_chart(transcript_data, height = "200px") %>%
  GC_transcript(
    styleIntrons = 
      list(
      strokeWidth = 2,
      markerHeight = 60
      # Any other CSS style
      ),
    styleExons = 
      list(
        markerSize = "small",
        fill = "none",
        strokeWidth = 2,
        stroke = "red"
        # Any other CSS style
      ),
    styleUTRs = list(
      marker = "boxarrow",
      markerSize = "small",
      fill = "green"
      # Any other CSS style
    ),
    labelOptions = list(
      show = TRUE,
      xOffset = 0,
      yOffset = 0,
      fontSize = "10px",
      fontWeight = "bold"
      # Any other CSS style
    )
  )
python
GC(transcript_data, height="200px").transcript(
    style_introns={"strokeWidth": 2, "markerHeight": 60},
    style_exons={
        "markerSize": "small",
        "fill": "none",
        "strokeWidth": 2,
        "stroke": "red",
    },
    style_utrs={"marker": "boxarrow", "markerSize": "small", "fill": "green"},
    label_options={
        "show": True,
        "xOffset": 0,
        "yOffset": 0,
        "fontSize": "10px",
        "fontWeight": "bold",
    },
)

itemStyleExons, itemStyleIntrons and itemStyleUTRs, with selection, style individual features of a specific transcript.

js
// <div id="chart" style="height: 200px"></div>
const { data } = await fetch("https://nvelden.github.io/geneviewer-docs/charts/data/guide-transcripts-4.json")
  .then((response) => response.json());

const chart = geneviewer.newChart("#chart", {
  data,
  fields: { start: "start", end: "end" },
  transcript: [
    {
      transcript: "transcript",
      selection: [1],
      itemStyleExons: [{ index: 0, fill: "red" }],
    },
    {
      transcript: "transcript",
      selection: [2],
      itemStyleIntrons: [{ index: 1, stroke: "red", strokeWidth: 2 }],
    },
  ],
});
r
GC_chart(
  transcript_data, 
  start = "start",
  end = "end",
  height = "200px"
  ) %>%
  GC_transcript(
    transcript = "transcript",
    selection = 1,
    itemStyleExons = 
      list(
        list(index = 0, fill = "red")
      )
  ) %>%
  GC_transcript(
    transcript = "transcript",
    selection = 2,
    itemStyleIntrons = 
    list(
      list(index = 1, stroke = "red", strokeWidth = 2)
    )
  )
python
(
    GC(transcript_data, start="start", end="end", height="200px")
    .transcript(
        transcript="transcript",
        selection=1,
        item_style_exons=[{"index": 0, "fill": "red"}],
    )
    .transcript(
        transcript="transcript",
        selection=2,
        item_style_introns=[{"index": 1, "stroke": "red", "strokeWidth": 2}],
    )
)

The links key connects genes or regions of different clusters. Its data is a table with the positions of both ends and their clusters (start1, end1, cluster1, start2, end2, cluster2). The JavaScript library draws the links you give it and does not work out which genes match: in R, GC_links() makes this table from a column of the genes.GC_links() connects genes of different clusters. It makes the links from a column of the genes: group gives links between all pairs of values in that column..links() connects genes of different clusters. It makes the links from a column of the genes: group gives links between all pairs of values in that column.

js
// <div id="chart" style="height: 250px"></div>
const { links } = await fetch("https://nvelden.github.io/geneviewer-docs/charts/data/guide-links.json")
  .then((response) => response.json());

const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  legend: { show: false },
  links: { data: links, group: "class" },
});
r
# Generate chart object
chart <- GC_chart(
  ophA_clusters, 
  cluster = "cluster", 
  group = "class", 
  height = "250px") %>%
  GC_legend(FALSE)

# Add links to chart
chart %>% GC_links("class")
python
# Generate chart object
chart = GC(ophA_clusters, cluster="cluster", group="class", height="250px")
chart = chart.legend(False)

# Add links to chart
chart.links("class")

A table can link only the genes you want:value1 and value2 link only the genes you want:value1 and value2 link only the genes you want:

js
// <div id="chart" style="height: 250px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  legend: { show: false },
  links: {
    data: [
      {
        name1: "ophB1",
        start1: 2522,
        end1: 4276,
        class1: "Monooxygenase",
        cluster1: "ophA",
        rowID1: 1,
        strand1: "forward",
        name2: "dbophB1",
        start2: 40768,
        end2: 43005,
        class2: "Monooxygenase",
        cluster2: "dbophA",
        rowID2: 8,
        strand2: "forward",
      },
      {
        name1: "ophC",
        start1: 5286,
        end1: 4718,
        class1: "NTF2-like",
        cluster1: "ophA",
        rowID1: 2,
        strand1: "reverse",
        name2: "dbophC",
        start2: 37262,
        end2: 37791,
        class2: "NTF2-like",
        cluster2: "dbophA",
        rowID2: 10,
        strand2: "forward",
      },
    ],
    group: "name",
    value1: ["ophB1", "ophC"],
    value2: ["dbophB1", "dbophC"],
    clusters: [1, 2],
  },
  labels: { label: "name" },
});
r
# Add links to chart
chart %>% 
  GC_links(
    "name", 
    value1 = c("ophB1", "ophC"), 
    value2 = c("dbophB1", "dbophC"),
    cluster = c(1,2)
    ) %>% 
  GC_labels("name")
python
# Add links to chart
(
    chart.links(
        "name", value1=["ophB1", "ophC"], value2=["dbophB1", "dbophC"], cluster=[1, 2]
    ).labels("name")
)

An identity or similarity column sets the colour intensity of the links when you name it in measure. linkStyle, labelStyle and linkWidth style the links and their labels, and colorBarOptions the colour bar.

js
// <div id="chart" style="height: 250px"></div>
const { data } = await fetch("https://nvelden.github.io/geneviewer-docs/charts/data/guide-links-3.json")
  .then((response) => response.json());

const chart = geneviewer.newChart("#chart", {
  data,
  fields: { cluster: "cluster", group: "class" },
  links: {
    data: [
      {
        name1: "ophA",
        start1: 9536,
        end1: 10904,
        class1: "Methyltransferase",
        cluster1: "ophA",
        identity1: null,
        rowID1: 3,
        strand1: "forward",
        name2: "dbophA",
        start2: 28937,
        end2: 30516,
        class2: "Methyltransferase",
        cluster2: "dbophA",
        identity2: 21,
        rowID2: 13,
        strand2: "forward",
      },
      {
        name1: "ophP",
        start1: 19346,
        end1: 16016,
        class1: "Prolyloligopeptidase",
        cluster1: "ophA",
        identity1: null,
        rowID1: 6,
        strand1: "reverse",
        name2: "dbophP",
        start2: 21283,
        end2: 24607,
        class2: "Prolyloligopeptidase",
        cluster2: "dbophA",
        identity2: 7,
        rowID2: 16,
        strand2: "forward",
      },
    ],
    group: "class",
    value1: ["Methyltransferase", "Prolyloligopeptidase"],
    value2: ["Methyltransferase", "Prolyloligopeptidase"],
    curve: false,
    measure: "identity",
    label: true,
    invertedColor: "green",
    colorBar: true,
    colorBarOptions: {
      x: 0,
      y: 24,
      width: 10,
      height: 60,
      labelOptions: { fontSize: 8, xOffset: 2, yOffset: 0 },
      titleOptions: { fontSize: 10, xOffset: 2, yOffset: 0 },
      barOptions: { stroke: "#000", strokeWidth: 0.5, opacity: 1 },
    },
    linkWidth: 0.5,
    linkStyle: { stroke: "black", strokeWidth: 0.5 },
    labelStyle: { fill: "red" },
  },
  legend: { show: true },
});
r
ophA_clusters$identity <- sample(1:100, size = nrow(ophA_clusters), replace = TRUE) 
ophA_clusters$identity[ophA_clusters$cluster == "ophA"] <- NA

chart <- GC_chart(
  ophA_clusters, 
  cluster = "cluster", 
  group = "class", 
  height = "250px") %>%
  GC_links(
    "class", 
    value1 = c("Methyltransferase", "Prolyloligopeptidase"), 
    value2 = c("Methyltransferase", "Prolyloligopeptidase"),
    inverted_color = "green", 
    measure = "identity", # similarity / none
    label = TRUE,
    curve = FALSE,
    color_bar = TRUE,
    colorBarOptions = list(
       x = 0,
       y = 24,
       width = 10,
       height = 60,
       labelOptions = list(
         fontSize = 8,
         xOffset = 2,
         yOffset = 0
         # Any other CSS style
       ),
       titleOptions = list(
         fontSize = 10,
         xOffset = 2,
         yOffset = 0
         # Any other CSS style
       ),
       barOptions = list(
         stroke = "#000",
         strokeWidth = 0.5,
         opacity = 1
         # Any other CSS style
       )
     ),
    linkWidth = 0.5,
    linkStyle = list(
      stroke = "black",
      strokeWidth = 0.5
      # Any other CSS style
    ),
    labelStyle = list(
      fill = "red"
      # Any other CSS style
    )
    ) %>% 
  GC_legend(TRUE)

chart
python
import random

ophA_clusters["identity"] = [random.randint(1, 100) for _ in range(len(ophA_clusters))]
ophA_clusters.loc[ophA_clusters["cluster"] == "ophA", "identity"] = None

chart = (
    GC(ophA_clusters, cluster="cluster", group="class", height="250px")
    .links(
        "class",
        value1=["Methyltransferase", "Prolyloligopeptidase"],
        value2=["Methyltransferase", "Prolyloligopeptidase"],
        inverted_color="green",
        measure="identity",
        label=True,
        curve=False,
        color_bar=True,
        color_bar_options={
            "x": 0,
            "y": 24,
            "width": 10,
            "height": 60,
            "labelOptions": {"fontSize": 8, "xOffset": 2, "yOffset": 0},
            "titleOptions": {"fontSize": 10, "xOffset": 2, "yOffset": 0},
            "barOptions": {"stroke": "#000", "strokeWidth": 0.5, "opacity": 1},
        },
        link_width=0.5,
        link_style={"stroke": "black", "strokeWidth": 0.5},
        label_style={"fill": "red"},
    )
    .legend(True)
)

chart

Links can also join any regions, rather than genes, from a table given as data, from a table given as data. They run from nearly white at a measure of vmin to the full colour at vmax (0 and 100 by default), which are also the ends of the colour bar. Setting vmin to the lowest measure spreads the colours over the data. Measures below vmin or above vmax get the colour of that end.

js
// <div id="chart" style="height: 250px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  links: {
    data: [
      {
        start1: 5000,
        end1: 9000,
        start2: 20000,
        end2: 25000,
        cluster1: "ophA",
        cluster2: "dbophA",
        identity: 20,
        similarity: 10,
      },
      {
        start1: 16000,
        end1: 19000,
        start2: 42000,
        end2: 32000,
        cluster1: "ophA",
        cluster2: "dbophA",
        identity: 100,
        similarity: 90,
      },
    ],
    measure: "identity",
    vmin: 20,
    vmax: 100,
  },
});
r
links_data <- data.frame(
  start1 = c(5000, 16000),
  end1 =  c(9000, 19000),
  start2 = c(20000, 42000),
  end2 = c(25000, 32000),
  cluster1 = c("ophA","ophA"),
  cluster2 = c("dbophA", "dbophA"),
  identity = c(20, 100),
  similarity = c(10, 90)
)
# Add links to chart
GC_chart(
  ophA_clusters, 
  cluster = "cluster", 
  group = "class", 
  height = "250px") %>% 
  GC_links(
    data = links_data,
    measure = "identity",
    vmin = 20,
    vmax = 100
    )
python
links_data = pd.DataFrame(
    {
        "start1": [5000, 16000],
        "end1": [9000, 19000],
        "start2": [20000, 42000],
        "end2": [25000, 32000],
        "cluster1": ["ophA", "ophA"],
        "cluster2": ["dbophA", "dbophA"],
        "identity": [20, 100],
        "similarity": [10, 90],
    }
)

# Add links to chart
GC(ophA_clusters, cluster="cluster", group="class", height="250px").links(
    data=links_data, measure="identity", vmin=20, vmax=100
)

With labelPosition: "link"label_position = "link"label_position="link" the measure is written in the middle of each link where it fits. The position of colorBarOptions moves the colour bar to another corner or, with "legend", into the legend.

js
// <div id="chart" style="height: 300px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  links: {
    data: [
      {
        start1: 5000,
        end1: 9000,
        start2: 20000,
        end2: 25000,
        cluster1: "ophA",
        cluster2: "dbophA",
        identity: 20,
        similarity: 10,
      },
      {
        start1: 16000,
        end1: 19000,
        start2: 42000,
        end2: 32000,
        cluster1: "ophA",
        cluster2: "dbophA",
        identity: 100,
        similarity: 90,
      },
    ],
    measure: "identity",
    labelPosition: "link",
    colorBarOptions: { position: "legend" },
  },
  legend: { position: "top" },
});
r
GC_chart(
  ophA_clusters,
  cluster = "cluster",
  group = "class",
  height = "300px") %>%
  GC_links(
    data = links_data,
    measure = "identity",
    label_position = "link",
    colorBarOptions = list(position = "legend")
    ) %>%
  GC_legend(position = "top")
python
(
    GC(ophA_clusters, cluster="cluster", group="class", height="300px")
    .links(
        data=links_data,
        measure="identity",
        label_position="link",
        color_bar_options={"position": "legend"},
    )
    .legend(position="top")
)

Sequence ​

The sequence keyGC_sequence().sequence() styles the line the genes sit on, with lineStylesequenceStylesequence_style, and its scale break markers, with markerStyle.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  sequence: {
    show: true,
    y: 50,
    lineStyle: { stroke: "grey", strokeWidth: 1 },
    markerStyle: { stroke: "grey", strokeWidth: 1, gap: 3, tiltAmount: 5 },
  },
  legend: { show: false },
});
r
GC_chart(
  ophA_clusters, group = "class",
  cluster = "cluster",
  height = "150px") %>%
  GC_sequence(
    show = TRUE,
    cluster = NULL,
    y = 50,
    sequenceStyle = list(
      stroke = "grey",
      strokeWidth = 1
      # Any other CSS style
    ),
    markerStyle = list(
      stroke = "grey",
      strokeWidth = 1,
      gap = 3,
      tiltAmount = 5
      # Any other CSS style
    )
  ) %>%
  GC_legend(FALSE)
python
(
    GC(ophA_clusters, group="class", cluster="cluster", height="150px")
    .sequence(
        show=True,
        cluster=None,
        y=50,
        sequence_style={"stroke": "grey", "strokeWidth": 1},
        marker_style={"stroke": "grey", "strokeWidth": 1, "gap": 3, "tiltAmount": 5},
    )
    .legend(False)
)

Labels ​

Each cluster can have a title, gene labels, a cluster label and a footer.

js
// <div id="chart" style="height: 450px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { start: "start", end: "end", cluster: "cluster", group: "class" },
  clusterTitle: {
    title: ["<i>Omphalotus Olearius</i>", "<i>Dendrothele Bisporus</i>"],
    titleFont: { fontWeight: "normal" },
  },
  labels: { label: "name" },
  clusterLabel: { title: ["ophA", "dbophA"] },
  clusterFooter: {
    title: ["Nr. of Genes: 7", "Nr. of Genes: 10"],
    subtitle: ["Locus: 2522 - 21,484", "Locus 19,236 - 43,005"],
  },
  legend: { position: "top" },
});
r
GC_chart(ophA_clusters, 
         start = "start", 
         end = "end", 
         group = "class", 
         cluster = "cluster", 
         height = "450px"
         ) %>%
  GC_clusterTitle(
    title = c("<i>Omphalotus Olearius</i>", "<i>Dendrothele Bisporus</i>"), 
    titleFont = list(fontWeight = "normal")
    ) %>%
  GC_labels("name") %>%
  GC_clusterLabel(title = unique(ophA_clusters$cluster)) %>%
  GC_clusterFooter(
    title = c("Nr. of Genes: 7", "Nr. of Genes: 10"), 
    subtitle = c("Locus: 2522 - 21,484", "Locus 19,236 - 43,005")
    ) %>%
  GC_legend(position="top")
python
(
    GC(
        ophA_clusters,
        start="start",
        end="end",
        group="class",
        cluster="cluster",
        height="450px",
    )
    .cluster_title(
        title=["<i>Omphalotus Olearius</i>", "<i>Dendrothele Bisporus</i>"],
        title_font={"fontWeight": "normal"},
    )
    .labels("name")
    .cluster_label(title=list(ophA_clusters["cluster"].unique()))
    .cluster_footer(
        title=["Nr. of Genes: 7", "Nr. of Genes: 10"],
        subtitle=["Locus: 2522 - 21,484", "Locus 19,236 - 43,005"],
    )
    .legend(position="top")
)

Use x, y and align to place labels. Here labels has two entriesGC_labels() is used twice.labels() is used twice: the first sets labels for all clusters, and the second moves the 4th and 8th label of cluster 2 so they do not overlap. The index starts at 0.

js
// <div id="chart" style="height: 360px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  clusterTitle: {
    title: ["<i>Omphalotus Olearius</i>", "<i>Dendrothele Bisporus</i>"],
    position: "left",
    x: 20,
  },
  labels: [
    { label: "name", y: 20 },
    {
      label: "name",
      clusters: [2],
      itemStyle: [{ index: 3, y: 52 }, { index: 7, y: 52 }],
      y: 20,
    },
  ],
  clusterFooter: {
    title: ["Nr. of Genes: 7", "Nr. of Genes: 10"],
    subtitle: ["Locus: 2522 - 21,484", "Locus 19,236 - 43,005"],
    align: "center",
  },
});
r
GC_chart(ophA_clusters, group = "class", cluster = "cluster", height = "360px") %>%
  GC_clusterTitle(
    c("<i>Omphalotus Olearius</i>", "<i>Dendrothele Bisporus</i>"), 
    position = "left", 
    x = 20) %>%
  GC_labels("name", y = 20) %>%
  GC_labels("name", 
            cluster = 2, 
            y = 20, 
            itemStyle = 
              list(
                list(index = 3, y = 52),
                list(index = 7, y = 52)
                )
            ) %>%
  GC_clusterFooter(
    title = c("Nr. of Genes: 7", "Nr. of Genes: 10"), 
    subtitle = c("Locus: 2522 - 21,484", "Locus 19,236 - 43,005"), 
    align = "center"
    )
python
(
    GC(ophA_clusters, group="class", cluster="cluster", height="360px")
    .cluster_title(
        ["<i>Omphalotus Olearius</i>", "<i>Dendrothele Bisporus</i>"],
        position="left",
        x=20,
    )
    .labels("name", y=20)
    .labels(
        "name",
        cluster=2,
        y=20,
        item_style=[{"index": 3, "y": 52}, {"index": 7, "y": 52}],
    )
    .cluster_footer(
        title=["Nr. of Genes: 7", "Nr. of Genes: 10"],
        subtitle=["Locus: 2522 - 21,484", "Locus 19,236 - 43,005"],
        align="center",
    )
)

itemStyle also sets the style of those labels:

js
// <div id="chart" style="height: 360px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  labels: [
    { label: "name", y: 20 },
    {
      label: "name",
      clusters: [2],
      itemStyle: [{ index: 3, y: 52, fill: "red" }, { index: 7, y: 52, fill: "red" }],
      y: 20,
    },
  ],
});
r
GC_chart(ophA_clusters, group = "class", cluster = "cluster", height = "360px") %>%
  GC_labels("name", y = 20) %>%
  GC_labels("name", 
            cluster = 2, 
            y = 20,
            itemStyle = list(
              list(index = 3, y = 52, fill = "red"),
              list(index = 7, y = 52, fill = "red")
              )
            )
python
(
    GC(ophA_clusters, group="class", cluster="cluster", height="360px")
    .labels("name", y=20)
    .labels(
        "name",
        cluster=2,
        y=20,
        item_style=[
            {"index": 3, "y": 52, "fill": "red"},
            {"index": 7, "y": 52, "fill": "red"},
        ],
    )
)

Labels that overlap another label are turned by default. adjustLabels: "hide"adjustLabels = "hide"adjust_labels="hide" hides them instead, until there is room for them, such as when zoomed in.

Spread labels ​

adjustLabels: "spread"adjustLabels = "spread"adjust_labels="spread" puts the labels on one line below the lowest gene, as in gene order figures. Labels that would overlap are moved apart, and a line goes from each label to its gene.

js
// <div id="chart" style="height: 400px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  labels: { label: "name", adjustLabels: "spread" },
});
r
GC_chart(ophA_clusters, group = "class", cluster = "cluster", height = "400px") %>%
  GC_labels("name", adjustLabels = "spread")
python
GC(ophA_clusters, group="class", cluster="cluster", height="400px").labels(
    "name", adjust_labels="spread"
)

spreadPosition: "top"spreadPosition = "top"spread_position="top" puts the labels above the highest gene instead. leaderLine sets the distance from the genes to the labels (length, in pixels, default 20) and the style of the lines, and leaderLine: falseleaderLine = FALSEleader_line=False spreads the labels without lines.

js
// <div id="chart" style="height: 400px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  labels: {
    label: "name",
    adjustLabels: "spread",
    spreadPosition: "top",
    leaderLine: { length: 30, stroke: "grey", strokeDasharray: "2,2" },
  },
});
r
GC_chart(ophA_clusters, group = "class", cluster = "cluster", height = "400px") %>%
  GC_labels("name", adjustLabels = "spread", spreadPosition = "top",
            leaderLine = list(length = 30, stroke = "grey", strokeDasharray = "2,2"))
python
GC(ophA_clusters, group="class", cluster="cluster", height="400px").labels(
    "name",
    adjust_labels="spread",
    spread_position="top",
    leader_line={"length": 30, "stroke": "grey", "strokeDasharray": "2,2"},
)

Annotations ​

The annotation keyGC_annotation().annotation() adds annotations to clusters: text, textMarker, line, arrow, symbol, rectangle, arc, promoter and terminator. Several annotations of one type can be placed with arrayslistsdicts of values. With trackMouse: {}GC_trackMouse().track_mouse() the chart shows the position under the mouse, which makes it easier to find x and y.

js
// <div id="chart" style="height: 300px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  annotation: [
    { type: "text", clusters: [1], text: "Gene 1", x: 2970, y: 60 },
    {
      type: "text",
      clusters: [2],
      text: ["Gene 1", "Gene 2", "Gene 3"],
      x: [19400, 22200, 25600],
      y: 60,
    },
  ],
  legend: { show: false },
  trackMouse: {},
});
r
GC_chart(ophA_clusters, group = "class", cluster = "cluster", height = "300px") %>%
  GC_annotation(
    cluster = 1,
    type = "text",
    text = "Gene 1",
    x = 2970,
    y = 60
  ) %>% 
  GC_annotation(
    cluster = 2,
    type = "text",
    text = c("Gene 1", "Gene 2", "Gene 3"),
    x = c(19400, 22200, 25600),
    y = 60
  ) %>%
  GC_legend(FALSE) %>%
  GC_trackMouse()
python
(
    GC(ophA_clusters, group="class", cluster="cluster", height="300px")
    .annotation(cluster=1, type="text", text="Gene 1", x=2970, y=60)
    .annotation(
        cluster=2,
        type="text",
        text=["Gene 1", "Gene 2", "Gene 3"],
        x=[19400, 22200, 25600],
        y=60,
    )
    .legend(False)
    .track_mouse()
)

Text ​

All the options of a text annotation. text, x and y can also be arrayslistsdicts.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { cluster: "cluster", group: "class" },
  annotation: [
    {
      type: "text",
      clusters: [1],
      text: "Gene 1",
      x: 2970,
      y: 58,
      style: {
        fontSize: "10px",
        fontStyle: "normal",
        fontWeight: "normal",
        textDecoration: "none",
        fontFamily: "sans-serif",
        cursor: "default",
      },
    },
  ],
  legend: { show: false },
  trackMouse: {},
});
r
GC_chart(ophA_cluster, group = "class", cluster = "cluster", height = "150px") %>%
  GC_annotation(
    cluster = 1,
    type = "text", 
    text = "Gene 1",
    x = 2970,
    y = 58,
    style = list(
      fontSize = "10px",
      fontStyle = "normal",
      fontWeight = "normal",
      textDecoration = "none",
      fontFamily = "sans-serif",
      cursor = "default"
      # Any other CSS style
    ) 
  ) %>%
  GC_legend(FALSE) %>%
  GC_trackMouse()
python
(
    GC(ophA_cluster, group="class", cluster="cluster", height="150px")
    .annotation(
        cluster=1,
        type="text",
        text="Gene 1",
        x=2970,
        y=58,
        style={
            "fontSize": "10px",
            "fontStyle": "normal",
            "fontWeight": "normal",
            "textDecoration": "none",
            "fontFamily": "sans-serif",
            "cursor": "default",
        },
    )
    .legend(False)
    .track_mouse()
)

Text marker ​

All the options of a text marker. All but the styles can also be arrayslistsdicts. x1 and x2 are unset by default, and position is used for the horizontal placement.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { cluster: "cluster", group: "class" },
  annotation: [
    {
      type: "textMarker",
      clusters: [1],
      text: "Gene 1",
      y1: 66,
      y2: 50,
      position: 9300,
      labelX: 0,
      labelY: 0,
      showArrow: false,
      arrowSize: 8,
      textStyle: {
        fontSize: "10px",
        fontFamily: "sans-serif",
        fill: "black",
        textAnchor: "middle",
      },
      arrowStyle: { fill: "black" },
      lineStyle: { stroke: "black", strokeWidth: 1 },
    },
  ],
  legend: { show: false },
});
r
GC_chart(ophA_cluster, group = "class", cluster = "cluster", height = "150px") %>%
  GC_annotation(
    cluster = 1,
    type = "textMarker", 
    text = "Gene 1",
    x1 = NULL,
    y1 = 66,
    x2 = NULL,
    y2 = 50,
    position = 9300,
    labelX = 0,
    labelY = 0,
    showArrow = FALSE,
    arrowSize = 8,
    textStyle = list(
      fontSize = "10px",
      fontFamily = "sans-serif",
      fill = "black",
      textAnchor = "middle"
    ),
    arrowStyle = list(
      fill = "black"
    ),
    lineStyle = list(
      stroke = "black",
      strokeWidth = 1
    )
  ) %>%
  GC_legend(FALSE)
python
(
    GC(ophA_cluster, group="class", cluster="cluster", height="150px")
    .annotation(
        cluster=1,
        type="textMarker",
        text="Gene 1",
        x1=None,
        y1=66,
        x2=None,
        y2=50,
        position=9300,
        label_x=0,
        label_y=0,
        show_arrow=False,
        arrow_size=8,
        text_style={
            "fontSize": "10px",
            "fontFamily": "sans-serif",
            "fill": "black",
            "textAnchor": "middle",
        },
        arrow_style={"fill": "black"},
        line_style={"stroke": "black", "strokeWidth": 1},
    )
    .legend(False)
)

Promoter and terminator ​

All the options of a promoter, or a terminator with type: "terminator"type = "terminator"type="terminator". All but the styles can also be arrayslistsdicts.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { cluster: "cluster", group: "class" },
  annotation: [
    {
      type: "promoter",
      clusters: [1],
      x: 9300,
      y: 50,
      direction: "forward",
      style: { fill: "none", stroke: "black", strokeWidth: 1 },
      rotation: 0,
      scale: 1,
    },
  ],
  legend: { show: false },
  trackMouse: {},
});
r
GC_chart(ophA_cluster, group = "class", cluster = "cluster", height = "150px") %>%
  GC_annotation(
    cluster = 1,
    type = "promoter", # terminator
    x = 9300,
    y = 50, 
    direction = "forward", # reverse
    style = list(
      fill = "none",
      stroke = "black",
      strokeWidth = 1
      # Any other CSS style
    ),
    rotation = 0,
    scale = 1
  ) %>% 
  GC_legend(FALSE) %>%
  GC_trackMouse()
python
(
    GC(ophA_cluster, group="class", cluster="cluster", height="150px")
    .annotation(
        cluster=1,
        type="promoter",
        x=9300,
        y=50,
        direction="forward",
        style={"fill": "none", "stroke": "black", "strokeWidth": 1},
        rotation=0,
        scale=1,
    )
    .legend(False)
    .track_mouse()
)

Symbol ​

All the options of a symbol: circle, cross, diamond, square, star, triangle or wye. All but the styles can also be arrayslistsdicts.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { cluster: "cluster", group: "class" },
  annotation: [
    {
      type: "symbol",
      clusters: [1],
      symbol: "circle",
      x: 9300,
      y: 50,
      size: 64,
      rotation: 0,
      style: { fill: "black", stroke: "black", strokeWidth: 2 },
    },
  ],
  legend: { show: false },
  trackMouse: {},
});
r
GC_chart(ophA_cluster, group = "class", cluster = "cluster", height = "150px") %>%
  GC_annotation(
    cluster = 1,
    type = "symbol", # circle/cross/diamond/square/star/triangle/wye
    symbol = "circle", 
    x = 9300,
    y = 50, 
    size = 64,
    rotation = 0,
    style = list(
      fill = "black",
      stroke = "black",
      strokeWidth = 2
      # Any other CSS style
      )
    ) %>% 
  GC_legend(FALSE) %>%
  GC_trackMouse()
python
(
    GC(ophA_cluster, group="class", cluster="cluster", height="150px")
    .annotation(
        cluster=1,
        type="symbol",
        symbol="circle",
        x=9300,
        y=50,
        size=64,
        rotation=0,
        style={"fill": "black", "stroke": "black", "strokeWidth": 2},
    )
    .legend(False)
    .track_mouse()
)

Arrow ​

All the options of an arrow. All but the styles can also be arrayslistsdicts.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { cluster: "cluster", group: "class" },
  annotation: [
    {
      type: "arrow",
      clusters: [1],
      x1: 9300,
      y1: 70,
      x2: 9300,
      y2: 50,
      arrowSize: 8,
      arrowStyle: { fill: "black" },
      lineStyle: { stroke: "black", strokeWidth: 1 },
    },
  ],
  legend: { show: false },
  trackMouse: {},
});
r
GC_chart(ophA_cluster, group = "class", cluster = "cluster", height = "150px") %>%
  GC_annotation(
    cluster = 1,
    type = "arrow",
    x1 = 9300,
    y1 = 70,
    x2 = 9300,
    y2 = 50,
    arrowSize = 8,
    arrowStyle = list(
      fill = "black"
      # Any other CSS style
    ),
    lineStyle = list(
      stroke = "black",
      strokeWidth = 1
      # Any other CSS style
    )
   ) %>% 
  GC_legend(FALSE) %>%
  GC_trackMouse()
python
(
    GC(ophA_cluster, group="class", cluster="cluster", height="150px")
    .annotation(
        cluster=1,
        type="arrow",
        x1=9300,
        y1=70,
        x2=9300,
        y2=50,
        arrow_size=8,
        arrow_style={"fill": "black"},
        line_style={"stroke": "black", "strokeWidth": 1},
    )
    .legend(False)
    .track_mouse()
)

Line ​

All the options of a line. All but the styles can also be arrayslistsdicts.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { cluster: "cluster", group: "class" },
  annotation: [
    {
      type: "line",
      clusters: [1],
      x1: 9300,
      y1: 70,
      x2: 9300,
      y2: 50,
      style: { stroke: "black", strokeWidth: 1 },
    },
  ],
  legend: { show: false },
  trackMouse: {},
});
r
GC_chart(ophA_cluster, group = "class", cluster = "cluster", height = "150px") %>%
  GC_annotation(
    cluster = 1,
    type = "line",
    x1 = 9300,
    y1 = 70,
    x2 = 9300,
    y2 = 50,
    style = list(
      stroke = "black",
      strokeWidth = 1
      # Any other CSS styles
    )
  ) %>% 
  GC_legend(FALSE) %>%
  GC_trackMouse()
python
(
    GC(ophA_cluster, group="class", cluster="cluster", height="150px")
    .annotation(
        cluster=1,
        type="line",
        x1=9300,
        y1=70,
        x2=9300,
        y2=50,
        style={"stroke": "black", "strokeWidth": 1},
    )
    .legend(False)
    .track_mouse()
)

Arc ​

All the options of arcs, here for the junctions of a transcript.

js
// <div id="chart" style="height: 200px"></div>
const chart = geneviewer.newChart("#chart", {
  data: [
    {
      transcript: "transcript1",
      type: "5_utr",
      start: 1,
      end: 50,
      strand: "forward",
    },
    {
      transcript: "transcript1",
      type: "intron",
      start: 51,
      end: 100,
      strand: "forward",
    },
    {
      transcript: "transcript1",
      type: "exon",
      start: 101,
      end: 150,
      strand: "forward",
    },
    {
      transcript: "transcript1",
      type: "intron",
      start: 151,
      end: 200,
      strand: "forward",
    },
    {
      transcript: "transcript1",
      type: "exon",
      start: 201,
      end: 250,
      strand: "forward",
    },
    {
      transcript: "transcript1",
      type: "intron",
      start: 251,
      end: 300,
      strand: "forward",
    },
    {
      transcript: "transcript1",
      type: "3_utr",
      start: 301,
      end: 350,
      strand: "forward",
    },
  ],
  fields: { start: "start", end: "end" },
  transcript: { transcript: "transcript", strand: "strand" },
  annotation: [
    {
      type: "arc",
      x1: [150, 50],
      y1: 50,
      x2: [301, 201],
      y2: 50,
      midY: [80, 20],
      stroke: "black",
      strokeWidth: [0.8, 0.1],
      labelX: 0,
      labelY: 0,
      text: [0.8, 0.1],
      textStyle: {
        fontSize: "10px",
        fontFamily: "sans-serif",
        fill: "black",
        textAnchor: "middle",
      },
    },
  ],
  legend: { show: false },
  trackMouse: {},
});
r
transcript_data <- data.frame(
  transcript = c("transcript1", "transcript1", "transcript1", "transcript1"),
  type = c("5_utr", "exon", "exon", "3_utr"),
  start = c(1, 101, 201, 301),
  end = c(50, 150, 250, 350),
  strand = rep("forward", 4)
)

GC_chart(
  transcript_data, 
  start = "start",
  end = "end",
  height = "200px") %>%
GC_transcript(
  transcript = "transcript", 
  strand = "strand", 
) %>%
  GC_annotation(
    cluster = NULL,
    type = "arc",
    x1 = c(150, 50),                   
    y1 = c(50),                  
    x2 = c(301, 201),                 
    y2 = c(50),                  
    midY = c(80, 20),                
    stroke = c("black"),         
    strokeWidth = c(0.8, 0.1),         
    labelX = c(0),               
    labelY = c(0),               
    text = c(0.8, 0.1),               
    lineStyle = list(
      # Any other CSS styles
    ),
    textStyle = list(
      fontSize = "10px",         
      fontFamily = "sans-serif", 
      fill = "black",           
      textAnchor = "middle"      
      # Any other CSS styles
    )
  ) %>% 
  GC_legend(FALSE) %>%
  GC_trackMouse()
python
transcript_data = pd.DataFrame(
    {
        "transcript": ["transcript1", "transcript1", "transcript1", "transcript1"],
        "type": ["5_utr", "exon", "exon", "3_utr"],
        "start": [1, 101, 201, 301],
        "end": [50, 150, 250, 350],
        "strand": ["forward"] * 4,
    }
)

(
    GC(transcript_data, start="start", end="end", height="200px")
    .transcript(transcript="transcript", strand="strand")
    .annotation(
        cluster=None,
        type="arc",
        x1=[150, 50],
        y1=[50],
        x2=[301, 201],
        y2=[50],
        mid_y=[80, 20],
        stroke=["black"],
        stroke_width=[0.8, 0.1],
        label_x=[0],
        label_y=[0],
        text=[0.8, 0.1],
        line_style={},
        text_style={
            "fontSize": "10px",
            "fontFamily": "sans-serif",
            "fill": "black",
            "textAnchor": "middle",
        },
    )
    .legend(False)
    .track_mouse()
)

Rectangle ​

All the options of a rectangle. rotation can also be an arraya lista dict.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { cluster: "cluster", group: "class" },
  annotation: [
    {
      type: "rectangle",
      clusters: [1],
      rotation: 0,
      position: [[[9200, 60], [11100, 40]], [[11700, 60], [12900, 40]]],
      style: { stroke: "black", strokeWidth: 1 },
    },
  ],
  legend: { show: false },
  trackMouse: {},
});
r
GC_chart(ophA_cluster, group = "class", cluster = "cluster", height = "150px") %>%
  GC_annotation(
    cluster = 1,
    type = "rectangle",
    rotation = 0,
    position = 
      list(
        list(c(9200, 60), c(11100, 40)),
        list(c(11700, 60), c(12900, 40))
        ),
    style = list(
      stroke = "black",
      strokeWidth = 1
      # Any other CSS styles
    )
  ) %>% 
  GC_legend(FALSE) %>%
  GC_trackMouse()
python
(
    GC(ophA_cluster, group="class", cluster="cluster", height="150px")
    .annotation(
        cluster=1,
        type="rectangle",
        rotation=0,
        position=[[[9200, 60], [11100, 40]], [[11700, 60], [12900, 40]]],
        style={"stroke": "black", "strokeWidth": 1},
    )
    .legend(False)
    .track_mouse()
)

Colors ​

The color keyGC_color().color() sets the colours of the legend and genes, with colorScheme or customColors.

colorScheme ​

A color scheme by name, such as "schemeCategory10" or "schemeAccent" from D3.

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  color: { colorScheme: "schemeAccent" },
});
r
GC_chart(ophA_cluster, group = "class", height = "100px") %>%
  GC_color(colorScheme = "schemeAccent")
python
(GC(ophA_cluster, group="class", height="100px").color(color_scheme="schemeAccent"))

schemeCategory10: ten categorical colours.

schemeAccent: eight categorical colours.

schemeDark2: eight categorical colours.

schemePaired: twelve categorical colours.

schemePastel1: nine categorical colours.

schemePastel2: eight categorical colours.

schemeSet1: nine categorical colours.

schemeSet2: eight categorical colours.

schemeSet3: twelve categorical colours.

schemeTableau10: ten categorical colours, originally created for Tableau.

customColors ​

customColors sets the colour of each group: an array of colours, or an object from group to coloura vector of colours, or a named list from group to coloura list of colours, or a dict from group to colour.

An array of colours:A vector of colours:A vector of colours:

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  color: {
    customColors: ["#F8766D", "#00BA38", "#619CFF", "#F564E3", "#FFC61E", "#00BFC4"],
  },
});
r
# Pass a list of Colors
custom_colors <- c("#F8766D","#00BA38","#619CFF","#F564E3","#FFC61E","#00BFC4")

GC_chart(ophA_cluster, group = "class", height = "100px") %>%
  GC_color(customColors = custom_colors )
python
# Pass a list of Colors
custom_colors = ["#F8766D", "#00BA38", "#619CFF", "#F564E3", "#FFC61E", "#00BFC4"]

(GC(ophA_cluster, group="class", height="100px").color(custom_colors=custom_colors))

An object from group to colour:A named list from group to colour:A named list from group to colour:

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  color: {
    customColors: {
      Monooxygenase: "#D62728",
      "NTF2-like": "#2CA02C",
      Methyltransferase: "#1F77B4",
      "O-acyltransferase": "#9467BD",
      Prolyloligopeptidase: "#FF7F0E",
      "F-box/RNHI-like": "#17BECF",
    },
  },
});
r
# Pass a list of Colors
custom_colors <- c("#D62728", "#2CA02C", "#1F77B4", "#9467BD", "#FF7F0E", "#17BECF")

# Create a named list of colors
named_vector <- setNames(custom_colors, unique(ophA_cluster$class))
custom_colors <- as.list(named_vector)

GC_chart(ophA_cluster, group = "class", height = "100px") %>%
  GC_color(customColors = custom_colors )
python
# Pass a list of Colors
custom_colors = ["#D62728", "#2CA02C", "#1F77B4", "#9467BD", "#FF7F0E", "#17BECF"]

# A dict from group to color
custom_colors = dict(zip(ophA_cluster["class"].unique(), custom_colors))

(GC(ophA_cluster, group="class", height="100px").color(custom_colors=custom_colors))

Patterns ​

Journals sometimes ask for figures in black and white. The pattern keyGC_pattern().pattern() fills the genes, exons and legend markers with a pattern for each group instead of a colour. By default each group gets the next pattern from a fixed list, in black on a white background.

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", { data: ophA, fields: { group: "class" }, pattern: {} });
r
GC_chart(ophA_cluster, group = "class", height = "100px") %>%
  GC_pattern()
python
GC(ophA_cluster, group="class", height="100px").pattern()

There are 16 patterns. Without patterns, the groups get them in the order shown below, which keeps patterns that look alike (such as diagonal and wideStripes) far apart. none is not used by default.

js
// <div id="chart" style="height: 260px"></div>
const { data } = await fetch("https://nvelden.github.io/geneviewer-docs/charts/data/guide-patterns-2.json")
  .then((response) => response.json());

const chart = geneviewer.newChart("#chart", {
  data,
  fields: { cluster: "row", group: "pattern" },
  labels: { label: "pattern", fontSize: "11px" },
  legend: {
    order: [
      "diagonal",
      "dots",
      "horizontal",
      "crosshatch",
      "vertical",
      "zigzag",
      "checkerboard",
      "solid",
      "rings",
      "bricks",
      "inverseDots",
      "grid",
      "wideStripes",
      "plus",
      "antidiagonal",
      "none",
    ],
  },
  pattern: {
    patterns: {
      diagonal: "diagonal",
      dots: "dots",
      horizontal: "horizontal",
      crosshatch: "crosshatch",
      vertical: "vertical",
      zigzag: "zigzag",
      checkerboard: "checkerboard",
      solid: "solid",
      rings: "rings",
      bricks: "bricks",
      inverseDots: "inverseDots",
      grid: "grid",
      wideStripes: "wideStripes",
      plus: "plus",
      antidiagonal: "antidiagonal",
      none: "none",
    },
  },
});
r
all_patterns <- c(
  "diagonal", "dots", "horizontal", "crosshatch", "vertical", "zigzag",
  "checkerboard", "solid", "rings", "bricks", "inverseDots", "grid",
  "wideStripes", "plus", "antidiagonal", "none"
)

# Two rows of 8 genes
pattern_genes <- data.frame(
  start = rep(seq(0, by = 100, length.out = 8), 2),
  end = rep(seq(85, by = 100, length.out = 8), 2),
  pattern = all_patterns,
  row = rep(c("1", "2"), each = 8)
)

GC_chart(pattern_genes, group = "pattern", cluster = "row",
         height = "260px") %>%
  GC_labels("pattern", fontSize = "11px") %>%
  GC_legend(order = all_patterns) %>%
  GC_pattern(patterns = setNames(as.list(all_patterns), all_patterns))
python
all_patterns = [
    "diagonal",
    "dots",
    "horizontal",
    "crosshatch",
    "vertical",
    "zigzag",
    "checkerboard",
    "solid",
    "rings",
    "bricks",
    "inverseDots",
    "grid",
    "wideStripes",
    "plus",
    "antidiagonal",
    "none",
]

# Two rows of 8 genes
pattern_genes = pd.DataFrame(
    {
        "start": [100 * i for i in range(8)] * 2,
        "end": [100 * i + 85 for i in range(8)] * 2,
        "pattern": all_patterns,
        "row": ["1"] * 8 + ["2"] * 8,
    }
)

(
    GC(pattern_genes, group="pattern", cluster="row", height="260px")
    .labels("pattern", font_size="11px")
    .legend(order=all_patterns)
    .pattern(patterns=dict(zip(all_patterns, all_patterns)))
)

Use patterns to choose them: an arraya vectora list is recycled over the groups, and an objecta named lista dict sets the pattern for each group.

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  pattern: {
    patterns: {
      Monooxygenase: "diagonal",
      "NTF2-like": "dots",
      Methyltransferase: "horizontal",
      "O-acyltransferase": "crosshatch",
      Prolyloligopeptidase: "vertical",
      "F-box/RNHI-like": "none",
    },
  },
});
r
GC_chart(ophA_cluster, group = "class", height = "100px") %>%
  GC_pattern(
    patterns = list(
      "Monooxygenase" = "diagonal",
      "NTF2-like" = "dots",
      "Methyltransferase" = "horizontal",
      "O-acyltransferase" = "crosshatch",
      "Prolyloligopeptidase" = "vertical",
      "F-box/RNHI-like" = "none"
    )
  )
python
GC(ophA_cluster, group="class", height="100px").pattern(
    patterns={
        "Monooxygenase": "diagonal",
        "NTF2-like": "dots",
        "Methyltransferase": "horizontal",
        "O-acyltransferase": "crosshatch",
        "Prolyloligopeptidase": "vertical",
        "F-box/RNHI-like": "none",
    }
)

With many groups, combine the patterns with grey backgrounds. The background arrayvectorlist is recycled in the same way, so 3 patterns and 2 greys give 6 different fills. color sets the colour of the lines and dots, size the width of one pattern tile and strokeWidth the width of the lines.

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  pattern: {
    patterns: ["diagonal", "dots", "crosshatch"],
    background: ["white", "grey75"],
    size: 8,
    strokeWidth: 1.5,
  },
});
r
GC_chart(ophA_cluster, group = "class", height = "100px") %>%
  GC_pattern(
    patterns = c("diagonal", "dots", "crosshatch"),
    background = c("white", "grey75"),
    size = 8,
    strokeWidth = 1.5
  )
python
GC(ophA_cluster, group="class", height="100px").pattern(
    patterns=["diagonal", "dots", "crosshatch"],
    background=["white", "grey75"],
    size=8,
    stroke_width=1.5,
)

Set background: nullbackground = NULLbackground=None to draw the patterns on top of the gene colours. Each group then has both a colour and a pattern, which also helps readers who cannot tell some colours apart.

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  color: { colorScheme: "schemeSet2" },
  pattern: { background: null },
});
r
GC_chart(ophA_cluster, group = "class", height = "100px") %>%
  GC_color(colorScheme = "schemeSet2") %>%
  GC_pattern(background = NULL)
python
(
    GC(ophA_cluster, group="class", height="100px")
    .color(color_scheme="schemeSet2")
    .pattern(background=None)
)

Like background, color can be an array or an objecta vector or a named lista list or a dict, so some groups can have white patterns on black. inverseDots draws the dots in the background colour on a tile filled with color.

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  pattern: {
    patterns: ["diagonal", "dots", "horizontal", "checkerboard", "bricks", "rings"],
    color: ["black", "black", "white", "black", "black", "white"],
    background: ["white", "white", "black", "white", "white", "black"],
  },
});
r
GC_chart(ophA_cluster, group = "class", height = "100px") %>%
  GC_pattern(
    patterns = c("diagonal", "dots", "horizontal",
                 "checkerboard", "bricks", "rings"),
    color = c("black", "black", "white", "black", "black", "white"),
    background = c("white", "white", "black", "white", "white", "black")
  )
python
GC(ophA_cluster, group="class", height="100px").pattern(
    patterns=["diagonal", "dots", "horizontal", "checkerboard", "bricks", "rings"],
    color=["black", "black", "white", "black", "black", "white"],
    background=["white", "white", "black", "white", "white", "black"],
)

Themes ​

The theme keyGC_theme().theme() sets the default look of the whole chart at once: fonts, text and line colours, the background, the gene colours and the options of each part. There are 7 built-in themes:

  • "default": the default look of geneviewer.
  • "classic": the default theme of ECharts 5.
  • "dark": light text and soft colours on a dark background.
  • "vintage": muted colours on a cream background.
  • "infographic": strong colours.
  • "publication": for journal figures (Arial, 7 pt text, black text and axes, italic gene labels and colour-blind safe colours).
  • "bw": black and white, with a pattern for each group.
js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  labels: { label: "name" },
  theme: { base: "dark" },
});
r
GC_chart(ophA_cluster, group = "class", height = "150px") %>%
  GC_labels("name") %>%
  GC_theme("dark")
python
GC(ophA_cluster, group="class", height="150px").labels("name").theme("dark")
js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  labels: { label: "name" },
  theme: { base: "vintage" },
});
r
GC_chart(ophA_cluster, group = "class", height = "150px") %>%
  GC_labels("name") %>%
  GC_theme("vintage")
python
GC(ophA_cluster, group="class", height="150px").labels("name").theme("vintage")
js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  labels: { label: "name" },
  scale: {},
  theme: { base: "publication" },
});
r
GC_chart(ophA_cluster, group = "class", height = "150px") %>%
  GC_labels("name") %>%
  GC_scale() %>%
  GC_theme("publication")
python
(
    GC(ophA_cluster, group="class", height="150px")
    .labels("name")
    .scale()
    .theme("publication")
)
js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  labels: { label: "name" },
  theme: { base: "bw" },
});
r
GC_chart(ophA_cluster, group = "class", height = "150px") %>%
  GC_labels("name") %>%
  GC_theme("bw")
python
GC(ophA_cluster, group="class", height="150px").labels("name").theme("bw")

A theme only changes how things look. It does not add parts to the chart: a scale still needs the scale keyGC_scale().scale() and labels the labels keyGC_labels().labels().

Each built-in theme also styles the toolbar. Hover the chart below and drag a label to see the undo icon in the dark theme.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  labels: { label: "name" },
  events: { select: true, drag: true },
  theme: { base: "dark" },
});
r
GC_chart(ophA_cluster, group = "class", height = "150px") %>%
  GC_labels("name") %>%
  GC_events(select = TRUE, drag = TRUE) %>%
  GC_theme("dark")
python
(
    GC(ophA_cluster, group="class", height="150px")
    .labels("name")
    .events(select=True, drag=True)
    .theme("dark")
)

Global settings ​

Next to basethemetheme, the name of a built-in theme, themeGC_theme().theme() takes settings for all parts: fontFamily, textColor, lineColor (the sequence line, axis, coordinates and scale bar), background, palette (the gene colours) and pattern.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  labels: { label: "name" },
  theme: {
    base: "classic",
    fontFamily: "Georgia",
    textColor: "navy",
    lineColor: "steelblue",
    palette: ["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02"],
  },
});
r
GC_chart(ophA_cluster, group = "class", height = "150px") %>%
  GC_labels("name") %>%
  GC_theme("classic",
           fontFamily = "Georgia",
           textColor = "navy",
           lineColor = "steelblue",
           palette = c("#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02"))
python
(
    GC(ophA_cluster, group="class", height="150px")
    .labels("name")
    .theme(
        "classic",
        font_family="Georgia",
        text_color="navy",
        line_color="steelblue",
        palette=["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02"],
    )
)

palette takes an arraya vectora list of colours, the name of a D3 colour scheme (such as "schemeSet2") or the name of a geneviewer palette: okabeIto, classic, vivid, dark, vintage, infographic, greys or blues. The geneviewer palettes can also be used as the colorScheme of genes, transcript and colorGC_genes(), GC_transcript() and GC_color().genes(), .transcript() and .color().

Text size ​

textScale scales all text of the chart at once, for example for a slide or a figure that is printed small. The title and the width of the cluster labels grow with the text.

js
// <div id="chart" style="height: 220px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  title: { title: "ophA gene cluster" },
  labels: { label: "name" },
  theme: { base: "classic", textScale: 1.4 },
});
r
GC_chart(ophA_cluster, group = "class", height = "220px") %>%
  GC_title("ophA gene cluster") %>%
  GC_labels("name") %>%
  GC_theme("classic", textScale = 1.4)
python
(
    GC(ophA_cluster, group="class", height="220px")
    .title("ophA gene cluster")
    .labels("name")
    .theme("classic", text_scale=1.4)
)

Component options ​

Options for a single part are given under its own name, such as labels: { fontSize: "10px" } or links: { curve: false }labels = list(fontSize = "10px") for GC_labels() or links = list(curve = FALSE) for GC_links()labels={"fontSize": "10px"} for .labels() or links={"curve": False} for .links().

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  labels: { label: "name" },
  theme: {
    base: "classic",
    labels: { fontSize: "10px", fill: "grey" },
    genes: { marker: "rbox", stroke: "none" },
    legend: { position: "top" },
  },
});
r
GC_chart(ophA_cluster, group = "class", height = "150px") %>%
  GC_labels("name") %>%
  GC_theme("classic",
           labels = list(fontSize = "10px", fill = "grey"),
           genes = list(marker = "rbox", stroke = "none"),
           legend = list(position = "top"))
python
(
    GC(ophA_cluster, group="class", height="150px")
    .labels("name")
    .theme(
        "classic",
        labels={"fontSize": "10px", "fill": "grey"},
        genes={"marker": "rbox", "stroke": "none"},
        legend={"position": "top"},
    )
)

Options set on a partwith the other GC_ functionswith the other methods always take precedence over the theme. Below the gene labels stay 14px, although the theme sets them to 10px.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  labels: { label: "name", fontSize: "14px" },
  theme: { base: "classic", labels: { fontSize: "10px" } },
});
r
GC_chart(ophA_cluster, group = "class", height = "150px") %>%
  GC_labels("name", fontSize = "14px") %>%
  GC_theme("classic", labels = list(fontSize = "10px"))
python
(
    GC(ophA_cluster, group="class", height="150px")
    .labels("name", font_size="14px")
    .theme("classic", labels={"fontSize": "10px"})
)

Legend ​

The legend keyGC_legend().legend() shows, hides and styles the legend, which is at the bottom by default. Here it is with all its default settings.

js
// <div id="chart" style="height: 200px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  legend: {
    show: true,
    position: "bottom",
    markerStyle: { cursor: "pointer", colorScheme: null, customColors: null },
    textStyle: {
      cursor: "pointer",
      textAnchor: "start",
      dy: ".35em",
      fontSize: "12px",
      fontFamily: "sans-serif",
      fill: "black",
    },
    orientation: "horizontal",
    x: 0,
    y: 0,
    margin: { top: 0, left: 50, bottom: 0, right: 50 },
    adjustHeight: true,
    positions: "bottom",
  },
});
r
GC_chart(
  ophA_clusters, 
  group = "class", 
  cluster = "cluster",
  height = "200px") %>%
 GC_legend(
    show = TRUE,
    position = "bottom", #top (left and right no supported for now)
    orientation = "horizontal", #vertical
    x = 0,
    y = 0,
    margin = list(top = 0, left = 50, bottom = 0,  right = 50),
    adjustHeight = TRUE,
    order = list(),
    style = list(
      #backgroundColor = "#0000"
      # Additional CSS styles
    ),
    positions = "bottom",
    legendOptions = list(
      cursor = "pointer",
      colorScheme = NULL,
      customColors = NULL 
      # Additional CSS styles
    ),
    legendTextOptions = list(
      cursor = "pointer",
      textAnchor = "start",
      dy = ".35em",
      fontSize = "12px",
      fontFamily = "sans-serif",
      fill = "black"
      # Additional CSS styles
    )
  )
python
GC(ophA_clusters, group="class", cluster="cluster", height="200px").legend(
    show=True,
    position="bottom",
    orientation="horizontal",
    x=0,
    y=0,
    margin={"top": 0, "left": 50, "bottom": 0, "right": 50},
    adjust_height=True,
    order=[],
    style={},
    positions="bottom",
    legend_options={"cursor": "pointer", "colorScheme": None, "customColors": None},
    legend_text_options={
        "cursor": "pointer",
        "textAnchor": "start",
        "dy": ".35em",
        "fontSize": "12px",
        "fontFamily": "sans-serif",
        "fill": "black",
    },
)

Here the order, size, position and look of the legend are changed. The color keyGC_color().color() changes the colours of the legend and genes together.

js
// <div id="chart" style="height: 200px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  legend: {
    order: [
      "F-box/RNHI-like",
      "Methyltransferase",
      "Monooxygenase",
      "NTF2-like",
      "O-acyltransferase",
      "Prolyloligopeptidase",
    ],
    position: "top",
    markerStyle: { stroke: "black", strokeWidth: "2px" },
    textStyle: { fontSize: "14px" },
    y: 10,
    width: "60%",
  },
  color: { colorScheme: "schemePaired" },
});
r
GC_chart(
  ophA_clusters, 
  group = "class", 
  cluster = "cluster",
  height = "200px") %>%
 GC_legend(
    y = 10,
    position = "top",
    width = "60%",
    order = sort(unique(ophA_clusters$class)),
    legendTextOptions = list(
      fontSize = "14px"
    ),
    legendOptions = list(stroke = "black", strokeWidth = "2px")
  ) %>%
  GC_color(colorScheme = "schemePaired")
python
(
    GC(ophA_clusters, group="class", cluster="cluster", height="200px")
    .legend(
        y=10,
        position="top",
        width="60%",
        order=sorted(ophA_clusters["class"].unique()),
        legend_text_options={"fontSize": "14px"},
        legend_options={"stroke": "black", "strokeWidth": "2px"},
    )
    .color(color_scheme="schemePaired")
)

Scale ​

The scale keyGC_scale().scale() sets the scale of the chart. padding adds space at the start and end of the cluster, hidden hides the axis, and y sets its position (1 at the bottom, 100 at the top).

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  scale: { padding: 2, hidden: false, axisPosition: "bottom" },
  legend: { show: false },
});
r
GC_chart(ophA_cluster, group = "class", height = "100px") %>%
  GC_scale(
    padding = 2,
    hidden = FALSE,
    axis_position = "bottom",
    y = NULL) %>%
   GC_legend(FALSE)
python
(
    GC(ophA_cluster, group="class", height="100px")
    .scale(padding=2, hidden=False, axis_position="bottom", y=None)
    .legend(False)
)

Automatic scale breaks ​

autoBreaks, autoBreakThreshold and breakPaddingscale_breaks, scale_break_threshold and scale_break_paddingscale_breaks, scale_break_threshold and scale_break_padding deal with widely spaced genes. autoBreaks: truescale_breaks = TRUEscale_breaks=True adds breaks in the scale to avoid long empty stretches. autoBreakThresholdscale_break_thresholdscale_break_threshold is the share of the cluster's range an empty stretch must exceed, and breakPaddingscale_break_paddingscale_break_padding the padding around a break.

Here a break is added where the space between genes exceeds 20% of the cluster's range, with 1% padding on both sides.

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  scale: { autoBreaks: true, autoBreakThreshold: 20, breakPadding: 1 },
  legend: { show: false },
});
r
# With scale breaks
GC_chart(ophA_cluster, group = "class", height = "100px") %>%
  GC_scale(
    scale_breaks = TRUE,
    scale_break_threshold = 20,
    scale_break_padding = 1
  ) %>%
  GC_legend(FALSE)
python
# With scale breaks
(
    GC(ophA_cluster, group="class", height="100px")
    .scale(scale_breaks=True, scale_break_threshold=20, scale_break_padding=1)
    .legend(False)
)

Manual scale adjustments ​

By default the scale runs from the lowest to the highest position of the genes. start and end change this, and breaks adds breaks by hand. Here the range is set by hand and a break removes the long stretch between gene 2 and gene 3.

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { start: "start", end: "end", group: "class" },
  scale: { start: 1522, end: 22484, breaks: [{ start: 5486, end: 9336 }] },
  legend: { show: false },
});
r
GC_chart(
  ophA_cluster, 
  start = "start", 
  end = "end", 
  group = "class", 
  height = "100px") %>%
  GC_scale(
    start = 1522, 
    end = 22484,
    breaks = 
      list(
        list(start = 5486, end = 9336)
      )
    ) %>%
  GC_legend(FALSE)
python
(
    GC(ophA_cluster, start="start", end="end", group="class", height="100px")
    .scale(start=1522, end=22484, breaks=[{"start": 5486, "end": 9336}])
    .legend(False)
)

Reverse scale ​

reverse: truereverse = TRUEreverse=True reverses the scale.

js
// <div id="chart" style="height: 200px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  scale: [
    { clusters: [1], reverse: false, ticksCount: 10 },
    { clusters: [2], reverse: true, ticksCount: 10 },
  ],
});
r
GC_chart(ophA_clusters, group = "class", cluster = "cluster", height = "200px") %>%
  GC_scale(cluster = 1, reverse = FALSE, ticksCount = 10) %>%
  GC_scale(cluster = 2, reverse = TRUE, ticksCount = 10)
python
(
    GC(ophA_clusters, group="class", cluster="cluster", height="200px")
    .scale(cluster=1, reverse=False, ticks_count=10)
    .scale(cluster=2, reverse=True, ticks_count=10)
)

Shared genomic scale ​

axisType: "range"axis_type = "range"axis_type="range" gives the clusters one scale, from 0 to the widest span among them, rather than their own genomic coordinates. Some options, such as breaks and a reversed scale, may no longer work on a shared axis.

js
// <div id="chart" style="height: 200px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  scale: { axisType: "range" },
});
r
GC_chart(ophA_clusters, group = "class", cluster = "cluster", height = "200px") %>%
  GC_scale(axis_type = "range")
python
GC(ophA_clusters, group="class", cluster="cluster", height="200px").scale(
    axis_type="range"
)

Scale styling ​

tickStyle, textStyle and lineStyle take CSS styles. ticksCount sets the number of ticks, or tickValues the ticks themselves. ticksFormat sets how the numbers are written (see d3-format).

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  scale: {
    tickValues: [
      2522,
      5286,
      9536,
      12616,
      13183,
      19346,
      20170,
      4276,
      4718,
      10904,
      11859,
      15046,
      16016,
      21484,
    ],
    ticksFormat: ".2s",
    tickStyle: { stroke: "black", strokeWidth: 2, lineLength: 12 },
    textStyle: { y: 15, fill: "black", fontSize: "8px", fontFamily: "Arial" },
    lineStyle: { stroke: "black", strokeWidth: 2 },
  },
  legend: { show: false },
});
r
GC_chart(ophA_cluster, group = "class", height = "100px") %>%
  GC_scale(
    ticksFormat = ".2s", # Default: ",.0f"
    tickValues = c(ophA_cluster$start, ophA_cluster$end),
    #ticksCount = 10,
    tickStyle = 
      list(
        stroke = "black", 
        strokeWidth = 2, 
        lineLength = 12
        # Any other CSS styles
        ),
    textStyle = 
      list(
        y = 15,
        fill = "black", 
        fontSize = "8px", 
        fontFamily = "Arial"
        # Any other CSS styles
        ),
    lineStyle = list(
      stroke = "black", 
      strokeWidth = 2
      # Any other CSS styles
      )
  ) %>%
  GC_legend(FALSE)
python
(
    GC(ophA_cluster, group="class", height="100px")
    .scale(
        ticks_format=".2s",
        tick_values=[*ophA_cluster["start"], *ophA_cluster["end"]],
        tick_style={"stroke": "black", "strokeWidth": 2, "lineLength": 12},
        text_style={"y": 15, "fill": "black", "fontSize": "8px", "fontFamily": "Arial"},
        line_style={"stroke": "black", "strokeWidth": 2},
    )
    .legend(False)
)

Zoom ​

The zoom keyGC_zoom().zoom() adds a slider below the clusters to zoom in on part of them. Drag a handle to change the window, drag the window to move it, and click the track to move the window there. Double-click the slider, or use the reset zoom icon in the toolbar, to show everything again. With the keyboard, the arrow keys move a focused handle or the window (Shift: in bigger steps). The slider shows the genes of each cluster in their colours, and genes, labels, links and the axis follow the window. range sets the window shown first:

js
// <div id="chart" style="height: 350px"></div>
const { links } = await fetch("https://nvelden.github.io/geneviewer-docs/charts/data/guide-zoom.json")
  .then((response) => response.json());

const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  labels: { label: "name" },
  links: { data: links, group: "class" },
  scale: { hidden: false },
  zoom: { range: [0.2, 0.6] },
});
r
GC_chart(ophA_clusters, cluster = "cluster", group = "class", height = "350px") %>%
  GC_labels("name") %>%
  GC_links("class") %>%
  GC_scale(hidden = FALSE) %>%
  GC_zoom(range = c(0.2, 0.6))
python
(
    GC(ophA_clusters, cluster="cluster", group="class", height="350px")
    .labels("name")
    .links("class")
    .scale(hidden=False)
    .zoom(range=[0.2, 0.6])
)

By default every cluster zooms to the same share of its own range, which suits clusters of different genomes. With mode: "absolute"mode = "absolute"mode="absolute" the window is in base pairs and every cluster shows the same positions. update: "release"update = "release"update="release" draws the chart only when the slider is let go, for large charts, and height, overview, color, style, windowStyle and handleStyle set the look of the slider.

js
// <div id="chart" style="height: 300px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  labels: { label: "name" },
  scale: { hidden: false },
  zoom: {
    range: [10000, 20000],
    mode: "absolute",
    update: "release",
    height: 30,
    handleStyle: { backgroundColor: "#d9d9d9" },
  },
});
r
GC_chart(ophA_clusters, cluster = "cluster", group = "class", height = "300px") %>%
  GC_labels("name") %>%
  GC_scale(hidden = FALSE) %>%
  GC_zoom(mode = "absolute", range = c(10000, 20000), update = "release", height = 30,
          handleStyle = list(backgroundColor = "#d9d9d9"))
python
(
    GC(ophA_clusters, cluster="cluster", group="class", height="300px")
    .labels("name")
    .scale(hidden=False)
    .zoom(
        mode="absolute",
        range=[10000, 20000],
        update="release",
        height=30,
        handle_style={"backgroundColor": "#d9d9d9"},
    )
)

With events: { zoom: true } the zoom event reports the window, on the first draw and after every change. chart.zoomTo() moves the window from code, and null shows everything again:

js
chart.on("zoom", (event) => console.log(event.detail.range));
chart.zoomTo([0, 0.5]);
chart.zoomTo(null);

In Shiny, GC_events(zoom = TRUE) reports the window in input$<outputId>_zoom, on the first draw and after every change: its range, which goes back into GC_zoom(range = ), and the base pairs each cluster shows. GC_zoom_to() moves the window from the server.

In Shiny, .events(zoom=True) reports the window in input.<id>_zoom(), on the first draw and after every change: its range, which goes back into .zoom(range=), and the base pairs each cluster shows. zoom_to() moves the window from the server.

Coordinates ​

The coordinates keyGC_coordinates().coordinates() shows the positions of the genes. Coordinates that overlap are moved to the top axis, and overlapThreshold (default 20) sets when.

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: dbophA,
  fields: { group: "class" },
  coordinates: {
    rotate: -45,
    yPositionTop: 55,
    yPositionBottom: 45,
    overlapThreshold: 20,
  },
  legend: { show: false },
});
r
dbophA_cluster <- subset(ophA_clusters, cluster == "dbophA")

GC_chart(dbophA_cluster, group = "class",height = "100px") %>%
  GC_coordinates(
  rotate = -45,
  yPositionTop = 55,
  yPositionBottom = 45,
  overlapThreshold = 20
  ) %>%
  GC_legend(FALSE)
python
dbophA_cluster = ophA_clusters[ophA_clusters["cluster"] == "dbophA"]

(
    GC(dbophA_cluster, group="class", height="100px")
    .coordinates(
        rotate=-45, y_position_top=55, y_position_bottom=45, overlap_threshold=20
    )
    .legend(False)
)

tickStyle and textStyle style the ticks and text. The scale itself is set with the scale keyGC_scale().scale(): to reverse it and show only the coordinates, hide it there.

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: dbophA,
  fields: { group: "class" },
  scale: { hidden: true, reverse: true },
  coordinates: {
    tickStyle: { stroke: "grey", strokeWidth: 1, lineLength: 10 },
    textStyle: {
      fill: "gray",
      fontSize: "10px",
      fontFamily: "Arial",
      cursor: "default",
    },
  },
  legend: { show: false },
});
r
GC_chart(dbophA_cluster, group = "class",height = "100px") %>%
  GC_scale(hidden = TRUE, reverse = TRUE) %>%
  GC_coordinates(
   tickStyle = list(stroke = "grey", strokeWidth = 1, lineLength = 10),
   textStyle = list(fill = "gray", fontSize = "10px", fontFamily = "Arial", cursor = "default")
   ) %>%
   GC_legend(FALSE)
python
(
    GC(dbophA_cluster, group="class", height="100px")
    .scale(hidden=True, reverse=True)
    .coordinates(
        tick_style={"stroke": "grey", "strokeWidth": 1, "lineLength": 10},
        text_style={
            "fill": "gray",
            "fontSize": "10px",
            "fontFamily": "Arial",
            "cursor": "default",
        },
    )
    .legend(False)
)

The start and end of each gene are shown by default. tickValuesTop and tickValuesBottom set your own values, and ticksFormat how they are written (see d3-format).

js
// <div id="chart" style="height: 100px"></div>
const chart = geneviewer.newChart("#chart", {
  data: dbophA,
  fields: { group: "class" },
  coordinates: {
    tickValuesTop: [27371, 28937],
    tickValuesBottom: [25288, 27217],
    ticksFormat: ".2s",
  },
  legend: { show: false },
});
r
GC_chart(dbophA_cluster, group = "class",height = "100px") %>%
  GC_coordinates(
    tickValuesTop = c(27371, 28937),
    tickValuesBottom = c(25288, 27217),
    ticksFormat = ".2s", # Default: ",.0f"
   ) %>%
   GC_legend(FALSE)
python
(
    GC(dbophA_cluster, group="class", height="100px")
    .coordinates(
        tick_values_top=[27371, 28937],
        tick_values_bottom=[25288, 27217],
        ticks_format=".2s",
    )
    .legend(False)
)

Scale bar ​

The scaleBar keyGC_scaleBar().scale_bar() adds a scale bar. title is its label and unit its length in base pairs.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  scaleBar: { title: "1kb", unit: 1000 },
  legend: { show: false },
});
r
GC_chart(ophA_clusters, group = "class", cluster = "cluster", height = "150px") %>%
  GC_scaleBar(
    title = "1kb",
    scaleBarUnit = 1000
    ) %>%
  GC_legend(FALSE)
python
(
    GC(ophA_clusters, group="class", cluster="cluster", height="150px")
    .scale_bar(title="1kb", scale_bar_unit=1000)
    .legend(False)
)

x, y and labelStyle place and style the label, and lineStyle and tickStylescaleBarLineStyle and scaleBarTickStylescale_bar_line_style and scale_bar_tick_style style the bar.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophAClusters,
  fields: { cluster: "cluster", group: "class" },
  scaleBar: {
    lineStyle: { stroke: "black", strokeWidth: 1 },
    tickStyle: { stroke: "black", strokeWidth: 1 },
    labelStyle: {
      labelPosition: "left",
      fontSize: "10px",
      fontFamily: "sans-serif",
      fill: "black",
      cursor: "default",
    },
    title: "1kb",
    unit: 1000,
    x: 0,
    y: 0,
    textPadding: 2,
  },
  legend: { y: 10 },
});
r
GC_chart(ophA_clusters, group = "class", cluster = "cluster", height = "150px") %>%
  GC_scaleBar(
    title = "1kb",
    scaleBarUnit = 1000,
    cluster = NULL,
    x = 0,
    y = 0,
    labelStyle = list(
      labelPosition = "left",
      fontSize = "10px",
      fontFamily = "sans-serif",
      fill = "black",    
      cursor = "default" 
      # Any other CSS style for the label
    ),
    textPadding = 2,
    scaleBarLineStyle = list(
      stroke = "black",
      strokeWidth = 1
      # Any other CSS style for the line
    ),
    scaleBarTickStyle = list(
      stroke = "black",
      strokeWidth = 1   
      # Any other CSS style for the tick
    )
  ) %>% 
  GC_legend(y = 10) # Increase space
python
(
    GC(ophA_clusters, group="class", cluster="cluster", height="150px")
    .scale_bar(
        title="1kb",
        scale_bar_unit=1000,
        cluster=None,
        x=0,
        y=0,
        label_style={
            "labelPosition": "left",
            "fontSize": "10px",
            "fontFamily": "sans-serif",
            "fill": "black",
            "cursor": "default",
        },
        text_padding=2,
        scale_bar_line_style={"stroke": "black", "strokeWidth": 1},
        scale_bar_tick_style={"stroke": "black", "strokeWidth": 1},
    )
    .legend(y=10)
)

Tooltip ​

The tooltip shows the start and end of a gene by default. Set your own text with formatter, where a column in braces is replaced by its value. Here it also shows the name column.

js
// <div id="chart" style="height: 150px"></div>
const chart = geneviewer.newChart("#chart", {
  data: ophA,
  fields: { group: "class" },
  tooltip: {
    formatter: "<b>Gene: </b>{name}<br><b>Start:</b> {start}<br><b>End:</b> {end}",
  },
  legend: { show: false },
});
r
GC_chart(ophA_cluster, group = "class", height = "150px") %>%
  GC_tooltip(
    formatter = "<b>Gene: </b>{name}<br><b>Start:</b> {start}<br><b>End:</b> {end}",
  ) %>%
  GC_legend(FALSE)
python
(
    GC(ophA_cluster, group="class", height="150px")
    .tooltip(
        formatter="<b>Gene: </b>{name}<br><b>Start:</b> {start}<br><b>End:</b> {end}"
    )
    .legend(False)
)

Saving charts ​

Hover the chart and then the download icon, and choose Save as SVG for a vector image that can be edited in Inkscape or Illustrator and scaled for publications, or Save as PNG for an image at screen resolution (make the chart larger for a larger PNG). Elements moved in the chart are saved where they are. A zoomed chart is saved as it shows, without the zoom slider.

From code:

js
const svg = chart.toSVG();          // text
const png = await chart.toPNG();    // a Blob
await chart.download("png", "clusters.png");

Pass saveAs(blob, filename) to the options of newChart() to save files your own way.

To save a chart from code, use the webshot2 package. Set the width and height of a chart with links, so that they line up.

r
library(webshot2)

cluster_plot <- GC_chart(ophA_clusters, group = "class", cluster = "cluster",
                         width = "400px", height = "250px")

htmlwidgets::saveWidget(cluster_plot, "temp.html", selfcontained = TRUE)

# Also .jpg, .jpeg, .webp or .pdf
webshot2::webshot("temp.html", "output.png", zoom = 1, selector = ".geneviewer")

The Python package has no function that writes an image. chart.to_spec() gives the chart as a spec, a dict that can be written as JSON; the JavaScript library draws it on any page and saves it from code.

Preparing data ​

The JavaScript library only draws. These steps of the R package work on the data before it reaches the chart, so in JavaScript you pass their results as tables:The R package also prepares the data for a chart:The Python package also prepares the data for a chart, with the functions of the R package: as in the articles of the Python package. The articles below are for R: