latest
Guide
Introduction
Before you start
Design philosophies
Installation and setup
SODA as a TypeScript library
SODA as a JavaScript library
Overview
Annotations
Annotation interfaces
Annotation
PlotAnnotation
SequenceAnnotation
Annotation utilities
Established data formats
Charts
Chart anatomy
Chart configuration
Dimensions configuration
Rendering configuration
Default axes
Row colors
Zooming and panning
Resizing
Zoom and resize callbacks
Chart scales
Chart observers
Loading annotation data
Using a SODA-tailored REST API
Example SODA-tailored REST API
Fetch requests and object serialization
Defining an interface for your data
Using a standard REST API
Format a GET request
Determine the response structure
Defining interfaces for responses
Producing proper Annotation objects
Using augment()
Writing a class
Local files
Setting up a webpage to accept a file input
JSON files
BED or GFF3 files
Anything else
Rendering
Glyph rendering functions
Glyph selectors
Glyph properties
The canonical rendering pattern
Default rendering routine
RenderParams
Chart.render()
Chart.updateLayout()
Chart.updateRowCount()
Chart.updateDimensions()
Chart.updateDomain()
Chart.draw()
Customizing the rendering routine
Interactivity
Glyph mapping
Examples
Simple rectangles
Styled rectangles
Dynamic text
Interactivity
Plot annotations
Sequence annotations
Api
Classes
AnnotationGroup
Constructors
Properties
annotations
end
id
start
Methods
add
addAnnotation
Chart
Constructors
Properties
_divHeight
_divMargin
_divOutline
_divOverflowX
_divOverflowY
_divWidth
_padHeight
_padWidth
_renderParams
_transform
_viewportHeight
_viewportWidth
axisConfig
containerSelection
defSelection
divSelection
domainConstraint
draw
glyphModifiers
highlightSelection
id
initialDomain
layout
leftPadSize
lowerPadSize
observers
overflowViewportSelection
padSelection
padSize
postRender
postResize
postZoom
resizable
rightPadSize
rowColors
rowCount
rowHeight
rowOpacity
selector
updateDimensions
updateDomain
updateLayout
updateRowCount
upperPadSize
viewportHeightPx
viewportSelection
viewportWidthPx
xScale
yScale
zoomConstraint
zoomable
Accessors
divHeight
divMargin
divOutline
divOverflowX
divOverflowY
divWidth
domain
range
renderParams
transform
viewportHeight
viewportWidth
Methods
addAxis
addGlyphModifier
addRowStripes
alertObservers
applyGlyphModifiers
calculateContainerDimensions
calculateContainerHeight
calculateContainerWidth
calculateDivDimensions
calculatePadDimensions
calculatePadHeight
calculatePadWidth
calculateViewportDimensions
calculateViewportHeight
calculateViewportWidth
clear
clearHighlight
configureResize
configureZoom
defaultDraw
defaultPostRender
defaultUpdateDimensions
defaultUpdateDomain
defaultUpdateLayout
defaultUpdateRowCount
disableZoom
domainFromMousemoveEvent
domainFromWheelEvent
highlight
initializeXScale
removeRowStripes
render
resetTransform
resize
setDivStyle
setPadAttribute
setViewportAttribute
updateDivHeight
updateDivWidth
updatePadHeight
updateRange
updateViewportHeight
updateViewportPosition
updateViewportProperties
updateViewportWidth
zoom
zoomHighlight
getDomainFromAnnotations
ChartObserver
Constructors
Properties
charts
Methods
add
addChart
alert
RadialChart
Constructors
Properties
_divHeight
_divMargin
_divOutline
_divOverflowX
_divOverflowY
_divWidth
_padHeight
_padWidth
_renderParams
_transform
_viewportHeight
_viewportWidth
axisConfig
containerSelection
defSelection
divSelection
domainConstraint
draw
glyphModifiers
highlightSelection
id
initialDomain
innerRadius
layout
leftPadSize
lowerPadSize
notchAngle
observers
outerRadius
outerRadiusRatio
overflowViewportSelection
padSelection
padSize
postRender
postResize
postZoom
resizable
rightPadSize
rowColors
rowCount
rowHeight
rowOpacity
selector
trackHeight
trackHeightRatio
trackOutlineSelection
updateDimensions
updateDomain
updateLayout
updateRowCount
upperPadSize
viewportHeightPx
viewportSelection
viewportWidthPx
xScale
yScale
zoomConstraint
zoomable
Accessors
divHeight
divMargin
divOutline
divOverflowX
divOverflowY
divWidth
domain
range
renderParams
transform
viewportHeight
viewportWidth
Methods
addAxis
addGlyphModifier
addRowStripes
addTrackOutline
alertObservers
applyGlyphModifiers
calculateContainerDimensions
calculateContainerHeight
calculateContainerWidth
calculateDivDimensions
calculatePadDimensions
calculatePadHeight
calculatePadWidth
calculateViewportDimensions
calculateViewportHeight
calculateViewportWidth
clear
clearHighlight
configureResize
configureZoom
defaultDraw
defaultPostRender
defaultUpdateDimensions
defaultUpdateDomain
defaultUpdateLayout
defaultUpdateRowCount
disableZoom
domainFromMousemoveEvent
domainFromWheelEvent
fitRadialDimensions
highlight
initializeXScale
removeRowStripes
render
renderTrackOutline
resetTransform
resize
setDivStyle
setPadAttribute
setViewportAttribute
squareToDivWidth
updateDivHeight
updateDivWidth
updatePadHeight
updateRange
updateViewportHeight
updateViewportPosition
updateViewportProperties
updateViewportWidth
zoom
zoomHighlight
getDomainFromAnnotations
ZoomSyncer
Constructors
Properties
charts
Methods
add
addChart
alert
Interfaces
AggregationConfig
Properties
annotations
criterion
idPrefix
AlignmentAnnotations
Properties
gaps
insertions
matches
substitutions
AlignmentConfig
Properties
end
id
query
start
target
Annotation
Properties
end
id
start
AnnotationDatum
Properties
a
c
AnnotationGenerationConfig
Properties
generationPattern
maxX
maxY
n
pad
startY
width
AnnotationGroupConfig
Properties
annotations
end
id
start
ArcConfig
Properties
annotations
chart
fillColor
fillOpacity
height
row
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
width
x
y
AreaConfig
Properties
annotations
chart
domain
fillColor
fillDirection
fillOpacity
height
range
row
rowSpan
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
width
x
y
AugmentConfig
Properties
end
id
objects
skipValidate
start
AugmentParam
Properties
fn
virtual
BarPlotConfig
Properties
annotations
chart
domain
fillColor
fillOpacity
height
range
row
rowSpan
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
width
x
y
BedAnnotation
Properties
blockCount
blockSizes
blockStarts
chrom
end
id
itemRgb
name
score
start
strand
thickEnd
thickStart
ChartAxisConfig
Properties
axisType
dominantBaseline
fillColor
fillOpacity
fontFamily
fontSize
fontStyle
fontWeight
labelFillColor
labelFillOpacity
labelStrokeColor
labelStrokeOpacity
labelStrokeWidth
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
textAnchor
tickFillColor
tickFillOpacity
tickFormat
tickPadding
tickSizeInner
tickSizeOuter
tickStrokeColor
tickStrokeOpacity
tickStrokeWidth
ticks
ChartConfig
Properties
axisConfig
debugShading
divHeight
divMargin
divOutline
divOverflowX
divOverflowY
divWidth
domainConstraint
draw
id
leftPadSize
lowerPadSize
padSize
postRender
postResize
postZoom
resizable
rightPadSize
rowColors
rowCount
rowHeight
rowOpacity
selector
updateDimensions
updateDomain
updateLayout
updateRowCount
upperPadSize
zoomConstraint
zoomable
ChevronGlyphConfig
Properties
annotations
chart
chevronFillColor
chevronFillOpacity
chevronHeight
chevronSpacing
chevronStrokeColor
chevronStrokeOpacity
chevronWidth
fillColor
fillOpacity
height
orientation
row
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
width
x
y
ChevronLineConfig
Properties
annotations
chart
chevronFillColor
chevronFillOpacity
chevronHeight
chevronSpacing
chevronStrokeColor
chevronStrokeOpacity
chevronWidth
fillColor
fillOpacity
height
orientation
row
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
width
x
x1
x2
y
y1
y2
ChevronRectangleConfig
Properties
annotations
chart
chevronFillColor
chevronFillOpacity
chevronHeight
chevronSpacing
chevronStrokeColor
chevronStrokeOpacity
chevronWidth
fillColor
fillOpacity
height
orientation
row
rx
ry
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
width
x
y
ClickConfig
Properties
annotations
chart
click
selector
DynamicTextConfig
Properties
annotations
chart
dominantBaseline
fillColor
fillOpacity
fontFamily
fontSize
fontStyle
fontWeight
height
row
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
text
textAnchor
width
x
y
ExportConfig
Properties
chart
filename
pixelRatio
FullGlyphQueryConfig
Properties
annotations
chart
selector
Gff3Annotation
Properties
attributes
end
id
phase
score
seqid
source
start
strand
type
GlyphConfig
Properties
annotations
chart
fillColor
fillOpacity
height
row
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
width
x
y
GlyphQueryConfig
Properties
annotations
chart
selector
HighlightConfig
Properties
color
end
opacity
selector
start
HorizontalAxisConfig
Properties
annotations
axisType
chart
domain
dominantBaseline
fillColor
fillOpacity
fixed
fontFamily
fontSize
fontStyle
fontWeight
height
labelFillColor
labelFillOpacity
labelStrokeColor
labelStrokeOpacity
labelStrokeWidth
range
row
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
textAnchor
tickFillColor
tickFillOpacity
tickFormat
tickPadding
tickSizeInner
tickSizeOuter
tickStrokeColor
tickStrokeOpacity
tickStrokeWidth
ticks
width
x
y
HoverConfig
Properties
annotations
chart
mouseout
mouseover
selector
LineConfig
Properties
annotations
chart
fillColor
fillOpacity
height
row
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
width
x
x1
x2
y
y1
y2
LinePlotConfig
Properties
annotations
chart
domain
fillColor
fillOpacity
height
range
row
rowSpan
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
width
x
y
MapVerticalLayout
Properties
row
rowCount
rowMap
PlotAnnotation
Properties
end
id
start
values
RadialAxisConfig
Properties
annotations
axisType
chart
domain
dominantBaseline
fillColor
fillOpacity
fixed
fontFamily
fontSize
fontStyle
fontWeight
height
labelFillColor
labelFillOpacity
labelStrokeColor
labelStrokeOpacity
labelStrokeWidth
range
row
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
textAnchor
tickFillColor
tickFillOpacity
tickFormat
tickPadding
tickSizeInner
tickSizeOuter
tickStrokeColor
tickStrokeOpacity
tickStrokeWidth
ticks
width
x
y
RadialChartConfig
Properties
axisConfig
debugShading
divHeight
divMargin
divOutline
divOverflowX
divOverflowY
divWidth
domainConstraint
draw
id
leftPadSize
lowerPadSize
notchAngle
outerRadius
outerRadiusRatio
padSize
postRender
postResize
postZoom
resizable
rightPadSize
rowColors
rowCount
rowHeight
rowOpacity
selector
trackHeight
trackHeightRatio
updateDimensions
updateDomain
updateLayout
updateRowCount
upperPadSize
zoomConstraint
zoomable
RadialRectangleConfig
Properties
annotations
chart
fillColor
fillOpacity
height
row
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
width
x
y
RectangleConfig
Properties
annotations
chart
fillColor
fillOpacity
height
row
rx
ry
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
width
x
y
RenderParams
Properties
annotations
end
rowCount
start
SequenceAnnotation
Properties
end
id
sequence
start
SequenceConfig
Properties
annotations
chart
fillColor
fillOpacity
height
row
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
width
x
y
SimpleTextConfig
Properties
annotations
chart
dominantBaseline
fillColor
fillOpacity
fontFamily
fontSize
fontStyle
fontWeight
height
row
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
text
textAnchor
width
x
y
SliceConfig
Properties
annotations
end
start
TooltipConfig
Properties
annotations
backgroundColor
borderRadius
chart
fontFamily
fontSize
fontStyle
fontWeight
opacity
padding
selector
text
textColor
VerticalAxisConfig
Properties
annotations
axisType
chart
domain
dominantBaseline
fillColor
fillOpacity
fontFamily
fontSize
fontStyle
fontWeight
height
labelFillColor
labelFillOpacity
labelStrokeColor
labelStrokeOpacity
labelStrokeWidth
range
row
rowSpan
selector
strokeColor
strokeDashArray
strokeDashOffset
strokeLineCap
strokeLineJoin
strokeOpacity
strokeWidth
target
textAnchor
tickFillColor
tickFillOpacity
tickFormat
tickPadding
tickSizeInner
tickSizeOuter
tickStrokeColor
tickStrokeOpacity
tickStrokeWidth
ticks
width
x
y
VerticalLayout
Properties
row
rowCount
Functions
aggregateIntransitive
aggregateTransitive
arc
area
augment
barPlot
chevronLine
chevronRectangle
clickBehavior
dynamicText
exportPng
generateAnnotations
generateId
generatePlotAnnotations
generateSequenceAnnotations
getAlignmentAnnotations
getAllAnnotationIds
getAnnotationById
getAxis
greedyGraphLayout
heatmap
heuristicGraphLayout
horizontalAxis
hoverBehavior
intervalGraphLayout
line
linePlot
parseBedRecords
parseGff3Records
parseOrientation
queryGlyphMap
radialAxis
radialRectangle
rectangle
removeGlyphsByQuery
resolveGlyphProperty
sequence
setKeySeparator
simpleText
slicePlotAnnotations
sliceSequenceAnnotations
tooltip
unmapAnnotationById
verticalAxis
Type aliases
GlyphCallback
GlyphProperty
Enumerations
AxisType
Members
Bottom
Left
Right
Top
BindTarget
Members
Defs
Overflow
Viewport
FillDirection
Members
Down
Up
GenerationPattern
Members
Random
Sequential
Orientation
Members
Forward
Reverse
Unknown
Unoriented
SODA GitHub
SODA issues
SODA website
SODA
Api
Functions
unmapAnnotationById
unmapAnnotationById
function
unmapAnnotationById
(
id
:
string
)
:
void
Parameters
id: string
Returns
: void