Welcome to SODA’s documentation!

Guide

Introduction

SODA is a lightweight TypeScript/Javascript library for building dynamic and interactive visualizations of biological sequence annotation. Visualizations produced by SODA can be easily integrated with web pages, and it is easy to define interactions between SODA components and other page features.

Before you start

SODA is still in the early stages of its life and is currently maintained by one person. If you encounter any bugs, find anything in the library or documentation confusing, or even think there are gaps in the feature set, please consider submitting an issue.

SODA adheres to the semantic versioning guidelines, so any (intentional) breaking changes to the API will be accompanied by a bump in the major version number.

Design philosophies

The development of SODA is guided by a handful of design philosophies:

SODA is developed in TypeScript

Types make code safer, easier to understand, and less painful to maintain.

TypeScript does a fantastic job of adding static typing to JavaScript. If you’re not familiar with TypeScript, check out the TypeScript handbook.

Of course, you are still free to use SODA as a JavaScript library, but you’ll miss out on a bit of safety.

SODA features use callback functions

If you’ve spent time writing JavaScript, it’s a safe bet that you’re familiar with the concept of a callback function. However, if you’ve never used callback functions before, it’s probably worth taking a quick moment to check out the MDN Web Docs section on callback functions.

Callback functions are used throughout SODA for interactivity and dynamic styling.

SODA is not a visualization tool–it is a library with which visualization tools can be built

There are countless tools that provide out of the box solutions for visualizing sequence annotation; SODA is not one of those tools. Although there are many common visualization patterns for annotation data, there will always be edge case scenarios with visualization needs that don’t quite fit into one of those patterns. For developers who find themselves in one of those scenarios, SODA aims to provide an option that they might find a bit more palatable than turning to a low-level visualization library like D3.

SODA makes few assumptions about your data and the way it should be visualized

SODA never tries to make stylistic decisions for you. Instead, you are in control of deciding how data is visually represented and how that representation changes in response to interactions with the visualization. The only assumption that SODA makes about your data is that it describes annotations along one dimension (e.g. a genome).

Installation and setup

SODA is implemented in TypeScript, which means it can be used in both TypeScript and JavaScript.

SODA as a TypeScript library

To get the full benefit of TypeScript when using SODA, you’ll probably want to use it in an npm project.

If you have never used npm before, you’ll first need to install Node. Depending on your operating system, there may be several ways to do that. Regardless of which platform you are on, you should be able to install it from the Node homepage

Alternatively, you could install node with a package manager:

Homebrew:

brew install node

Apt (Ubuntu, Debian):

sudo apt install nodejs

After installing node, you can initialize a directory as an npm project:

mkdir my-project/
cd my-project/
npm init

Once you have an npm project, brand new or otherwise, you can install SODA:

npm install @sodaviz/soda

If you want to, you can instead download the SODA source code from the GitHub repository and compile it with the TypeScript compiler, tsc.

SODA as a JavaScript library

If you’d rather just use SODA as a JavaScript library, the easiest way is probably to grab the bundle from skypack.

You could also download the source code from the GitHub repository, compile it, and bundle it yourself with something like webpack.

Overview

SODA is a front-end library for visualizing biological sequence annotations in a web page. The SODA API allows you to create SVG viewports in a web page and to configure and manipulate visualizations in those viewports. SODA has no back-end and doesn’t create any wrapping GUI components: it’s up to you to implement these as you see fit.

Building a simple SODA application requires three pieces:

A TypeScript/JavaScript object definition that extends SODA’s simple Annotation object and describes the annotation data you want to visualize.

One or more SODA Chart objects configured to produce the visualization itself.

Top-level code that drives that drives the application by instantiating Annotation objects and delivering them to Chart objects for visualization.

The goal of this guide is to explain the nuances of these systems in detail.

Annotations

Developing with SODA revolves around rendering glyphs using Annotation objects, which are the data structures used by SODA to represent annotation data. Typically, the first thing you’ll want to do when building a SODA visualization is to figure out how you’re going to load your data into objects that conform to SODA’s expectations. This section describes Annotation object structures and their nuances. For details on how Annotation objects are actually used, see the sections on rendering and interactivity.

Annotation interfaces

SODA features are designed to use objects that implement the simple interfaces described in this section.

Annotation

The Annotation interface is the baseline for all Annotation objects in SODA. Objects that implement Annotation can be used to render glyphs that represent intervals in a sequence domain (e.g a gene).

interface Annotation {
    id: string;     // <- this should be a unique identifier
    start: number;  // <- the start of the interval that the annotation describes
    end: number;    // <- the end of the interval that the annotation describes
}

PlotAnnotation

Objects that implement PlotAnnotation can be used to render glyphs that represent intervals in a sequence domain for which there are position specific real number values (e.g. GC content).

interface PlotAnnotation extends Annotation {
    id: string;
    start: number;
    end: number;
    values: number[];   // <- these are the position specific values
}

SequenceAnnotation

Objects that implement SequenceAnnotation can be used to render glyphs that represent intervals in a sequence domain for which there are position specific character values (e.g. base pairs aligned to a reference sequence).

interface SequenceAnnotation extends Annotation {
    id: string;
    start: number;
    end: number;
    sequence: string;   // <- this should contain the character values
}

Annotation utilities

SODA provides some utilities that may help you work with Annotation objects:

AnnotationGroup is an object that makes it easy to treat a group of Annotation objects as a single annotation.
generateAnnotations generates some simple, toy DefaultAnnotation objects that can be used for experimentation.
aggregateTransitive creates a list of AnnotationGroups from a supplied list of Annotations and a criterion function that takes a pair of Annotations as arguments. If the criterion function returns true for a pair of Annotations, they are placed in the same group. It is assumed that the criterion can be transitively applied.
aggregateIntransitive creates a list of AnnotationGroups from a supplied list of Annotations and a criterion function that takes a pair of Annotations as arguments. If the criterion function returns true for a pair of Annotations, they are placed in the same group. It is not assumed that the criterion can be transitively applied.
getAlignmentAnnotations creates SequenceAnnotations that are suitable for rendering sequences that are aligned to a chromosome.
sliceSequenceAnnotation returns a smaller piece of a SequenceAnnotation.
slicePlotAnnotation returns a smaller piece of a PlotAnnotation.

We’re aware that the scope of these utilities may seem a bit lacking. That’s because these are the data manipulation utilities that we have found useful when developing our own SODA applications. If you think a fundamental utility is missing, please let us know!

Established data formats

While SODA is not specifically designed to visualize established annotation data formats, a few utilities are provided to offer light support:

parseGff3Records function can be used to parse GFF3 record strings into Gff3Annotation objects.
parseBedRecords function may be used to parse BED record strings into BedAnnotation objects.

We’ll likely expand light support for more data formats in the future.

Charts

Chart objects are wrappers around SVG viewports in the browser that house SODA visualizations. This section explains both how the viewports are structured and how their wrapper Chart objects work under the hood.

Chart anatomy

In the the DOM, Charts exist as a collection of SVG elements inside of a containing div element. By default, the div container is assigned to be 100% of the width of its parent, and its height is dynamically adjusted to properly display the contents of the SVG elements.

We refer to the outermost SVG as the SVG pad, and it is set to 100% of the dimensions of the div container. The SVG pad has two child SVG elements, the viewport and the overflow viewport. By default, both viewport SVG elements are centered in the SVG pad using the Chart’s padSize property.

The SODA rendering API renders glyphs by placing SVG shapes inside either of the SVG viewports. The viewports are different only in the way that they treat glyphs positioned outside of their bounding box. The viewport hides glyphs that bleed into the SVG pad bounding box, while the overflow viewport does not. Conceptually, we divide Chart viewports vertically into rows, and, by default, glyphs are sized to fit into these rows. For more details on the rendering, see the rendering section.

_images/chart-dimensions.png — A Chart with rectangle glyphs in five rows and an axis glyph rendered in the overflow viewport.

Chart configuration

Charts are configured and instantiated with a ChartConfig object. Excluding selector, every property on the ChartConfig is optional. The selector property is used as a CSS selector to identify the target DOM container that the Chart will be placed in. Typically, the target of the selector should be a div that you explicitly create and position to accommodate your Chart viewport.

For example, a minimal Chart configuration may look something like this:

let chart = new Chart({ selector: "div#soda-chart" });

Running this code will initialize a Chart in a div with the class “soda-chart,” assuming that such a div exists in the DOM. The Chart will be a completely blank slate, which means that you won’t actually see anything rendered in it.

Dimensions configuration

The majority of properties control the dimensions of the various components of the Chart described above. The dimensions options that are likely to have the most impact on your visualization are rowHeight and padSize. For a complete list of dimension configuration options, check out the ChartConfig page in the API documentation.

Rendering configuration

There are several callback function properties on the ChartConfig that, when supplied, override the default behavior of the Chart.render() method. The rendering section describes the rendering processing and the purpose of these callback functions in detail, but we’ll note them here for the sake of completeness:

updateLayout()
updateRowCount()
updateDimensions()
updateDomain()
draw()

Default axes

A default horizontal axis is rendered in the overflow viewport if the chart.addAxis() function is called. Specifically, it is positioned in the bounding box of the upper section of the SVG pad, outside of the bounding box of the viewport. The default chart.draw() implementation calls the addAxis() function.

For example, the following code:

let chart = new Chart({
    selector: "div#soda-chart",
});

chart.render({});

will produce something like:

_images/chart-axis.png — A blank Chart set up to render a default horizontal axis.

Adjusting the padSize may cause the axis to be positioned such that it is too low or too high.

If the default horizontal axis doesn’t work for your visualization, you can place a horizontal axis wherever you’d like using the horizontalAxis function.

Row colors

If the rowColors property is configured, the rows in the Chart will be rendered with those colors in a repeating pattern. If the rowOpacity property is configured, the value will control the opacity of the rows.

For example,

let chart = new soda.Chart({
  selector: "div#soda-chart",
  rowColors: ["cyan", "green", "purple"],
  rowOpacity: 0.5,
});

chart.render({ rowCount: 10 });

will produce something like:

_images/chart-row-colors.png — A blank Chart set up with row colors cyan, green, and purple.

Zooming and panning

Charts can be configured to enable zooming and panning by setting the zoomable property to true on the ChartConfig.

let chart = new Chart({
    selector: "div#soda-chart",
    zoomable: true
});

Zoomable Charts may be zoomed with ctrl + scrolling and panned by clicking and dragging. Any glyphs added to the Chart using SODA’s rendering API will respond appropriately to zooming and panning events. Any SVG elements that are added to the Chart by other means will remain unaltered.

Zooming may be constrained with the zoomConstraint property, which is a tuple that bounds the scaling factor.

For example,

let chart = new Chart({
    selector: "div#soda-chart",
    zoomable: true,
    zoomConstraint: [1, 100]
});

would prevent the chart from being zoomed out from the point it’s initially rendered at, and would allow zooming in by a factor of 100.

Panning may be constrained with the domainConstraint property, which is a callback function that returns the desired extent of the domain. The callback function receives the Chart itself as an argument.

For example:

let chart = new Chart({
    selector: "div#soda-chart",
    zoomable: true,
    // chart.initialDomain is the extent of the
    // domain set during the last render call
    domainConstraint: (chart) => chart.initialDomain
});

would prevent the Chart from being panned outside of the domain set by the last render() call.

Resizing

Charts can be configured to automatically resize themselves as their DOM container resizes by setting the resizable property to true on the ChartConfig.

let chart = new Chart({
    selector: "div#soda-chart",
    resizable: true
});

If this is enabled, when the Chart’s container is resized (e.g. when the browser window is resized), the Chart will re-render itself to display the same domain in the new range. As with zooming, any glyphs rendered with SODA will be affected, but any SVG elements added by other means will remain unaffected.

Zoom and resize callbacks

You can optionally supply both a postZoom and a postResize callback in the ChartConfig, which will be called after zoom/pan events and resize events, respectively.

For example:

let chart = new Chart({
    selector: "div#soda-chart",
    zoomable: true,
    resizable: true,
    postZoom() {
        console.log(this, "zoomed!");
    },
    postResize() {
        console.log(this, "resized!");
    }
});

Chart scales

To help position glyphs in the viewport, Charts maintain a couple of scale functions.

The first is the xScale, which maps from semantic coordinates (e.g. positions in a sequence) to pixel x-coordinates relative to the origin of the viewports. The xScale is used extensively by the defaults in the rendering API, and also in the zooming, panning, and resizing logic.

The second is the yScale, which maps row numbers to the pixel y-coordinates that delineate each of the conceptual rows in the Chart’s viewport.

Chart observers

The Chart observer is a SODA pattern in which an object can respond to changes in a Chart. The pattern is currently not very fleshed out, and it is currently only used by the ZoomSyncer object, which synchronizes the zoom level across multiple Charts. At some point, we will overhaul this system to make it much more useful, but you may find some use from it in its current state.

You can create an object that extends the abstract class ChartObserver, add Charts to it, and then configure Charts to call Chart.alertObservers().

Loading annotation data

Before jumping into building a SODA visualization, you’ll probably want to consider how you’re going to get your data loaded into the the browser in a form that SODA is happy with. On this page, we’ll cover just that.

For a high-level overview of the process, you can refer to this flowchart:

Using a SODA-tailored REST API

In an ideal world for SODA, your data source would have two qualities:

The data is stored in a database with an accompanying REST API
The REST API returns JSONs that may be serialized directly into objects that implement the Annotation interface

If you can configure a database in this fashion, you can load data into a SODA visualization with very little effort.

Example SODA-tailored REST API

We host a toy database that we use to produce several of the visualizations in the Examples section. The database has a REST API that exposes the endpoint https://sodaviz.org/data/examples/default, which returns a JSON string describing Dfam annotations:

// the response of a GET request to our toy database
[
  {
    "id": "dfam-nrph-1", // <- this satisfies the id property
    "start": 10464,      // <- this satisfies the start property
    "end": 10954,        // <- this satisfies the end property
    "strand": "-",
    "family": "TAR1",
    "evalue": 1.1E-103,
    "divergence": 10.26
  },
  {
    "id": "dfam-nrph-2",
    "start": 10826,
    "end": 11463,
    "strand": "-",
    "family": "TAR1",
    "evalue": 4.1E-165,
    "divergence": 8.78
  },
  ...
]

Fetch requests and object serialization

One of the easiest ways to perform a GET request in the browser is to use the JavaScript fetch API. If the response to your GET request is a JSON string, it can be automatically serialized into JavaScript objects.

For example, we might load the JSON from the above section with the following code:

// an example fetch request and subsequent JSON serialization

fetch("https://sodaviz.org/data/examples/default")
  .then((response) => response.json())
  .then((annotations: soda.Annotation[]) => doSomething(annotations));
                                         // ^^ you would replace doSomething()
                                         //    with a SODA rendering API call

Defining an interface for your data

The code in the previous section will certainly produce objects that SODA can use, but it has a small problem: we haven’t told TypeScript that these objects have data properties other than id, start, and end. If we want to make use of these properties to influence our visualization, we’ll need to write a simple interface that better describes our data:

interface DfamAnnotation extends soda.Annotation { // <- we get id, start, and
    strand: string;                                //    end for free if we
    family: string;                                //    extend soda.Annotation
    evalue: number;     // <- the property names and types
    divergence: number; //    need to match the JSON fields
}

fetch("https://sodaviz.org/data/examples/default")
  .then((response) => response.json())
  .then((annotations: soda.DfamAnnotation[]) => doSomething(annotations));
                    // ^^ now we can tell the TypeScript compiler
                    //    that the objects we serialized are described
                    //    by the DfamAnnotation interface

Note

If you’re using JavaScript rather than TypeScript, you don’t need to write interfaces to provide type information.

Using a standard REST API

