Rule

Rule mark displays each data item as a line segment. Rules can span the whole width or height of the view. Alternatively, they may have specific endpoints.

{
  "description": "Rule mark example.",

  "data": {
    "sequence": { "start": 0, "stop": 15, "as": "y" }
  },

  "mark": { "type": "rule", "strokeDash": [6, 3] },

  "encoding": {
    "x": { "field": "y", "type": "quantitative" },
    "color": { "field": "y", "type": "nominal" }
  }
}

Channels

Rule mark supports the primary and secondary position channels and the color, opacity, and size channels.

Properties

buildIndex

Type: boolean

Whether the x channel should build an index for efficient subset rendering. If omitted, GenomeSpy enables indexing automatically for positional x encodings.

clip

Type: boolean | "never"

If true, the mark is clipped to the UnitView's rectangle. By default, clipping is enabled for marks that have zoomable positional scales.

color

Type: string | ExprRef

Color of the mark. Affects either fill or stroke, depending on the filled property.

cursor

Type: string | ExprRef

Mouse cursor shown while the pointer is over the mark. Mark cursor takes precedence over enclosing view cursors.

Default value: browser default

minBufferSize

Type: number

Minimum size for WebGL buffers (number of data items). Allows for using bufferSubData() to update graphics.

This property is intended for internal use.

minLength

Type: number | ExprRef

The minimum stroke length in pixels. Use this property to ensure that very short strokes remain visible even when the user zooms out.

Default value: 0

opacity

Type: number | ExprRef

Opacity of the mark. Affects fillOpacity or strokeOpacity, depending on the filled property.

size

Type: number | ExprRef

Stroke width of "link" and "rule" marks in pixels, the area of the bounding square of "point" mark, or the font size of "text" mark.

strokeCap

Type: "butt" | "square" | "round" | ExprRef

The style of stroke ends. Available choices: "butt", "round", and "square".

Default value: "butt"

strokeDash

Type: array

An array of of alternating stroke and gap lengths or null for solid strokes.

Default value: null

strokeDashOffset

Type: number

An offset for the stroke dash pattern.

Default value: 0

style

Type: string | string[]

Named style reference(s) resolved from config.style. If an array is provided, later styles override earlier ones.

tooltip

Type: HandledTooltip | null | boolean

Tooltip handler. If null, no tooltip is shown. If string, specifies the tooltip handler to use.

x

Type: number | ExprRef

Position on the x axis.

x2

Type: number | ExprRef

The secondary position on the x axis.

xOffset

Type: number

Offsets of the x and x2 coordinates in pixels. The offset is applied after the viewport scaling and translation.

Default value: 0

y

Type: number | ExprRef

Position on the y axis.

y2

Type: number | ExprRef

The secondary position on the y axis.

yOffset

Type: number

Offsets of the y and y2 coordinates in pixels. The offset is applied after the viewport scaling and translation.

Default value: 0

Examples

Ranged rules

{
  "description": "Ranged rule mark example.",

  "data": {
    "values": [
      { "y": "A", "x": 2, "x2": 7 },
      { "y": "B", "x": 0, "x2": 3 },
      { "y": "B", "x": 5, "x2": 6 },
      { "y": "C", "x": 4, "x2": 8 },
      { "y": "D", "x": 1, "x2": 5 }
    ]
  },

  "mark": { "type": "rule", "size": 10, "strokeCap": "round" },

  "encoding": {
    "y": { "field": "y", "type": "nominal" },
    "x": { "field": "x", "type": "quantitative" },
    "x2": { "field": "x2" }
  }
}

Human-mouse synteny

{
  "description": [
    "Human-mouse synteny example",
    "Data source: http://bioinfo.konkuk.ac.kr/synteny_portal/"
  ],

  "width": 400,
  "height": 400,

  "view": { "stroke": "lightgray" },

  "data": { "url": "data/synteny-hg38-mm10.tsv" },

  "mark": {
    "type": "rule",
    "strokeCap": "round",
    "size": 2
  },

  "encoding": {
    "x": {
      "chrom": "hg38_chrom",
      "pos": "hg38_start",
      "type": "locus",
      "scale": { "type": "locus", "assembly": "hg38" },
      "axis": { "chromGrid": true, "chromGridColor": "#bbb" },
      "title": "hg38"
    },
    "x2": { "chrom": "hg38_chrom", "pos": "hg38_end" },
    "y": {
      "chrom": "mm10_chrom",
      "pos": "mm10_start",
      "type": "locus",
      "scale": { "type": "locus", "assembly": "mm10" },
      "axis": { "chromGrid": true, "chromGridColor": "#bbb" },
      "title": "mm10"
    },
    "y2": { "chrom": "mm10_chrom", "pos": "mm10_end" },
    "color": { "field": "mm10_chrom", "type": "nominal" }
  }
}