If you’re planning to use a public database resource (e.g. UCSC, Ensembl, etc.), it’s unlikely that the REST API will be implemented in the quite the same manner described in the previous section. However, they tend to respond in a format that can be easily coerced into a format that makes SODA happy.

In this section, we’ll look at how you might load annotation data using the UCSC Genome Browser API using data from the Pfam in GENCODE track.

Format a GET request

The first step is to figure out which REST API endpoint will return the data you’re interested in. For example, the UCSC genome browser API has an endpoint that returns annotations for a chosen annotation track, which is at the url: https://api.genome.ucsc.edu/getData/track.

Digging into the UCSC API documentation a bit, we’ll discover that this endpoint has a handful of aptly named parameters:

track - the annotation track we want data from
genome - the genome that we want annotations for
chrom - the chromosome that we want annotations for
start - the start coordinate of our query in base pairs
end - the end coordinate of our query in base pairs

With this information in hand, we can craft a GET request, which might look something like:

https://api.genome.ucsc.edu/getData/track?genome=hg38;track=ucscGenePfam;chrom=chr1;start=0;end=100000

Determine the response structure

Now we need to get a sense of what the response looks like. An easy way to figure out how responses are structured is to just paste the link in your browser, which should dump the text onto your screen. You might find it useful to paste that text in a JSON formatter to make it a bit easier to digest.

The response to the above query looks like:

{
  "downloadTime":"2022:08:25T19:44:29Z",  // <-
  "downloadTimeStamp":1661456669,         // <-
  "genome":"hg38",                        // <-
  "dataTime":"2022-05-15T13:39:52",       // <- you'll often find lots of
  "dataTimeStamp":1652647192,             // <- metadata that comes along
  "trackType":"bed 12",                   // <- for the ride. we are just
  "track":"ucscGenePfam",                 // <- going to ignore all of this
  "start":0,                              // <-
  "end":100000,                           // <-
  "chrom":"chr1",                         // <-
  "ucscGenePfam":[  // <- this is the data we are after
    {
      "bin":585,
      "chrom":"chr1",
      "chromStart":69168,
      "chromEnd":69969,
      "name":"7tm_4",
      "score":0,
      "strand":"+",
      "thickStart":0,
      "thickEnd":0,
      "reserved":0,
      "blockCount":1,
      "blockSizes":"801,",
      "chromStarts":"0,"
    },
    ... // <- for the sake of brevity, we've
        //    removed some members of this array
  ],
  "itemsReturned":3
}

You’ll probably notice that the data we’re interested in is stored on the ucscGenePfam property of the object.

Defining interfaces for responses

Once we’ve got the response structure figured out, we can start crafting our data-loading code, starting with a couple interfaces:

// first we'll describe the individual annotation records
interface PfamRecord {
  chrom: string;        // <- we'll specify only the properties we actually
  chromStart: number;   // <- care about. the rest of them will be there
  chromEnd: number;     // <- regardless, but we don't need to tell that to
  score: number;        // <- to the TypeScript compiler
  strand: string;       // <-
}

// now we can precisely describe the location and
// type of the annotation records in the response
interface UcscResponse {
    ucscGenePfam: PfamRecord[]
}

Producing proper Annotation objects

Now we can serialize a response into objects, but we need a way to shape them into a form that SODA is happy to work with.

Our PfamRecord interface fails to comply with the Annotation interface in two ways: (i) we’ve got the start and end properties, but they are named chromStart and chromEnd; and (ii) we don’t have the id property, and we don’t actually have any data that could be used for it. Here, we’ll look at a couple strategies to fix these issues.

Using augment()

One approach is to use SODA’s augment function. In short, augment() takes a list of any JavaScript objects and some instructions on how to transform them into objects that comply with the Annotation interface. There’s a subtle but important nuance to using augment(): if you set the virtual flag to true on a property, the callback function will be evaluated and the value will be added as a real property on the object, but if you omit virtual or set it to false, the callback function will be added as a getter for that property.

Note

This code block starts to dip into some of TypeScripts more nuanced language features, namely intersection types and generics.

// PfamAnnotation is a type alias for the type intersection of
// the PfamRecord and soda.Annotation types
type PfamAnnotation = PfamRecord & soda.Annotation

fetch(
    "https://api.genome.ucsc.edu/getData/track?genome=hg38;track=ucscGenePfam;chrom=chr1;start=0;end=100000"
)
.then((response) => response.json())
.then((response) => response.json())
.then((response: UcscResponse) => response.ucscGenePfam)
.then((records: PfamRecord[]) =>
  soda.augment<PfamRecord>({  // <- augment has a generic type parameter R, and
    objects: records,         //    it returns the type (R & soda.Annotation)
    id: { fn: () => soda.generateId("pfam") },         // <- real property
    start: { fn: (r) => r.chromStart, virtual: true }, // <- getter
    end: { fn: (r) => r.chromEnd, virtual: true },     // <- getter
  })
)
.then((annotations: PfamAnnotation[]) => doSomething(annotations));

Writing a class

If you want a bit more control over your objects, you can write a class instead. That might look something like:

class PfamAnnotation implements soda.Annotation {
  id: string;
  start: number;
  end: number;
  score: number;
  strand: string;

  constructor(record: PfamRecord) {
    this.id = soda.generateId("pfam");
    this.start = record.chromStart;
    this.end = record.chromEnd;
    this.score = record.score;
    this.strand = record.strand;
  }
}
fetch(
  "https://api.genome.ucsc.edu/getData/track?genome=hg38;track=ucscGenePfam;chrom=chr1;start=0;end=100000"
)
  .then((response) => response.json())
  .then((response: UcscResponse) => response.ucscGenePfam)
  .then((records: PfamRecord[]) => records.map((r) => new PfamAnnotation(r)))
  .then((annotations: PfamAnnotation[]) => {
    console.log(annotations);
    chart.render({ annotations });
  });

Local files

If you are interested in loading local files into SODA, you’ll need to come up with a way to load the file into the browser, then come up with a way to parse it into suitable objects. In this section we’ll give a simple example on how to accomplish that.

Setting up a webpage to accept a file input

To start off, you might add a file input tag to your page HTML:

// hypothetical index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>soda viz</title>
  </head>
  <body>
    <div class="soda-chart">            // <- your visualization would live here
    <input type="file" id="file-input"> // <- here's your file input
    <button type="button" id="submit">  // <- here's a button we can set up to
      Submit                            //    submit the file
    </button>
  </body>
<script src="main.js"></script>         // <- this would point to your
</html>                                 //    data loading + SODA code

Next, you might write some TypeScript that loads your data files:

// hypothetical main.js

function loadData() {
    let input = <HTMLInputElement>document.getElementById("file-input")!;
    let file = input.files![0];
    file.text()
      .then((data: string) => submitData(data)); // <- submitData() would be
}                                                //    responsible for parsing
                                                 //    the file and so on
document.getElementById("submit")!
  .addEventListener("click", loadData);

This gets us the file loaded into browser memory as a string. Moving on, we’ll need to decide how we’re going to process it into objects. The approach we take will, unsurprisingly, depend on how your file is formatted.

JSON files

If the file happens to be a JSON string that describes record objects, you can employ the strategies presented in the above sections concerning REST APIs. We’ll note that if your data files are products of your own tools, you might want to format your output as a SODA-tailored JSON so that you can simplify the loading process.

BED or GFF3 files

If the file is BED or GFF3 formatted, you can use SODA’s parsers to produce objects. For example, let’s say you loaded a the following BED data into the browser as a string:

chr7    127471196  127472363  Pos1  0  +  127471196  127472363  255,0,0
chr7    127472363  127473530  Pos2  0  +  127472363  127473530  255,0,0
chr7    127473530  127474697  Pos3  0  +  127473530  127474697  255,0,0
chr7    127474697  127475864  Pos4  0  +  127474697  127475864  255,0,0
chr7    127475864  127477031  Neg1  0  -  127475864  127477031  0,0,255
chr7    127477031  127478198  Neg2  0  -  127477031  127478198  0,0,255
chr7    127478198  127479365  Neg3  0  -  127478198  127479365  0,0,255
chr7    127479365  127480532  Pos5  0  +  127479365  127480532  255,0,0
chr7    127480532  127481699  Neg4  0  -  127480532  127481699  0,0,255

You can parse it into BedAnnotation objects like:

// suppose this is our submitData() function from above
function submitData(data: string) {
  let annotations: soda.BedAnnotation[] = soda.parseBedRecords(data);
  doSomething(annotations) // <- again, you'd probably be replacing
}                          //    doSomething() with SODA rendering calls

Anything else

If your data are in some other format, you’re more or less left to your own devices. Unless you have something remarkably strange, the process will probably end up being quite similar to the strategies described on this page.

If you think there’s a case to be made for adding more parsers to the SODA API, we’d be interested in hearing about it.

Rendering

SODA’s rendering API takes Annotation objects and represents them as SVG glyphs inside of Chart viewports in the DOM. This section explains the ins and out of that process.

Glyph rendering functions

To render glyphs, you simply make a call to a glyph rendering function with an appropriate GlyphConfig object. The properties on the config object describe which Annotation objects to use, where to render the glyphs, and how to style the glyphs. Each glyph rendering function has a corresponding config defined by an interface. For example, a simple call to the rectangle function with a minimally specified RectangleConfig may look like:

rectangle({
  chart: chart,             // "chart" is a Chart object
  annotations: annotations, // "annotations" is an array of Annotation objects
});

Glyph selectors

The selector property in a GlyphConfig is a string used to help differentiate between distinct collections of glyphs that have been rendered using the same set of Annotation objects in the same Chart. SODA applies the selector as a CSS class on the DOM elements that make up the glyphs.

The selector property also allows a nuanced feature: if you use the same selector string in a subsequent call to a glyph rendering function, the glyphs from the prior call using that selector will be replaced.

Glyph properties

The properties in a GlyphConfig that control glyph styling are typed as GlyphProperty, which is simply an alias of the type union of a static value and a GlyphCallback. A GlyphCallback is another type alias for a simple callback function that takes an AnnotationDatum as the sole argument and returns a value.

For example, if we were to add static GlyphPropertie to a rectangle() call, it might look like:

rectangle({
  chart: chart,
  annotations: annotations,
  fillColor: "red",
  fillOpacity: 0.5
});

To illustrate how to take full advantage of the flexibility of GlyphProperties, imagine we were using a custom Annotation data type:

interface CustomAnnotation implements Annotation {
  id: string;       // <- the fields required by Annotation
  start: number;
  end: number;
  color: string;    // <- our custom fields
  score: number;
}

Then, we could use callback GlyphProperties like:

// explicit type parameters have been added here for clarity, but
// the TypeScript compiler is usually smart enough to infer them
rectangle<CustomAnnotation, Chart<RenderParams>>({
  chart: chart,
  annotations: annotations,
  fillColor: (d: AnnotationDatum<CustomAnnotation, Chart<RenderParams>>) =>
    d.a.color,
  fillOpacity: (d: AnnotationDatum<CustomAnnotation, Chart<RenderParams>>) =>
    d.a.score
});

Check out the examples section to see more examples.

The canonical rendering pattern

In SODA, the canonical rendering pattern is to define a rendering routine inside of a Chart object. The rendering routine described here is a pattern that we find straightforward, but it is by no means the only way to achieve a visualization. Once you know a bit about how SODA works, you should find it pretty easy to extend the Chart class and assume greater control over the fine details of rendering process.

Default rendering routine

The default rendering routine is broken up into several steps, which will be described in the following sections.

RenderParams

The RenderParams is an object that is passed as the sole argument into Chart.render(). The default RenderParams implementation looks like:

interface RenderParams {
  annotations?: Annotation[];   //<- the list of Annotation objects to render
  start?: number;               //<- the start of the interval to be rendered
  end?: number;                 //<- the end of the interval to be rendered
  rowCount?: number;            //<- fix the height of the chart to a number of rows
}

You’ll notice that every property on the interface is optional. This means you can think of the default RenderParams implementation as something of a suggestion. However, the default rendering routine is set up to respond to the presence of each of the properties in this implementation. With that in mind, you may find some use in adapting or extending the default RenderParams.

Chart.render()

The render() method calls each of the configurable rendering callbacks in succession. Each of the callbacks receives the RenderParams object as an argument. The callbacks can be overwritten in the ChartConfig or reassigned at runtime.

public render(params: P): void {
  this.renderParams = params;
  this.updateLayout(params);
  this.updateRowCount(params);
  this.updateDimensions(params);
  this.updateDomain(params);
  this.draw(params);
  this.postRender(params);
}

Chart.updateLayout()

The updateLayout() callback is responsible for producing a VerticalLayout for the Chart. By default, the rendering API uses the Chart’s layout object to vertically position glyphs into rows. By passing a list of Annotation objects into one of SODA’s layout functions, a VerticalLayout that guarantees no horizontal overlap will be produced.

The default updateLayout method looks like:

public defaultUpdateLayout(params: P): void {
  if (params.annotations != undefined) {
    this.layout = intervalGraphLayout(params.annotations);
  }
}

Chart.updateRowCount()

The updateRowCount() callback is responsible for updating the Chart’s rowCount property. A handful of methods use the rowCount property to properly adjust the heights of the Chart’s DOM elements.

The default updateRowCount method looks like:

public defaultUpdateRowCount(params: P): void {
  this.rowCount =
    params.rowCount != undefined ? params.rowCount : this.layout.rowCount;
}

Chart.updateDimensions()

The updateDimensions() callback is responsible for updating the Chart’s DOM element dimensions to accommodate the render. By default, only the Chart’s vertical dimensions are adjusting during a render call, and it is assumed that the rowCount is properly set before the method is called.

The default updateDimensions method looks like:

public defaultUpdateDimensions(params: P): void {
  this.updateDivHeight();
  this.updatePadHeight();
  this.updateViewportHeight();
}

Chart.updateDomain()

The updateDomain() callback is responsible for updating the Chart’s domain. This effectively controls the interval that is initially displayed after the render call finishes. Adjusting the domain can be thought of as applying zooming or panning on the Chart’s viewport.

The default updateDomain method looks like:

public defaultUpdateDomain(params: P): void {
  let domain = this.domain;
  if (params.start != undefined && params.end != undefined) {
    domain = [params.start, params.end];
  } else if (params.annotations != undefined) {
    domain = Chart.getDomainFromAnnotations(params.annotations);
  }
  this.initialDomain = domain;
  this.domain = domain;
}

Chart.draw()

The draw() callback is responsible for using the rendering API to place glyphs in the Chart. The default implementation calls Chart.addAxis() and renders the annotations as rectangle glyphs.

The default draw method looks like:

public defaultDraw(params: P): void {
  this.addAxis();
  rectangle({
    chart: this,
    annotations: params.annotations || [],
    selector: "soda-rect"
  });
}

Customizing the rendering routine

In building your own SODA visualization, most of the work is likely to be in customizing the draw() rendering callback. The default draw() produces a lackluster display of black rectangle glyphs. If you wanted to add some color, you could do something like this when you instantiate your Chart:

let chart = new Chart({
  selector: "div#soda-chart",
  draw(this, params) {
    this.addAxis()
    rectangle({
      chart: this,
      annotations: params.annotations || [],
      selector: "soda-rect",
      fillColor: "cyan" // <- this will make the rectangle glyphs cyan
    })
  }
});

Understanding the nuances of customizing the rendering routine is probably best learned by example, so check out the examples section to learn more.

Interactivity

SODA allows you to define callback functions that are called whenever a glyph is clicked or hovered. The callback functions are loosely typed by InteractionCallback. The InteractionCallback type serves as an indicator of the arguments SODA will pass to your callback function when it is executed:

type InteractionCallback<A extends Annotation, C extends Chart<any>> = {
  (
    s: d3.Selection<any, AnnotationDatum<A, C>, any, any>, // <- a D3 selection to the glyph's DOM element
    d: AnnotationDatum<A, C>                               // <- a reference to the Annotation object and the Chart
  ): void;
};

These arguments are passed in by default, and you are free to arbitrarily define the function body. If you already know a bit about D3 (or are willing to learn), you can use the Selection argument to modify the glyph in the DOM. With the AnnotationDatum argument, you gain access to the Annotation that the glyph was rendered with and the Chart that it is rendered in.

The interaction API is similar to the glyph rendering API: you simply make a call to an interaction function with an appropriate InteractionConfig object. For example, a simple call to the clickBehavior function with ClickConfig may look like:

clickBehavior({
    annotations: annotations,     // <- "annotations" is an array of Annotation objects
    click: (s, d) => {            // <- "click" is applied
      alert(`${d.a.id} clicked`)
    }
});

Glyph mapping

Internally, SODA maps Annotation objects to the glyphs that they have been used to render. Specifically, keys are built using the id property of the Annotation object, the selector used in the rendering call, and the id property of the target Chart. The mapping information can be accessed with the queryGlyphMap function, which returns D3 selections of the DOM elements that make up the glyphs. You can optionally specify any number of the components of the keys to build a query, effectively changing the granularity of the search.

Calls to the queryGlyphMap function may look like:

// this will return a single glyph
let specificGlyph = queryGlyphMap({
    id: "ann-1",
    chart: chart,
    selector: "gene-rectangles",
})

// this will return all of the glyphs in "chart"
// rendered with the selector: "gene-rectangles"
let rectanglesInChart = queryGlyphMap({
    chart: chart,
    selector: "gene-rectangles"
})

// this will return all of the glyphs in every Chart
// rendered with the selector: "gene-rectangles"
let allRectangles = queryGlyphMap({
    selector: "gene-rectangles"
})

// this will return all of the glyphs in "chart"
let allInChart = queryGlyphMap({
    chart: chart,
})

// this will return every glyph in every Chart
let allGlyphs = queryGlyphMap({})

This guide explains SODA concepts and serves as a starting point for understanding how SODA functions at a high level. If you find something that seems missing or poorly explained, we’re interested in hearing about it

Examples

This page shows some examples of simple SODA visualizations. Each example has an embedded CodePen, which can be edited live by selecting the “TypeScript” tab.

The data from each example is loaded with a fetch call to the Sodaviz example database API, which returns JSON strings that serialize directly into JavaScript objects that implement the Annotation interface.

For example, creating a chart and rendering data from a fetch request looks something like:

// create a chart in the div with the ID "soda-chart"
let chart = new soda.Chart({ selector: "div#soda-chart" });

// fetch the example data from this endpoint
fetch("https://sodaviz.org/data/examples/default")
  // when we get the response, call json() to serialize it into objects
  .then((response: Response) => response.json())
  // when we have our objects, render them in the Chart
  .then((annotations: soda.Annotation[]) => {
    chart.render({ annotations: annotations }
  });

For the sake of brevity, the following examples omit some syntax, which leaves them looking a little more like:

let chart = new soda.Chart({ selector: "div#soda-chart" });

fetch("https://sodaviz.org/data/examples/default")
  .then(response => response.json())
  .then(annotations => chart.render({ annotations }));

Tip

Each example can be zoomed with ctrl + scroll wheel and panned by clicking and dragging.

Simple rectangles

import * as soda from "https://cdn.skypack.dev/@sodaviz/soda@0.12.0";

let chart = new soda.Chart({
  selector: "div#soda-chart",
  zoomable: true,
  resizable: true
});

fetch("https://sodaviz.org/data/examples/default")
  .then(response => response.json())
  .then(annotations => chart.render({ annotations });

See the Pen simple rectangles 0.12.0 by Jack Roddy (@jackroddy) on CodePen.

Styled rectangles

import * as soda from "https://cdn.skypack.dev/@sodaviz/soda@0.12.0";
import * as d3 from "https://cdn.skypack.dev/d3@7.4.4";

// we'll use this D3 color scale later to easily pick colors
let colors = d3.scaleOrdinal(d3.schemeTableau10);

// we'll define a custom Annotation interface that
// describes some extra fields that exist in our records
interface CustomAnnotation extends soda.Annotation {
  family: string;
  divergence: number;
}

// we'll define a custom RenderParams interface that
// describes our custom render data payload
interface CustomRenderParams extends soda.RenderParams {
  annotations: CustomAnnotation[];
}

// we'll explicitly type our Chart with our CustomRenderParams
// so that the TypeScript compiler knows what we're intending
let chart = new soda.Chart<CustomRenderParams>({
  selector: "div#soda-chart",
  zoomable: true,
  resizable: true,
  // we'll write a custom draw() callback to overwrite
  // the default rendering behavior of the Chart
  draw(params) {
    this.addAxis();
    soda.rectangle({
      chart: this,
      annotations: params.annotations,
      // these callbacks will be evaluated for each glyph
      fillColor: (d) => colors(d.a.id),
      fillOpacity: (d) => (100 - d.a.divergence) / 100,
      strokeColor: "none"
    });
  }
});

fetch("https://sodaviz.org/data/examples/default")
  .then(response => response.json())
  .then(annotations => chart.render({ annotations });

See the Pen styled rectangles 0.12.0 by Jack Roddy (@jackroddy) on CodePen.

Dynamic text

import * as soda from "https://cdn.skypack.dev/@sodaviz/soda@0.12.0";
import * as d3 from "https://cdn.skypack.dev/d3@7.4.4";

let colors = d3.scaleOrdinal(d3.schemeTableau10);

interface CustomAnnotation extends soda.Annotation {
  family: string;
}

interface CustomRenderParams extends soda.RenderParams {
  annotations: CustomAnnotation[];
}

let chart = new soda.Chart<CustomRenderParams>({
  selector: "div#soda-chart",
  rowHeight: 14,
  zoomable: true,
  resizable: true,
  draw(params) {
    this.addAxis();
    soda.rectangle({
      chart: this,
      annotations: params.annotations,
      fillColor: (d) => colors(d.a.id),
      strokeColor: "none"
    });
    // we'll call dynamicText() with the same Annotations
    // that we're using to render the rectangles
    soda.dynamicText({
      chart: this,
      annotations: params.annotations,
      // the dynamic text glyph displays the longest string that will
      // fit into the space it has available in the viewport
      text: (d) => [`${d.a.family} - ${d.a.id}`, d.a.family, "..."]
    });
  }
});

fetch("https://sodaviz.org/data/examples/default")
  .then((response) => response.json())
  .then((annotations) => chart.render({ annotations }));

See the Pen text 0.11.0 by Jack Roddy (@jackroddy) on CodePen.

Interactivity

import * as soda from "https://cdn.skypack.dev/@sodaviz/soda@0.12.0";
import * as d3 from "https://cdn.skypack.dev/d3@7.4.4";

let colors = d3.scaleOrdinal(d3.schemeTableau10);

interface CustomAnnotation extends soda.Annotation {
  family: string;
}

interface CustomRenderParams extends soda.RenderParams {
  annotations: CustomAnnotation[];
}

let chart = new soda.Chart<CustomRenderParams>({
  selector: "div#soda-chart",
  rowHeight: 20,
  zoomable: true,
  resizable: true,
  // we'll write a simple draw() callback that
  // gives us colored rectangles
  draw(params) {
    this.addAxis();
    soda.rectangle({
      chart: this,
      annotations: params.annotations,
      fillColor: (d) => colors(d.a.id),
      strokeColor: "none"
    });
  },
  // now we'll write a postRender() callback that
  // applies some interactions to the glyphs
  postRender(params) {
    soda.clickBehavior({
      chart: this,
      annotations: params.annotations,
      // this function is evaluated when a glyph is clicked
      click: (
        // s is a d3 Selection of the glyph in the DOM
        s: d3.Selection<any, any, any, any>,
        // d is the AnnotationDatum bound to the glyph
        d: soda.AnnotationDatum<CustomAnnotation, Chart<CustomRenderParams>>
      ) => alert(`${d.a.id} clicked`)
    });
    soda.hoverBehavior({
      chart: this,
      annotations: params.annotations,
      // this function is evaluated when a glyph is moused over
      mouseover: (s, d) => s.style("stroke", "black"),
      // this function is evaluated when a glyph is no longer moused over
      mouseout: (s, d) => s.style("stroke", "none")
    });
    soda.tooltip({
      chart: this,
      annotations: params.annotations,
      text: (d) => d.a.family
    });
  }
});

fetch("https://sodaviz.org/data/examples/default")
  .then((response) => response.json())
  .then((annotations) => chart.render({ annotations }));

See the Pen interactions 0.12.0 by Jack Roddy (@jackroddy) on CodePen.

Plot annotations

import * as soda from "https://cdn.skypack.dev/@sodaviz/soda@0.12.0";

interface CustomRenderParams extends soda.RenderParams {
  annotations: PlotAnnotation[];
}

let chart = new soda.Chart<CustomRenderParams>({
  selector: "div#soda-chart",
  zoomable: true,
  resizable: true,
  rowHeight: 100,
  draw(params) {
    this.addAxis();
    soda.linePlot({
      chart: this,
      annotations: params.annotations
    });
    soda.verticalAxis({
      chart: this,
      // setting this allows the axes to overflow into
      // the SVG pad, preventing them from clipping
      target: soda.BindTarget.Overflow,
      annotations: params.annotations
    });
  }
});

fetch("https://sodaviz.org/data/examples/plots")
  .then((response) => response.json())
  .then((annotations) => chart.render({ annotations }));

See the Pen plots 0.11.0 by Jack Roddy (@jackroddy) on CodePen.

Sequence annotations

import * as soda from "https://cdn.skypack.dev/@sodaviz/soda@0.12.0";

interface CustomRenderParams extends soda.RenderParams {
  annotations: SequenceAnnotation[];
}

let chart = new soda.Chart<CustomRenderParams>({
  selector: "div#soda-chart",
  zoomable: true,
  resizable: true,
  draw(params) {
    this.addAxis();
    soda.sequence({
      chart: this,
      annotations: params.annotations
    });
  }
});

fetch("https://sodaviz.org/data/examples/sequence")
  .then((response) => response.json())
  .then((annotations) => chart.render({ annotations }));

See the Pen sequence 0.11.0 by Jack Roddy (@jackroddy) on CodePen.

Api

Classes

AnnotationGroup

class AnnotationGroup<A extends Annotation>

An Annotation class that contains a group of Annotations.

Type parameters

A: Annotation

Constructors

(config: AnnotationGroupConfig <A>): AnnotationGroup

Type parameters

A: Annotation

Parameters

config: AnnotationGroupConfig

Properties

annotations

annotations: A []

The group of Annotations that live in this object.

end

end: number

The end coordinate of the Annotation.

id

id: string

A unique identifier for the Annotation.

start

start: number

The start coordinate of the Annotation.

Methods

add

add(ann: A | A []): void

Add an Annotation or list of Annotations to the group.

Parameters

ann: A | A []

Returns: void

addAnnotation

addAnnotation(ann: A): void

Add an Annotation to the group.

Parameters

ann: A

Returns: void

Chart

class Chart<P extends RenderParams>

This is used to render Annotation objects as glyphs in the browser.

Type parameters

P: RenderParams

Constructors

(config: ChartConfig <P>): Chart

Type parameters

P: RenderParams

Parameters

config: ChartConfig

Properties

_divHeight

_divHeight: undefined | string

The CSS height property of the Chart’s div.

_divMargin

_divMargin: undefined | string | number

The CSS margin property of the Chart’s div.

_divOutline

_divOutline: undefined | string

The CSS outline property of the Chart’s div.

_divOverflowX

_divOverflowX: undefined | string

The CSS overflow-x property of the Chart’s div.

_divOverflowY

_divOverflowY: undefined | string

The CSS overflow-y property of the Chart’s div.

_divWidth

_divWidth: undefined | string

The CSS width property of the Chart’s div.

_padHeight

_padHeight: undefined | string

The stored value of the pad SVG height property.

_padWidth

_padWidth: undefined | string

The stored value of the pad SVG width property.

_renderParams

_renderParams: undefined | P

The last used render parameters.

_transform

_transform: Transform

The Transform object that describes the current zoom transformation.

_viewportHeight

_viewportHeight: undefined | string

The stored value of the viewport SVG height property.

_viewportWidth

_viewportWidth: undefined | string

The stored value of the viewport SVG width property.

containerSelection

containerSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s DOM container. This is a pre-existing DOM element (probably a div).

defSelection

defSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s defs element. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

divSelection

divSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s div container. This is created when the Chart is instantiated and placed inside of the selected container in the DOM.

domainConstraint

domainConstraint: (chart: Chart <P>): None

This constrains the Chart’s domain, which in turn constrains both zoom level and panning. The parameter is a callback function that is evaluated after each zoom event to produce an interval that constrains the domain.

draw

draw: (params: P): void

The rendering callback that should be responsible for drawing glyphs with the rendering API.

glyphModifiers

glyphModifiers: GlyphModifier <any, any> []

A list of GlyphModifiers that control the glyphs rendered in the Chart.

highlightSelection

highlightSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s highlight.

id

id: string

A unique identifier for the Chart.

initialDomain

initialDomain: None

The initialized domain of the Chart when render() is called with the initializeXScale flag.

layout

layout: VerticalLayout

leftPadSize

leftPadSize: number

The number of pixels of padding on the left side of the Chart.

lowerPadSize

lowerPadSize: number

The number of pixels of padding on the bottom of the Chart.

observers

observers: ChartObserver []

A list of observers attached to the Chart.

overflowViewportSelection

overflowViewportSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s viewport that allows rendering overflow.

padSelection

padSelection: Selection <any, any, any, any>

A d3 selection of the viewport’s padding container.

padSize

padSize: number

The number of pixels of padding around each edge of the Chart.

postRender

postRender: (params: P): void

The callback function that the Chart executes after render() is called.

postResize

postResize: (): void

The callback function that the Chart executes after resize() is called.

postZoom

postZoom: (): void

The callback function that the Chart executes after zoom() is called.

resizable

resizable: boolean

This controls whether or not the Chart has automatic resizing enabled.

rightPadSize

rightPadSize: number

The number of pixels of padding on the right side of the Chart.

rowColors

rowColors: undefined | string []

A list of colors that will color the Chart’s rows in a repeating pattern.

rowCount

rowCount: number

The number of rows in the Chart.

rowHeight

rowHeight: number

The height in pixels of a horizontal row in the Chart. This defaults to a value of 10.

rowOpacity

rowOpacity: number

The opacity of the colored row stripes.

selector

selector: string

A string that can be used to uniquely select the target DOM container.

updateDimensions

updateDimensions: (params: P): void

The rendering callback function that should be responsible for updating the Chart’s DOM element dimensions.

updateDomain

updateDomain: (params: P): void

The rendering callback function that should be responsible for updating the domain of the Chart.xScale property.

updateLayout

updateLayout: (params: P): void

The rendering callback function that should be responsible for updating the Chart.layout property.

updateRowCount

updateRowCount: (params: P): void

The rendering callback function that should be responsible for updating the Chart.rowCount property.

upperPadSize

upperPadSize: number

The number of pixels of padding on the top of the Chart.

viewportHeightPx

viewportHeightPx: number

The stored height of the viewport SVG in pixels.

viewportSelection

viewportSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s viewport.

viewportWidthPx

viewportWidthPx: number

The stored width of the viewport SVG in pixels.

xScale

xScale: ScaleLinear <number, number>

A D3 scale that the Chart will use to translate between semantic and viewport coordinates. This scale will be periodically re-scaled after zoom events.

yScale

yScale: (row: number): number

A simple function that maps from row numbers to the pixel y value of the corresponding row.

zoomConstraint

zoomConstraint: None

A Chart’s contents are scaled by a scaling factor k. If a zoomConstraint of the form [min_k, max_k] is provided, the scaling factor will be constrained to that range. This will not constrain panning.

zoomable

zoomable: boolean

This controls whether or not the Chart has zooming enabled.

Accessors

divHeight

get divHeight(): undefined | string | number

Gets the divHeight property.

set divHeight(value: undefined | string | number): void

Sets the divHeight property. This directly adjusts the height CSS style property on the Chart’s div element.

divMargin

get divMargin(): undefined | string | number

Gets the divMargin property.

set divMargin(value: undefined | string | number): void

Sets the divMargin property. This directly adjusts the margin CSS style property on the Chart’s div element.

divOutline

get divOutline(): undefined | string

Gets the divOutline property.

set divOutline(value: undefined | string): void

Sets the divOutline property. This directly adjusts the outline CSS style property on the Chart’s div element.

divOverflowX

get divOverflowX(): undefined | string

Gets the divOverflowX property.

set divOverflowX(value: undefined | string): void

Sets the divOverflowX property. This directly adjusts the overflow-x CSS style property on the Chart’s div element.

divOverflowY

get divOverflowY(): undefined | string

Gets the divOverflowY property.

set divOverflowY(value: undefined | string): void

Sets the divOverflowY property. This directly adjusts the overflow-y CSS style property on the Chart’s div element.

divWidth

get divWidth(): undefined | string | number

Gets the divWidth property.

set divWidth(value: undefined | string | number): void

Sets the divWidth property. This directly adjusts the width CSS style property on the Chart’s div element.

domain

get domain(): None

Gets the domain of the Chart’s x scale.

set domain(domain: None): void

Set the domain of the Chart’s x scale.

range

get range(): None

Gets the range of the Chart’s x scale.

set range(range: None): void

Set the range of the Chart’s x scale.

renderParams

get renderParams(): P

Getter for the Chart’s most recently used RenderParams.

set renderParams(params: P): void

Setter for the renderParams property.

transform

get transform(): Transform

Getter for the transform property. This also updates the internal transform on the Chart’s pad DOM element.

set transform(transform: Transform): void

Setter for the transform property.

viewportHeight

get viewportHeight(): undefined | string | number

Gets the viewportHeight property.

set viewportHeight(value: undefined | string | number): void

Sets the viewportHeight property. This directly adjusts the height SVG attribute on the Chart’s viewport SVG element.

viewportWidth

get viewportWidth(): undefined | string | number

Gets the viewportWidth property.

set viewportWidth(value: undefined | string | number): void

Sets the viewportWidth property. This directly adjusts the width SVG attribute on the Chart’s viewport SVG element.

Methods

addAxis

addAxis(): void

This adds a horizontal axis glyph to the top of the Chart.

Returns: void

addGlyphModifier

addGlyphModifier(modifier: GlyphModifier <A, C>, initialize: boolean): void

This adds a GlyphModifier to the Chart.

Type parameters

A: Annotation
C: Chart

Parameters

modifier: GlyphModifier <A, C>
initialize: boolean

Returns: void

addRowStripes

addRowStripes(): void

If the rowColors property has been defined, this method adds row stripes to the Chart.

Returns: void

alertObservers

alertObservers(): void

This calls each of this Chart’s attached observer’s alert() method.

Returns: void

applyGlyphModifiers

applyGlyphModifiers(): void

This applies each of the Chart’s GlyphModifier.zoom() methods, resulting in each of the glyphs in the Chart being appropriately redrawn for the current zoom level.

Returns: void

calculateContainerDimensions

calculateContainerDimensions(): DOMRect

This returns a DOMRect that describes the bounding box of the Chart’s container.

Returns: DOMRect

calculateContainerHeight

calculateContainerHeight(): number

This calculates and returns the Chart’s DOM container’s height in pixels.

Returns: number

calculateContainerWidth

calculateContainerWidth(): number

This calculates and returns the Chart’s DOM container’s width in pixels.

Returns: number

calculateDivDimensions

calculateDivDimensions(): DOMRect

This returns a DOMRect that describes the bounding box of the Chart’s div.

Returns: DOMRect

calculatePadDimensions

calculatePadDimensions(): DOMRect

This returns a DOMRect that describes the SVG pad dimensions.

Returns: DOMRect

calculatePadHeight

calculatePadHeight(): number

This calculates and returns the height of the SVG pad in pixels.

Returns: number

calculatePadWidth

calculatePadWidth(): number

This calculates and returns the width of the SVG pad in pixels.

Returns: number

calculateViewportDimensions

calculateViewportDimensions(): DOMRect

This returns a DOMRect that describes the bounding box of the viewport.

Returns: DOMRect

calculateViewportHeight

calculateViewportHeight(): number

This calculates and returns the height of the SVG viewport in pixels.

Returns: number

calculateViewportWidth

calculateViewportWidth(): number

This calculates and returns the width of the SVG viewport in pixels.

Returns: number

clear

clear(): void

This method clears all glyphs that have been rendered in the Chart.

Returns: void

clearHighlight

clearHighlight(selector: string): void

Clear highlights from the Chart. If a selector is supplied, only the highlight that matches that selector will be removed. Otherwise, all highlights will be removed.

Parameters

selector: string

Returns: void

configureResize

configureResize(): void

This configures the Chart to respond to browser resize events. The default resize behavior is for the Chart to maintain the current semantic view range, either stretching or shrinking the current view.

Returns: void

configureZoom

configureZoom(): void

This configures the chart’s viewport to appropriately handle browser zoom events.

Returns: void

defaultDraw

defaultDraw(params: P): void

The default draw() callback. It adds a horizontal axis and renders the RenderParams.annotations property as rectangles.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

defaultPostRender

defaultPostRender(): void

The default postRender() callback. It calls the Chart.applyGlyphModifiers() method.

Type parameters

P: RenderParams

Returns: void

defaultUpdateDimensions

defaultUpdateDimensions(params: P): void

The default updateDimensions() callback. It calls updateDivHeight(), updatePadHeight(), and updateViewportHeight(). The result is that the Chart should be tall enough to render the number of rows specified in the rowCount property.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

defaultUpdateDomain

defaultUpdateDomain(params: P): void

The default updateDomain() callback. If the start and end properties are set on the RenderParams, it uses those to set the domain. If they are not defined, it finds the minimum start and maximum end amongst the annotations property on the RenderParams. If there are no annotations on the RenderParams, it leaves the domain alone.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

defaultUpdateLayout

defaultUpdateLayout(params: P): void

The default updateLayout() callback. It calls intervalGraphLayout() on the annotations property of the provided RenderParams.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

defaultUpdateRowCount

defaultUpdateRowCount(params: P): void

The default updateRowCount() callback. It sets Chart.rowCount equal to Chart.layout.rowCount.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

disableZoom

disableZoom(): void

This disables zooming on the Chart.

Returns: void

domainFromMousemoveEvent

domainFromMousemoveEvent(transform: Transform, sourceEvent: WheelEvent, domainConstraint: None): None

This method produces a new domain from a browser mousemove event.

Parameters

transform: Transform
sourceEvent: WheelEvent
domainConstraint: None

Returns: None

domainFromWheelEvent

domainFromWheelEvent(transform: Transform, sourceEvent: WheelEvent, domainConstraint: None): None

This method produces a new domain from a browser wheel event.

Parameters

transform: Transform
sourceEvent: WheelEvent
domainConstraint: None

Returns: None

highlight

highlight(config: HighlightConfig): string

This method highlights a region in the Chart. If no selector is provided, one will be auto generated and returned by the function.

Parameters

config: HighlightConfig

Returns: string

initializeXScale

initializeXScale(start: number, end: number): void

This initializes an x translation scale with the provided coordinates and the dimensions of the Chart.

Parameters

start: number
end: number

Returns: void

removeRowStripes

removeRowStripes(): void

If they have been added, this method removes row stripes from the Chart.

Returns: void

render

render(params: P): void

This method executes the default rendering routine. It executes each rendering callback function in succession.

Parameters

params: P

Returns: void

resetTransform

resetTransform(): void

Reset the Chart’s transform to the zoom identity (no translation, no zoom).

Returns: void

resize

resize(): void

This resizes the Chart. If the Chart has resizing enabled, this is called automatically when a browser zoom event occurs.

Returns: void

setDivStyle

setDivStyle(property: string, value: undefined | string): void

Sets a style property on the Chart’s div selection.

Parameters

property: string
value: undefined | string

Returns: void

setPadAttribute

setPadAttribute(attribute: string, value: undefined | string): void

Sets an attribute on the Chart’s SVG pad.

Parameters

attribute: string
value: undefined | string

Returns: void

setViewportAttribute

setViewportAttribute(attribute: string, value: undefined | string): void

Sets an attribute on the Chart’s SVG viewports.

Parameters

attribute: string
value: undefined | string

Returns: void

updateDivHeight

updateDivHeight(): void

This updates the Chart’s div height to accommodate the rowHeight, rowCount, and pad sizes. If Chart._divHeight is explicitly defined, this will do nothing.

Returns: void

updateDivWidth

updateDivWidth(): void

This sets the Chart’s div width to 100%. If Chart._divWidth is explicitly defined, this will do nothing.

Returns: void

updatePadHeight

updatePadHeight(): void

This updates the Chart’s SVG pad height to accommodate the rowHeight, rowCount, and the upper/lower pad sizes. If Chart._padHeight is explicitly defined, this will do nothing.

Returns: void

updateRange

updateRange(): void

This sets the Chart.xScale range to [0, viewportWidthPx]

Returns: void

updateViewportHeight

updateViewportHeight(): void

This updates the Chart’s SVG viewport heights to accommodate the rowHeight and rowCount. If Chart._viewportHeight is explicitly defined, this will do nothing.

Returns: void

updateViewportPosition

updateViewportPosition(): void

This updates the Chart’s SVG viewport positions to accommodate the left and upper pad sizes.

Returns: void

updateViewportProperties

updateViewportProperties(): void

This updates all of the viewport properties by calling updateViewportHeight(), updateViewportWidth(), and updateViewportPosition().

Returns: void

updateViewportWidth

updateViewportWidth(): void

This updates the Chart’s SVG viewport width to accommodate the left and right pad sizes. If Chart._viewportWidth is explicitly defined, this will do nothing.

Returns: void

zoom

zoom(): void

This is the handler method that will be called when the Chart’s viewport receives a browser zoom event.

Returns: void

zoomHighlight

zoomHighlight(): void

This zooms the Chart highlights.

Returns: void

getDomainFromAnnotations

getDomainFromAnnotations(annotations: Annotation []): None

Returns a domain given a list of Annotations.

Type parameters

P: RenderParams

Parameters

annotations: Annotation []

Returns: None

ChartObserver

class ChartObserver

An abstract class for objects that “observe” Charts.

Constructors

(): ChartObserver

Properties

charts

charts: Chart <any> []

A list of Charts that the Plugin will pay attention to.

Methods

add

add(chart: Chart | Chart <any> []): void

This method registers a Chart or list of Charts with the Plugin.

Parameters

chart: Chart | Chart <any> []

Returns: void

addChart

addChart(chart: Chart <any>): void

Add a Chart to the observer.

Parameters

chart: Chart <any>

Returns: void

alert

alert(chart: Chart <any>): void

The method that will be called when the observer is alerted by a Chart.

Parameters

chart: Chart <any>

Returns: void

RadialChart

class RadialChart<P extends RenderParams>

This Chart class is designed for rendering features in a circular context, e.g. bacterial genomes.

Type parameters

P: RenderParams

Constructors

(config: RadialChartConfig <P>): RadialChart

Type parameters

P: RenderParams

Parameters

config: RadialChartConfig

Properties

_divHeight

_divHeight: undefined | string

The CSS height property of the Chart’s div.

_divMargin

_divMargin: undefined | string | number

The CSS margin property of the Chart’s div.

_divOutline

_divOutline: undefined | string

The CSS outline property of the Chart’s div.

_divOverflowX

_divOverflowX: undefined | string

The CSS overflow-x property of the Chart’s div.

_divOverflowY

_divOverflowY: undefined | string

The CSS overflow-y property of the Chart’s div.

_divWidth

_divWidth: undefined | string

The CSS width property of the Chart’s div.

_padHeight

_padHeight: undefined | string

The stored value of the pad SVG height property.

_padWidth

_padWidth: undefined | string

The stored value of the pad SVG width property.

_renderParams

_renderParams: undefined | P

The last used render parameters.

_transform

_transform: Transform

The Transform object that describes the current zoom transformation.

_viewportHeight

_viewportHeight: undefined | string

The stored value of the viewport SVG height property.

_viewportWidth

_viewportWidth: undefined | string

The stored value of the viewport SVG width property.

axisRadius

axisRadius: undefined | number

The radius of the circle that defines the axis placement.

containerSelection

containerSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s DOM container. This is a pre-existing DOM element (probably a div).

defSelection

defSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s defs element. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

divSelection

divSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s div container. This is created when the Chart is instantiated and placed inside of the selected container in the DOM.

domainConstraint

domainConstraint: (chart: Chart <P>): None

This constrains the Chart’s domain, which in turn constrains both zoom level and panning. The parameter is a callback function that is evaluated after each zoom event to produce an interval that constrains the domain.

draw

draw: (params: P): void

The rendering callback that should be responsible for drawing glyphs with the rendering API.

glyphModifiers

glyphModifiers: GlyphModifier <any, any> []

A list of GlyphModifiers that control the glyphs rendered in the Chart.

highlightSelection

highlightSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s highlight.

id

id: string

A unique identifier for the Chart.

initialDomain

initialDomain: None

The initialized domain of the Chart when render() is called with the initializeXScale flag.

innerRadius

innerRadius: number

The inner radius of the conceptual annulus that defines the Chart annotation track.

layout

layout: VerticalLayout

leftPadSize

leftPadSize: number

The number of pixels of padding on the left side of the Chart.

lowerPadSize

lowerPadSize: number

The number of pixels of padding on the bottom of the Chart.

observers

observers: ChartObserver []

A list of observers attached to the Chart.

outerRadius

outerRadius: number

The outer radius of the conceptual annulus that defines the Chart annotation track.

overflowViewportSelection

overflowViewportSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s viewport that allows rendering overflow.

padSelection

padSelection: Selection <any, any, any, any>

A d3 selection of the viewport’s padding container.

padSize

padSize: number

The number of pixels of padding around each edge of the Chart.

postRender

postRender: (params: P): void

The callback function that the Chart executes after render() is called.

postResize

postResize: (): void

The callback function that the Chart executes after resize() is called.

postZoom

postZoom: (): void

The callback function that the Chart executes after zoom() is called.

resizable

resizable: boolean

This controls whether or not the Chart has automatic resizing enabled.

rightPadSize

rightPadSize: number

The number of pixels of padding on the right side of the Chart.

rowColors

rowColors: undefined | string []

A list of colors that will color the Chart’s rows in a repeating pattern.

rowCount

rowCount: number

The number of rows in the Chart.

rowHeight

rowHeight: number

The height in pixels of a horizontal row in the Chart. This defaults to a value of 10.

rowOpacity

rowOpacity: number

The opacity of the colored row stripes.

selector

selector: string

A string that can be used to uniquely select the target DOM container.

trackHeight

trackHeight: number

The “height” of the radial track on which annotations will be rendered. Conceptually, this is equal to to the difference of the radii of two concentric circles that define an annulus.

trackOutlineSelection

trackOutlineSelection: undefined | Selection <any, any, any, any>

A d3 selection to the track outline.

updateDimensions

updateDimensions: (params: P): void

The rendering callback function that should be responsible for updating the Chart’s DOM element dimensions.

updateDomain

updateDomain: (params: P): void

The rendering callback function that should be responsible for updating the domain of the Chart.xScale property.

updateLayout

updateLayout: (params: P): void

The rendering callback function that should be responsible for updating the Chart.layout property.

updateRowCount

updateRowCount: (params: P): void

The rendering callback function that should be responsible for updating the Chart.rowCount property.

upperPadSize

upperPadSize: number

The number of pixels of padding on the top of the Chart.

viewportHeightPx

viewportHeightPx: number

The stored height of the viewport SVG in pixels.

viewportSelection

viewportSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s viewport.

viewportWidthPx

viewportWidthPx: number

The stored width of the viewport SVG in pixels.

xScale

xScale: ScaleLinear <number, number>

A D3 scale that the Chart will use to translate between semantic and viewport coordinates. This scale will be periodically re-scaled after zoom events.

yScale

yScale: (row: number): number

A simple function that maps from row numbers to the pixel y value of the corresponding row.

zoomConstraint

zoomConstraint: None

A Chart’s contents are scaled by a scaling factor k. If a zoomConstraint of the form [min_k, max_k] is provided, the scaling factor will be constrained to that range. This will not constrain panning.

zoomable

zoomable: boolean

This controls whether or not the Chart has zooming enabled.

Accessors

divHeight

get divHeight(): undefined | string | number

Gets the divHeight property.

set divHeight(value: undefined | string | number): void

Sets the divHeight property. This directly adjusts the height CSS style property on the Chart’s div element.

divMargin

get divMargin(): undefined | string | number

Gets the divMargin property.

set divMargin(value: undefined | string | number): void

Sets the divMargin property. This directly adjusts the margin CSS style property on the Chart’s div element.

divOutline

get divOutline(): undefined | string

Gets the divOutline property.

set divOutline(value: undefined | string): void

Sets the divOutline property. This directly adjusts the outline CSS style property on the Chart’s div element.

divOverflowX

get divOverflowX(): undefined | string

Gets the divOverflowX property.

set divOverflowX(value: undefined | string): void

Sets the divOverflowX property. This directly adjusts the overflow-x CSS style property on the Chart’s div element.

divOverflowY

get divOverflowY(): undefined | string

Gets the divOverflowY property.

set divOverflowY(value: undefined | string): void

Sets the divOverflowY property. This directly adjusts the overflow-y CSS style property on the Chart’s div element.

divWidth

get divWidth(): undefined | string | number

Gets the divWidth property.

set divWidth(value: undefined | string | number): void

Sets the divWidth property. This directly adjusts the width CSS style property on the Chart’s div element.

domain

get domain(): None

Gets the domain of the Chart’s x scale.

set domain(domain: None): void

Set the domain of the Chart’s x scale.

range

get range(): None

Gets the range of the Chart’s x scale.

set range(range: None): void

Set the range of the Chart’s x scale.

renderParams

get renderParams(): P

Getter for the Chart’s most recently used RenderParams.

set renderParams(params: P): void

Setter for the renderParams property.

transform

get transform(): Transform

Getter for the transform property. This also updates the internal transform on the Chart’s pad DOM element.

set transform(transform: Transform): void

Setter for the transform property.

viewportHeight

get viewportHeight(): undefined | string | number

Gets the viewportHeight property.

set viewportHeight(value: undefined | string | number): void

Sets the viewportHeight property. This directly adjusts the height SVG attribute on the Chart’s viewport SVG element.

viewportWidth

get viewportWidth(): undefined | string | number

Gets the viewportWidth property.

set viewportWidth(value: undefined | string | number): void

Sets the viewportWidth property. This directly adjusts the width SVG attribute on the Chart’s viewport SVG element.

Methods

addAxis

addAxis(): void

Returns: void

addGlyphModifier

addGlyphModifier(modifier: GlyphModifier <A, C>, initialize: boolean): void

This adds a GlyphModifier to the Chart.

Type parameters

A: Annotation
C: Chart

Parameters

modifier: GlyphModifier <A, C>
initialize: boolean

Returns: void

addRowStripes

addRowStripes(): void

If the rowColors property has been defined, this method adds row stripes to the Chart.

Returns: void

addTrackOutline

addTrackOutline(): void

Returns: void

alertObservers

alertObservers(): void

This calls each of this Chart’s attached observer’s alert() method.

Returns: void

applyGlyphModifiers

applyGlyphModifiers(): void

This applies each of the Chart’s GlyphModifier.zoom() methods, resulting in each of the glyphs in the Chart being appropriately redrawn for the current zoom level.

Returns: void

calculateContainerDimensions

calculateContainerDimensions(): DOMRect

This returns a DOMRect that describes the bounding box of the Chart’s container.

Returns: DOMRect

calculateContainerHeight

calculateContainerHeight(): number

This calculates and returns the Chart’s DOM container’s height in pixels.

Returns: number

calculateContainerWidth

calculateContainerWidth(): number

This calculates and returns the Chart’s DOM container’s width in pixels.

Returns: number

calculateDivDimensions

calculateDivDimensions(): DOMRect

This returns a DOMRect that describes the bounding box of the Chart’s div.

Returns: DOMRect

calculatePadDimensions

calculatePadDimensions(): DOMRect

This returns a DOMRect that describes the SVG pad dimensions.

Returns: DOMRect

calculatePadHeight

calculatePadHeight(): number

This calculates and returns the height of the SVG pad in pixels.

Returns: number

calculatePadWidth

calculatePadWidth(): number

This calculates and returns the width of the SVG pad in pixels.

Returns: number

calculateViewportDimensions

calculateViewportDimensions(): DOMRect

This returns a DOMRect that describes the bounding box of the viewport.

Returns: DOMRect

calculateViewportHeight

calculateViewportHeight(): number

This calculates and returns the height of the SVG viewport in pixels.

Returns: number

calculateViewportWidth

calculateViewportWidth(): number

This calculates and returns the width of the SVG viewport in pixels.

Returns: number

clear

clear(): void

This method clears all glyphs that have been rendered in the Chart.

Returns: void

clearHighlight

clearHighlight(selector: string): void

Parameters

selector: string

Returns: void

configureResize

configureResize(): void

This configures the Chart to respond to browser resize events. The default resize behavior is for the Chart to maintain the current semantic view range, either stretching or shrinking the current view.

Returns: void

configureZoom

configureZoom(): void

Returns: void

defaultDraw

defaultDraw(params: P): void

The default draw() callback. It adds a horizontal axis and renders the RenderParams.annotations property as rectangles.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

defaultPostRender

defaultPostRender(): void

The default postRender() callback. It calls the Chart.applyGlyphModifiers() method.

Type parameters

P: RenderParams

Returns: void

defaultUpdateDimensions

defaultUpdateDimensions(params: P): void

The default updateDimensions() callback. It calls updateDivHeight(), updatePadHeight(), and updateViewportHeight(). The result is that the Chart should be tall enough to render the number of rows specified in the rowCount property.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

defaultUpdateDomain

defaultUpdateDomain(params: P): void

The default updateDomain() callback. If the start and end properties are set on the RenderParams, it uses those to set the domain. If they are not defined, it finds the minimum start and maximum end amongst the annotations property on the RenderParams. If there are no annotations on the RenderParams, it leaves the domain alone.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

defaultUpdateLayout

defaultUpdateLayout(params: P): void

The default updateLayout() callback. It calls intervalGraphLayout() on the annotations property of the provided RenderParams.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

defaultUpdateRowCount

defaultUpdateRowCount(params: P): void

The default updateRowCount() callback. It sets Chart.rowCount equal to Chart.layout.rowCount.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

disableZoom

disableZoom(): void

This disables zooming on the Chart.

Returns: void

domainFromMousemoveEvent

domainFromMousemoveEvent(transform: Transform, sourceEvent: WheelEvent): None

Parameters

transform: Transform
sourceEvent: WheelEvent

Returns: None

domainFromWheelEvent

domainFromWheelEvent(transform: Transform, sourceEvent: WheelEvent): None

Parameters

transform: Transform
sourceEvent: WheelEvent

Returns: None

fitRadialDimensions

fitRadialDimensions(): void

Returns: void

highlight

highlight(config: HighlightConfig): string

Parameters

config: HighlightConfig

Returns: string

initializeXScale

initializeXScale(start: number, end: number): void

This initializes an x translation scale with the provided coordinates and the dimensions of the Chart.

Parameters

start: number
end: number

Returns: void

removeRowStripes

removeRowStripes(): void

If they have been added, this method removes row stripes from the Chart.

Returns: void

render

render(params: P): void

This method executes the default rendering routine. It executes each rendering callback function in succession.

Parameters

params: P

Returns: void

renderAxis

renderAxis(): void

Returns: void

renderTrackOutline

renderTrackOutline(): void

Returns: void

resetTransform

resetTransform(): void

Reset the Chart’s transform to the zoom identity (no translation, no zoom).

Returns: void

resize

resize(): void

Returns: void

setDivStyle

setDivStyle(property: string, value: undefined | string): void

Sets a style property on the Chart’s div selection.

Parameters

property: string
value: undefined | string

Returns: void

setPadAttribute

setPadAttribute(attribute: string, value: undefined | string): void

Sets an attribute on the Chart’s SVG pad.

Parameters

attribute: string
value: undefined | string

Returns: void

setViewportAttribute

setViewportAttribute(attribute: string, value: undefined | string): void

Sets an attribute on the Chart’s SVG viewports.

Parameters

attribute: string
value: undefined | string

Returns: void

squareToDivWidth

squareToDivWidth(): void

Returns: void

updateDivHeight

updateDivHeight(): void

This updates the Chart’s div height to accommodate the rowHeight, rowCount, and pad sizes. If Chart._divHeight is explicitly defined, this will do nothing.

Returns: void

updateDivWidth

updateDivWidth(): void

This sets the Chart’s div width to 100%. If Chart._divWidth is explicitly defined, this will do nothing.

Returns: void

updatePadHeight

updatePadHeight(): void

This updates the Chart’s SVG pad height to accommodate the rowHeight, rowCount, and the upper/lower pad sizes. If Chart._padHeight is explicitly defined, this will do nothing.

Returns: void

updateRange

updateRange(): void

Returns: void

updateViewportHeight

updateViewportHeight(): void

Returns: void

updateViewportPosition

updateViewportPosition(): void

This updates the Chart’s SVG viewport positions to accommodate the left and upper pad sizes.

Returns: void

updateViewportProperties

updateViewportProperties(): void

This updates all of the viewport properties by calling updateViewportHeight(), updateViewportWidth(), and updateViewportPosition().

Returns: void

updateViewportWidth

updateViewportWidth(): void

Returns: void

zoom

zoom(): void

Returns: void

zoomHighlight

zoomHighlight(): void

Returns: void

getDomainFromAnnotations

getDomainFromAnnotations(annotations: Annotation []): None

Returns a domain given a list of Annotations.

Type parameters

P: RenderParams

Parameters

annotations: Annotation []

Returns: None

ZoomSyncer

class ZoomSyncer

This class can be used to synchronize the zoom level across different Charts.

Constructors

(): ZoomSyncer

Properties

charts

charts: Chart <any> []

A list of Charts that the Plugin will pay attention to.

Methods

add

add(chart: Chart | Chart <any> []): void

This method registers a Chart or list of Charts with the Plugin.

Parameters

chart: Chart | Chart <any> []

Returns: void

addChart

addChart(chart: Chart <any>): void

Add a Chart to the observer.

Parameters

chart: Chart <any>

Returns: void

alert

alert(caller: Chart <any>): void

The ZoomZyncer alert method synchronizes all of the Transforms on each of the Charts is is observing and fires the zooming functionality.

Parameters

caller: Chart <any>

Returns: void

Interfaces

AggregationConfig

interface AggregationConfig<A extends Annotation>

This defines the parameters for a call to an Annotation aggregration function.

Type parameters

A: Annotation

Properties

annotations

annotations: A []

The list of Annotations to be aggregated.

criterion

criterion: (a: A, b: A): boolean

The comparison function that serves as the criterion for aggregation.

idPrefix

idPrefix: undefined | string

The ID prefix for each resulting AnnotationGroup. E.g. if the idPrefix “group” is supplied, the resulting groups will have IDs of the form: “group-1,” “group-2,” etc.

AlignmentAnnotations

interface AlignmentAnnotations

The return type for the getAlignmentAnnotations() function.

Properties

gaps

gaps: SequenceAnnotation

insertions

insertions: SequenceAnnotation []

matches

matches: SequenceAnnotation

substitutions

substitutions: SequenceAnnotation

AlignmentConfig

interface AlignmentConfig

This defines the parameters for a call to the getAlignmentAnnotations() function.

Properties

end

end: undefined | number

id

id: string

query

query: string

start

start: number

target

target: string

Annotation

interface Annotation

Properties

end

end: number

The end coordinate of the Annotation.

id

id: string

A unique identifier for the Annotation.

start

start: number

The start coordinate of the Annotation.

AnnotationDatum

interface AnnotationDatum<A extends Annotation, C extends Chart>

An interface that simply joins an Annotation object and a Chart is has been rendered in.

Type parameters

A: Annotation

C: Chart

Properties

a

a: A

The Annotation object.

c

c: C

The Chart object.

AnnotationGenerationConfig

interface AnnotationGenerationConfig

An interface that defines the parameters for a call to the generateAnnotations function.

Properties

generationPattern

generationPattern: undefined | Sequential | Random

maxX

maxX: undefined | number

maxY

maxY: undefined | number

n

n: number

pad

pad: undefined | number

startY

startY: undefined | number

width

width: undefined | number

AnnotationGroupConfig

interface AnnotationGroupConfig<A extends Annotation>

Type parameters

A: Annotation

Properties

annotations

annotations: undefined | A []

end

end: undefined | number

id

id: undefined | string

start

start: undefined | number

ArcConfig

interface ArcConfig<A extends Annotation, C extends Chart>

An interface that defines the parameters for a call to the arc rendering function.

Type parameters

A: Annotation

C: Chart

Properties

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

chart

chart: C

The Chart object in which the glyphs will be rendered.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s initialization method, which typically sets most of the style related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s zoom method, which typically sets most of the positioning related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

AreaConfig

interface AreaConfig<A extends PlotAnnotation, C extends Chart>

An interface that defines the parameters for a call to the area rendering function.

Type parameters

A: PlotAnnotation

C: Chart

Properties

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

chart

chart: C

The Chart object in which the glyphs will be rendered.

domain

domain: undefined | None | GlyphCallback <A, C, None>

This defines the domain of the plot.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillDirection

fillDirection: undefined | Up | Down | GlyphCallback <A, C, FillDirection>

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

pathData

pathData: undefined | string | GlyphCallback <A, C, string>

A callback that returns a string that defines the line’s SVG path

range

range: undefined | None | GlyphCallback <A, C, None>

This defines the range of the plot.

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

rowSpan

rowSpan: undefined | number

The number of bins that the plot will span. This defaults to 1, which forces the plot to fit into one row. If an argument is supplied, it will cause the plot to grow downward. It will have no effect if a custom lineFunc is supplied.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

AugmentConfig

interface AugmentConfig<T extends generic>

An interface that defines the parameters for a call to the augment function.

Type parameters

T: generic

Properties

end

end: undefined | AugmentParam <T, number>

An AugmentParam that describes how to compute the Annotation.end property.

id

id: undefined | AugmentParam <T, string>

An AugmentParam that describes how to compute the Annotation.id property.

objects

objects: T []

A list of type T, i.e. an arbitrary object representation of annotation records that fail to implement Annotation.

skipValidate

skipValidate: undefined | boolean

If this is set to true, this skips the validation on the returned objects. That means that the function will be happy to return objects that fail to implement Annotation.

start

start: undefined | AugmentParam <T, number>

An AugmentParam that describes how to compute the Annotation.start property.

AugmentParam

interface AugmentParam<T extends generic, V extends generic>

An interface that describes a parameter in a call to the augment function.

Type parameters

T: generic

V: generic

Properties

fn

fn: (t: T): V

The callback function used to compute the value for the property.

virtual

virtual: undefined | boolean

If this is set to true, the callback function will be added as a getter on the target object. If this is false or omitted, the callback function will be evaluated once and the resulting value will be added on the object as a real property.

BarPlotConfig

interface BarPlotConfig<A extends PlotAnnotation, C extends Chart>

An interface that defines the parameters for a call to the barPlot rendering function.

Type parameters

A: PlotAnnotation

C: Chart

Properties

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

barHeightFn

barHeightFn: undefined | (ann: A, value: number): number

chart

chart: C

The Chart object in which the glyphs will be rendered.

domain

domain: undefined | None | GlyphCallback <A, C, None>

This defines the domain of the plot.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s initialization method, which typically sets most of the style related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

range

range: undefined | None | GlyphCallback <A, C, None>

This defines the range of the plot.

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

rowSpan

rowSpan: undefined | number

The number of bins that the plot will span. This defaults to 1, which forces the plot to fit into one row. If an argument is supplied, it will cause the plot to grow downward. It will have no effect if a custom lineFunc is supplied.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s zoom method, which typically sets most of the positioning related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

BedAnnotation

interface BedAnnotation

An interface that describes BED records. For more information, see https://genome.ucsc.edu/FAQ/FAQformat.html#format1

Properties

blockCount

blockCount: undefined | number

A BED field for records that should be drawn as discontiguous/fragmented glyphs. This describes the number of fragments.

blockSizes

blockSizes: undefined | number []

A BED field for records that should be drawn as discontiguous/fragmented glyphs. This describes the size of each fragment.

blockStarts

blockStarts: undefined | number []

A BED field for records that should be drawn as discontiguous/fragmented glyphs. This describes the offset of each fragment.

chrom

chrom: string

A BED field that describes the chromosome of the record.

end

end: number

A BED field that describes the ending position of the record. This is chromEnd in the BED spec, but it’s end here to fit in better with the rest of SODA.

id

id: string

A unique identifier for the Annotation.

itemRgb

itemRgb: undefined | string

A BED field BED field that defines the color of the feature. It is an RGB string, e.g. (0, 1, 256).

name

name: undefined | string

A BED field that describes the name of the record.

score

score: undefined | number

A BED field that describes the “score” of the record.

start

start: number

A BED field that describes the starting position of the record. This is chromStart in the BED spec, but it’s start here to fit in better with the rest of SODA.

strand

strand: undefined | Forward | Reverse | Unknown | Unoriented

A BED field that describes the orientation/strand of the record.

thickEnd

thickEnd: undefined | number

A BED field that describes at which coordinate the feature should stop being drawn “thickly.”

thickStart

thickStart: undefined | number

A BED field that describes at which coordinate the feature should start being drawn “thickly.”

ChartConfig

interface ChartConfig<P extends RenderParams>

This describes the parameters for configuring and initializing a Chart.

Type parameters

P: RenderParams

Properties

axisType

axisType: undefined | Bottom | Top

This controls whether or not the Chart will render a horizontal axis.

debugShading

debugShading: undefined | boolean

If this is set to true, the pad and viewport will be shaded so that they are visible in the browser.

divHeight

divHeight: undefined | string | number

The height in pixels of the Chart’s containing div.

divMargin

divMargin: undefined | string | number

The CSS margin property for the Chart’s div.

divOutline

divOutline: undefined | string

The CSS outline property for the Chart’s div.

divOverflowX

divOverflowX: undefined | string

The CSS overflow-x setting of the Chart’s containing div.

divOverflowY

divOverflowY: undefined | string

The CSS overflow-y setting of the Chart’s containing div.

divWidth

divWidth: undefined | string | number

The width in pixels of the Chart’s containing div.

domainConstraint

domainConstraint: undefined | (chart: Chart <P>): None

This constrains the Chart’s domain, which in turn constrains both zoom level and panning. The parameter is a callback function that is evaluated after each zoom event to produce an interval that constrains the domain.

draw

draw: undefined | (params: P): void

The rendering callback that should be responsible for drawing glyphs with the rendering API.

id

id: undefined | string

A unique identifier for the Chart. This will be generated automatically if one isn’t provided.

leftPadSize

leftPadSize: undefined | number

The number of pixels of padding on the left side of the Chart.

lowerPadSize

lowerPadSize: undefined | number

The number of pixels of padding on the bottom of the Chart.

padSize

padSize: undefined | number

The number of pixels of padding around each edge of the Chart.

postRender

postRender: undefined | (params: P): void

The callback function that the Chart executes after render() is called.

postResize

postResize: undefined | (): void

The callback function that the Chart executes after resize() is called.

postZoom

postZoom: undefined | (): void

The callback function that the Chart executes after zoom() is called.

resizable

resizable: undefined | boolean

This controls whether or not the Chart will automatically resize itself as it’s container changes size. This will cause the Chart to ignore explicit height/width arguments in the config.

rightPadSize

rightPadSize: undefined | number

The number of pixels of padding on the right side of the Chart.

rowColors

rowColors: undefined | string []

A list of colors that will color the Chart’s rows in a repeating pattern.

rowCount

rowCount: undefined | number

The number of rows that will be rendered.

rowHeight

rowHeight: undefined | number

The height in pixels of a horizontal row in the Chart. This defaults to a value of 10.

rowOpacity

rowOpacity: undefined | number

The opacity of the colored row stripes.

selector

selector: string

A string that can be used to uniquely select the target DOM container.

updateDimensions

updateDimensions: undefined | (params: P): void

The rendering callback function that should be responsible for updating the Chart’s DOM element dimensions.

updateDomain

updateDomain: undefined | (params: P): void

The rendering callback function that should be responsible for updating the domain of the Chart.xScale property.

updateLayout

updateLayout: undefined | (params: P): void

The rendering callback function that should be responsible for updating the Chart.layout property.

updateRowCount

updateRowCount: undefined | (params: P): void

The rendering callback function that should be responsible for updating the Chart.rowCount property.

upperPadSize

upperPadSize: undefined | number

The number of pixels of padding on the top of the Chart.

zoomConstraint

zoomConstraint: undefined | None

A Chart’s contents are scaled by a scaling factor k. If a zoomConstraint of the form [min_k, max_k] is provided, the scaling factor will be constrained to that interval. This will not constrain panning.

zoomable

zoomable: undefined | boolean

This controls whether or not the Chart will be configured to allow zooming and panning.

ChevronGlyphConfig

interface ChevronGlyphConfig<A extends Annotation, C extends Chart>

An interface that defines the common parameters for calls to chevron glyph rendering functions.

Type parameters

A: Annotation

C: Chart

Properties

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

chart

chart: C

The Chart object in which the glyphs will be rendered.

chevronFillColor

chevronFillColor: undefined | string | GlyphCallback <A, C, string>

This defines the fill color of the chevron arrows.

chevronFillOpacity

chevronFillOpacity: undefined | number | GlyphCallback <A, C, number>

This defines the fill opacity of the chevron arrows.

chevronHeight

chevronHeight: undefined | number | GlyphCallback <A, C, number>

This defines the height of the chevron arrows.

chevronSpacing

chevronSpacing: undefined | number | GlyphCallback <A, C, number>

This defines the spacing between each chevron arrow.

chevronStrokeColor

chevronStrokeColor: undefined | string | GlyphCallback <A, C, string>

This defines the stroke color of the chevron arrows.

chevronStrokeOpacity

chevronStrokeOpacity: undefined | number | GlyphCallback <A, C, number>

This defines the stroke opacity of the chevron arrows.

chevronWidth

chevronWidth: undefined | number | GlyphCallback <A, C, number>

This defines the width of the chevron arrows.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s initialization method, which typically sets most of the style related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

orientation

orientation: undefined | Forward | Reverse | Unknown | Unoriented | GlyphCallback <A, C, Orientation>

This defines the direction that the chevron arrows will point.

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s zoom method, which typically sets most of the positioning related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

ChevronLineConfig

interface ChevronLineConfig<A extends Annotation, C extends Chart>

An interface that defines the parameters for a call to the chevronLine rendering function.

Type parameters

A: Annotation

C: Chart

Properties

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

chart

chart: C

The Chart object in which the glyphs will be rendered.

chevronFillColor

chevronFillColor: undefined | string | GlyphCallback <A, C, string>

This defines the fill color of the chevron arrows.

chevronFillOpacity

chevronFillOpacity: undefined | number | GlyphCallback <A, C, number>

This defines the fill opacity of the chevron arrows.

chevronHeight

chevronHeight: undefined | number | GlyphCallback <A, C, number>

This defines the height of the chevron arrows.

chevronSpacing

chevronSpacing: undefined | number | GlyphCallback <A, C, number>

This defines the spacing between each chevron arrow.

chevronStrokeColor

chevronStrokeColor: undefined | string | GlyphCallback <A, C, string>

This defines the stroke color of the chevron arrows.

chevronStrokeOpacity

chevronStrokeOpacity: undefined | number | GlyphCallback <A, C, number>

This defines the stroke opacity of the chevron arrows.

chevronWidth

chevronWidth: undefined | number | GlyphCallback <A, C, number>

This defines the width of the chevron arrows.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s initialization method, which typically sets most of the style related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

orientation

orientation: undefined | Forward | Reverse | Unknown | Unoriented | GlyphCallback <A, C, Orientation>

This defines the direction that the chevron arrows will point.

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s zoom method, which typically sets most of the positioning related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

ChevronRectangleConfig

interface ChevronRectangleConfig<A extends Annotation, C extends Chart>

An interface that defines the parameters for a call to the chevronRectangle rendering function.

Type parameters

A: Annotation

C: Chart

Properties

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

chart

chart: C

The Chart object in which the glyphs will be rendered.

chevronFillColor

chevronFillColor: undefined | string | GlyphCallback <A, C, string>

This defines the fill color of the chevron arrows.

chevronFillOpacity

chevronFillOpacity: undefined | number | GlyphCallback <A, C, number>

This defines the fill opacity of the chevron arrows.

chevronHeight

chevronHeight: undefined | number | GlyphCallback <A, C, number>

This defines the height of the chevron arrows.

chevronSpacing

chevronSpacing: undefined | number | GlyphCallback <A, C, number>

This defines the spacing between each chevron arrow.

chevronStrokeColor

chevronStrokeColor: undefined | string | GlyphCallback <A, C, string>

This defines the stroke color of the chevron arrows.

chevronStrokeOpacity

chevronStrokeOpacity: undefined | number | GlyphCallback <A, C, number>

This defines the stroke opacity of the chevron arrows.

chevronWidth

chevronWidth: undefined | number | GlyphCallback <A, C, number>

This defines the width of the chevron arrows.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s initialization method, which typically sets most of the style related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

orientation

orientation: undefined | Forward | Reverse | Unknown | Unoriented | GlyphCallback <A, C, Orientation>

This defines the direction that the chevron arrows will point.

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s zoom method, which typically sets most of the positioning related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

ClickConfig

interface ClickConfig<A extends Annotation, C extends Chart>

An interface that defines the parameters for a call to the clickBehavior function.

Type parameters

A: Annotation

C: Chart

Properties

annotations

annotations: A []

The Annotations to which the interaction is applied.

chart

chart: undefined | C

The Chart to which the interaction is applied.

click

click: InteractionCallback <A, C>

A callback function that will be responsible for executing the click behavior. It will implicitly receive references to both a D3 Selection to the Annotation’s representative glyph and the Annotation object itself.

selector

selector: undefined | string

The selector of the glyphs to which the interaction is applied.

DynamicTextConfig

interface DynamicTextConfig<A extends Annotation, C extends Chart>

An interface that defines the parameters for a call to the dynamicText rendering function.

Type parameters

A: Annotation

C: Chart

Properties

alignmentBaseline

alignmentBaseline: undefined | string | GlyphCallback <A, C, string>

How the text glyph is aligned with it’s parent. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

chart

chart: C

The Chart object in which the glyphs will be rendered.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

fontFamily

fontFamily: undefined | string | GlyphCallback <A, C, string>

The font family that will be used. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-family

fontSize

fontSize: undefined | number | GlyphCallback <A, C, number>

The font size of the text.

fontStyle

fontStyle: undefined | string | GlyphCallback <A, C, string>

The font style: normal, italic, or oblique. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-style

fontWeight

fontWeight: undefined | string | GlyphCallback <A, C, string>

The weight of the font: normal, bold, bolder, lighter. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-weight

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

text

text: GlyphProperty <A, C, string []>

A callback to extract a list of text to display from the represented Annotation object. It is a list of text because TextGlyphs can display varying length text depending on how much room is available at the Chart’s current zoom level.

textAnchor

textAnchor: undefined | string | GlyphCallback <A, C, string>

Where the text is aligned to: start, middle, or end. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

ExportConfig

interface ExportConfig<C extends Chart>

An interface that defines the parameters for a call to the exportPng function.

Type parameters

C: Chart

Properties

chart

chart: C

The Chart to export.

filename

filename: undefined | string

The filename for the exported PNG.

pixelRatio

pixelRatio: undefined | number

The pixel ratio of the rendered PNG. Using a number larger than 1 will over-render the PNG, making it larger. Using smaller numbers currently has strange behavior, and it’s not recommended.

FullGlyphQueryConfig

interface FullGlyphQueryConfig

Properties

annotations

annotations: Annotation []

Constrain the query to these Annotations.

chart

chart: Chart <any>

Constrain the query to glyphs rendered in this Chart.

selector

selector: string

Constrain the query to glyphs with this selector.

Gff3Annotation

interface Gff3Annotation

An interface that describes the fields in a GFF3 record. For more information see http://gmod.org/wiki/GFF3/

Properties

attributes

attributes: undefined | Map <string, string>

A GFF3 field that is essentially an anything goes set of key value pairs describing anything anybody every wants to add to a GFF3 record.

end

end: number

The end coordinate of the Annotation.

id

id: string

A unique identifier for the Annotation.

phase

phase: undefined | None | None | None

A GFF3 field that describes the phase for CDS (coding sequence) annotations.

score

score: undefined | number

A GFF3 field that should describe the score of the annotation.

seqid

seqid: undefined | string

A GFF3 field: “The ID of the landmark used to establish the coordinate system for the current feature…”

source

source: undefined | string

A GFF3 field: “The source is a free text qualifier intended to describe the algorithm or operating procedure that generated this feature…”

start

start: number

The start coordinate of the Annotation.

strand

strand: undefined | Forward | Reverse | Unknown | Unoriented

A GFF3 field that describes the strand of the annotation.

type

type: undefined | string

A GFF3 field that is supposed to be “constrained to be either: (a) a term from the “lite” sequence ontology, SOFA; or (b) a SOFA accession number.” However, this is currently not enforced by SODA.

GlyphConfig

interface GlyphConfig<A extends Annotation, C extends Chart>

Type parameters

A: Annotation

C: Chart

Properties

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

chart

chart: C

The Chart object in which the glyphs will be rendered.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s initialization method, which typically sets most of the style related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s zoom method, which typically sets most of the positioning related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

GlyphQueryConfig

interface GlyphQueryConfig

An interface that defines the parameters for a call to the queryGlyphMap() function.

Properties

annotations

annotations: undefined | Annotation []

Constrain the query to these Annotations.

chart

chart: undefined | Chart <any>

Constrain the query to glyphs rendered in this Chart.

selector

selector: undefined | string

Constrain the query to glyphs with this selector.

HighlightConfig

interface HighlightConfig

This describes the parameters for a call to the Chart.highlight() function.

Properties

color

color: undefined | string

The color of the highlight. This defaults to black.

end

end: number

The end of the region to be highlighted in semantic coordinates.

opacity

opacity: undefined | number

The opacity of the highlight. This defaults to 0.1.

selector

selector: undefined | string

The selector that will be applied to the highlight object in the DOM. This will be auto generated if not supplied.

start

start: number

The start of the region to be highlighted in semantic coordinates.

HorizontalAxisConfig

interface HorizontalAxisConfig<A extends Annotation, C extends Chart>

An interface that defines the parameters for a call to the horizontalAxis rendering function.

Type parameters

A: Annotation

C: Chart

Properties

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

axisType

axisType: undefined | Bottom | Top

This determines whether the ticks and labels with be placed on the top or the bottom of the axis.

chart

chart: C

The Chart object in which the glyphs will be rendered.

domain

domain: undefined | None | GlyphCallback <A, C, None>

This defines the domain of the D3 scale used to create the axis glyph.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

fixed

fixed: undefined | boolean

If this is set to true, the axis glyph will not translate or scale during zoom events.

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s initialization method, which typically sets most of the style related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

range

range: undefined | None | GlyphCallback <A, C, None>

This defines the range of the D3 scale used to create the axis glyph.

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

scaleToBinHeight

scaleToBinHeight: undefined | boolean

If this is set to true, the axis glyph will be forced (by stretching) into the height of a row in the Chart.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

tickSizeOuter

tickSizeOuter: undefined | number | GlyphCallback <A, C, number>

This defines the tick property that will be passed to D3’s axis.tickSizeOuter function. For more information, see https://github.com/d3/d3-axis#axis_tickSizeOuter

ticks

ticks: undefined | number | GlyphCallback <A, C, number>

This defines the tick property that will be passed to D3’s axis.ticks function. For more information, see https://github.com/d3/d3-axis#axis_ticks

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s zoom method, which typically sets most of the positioning related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

HoverConfig

interface HoverConfig<A extends Annotation, C extends Chart>

An interface that defines the parameters for a call to the hoverBehavior function.

Type parameters

A: Annotation

C: Chart

Properties

annotations

annotations: A []

The Annotations to which the interaction is applied.

chart

chart: undefined | C

The Chart to which the interaction is applied.

mouseout

mouseout: InteractionCallback <A, C>

A callback function that will be responsible for executing the mouseout behavior. It receives a d3 selection of the glyph and the Annotation object it represents as arguments.

mouseover

mouseover: InteractionCallback <A, C>

A callback function that will be responsible for executing the mouseover behavior. It receives a d3 selection of the glyph and the Annotation object it represents as arguments.

selector

selector: undefined | string

The selector of the glyphs to which the interaction is applied.

LineConfig

interface LineConfig<A extends Annotation, C extends Chart>

An interface that defines the parameters for a call to the line rendering function.

Type parameters

A: Annotation

C: Chart

Properties

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

chart

chart: C

The Chart object in which the glyphs will be rendered.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s initialization method, which typically sets most of the style related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

x1

x1: undefined | number | GlyphCallback <A, C, number>

x2

x2: undefined | number | GlyphCallback <A, C, number>

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

y1

y1: undefined | number | GlyphCallback <A, C, number>

y2

y2: undefined | number | GlyphCallback <A, C, number>

zoomFn

zoomFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s zoom method, which typically sets most of the positioning related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

LinePlotConfig

interface LinePlotConfig<A extends PlotAnnotation, C extends Chart>

An interface that defines the parameters for a call to the linePlot rendering function.

Type parameters

A: PlotAnnotation

C: Chart

Properties

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

chart

chart: C

The Chart object in which the glyphs will be rendered.

domain

domain: undefined | None | GlyphCallback <A, C, None>

This defines the domain of the plot.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s initialization method, which typically sets most of the style related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

pathData

pathData: undefined | string | GlyphCallback <A, C, string>

A callback that returns a string that defines the line’s SVG path

range

range: undefined | None | GlyphCallback <A, C, None>

This defines the range of the plot.

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

rowSpan

rowSpan: undefined | number

The number of bins that the plot will span. This defaults to 1, which forces the plot to fit into one row. If an argument is supplied, it will cause the plot to grow downward. It will have no effect if a custom lineFunc is supplied.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s zoom method, which typically sets most of the positioning related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

MapVerticalLayout

interface MapVerticalLayout

An extension of VerticalLayout that additionally has a Map. This object is returned by SODA’s default layout functions, and the Map is used to build the row() callback.

Properties

row

row: GlyphCallback <Annotation, Chart <any>, number>

This callback is used by default to place a glyph in a Chart’s row.

rowCount

rowCount: number

This value is used by default to set the height of a Chart to display the required number of rows.

rowMap

rowMap: Map <string, number>

PlotAnnotation

interface PlotAnnotation

Properties

end

end: number

The end coordinate of the Annotation.

id

id: string

A unique identifier for the Annotation.

start

start: number

The start coordinate of the Annotation.

values

values: number []

RadialChartConfig

interface RadialChartConfig<P extends RenderParams>

A simple interface that defines the parameters that initialize a RadialChart

Type parameters

P: RenderParams

Properties

axisType

axisType: undefined | Bottom | Top

This controls whether or not the Chart will render a horizontal axis.

debugShading

debugShading: undefined | boolean

If this is set to true, the pad and viewport will be shaded so that they are visible in the browser.

divHeight

divHeight: undefined | string | number

The height in pixels of the Chart’s containing div.

divMargin

divMargin: undefined | string | number

The CSS margin property for the Chart’s div.

divOutline

divOutline: undefined | string

The CSS outline property for the Chart’s div.

divOverflowX

divOverflowX: undefined | string

The CSS overflow-x setting of the Chart’s containing div.

divOverflowY

divOverflowY: undefined | string

The CSS overflow-y setting of the Chart’s containing div.

divWidth

divWidth: undefined | string | number

The width in pixels of the Chart’s containing div.

domainConstraint

domainConstraint: undefined | (chart: Chart <P>): None

This constrains the Chart’s domain, which in turn constrains both zoom level and panning. The parameter is a callback function that is evaluated after each zoom event to produce an interval that constrains the domain.

draw

draw: undefined | (params: P): void

The rendering callback that should be responsible for drawing glyphs with the rendering API.

id

id: undefined | string

A unique identifier for the Chart. This will be generated automatically if one isn’t provided.

leftPadSize

leftPadSize: undefined | number

The number of pixels of padding on the left side of the Chart.

lowerPadSize

lowerPadSize: undefined | number

The number of pixels of padding on the bottom of the Chart.

padSize

padSize: undefined | number

The number of pixels of padding around each edge of the Chart.

postRender

postRender: undefined | (params: P): void

The callback function that the Chart executes after render() is called.

postResize

postResize: undefined | (): void

The callback function that the Chart executes after resize() is called.

postZoom

postZoom: undefined | (): void

The callback function that the Chart executes after zoom() is called.

resizable

resizable: undefined | boolean

This controls whether or not the Chart will automatically resize itself as it’s container changes size. This will cause the Chart to ignore explicit height/width arguments in the config.

rightPadSize

rightPadSize: undefined | number

The number of pixels of padding on the right side of the Chart.

rowColors

rowColors: undefined | string []

A list of colors that will color the Chart’s rows in a repeating pattern.

rowCount

rowCount: undefined | number

The number of rows that will be rendered.

rowHeight

rowHeight: undefined | number

The height in pixels of a horizontal row in the Chart. This defaults to a value of 10.

rowOpacity

rowOpacity: undefined | number

The opacity of the colored row stripes.

selector

selector: string

A string that can be used to uniquely select the target DOM container.

trackHeight

trackHeight: undefined | number

The “height” of the radial track on which annotations will be rendered. Conceptually, this is equal to to the difference of the radii of two concentric circles that define an annulus.

updateDimensions

updateDimensions: undefined | (params: P): void

The rendering callback function that should be responsible for updating the Chart’s DOM element dimensions.

updateDomain

updateDomain: undefined | (params: P): void

The rendering callback function that should be responsible for updating the domain of the Chart.xScale property.

updateLayout

updateLayout: undefined | (params: P): void

The rendering callback function that should be responsible for updating the Chart.layout property.

updateRowCount

updateRowCount: undefined | (params: P): void

The rendering callback function that should be responsible for updating the Chart.rowCount property.

upperPadSize

upperPadSize: undefined | number

The number of pixels of padding on the top of the Chart.

zoomConstraint

zoomConstraint: undefined | None

A Chart’s contents are scaled by a scaling factor k. If a zoomConstraint of the form [min_k, max_k] is provided, the scaling factor will be constrained to that interval. This will not constrain panning.

zoomable

zoomable: undefined | boolean

This controls whether or not the Chart will be configured to allow zooming and panning.

RectangleConfig

interface RectangleConfig<A extends Annotation, C extends Chart>

An interface that defines the parameters for a call to the rectangle rendering function.

Type parameters

A: Annotation

C: Chart

Properties

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

chart

chart: C

The Chart object in which the glyphs will be rendered.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s initialization method, which typically sets most of the style related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s zoom method, which typically sets most of the positioning related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

RenderParams

interface RenderParams

This defines the parameters for a call to a Chart’s rendering method.

Properties

annotations

annotations: undefined | Annotation []

The Annotation objects to be rendered.

end

end: undefined | number

The end coordinate of the region that will be rendered.

rowCount

rowCount: undefined | number

The number of rows that will be rendered.

start

start: undefined | number

The start coordinate of the region that will be rendered.

SequenceAnnotation

interface SequenceAnnotation

Properties

end

end: number

The end coordinate of the Annotation.

id

id: string

A unique identifier for the Annotation.

sequence

sequence: string

start

start: number

The start coordinate of the Annotation.

SequenceConfig

interface SequenceConfig<S extends SequenceAnnotation, C extends Chart>

An interface that defines the parameters for a call to the sequence rendering function.

Type parameters

S: SequenceAnnotation

C: Chart

Properties

annotations

annotations: S []

A list of Annotation objects that will be used to render the glyphs.

chart

chart: C

The Chart object in which the glyphs will be rendered.

fillColor

fillColor: undefined | string | GlyphCallback <S, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <S, C, number>

A callback to define the fill opacity of the glyph.

height

height: undefined | number | GlyphCallback <S, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s initialization method, which typically sets most of the style related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

row

row: undefined | number | GlyphCallback <S, C, number>

A callback to define the row that the glyph is placed in.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <S, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <S, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <S, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <S, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <S, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <S, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <S, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

width

width: undefined | number | GlyphCallback <S, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <S, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <S, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s zoom method, which typically sets most of the positioning related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

SimpleTextConfig

interface SimpleTextConfig<A extends Annotation, C extends Chart>

An interface that defines the parameters for a call to the text rendering function.

Type parameters

A: Annotation

C: Chart

Properties

alignmentBaseline

alignmentBaseline: undefined | string | GlyphCallback <A, C, string>

How the text glyph is aligned with it’s parent. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

chart

chart: C

The Chart object in which the glyphs will be rendered.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

fontFamily

fontFamily: undefined | string | GlyphCallback <A, C, string>

The font family that will be used. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-family

fontSize

fontSize: undefined | number | GlyphCallback <A, C, number>

The font size of the text.

fontStyle

fontStyle: undefined | string | GlyphCallback <A, C, string>

The font style: normal, italic, or oblique. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-style

fontWeight

fontWeight: undefined | string | GlyphCallback <A, C, string>

The weight of the font: normal, bold, bolder, lighter. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-weight

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

text

text: GlyphProperty <A, C, string>

The text to display in the glyph.

textAnchor

textAnchor: undefined | string | GlyphCallback <A, C, string>

Where the text is aligned to: start, middle, or end. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

SliceConfig

interface SliceConfig<A extends Annotation>

Type parameters

A: Annotation

Properties

annotations

annotations: A []

end

end: number

start

start: number

TooltipConfig

interface TooltipConfig<A extends Annotation, C extends Chart>

An interface that defines the parameters for a call to the tooltip function.

Type parameters

A: Annotation

C: Chart

Properties

annotations

annotations: A []

The Annotations to which the interaction is applied.

backgroundColor

backgroundColor: undefined | string | GlyphCallback <A, C, string>

This defines the background color of the tooltip.

borderRadius

borderRadius: undefined | number | GlyphCallback <A, C, number>

This defines the border radius of the tooltip.

chart

chart: undefined | C

The Chart to which the interaction is applied.

fontFamily

fontFamily: undefined | string | GlyphCallback <A, C, string>

The font family that will be used. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-family

fontSize

fontSize: undefined | number | GlyphCallback <A, C, number>

The font size of the text.

fontStyle

fontStyle: undefined | string | GlyphCallback <A, C, string>

The font style: normal, italic, or oblique. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-style

fontWeight

fontWeight: undefined | string | GlyphCallback <A, C, string>

The weight of the font: normal, bold, bolder, lighter. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-weight

opacity

opacity: undefined | number | GlyphCallback <A, C, number>

This defines the opacity of the tooltip.

padding

padding: undefined | number | GlyphCallback <A, C, number>

This defines the CSS padding of the tooltip.

selector

selector: undefined | string

The selector of the glyphs to which the interaction is applied.

text

text: GlyphProperty <A, C, string>

This defines the text for the tooltip.

textColor

textColor: undefined | string | GlyphCallback <A, C, string>

This defines the tooltip text color.

VerticalAxisConfig

interface VerticalAxisConfig<A extends Annotation, C extends Chart>

An interface that defines the parameters for a call to the verticalAxis rendering function.

Type parameters

A: Annotation

C: Chart

Properties

annotations

annotations: A []

A list of Annotation objects that will be used to render the glyphs.

axisType

axisType: undefined | Left | Right

This determines whether the ticks and labels will be placed on the left or the right of the axis.

chart

chart: C

The Chart object in which the glyphs will be rendered.

domain

domain: undefined | None | GlyphCallback <A, C, None>

This defines the domain of the axis.

fillColor

fillColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the fill color of the glyph.

fillOpacity

fillOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the fill opacity of the glyph.

height

height: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel height of the glyph.

initializeFn

initializeFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s initialization method, which typically sets most of the style related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

range

range: undefined | None | GlyphCallback <A, C, None>

This defines the range of the axis.

row

row: undefined | number | GlyphCallback <A, C, number>

A callback to define the row that the glyph is placed in.

rowSpan

rowSpan: undefined | number

The number of bins that the axis will span. This defaults to 1, which forces the axis to fit into one row. If an argument is supplied, it will cause the axis to grow downward. It will have no effect if a custom domain function is supplied.

selector

selector: undefined | string

The string that will be used to uniquely identify the call to the glyph rendering function. In the DOM, the glyphs’ elements will have this assigned as an ID. If the same selector is supplied to two distinct calls to the same glyph function, the rendering results of the first call will be cleared and replaced with the results of the second.

strokeColor

strokeColor: undefined | string | GlyphCallback <A, C, string>

A callback to define the color of the border around the glyph.

strokeDashArray

strokeDashArray: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke dash array of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

strokeDashOffset

strokeDashOffset: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke dash array (if supplied) of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

strokeLineCap

strokeLineCap: undefined | string | GlyphCallback <A, C, string>

A callback to define the stroke linecap of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

strokeLineJoin

strokeLineJoin: undefined | string | GlyphCallback <A, C, string>

A callback to define the offset for the stroke linejoin of the glyph. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

strokeOpacity

strokeOpacity: undefined | number | GlyphCallback <A, C, number>

A callback to define the opacity of the border around the glyph.

strokeWidth

strokeWidth: undefined | number | GlyphCallback <A, C, number>

A callback to define the width of the border around the glyph.

target

target: undefined | Selection <any, any, any, any> | Viewport | Overflow | Defs

This determines the parent DOM element in which the glyphs will be rendered. When supplying a BindTarget, the rendering function will find the appropriate parent in the supplied Chart. When supplying a D3 selection, the rendering function will explicitly use the selected element.

tickSizeOuter

tickSizeOuter: undefined | number | GlyphCallback <A, C, number>

This defines the tick property that will be passed to D3’s axis.tickSizeOuter function. For more information, see https://github.com/d3/d3-axis#axis_tickSizeOuter

ticks

ticks: undefined | number | GlyphCallback <A, C, number>

This defines the tick property that will be passed to D3’s axis.ticks function. For more information, see https://github.com/d3/d3-axis#axis_ticks

width

width: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel width of the glyph.

x

x: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel x coordinate of the glyph.

y

y: undefined | number | GlyphCallback <A, C, number>

A callback to define the pixel y coordinate of the glyph

zoomFn

zoomFn: undefined | (): void

A callback function that will be passed to the GlyphModifier that will manage the glyphs created with this config. If provided, this callback function will override the GlyphModifier’s zoom method, which typically sets most of the positioning related properties from the GlyphConfig. Don’t use this unless you know what you’re doing.

VerticalLayout

interface VerticalLayout

An interface that defines the object that Charts use to store the vertical layout of glyphs.

Properties

row

row: GlyphCallback <Annotation, Chart <any>, number>

This callback is used by default to place a glyph in a Chart’s row.

rowCount

rowCount: number

This value is used by default to set the height of a Chart to display the required number of rows.

Functions

aggregateIntransitive

function aggregateIntransitive<A extends Annotation>(config: AggregationConfig <A>): None

A utility function that aggregates Annotation objects into Annotation groups based off of the supplied criterion. This function assumes that your aggregation criterion is not transitive, i.e. if criterion(a, b) and criterion(b, c) evaluate to true, then criterion(a, c) doesn’t necessarily evaluate to true.

Type parameters

A: Annotation

Parameters

config: AggregationConfig <A>

Returns: AnnotationGroup <A> []

aggregateTransitive

function aggregateTransitive<A extends Annotation>(config: AggregationConfig <A>): None

A utility function that aggregates Annotation objects into Annotation groups based off of the supplied criterion. This function assumes that your aggregation criterion is transitive, i.e. if criterion(a, b) and criterion(b, c) evaluate to true, then criterion(a, c) must evaluate to true.

Type parameters

A: Annotation

Parameters

config: AggregationConfig <A>

Returns: AnnotationGroup <A> []

arc

function arc<A extends Annotation, C extends Chart>(config: ArcConfig <A, C>): d3.Selection

This renders a list of Annotation objects as arcs in a Chart.

Type parameters

A: Annotation
C: Chart

Parameters

config: ArcConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

area

function area<A extends PlotAnnotation, C extends Chart>(config: AreaConfig <A, C>): d3.Selection

This renders PlotAnnotations as area glyphs in a Chart.

Type parameters

A: PlotAnnotation
C: Chart

Parameters

config: AreaConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

augment

function augment<T extends generic>(config: AugmentConfig <T>): None

This takes a list of any object T, and a set of callback functions that describe how to give it the id, start, and end properties that satisfy the Annotation interface. The idea here is to allow you to get valid Annotation objects without having to write a class. Each property function is wrapped in an AugmentParam object has one other boolean property called “virtual.” If virtual is set to true, the callback function will be applied as a getter for its corresponding property. If virtual is false or undefined, the callback function will be evaluated while augment() is running and the value will be applied as a real property on the object. Finally, the augment function checks to make sure that each Annotation property on each object has the correct type, throwing an exception if there are any incorrect types. This check can be skipped by setting skipValidate to true, probably improving performance measurably. You’ll want to be careful if you decide to skip the validation, and if you’re really worried about performance you’ll probably want to avoid using this function altogether and write a proper class.

Type parameters

T: generic

Parameters

config: AugmentConfig <T>

Returns: T & Annotation []

axisRadialInner

function axisRadialInner(angleScale: d3.ScaleLinear <number, number>, radius: number): None

Parameters

angleScale: d3.ScaleLinear <number, number>
radius: number

Returns: (selection: d3.Selection <any, any, any, any>): void

axisRadialOuter

function axisRadialOuter(angleScale: d3.ScaleLinear <number, number>, radius: number): None

Parameters

angleScale: d3.ScaleLinear <number, number>
radius: number

Returns: (selection: d3.Selection <any, any, any, any>): void

barPlot

function barPlot<A extends PlotAnnotation, C extends Chart>(config: BarPlotConfig <A, C>): d3.Selection

This renders PlotAnnotations as bar plots in a Chart.

Type parameters

A: PlotAnnotation
C: Chart

Parameters

config: BarPlotConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

chevronLine

function chevronLine<A extends Annotation, C extends Chart>(config: ChevronLineConfig <A, C>): d3.Selection

This renders Annotations as lines with chevron arrows in a Chart.

Type parameters

A: Annotation
C: Chart

Parameters

config: ChevronLineConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

chevronRectangle

function chevronRectangle<A extends Annotation, C extends Chart>(config: ChevronRectangleConfig <A, C>): d3.Selection

This renders Annotations as rectangles with chevron arrows in a Chart.

Type parameters

A: Annotation
C: Chart

Parameters

config: ChevronRectangleConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

clickBehavior

function clickBehavior<A extends Annotation, C extends Chart>(config: ClickConfig <A, C>): void

This applies click interactions to a list of Annotations.

Type parameters

A: Annotation
C: Chart

Parameters

config: ClickConfig <A, C>

Returns: void

dynamicText

function dynamicText<A extends Annotation, C extends Chart>(config: DynamicTextConfig <A, C>): d3.Selection

This renders a list of Annotation objects as text in a Chart.

Type parameters

A: Annotation
C: Chart

Parameters

config: DynamicTextConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

exportPng

function exportPng<C extends Chart>(config: ExportConfig <C>): void

Save the current view in a chart as a PNG image.

Type parameters

C: Chart

Parameters

config: ExportConfig <C>

Returns: void

generateAnnotations

function generateAnnotations(conf: AnnotationGenerationConfig): None

A utility function to generate some uniformly distributed Annotation objects. This is intended for testing/prototyping/playing around.

Parameters

conf: AnnotationGenerationConfig

Returns: Annotation []

generateId

function generateId(prefix: string): string

Get an auto-generated string identifier of the form “<prefix>-<count>,” where prefix defaults to “soda-id” and count is incremented for every call to this function. A unique count is maintained for each prefix.

Parameters

prefix: string

Returns: string

generatePlotAnnotations

function generatePlotAnnotations(conf: AnnotationGenerationConfig): None

A utility function to generate some PlotAnnotation objects. This is intended for testing/prototyping/playing around.

Parameters

conf: AnnotationGenerationConfig

Returns: PlotAnnotation []

generateSequenceAnnotations

function generateSequenceAnnotations(conf: AnnotationGenerationConfig): None

A utility function to generate some SequenceAnnotation objects. This is intended for testing/prototyping/playing around.

Parameters

conf: AnnotationGenerationConfig

Returns: SequenceAnnotation []

getAlignmentAnnotations

function getAlignmentAnnotations(config: AlignmentConfig): None

This returns a set of SequenceAnnotations defined such that the provided query sequence can be rendered in a Chart as if it were aligned to a chromosome. The matches, substitutions, gaps, and insertions are returned as separate objects. The idea here is that they can be rendered individually with different style parameters.

Parameters

config: AlignmentConfig

Returns: None

getAllAnnotationIds

function getAllAnnotationIds(): None

This returns a list of all of the Annotation IDs that have been used to render glyphs.

Returns: string []

getAnnotationById

function getAnnotationById(id: string): Annotation

This function produces a reference to Annotation object that is mapped with the provided string id. It will throw an exception if the id is not in the internal map.

Parameters

id: string

Returns: Annotation

getAxis

function getAxis(scale: d3.ScaleLinear <number, number>, axisType: AxisType): d3.Axis

A utility function that returns the results of the various d3 axis functions.

Parameters

scale: d3.ScaleLinear <number, number>
axisType: AxisType

Returns: d3.Axis <number | None>

greedyGraphLayout

function greedyGraphLayout<A extends Annotation>(ann: A [], tolerance: number, vertSortFunction: (verts: string [], graph: AnnotationGraph <A>): void): MapVerticalLayout

This function takes a list of Annotation objects and uses a deterministic greedy graph coloring algorithm to assign each of them a y coordinate in terms of horizontal bins that will prevent any horizontal overlap when they are rendered in a Chart.

Type parameters

A: Annotation

Parameters

ann: A []
tolerance: number
vertSortFunction: (verts: string [], graph: AnnotationGraph <A>): void

Returns: MapVerticalLayout

heatmap

function heatmap<A extends PlotAnnotation, C extends Chart>(config: HeatmapConfig <A, C>): d3.Selection

This renders PlotAnnotations as heatmaps in a Chart.

Type parameters

A: PlotAnnotation
C: Chart

Parameters

config: HeatmapConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

heuristicGraphLayout

function heuristicGraphLayout(ann: Annotation [], nIters: number, tolerance: number): MapVerticalLayout

This function takes a list of Annotation objects and uses a non-deterministic greedy graph coloring heuristic to assign each of them a y coordinate in terms of horizontal bins that will prevent any horizontal overlap when they are rendered in a Chart.

Parameters

ann: Annotation []
nIters: number
tolerance: number

Returns: MapVerticalLayout

horizontalAxis

function horizontalAxis<A extends Annotation, C extends Chart>(config: HorizontalAxisConfig <A, C>): d3.Selection

This renders Annotations as horizontal axes in a Chart.

Type parameters

A: Annotation
C: Chart

Parameters

config: HorizontalAxisConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

hoverBehavior

function hoverBehavior<A extends Annotation, C extends Chart>(config: HoverConfig <A, C>): void

This applies hover interactions to a list of Annotations.

Type parameters

A: Annotation
C: Chart

Parameters

config: HoverConfig <A, C>

Returns: void

intervalGraphLayout

function intervalGraphLayout(ann: Annotation [], tolerance: number): MapVerticalLayout

This function takes a list of Annotation objects and uses a greedy interval scheduling algorithm to assign each of them a y coordinate in terms of horizontal bins that will prevent any horizontal overlap when they are rendered in a Chart.

Parameters

ann: Annotation []
tolerance: number

Returns: MapVerticalLayout

line

function line<A extends Annotation, C extends Chart>(config: LineConfig <A, C>): d3.Selection

This renders a list of Annotation objects as lines in a Chart.

Type parameters

A: Annotation
C: Chart

Parameters

config: LineConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

linePlot

function linePlot<A extends PlotAnnotation, C extends Chart>(config: LinePlotConfig <A, C>): d3.Selection

This renders PlotAnnotations as line plots in a Chart.

Type parameters

A: PlotAnnotation
C: Chart

Parameters

config: LinePlotConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

parseBedRecords

function parseBedRecords(records: string | string []): None

A utility function to parse a general BED record. There are no guarantees about which fields end up being present in the resulting BED objects.

Parameters

records: string | string []

Returns: BedAnnotation []

parseGff3Records

function parseGff3Records(records: string | string []): None

A utility function to parse a GFF3 records. This function accepts either a string of newline delimited GFF3 records, or an array of individual record strings.

Parameters

records: string | string []

Returns: Gff3Annotation []

parseOrientation

function parseOrientation(str: string): Orientation

A utility function to parse an Orientation enum from a string. For now, this is pretty basic and far from robust.

Parameters

str: string

Returns: Orientation

queryGlyphMap

function queryGlyphMap(config: GlyphQueryConfig): None

This function returns GlyphMappings. If all three parameters (id, selector, chart) are supplied in the config, the function will return a single D3 selection. Otherwise, the function will return a list of D3 selections.

Parameters

config: GlyphQueryConfig

Returns: d3.Selection [] | undefined

radialRectangle

function radialRectangle<A extends Annotation, C extends RadialChart>(config: RectangleConfig <A, C>): d3.Selection

This renders a list of Annotation objects as rectangles in a RadialChart.

Type parameters

A: Annotation
C: RadialChart

Parameters

config: RectangleConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

rectangle

function rectangle<A extends Annotation, C extends Chart>(config: RectangleConfig <A, C>): d3.Selection

This renders a list of Annotation objects as rectangles in a Chart.

Type parameters

A: Annotation
C: Chart

Parameters

config: RectangleConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

removeGlyphsByQuery

function removeGlyphsByQuery(config: GlyphQueryConfig): void

Parameters

config: GlyphQueryConfig

Returns: void

resolveValue

function resolveValue<A extends Annotation, C extends Chart, V extends generic>(property: GlyphProperty <A, C, V>, d: AnnotationDatum <A, C>): V

A utility function that resolves the value from a GlyphProperty. If the property is a callback function, it will be called to retrieve the value. Otherwise, it will just return the value.

Type parameters

A: Annotation
C: Chart
V: generic

Parameters

property: GlyphProperty <A, C, V>
d: AnnotationDatum <A, C>

Returns: V

sequence

function sequence<S extends SequenceAnnotation, C extends Chart>(config: SequenceConfig <S, C>): d3.Selection

This renders a list of SequenceAnnotation objects as sequence glyphs in a Chart.

Type parameters

S: SequenceAnnotation
C: Chart

Parameters

config: SequenceConfig <S, C>

Returns: d3.Selection <SVGGElement, string, any, any>

setKeySeparator

function setKeySeparator(separator: string): void

Set the separator that SODA uses to build map keys. The keys are of the form: <annotation ID><separator><glyph selector><separator><chart ID>.

Parameters

separator: string

Returns: void

simpleText

function simpleText<A extends Annotation, C extends Chart>(config: SimpleTextConfig <A, C>): d3.Selection

This renders a list of Annotation objects as text in a Chart.

Type parameters

A: Annotation
C: Chart

Parameters

config: SimpleTextConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

slicePlotAnnotations

function slicePlotAnnotations(config: SliceConfig <PlotAnnotation>): None

Parameters

config: SliceConfig <PlotAnnotation>

Returns: AnnotationGroup | undefined

sliceSequenceAnnotations

function sliceSequenceAnnotations(config: SliceConfig <SequenceAnnotation>): None

Parameters

config: SliceConfig <SequenceAnnotation>

Returns: AnnotationGroup | undefined

unmapAnnotationById

function unmapAnnotationById(id: string): void

Parameters

id: string

Returns: void

verticalAxis

function verticalAxis<A extends Annotation, C extends Chart>(config: VerticalAxisConfig <A, C>): d3.Selection

This renders Annotations as vertical axes in a chart. This is intended to be used in conjunction with one of the plotting glyph modules.

Type parameters

A: Annotation
C: Chart

Parameters

config: VerticalAxisConfig <A, C>

Returns: d3.Selection <SVGGElement, string, any, any>

Enumerations

AxisType

enum AxisType

A simple enum to serve as an argument for selecting which D3 Axis function to call.

Members

Bottom

Bottom: = "bottom"

Left

Left: = "left"

Right

Right: = "right"

Top

Top: = "top"

BindTarget

enum BindTarget

An enumeration of the targets in a Chart that an Annotation can be bound to.

Members

Defs

Defs: = "defs"

The defs section, where things like patterns are supposed to go.

Overflow

Overflow: = "overflow"

The secondary viewport of a Chart in which a glyph is allowed to render outside the explicit bounds.

Viewport

Viewport: = "viewport"

The default viewport of a Chart.

FillDirection

enum FillDirection

A simple enum to define the direction that an area glyph fills in.

Members

Down

Down: = "down"

Up

Up: = "up"

GenerationPattern

enum GenerationPattern

Members

Random

Random: = "random"

Sequential

Sequential: = "sequential"

Orientation

enum Orientation

A simple enum to define strand orientation.

Members

Forward

Forward: = "+"

Represents the forward strand.

Reverse

Reverse: = "-"

Represents the reverse strand.

Unknown

Unknown: = "?"

Represents an unknown strand where strand information would be relevant (if it were known).

Unoriented

Unoriented: = "."

Represents no strand.

This is the documentation for SODA, a TypeScript/Javascript library for creating genomic annotation visualizations.